Tipografia
Open Sans como preferência tipográfica, com fallback de sistema e sem dependência remota no runtime.
Como usar
Use as classes utilitárias do Tailwind direto nos elementos. Para responsividade, aplique md:text-* ou lg:text-* quando o tamanho mobile diferir do desktop.
Família
Open Sans quando disponível localmente ou servida pelo consumidor. Aliases font-heading e font-body apontam para font-sans.
Escala
Padrão Tailwind v4 em rem. text-base = 16px.
Pesos
Regular 400, Semibold 600 e Bold 700 — todos com itálico.
Família tipográfica
Sistema de uma família. Aliases semânticos preservam uma futura combinação de display e corpo sem refatorar componentes.
AaBbCc 0123
Open Sans se disponível · fallback seguro do sistema
sem fonte remota font-sans string Open Sans / fallback do sistema
resolve para
font-heading alias → font-sans Open Sans / fallback do sistema
resolve para
font-body alias → font-sans Open Sans / fallback do sistema
resolve para
Tamanho de fonte
Escala Tailwind v4 em rem. Cada linha mostra uma amostra renderizada e o valor canônico.
text-xs 0.75rem · 12px · altura de linha 1rem
text-sm 0.875rem · 14px · altura de linha 1.25rem
text-base 1rem · 16px · altura de linha 1.5rem
text-lg 1.125rem · 18px · altura de linha 1.75rem
text-xl 1.25rem · 20px · altura de linha 1.75rem
text-2xl 1.5rem · 24px · altura de linha 2rem
text-3xl 1.875rem · 30px · altura de linha 2.25rem
text-4xl 2.25rem · 36px · altura de linha 2.5rem
text-5xl 3rem · 48px · altura de linha 1
text-6xl 3.75rem · 60px · altura de linha 1
text-7xl 4.5rem · 72px · altura de linha 1
text-8xl 6rem · 96px · altura de linha 1
text-9xl 8rem · 128px · altura de linha 1
Tipografia fluida
Use clamp() via valores arbitrários do Tailwind quando um título display precisa escalar com o viewport. Para texto de corpo e componentes reutilizáveis, prefira a escala Tailwind fixa em rem.
Use em títulos display
Aplique quando o título precisa responder ao viewport, como heróis, cabeçalhos editoriais e páginas de documentação.
Mantenha limites em rem
Defina mínimo e máximo em rem para preservar zoom, preferências do usuário e escala tipográfica previsível.
Evite em UI compacta
Botões, inputs, badges, tabelas, navegação e cards repetidos devem continuar na escala Tailwind fixa.
Fundamentos
Título de página
text-[clamp(2.5rem,5vw,4rem)] leading-[1.05] tracking-tight Sinapse
Hero editorial
text-[clamp(3rem,7vw,5rem)] leading-none tracking-tight Princípios para interfaces claras e acessíveis.
Subtítulo amplo
text-[clamp(1.125rem,2vw,1.5rem)] leading-relaxed Regra de acessibilidade
Não use clamp() para impedir quebra de linha, zoom ou aumento de texto. Se o texto precisa permanecer legível em UI operacional, use classes como text-sm, text-base e breakpoints explícitos como md:text-lg.
Peso de fonte
3 pesos: Regular 400, Semibold 600, Bold 700.
font-normal peso 400 · Regular
font-semibold peso 600 · Semibold
font-bold peso 700 · Bold
Estilo de fonte
Itálico em 3 pesos. italic-semibold e italic-bold são @utility customizadas que compõem italic + peso.
italic itálico + peso 400 · Itálico
italic-semibold itálico + peso 600 · Semibold itálico
italic-bold itálico + peso 700 · Bold itálico
Espaçamento entre letras
Baseado em em, portanto escala junto com o tamanho da fonte.
tracking-tight -0.025em
tracking-normal 0em
tracking-wide 0.025em
Exemplos de uso
Título
<h1 class="font-heading
text-4xl font-bold
tracking-tight">
Título principal
</h1>Body responsivo
<p class="font-body
text-sm md:text-base
text-muted-foreground">
Mobile menor manual
</p>Italic semibold
<em class="italic-semibold
text-base text-foreground">
Ênfase tipográfica
</em>