FerramentasDev.

Escala tipográfica

Gere tamanhos de fonte harmônicos, fixos ou fluidos com clamp().

  • 5xl

    61px

    O rápido canivete suíço

  • 4xl

    48.8px

    O rápido canivete suíço

  • 3xl

    39.1px

    O rápido canivete suíço

  • 2xl

    31.3px

    O rápido canivete suíço

  • xl

    25px

    O rápido canivete suíço

  • lg

    20px

    O rápido canivete suíço

  • base

    16px

    O rápido canivete suíço

  • sm

    12.8px

    O rápido canivete suíço

  • xs

    10.2px

    O rápido canivete suíço

Variáveis CSS
:root {
  --text-xs: 0.64rem;
  --text-sm: 0.8rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.563rem;
  --text-2xl: 1.953rem;
  --text-3xl: 2.441rem;
  --text-4xl: 3.052rem;
  --text-5xl: 3.815rem;
}
Tailwind
// tailwind.config.js → theme.extend.fontSize
fontSize: {
  "xs": "0.64rem",
  "sm": "0.8rem",
  "base": "1rem",
  "lg": "1.25rem",
  "xl": "1.563rem",
  "2xl": "1.953rem",
  "3xl": "2.441rem",
  "4xl": "3.052rem",
  "5xl": "3.815rem",
},

Como usar

  1. Escolha o tamanho do texto normal (16px é o padrão dos navegadores).
  2. Escolha a proporção: os nomes vêm dos intervalos musicais, como na escala de Tim Brown.
  3. Se quiser, ative a versão fluida e defina os tamanhos para celular.
  4. Copie as variáveis CSS ou a configuração do Tailwind.

Os nomes dos tamanhos (xs, sm, base, lg, xl...) seguem o padrão do Tailwind para facilitar a troca no seu projeto.

Perguntas frequentes

O que é uma escala tipográfica?

É um conjunto de tamanhos de fonte em que cada um é o anterior multiplicado pela mesma proporção. Isso cria uma hierarquia visual harmônica entre títulos, subtítulos e texto, em vez de tamanhos escolhidos no olho.

Qual proporção escolher?

Proporções menores (1,125 a 1,25) funcionam bem em interfaces densas, dashboards e apps. Proporções maiores (1,333 a 1,618) criam mais contraste e combinam com sites editoriais, blogs e landing pages.

O que é tipografia fluida?

Com clamp(), o tamanho da fonte cresce suavemente conforme a largura da tela, entre um mínimo (celular) e um máximo (desktop), sem precisar de media queries. Os títulos ficam menores no celular e maiores no computador.