Estilos
Tipografia
Open Sans single-family. Escala, pesos, italics e letter-spacing sobre Tailwind v4.
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.
Family
Open Sans (Google Fonts). Aliases font-heading + font-body apontam pra font-sans.
Escala
Tailwind v4 defaults em rem. text-base = 16px.
Pesos
Regular 400, Semibold 600, Bold 700 — todos com italic.
Font family
Sistema single-family. Aliases semânticos preservam porta aberta pra dual-font futuro (display + body) sem refactor de componentes.
AaBbCc 0123
Open Sans · Regular 400 / Semibold 600 / Bold 700 + italics
fonts.googleapis.com font-sans string Open Sans
resolve para
font-heading alias → font-sans Open Sans
resolve para
font-body alias → font-sans Open Sans
resolve para
Font size
Escala Tailwind v4 (rem). Cada row mostra sample real renderizado e o valor canônico.
text-xs 0.75rem · 12px · line-height 1rem
text-sm 0.875rem · 14px · line-height 1.25rem
text-base 1rem · 16px · line-height 1.5rem
text-lg 1.125rem · 18px · line-height 1.75rem
text-xl 1.25rem · 20px · line-height 1.75rem
text-2xl 1.5rem · 24px · line-height 2rem
text-3xl 1.875rem · 30px · line-height 2.25rem
text-4xl 2.25rem · 36px · line-height 2.5rem
text-5xl 3rem · 48px · line-height 1
text-6xl 3.75rem · 60px · line-height 1
text-7xl 4.5rem · 72px · line-height 1
text-8xl 6rem · 96px · line-height 1
text-9xl 8rem · 128px · line-height 1
Font weight
3 pesos: Regular 400, Semibold 600, Bold 700.
font-normal weight 400 · Regular
font-semibold weight 600 · Semibold
font-bold weight 700 · Bold
Font style
Italic em 3 pesos. italic-semibold + italic-bold são @utility custom — compõem italic + peso pra match dos nomes do DS.
italic italic + weight 400 · Italic
italic-semibold italic + weight 600 · Semibold Italic
italic-bold italic + weight 700 · Bold Italic
Letter-spacing
Em-based — escala junto com o tamanho da fonte.
tracking-tight -0.025em
tracking-normal 0em
tracking-wide 0.025em
Como usar
<h1 class="font-heading
text-4xl font-bold
tracking-tight">
Título principal
</h1><p class="font-body
text-sm md:text-base
text-muted-foreground">
Mobile menor manual
</p><em class="italic-semibold
text-base text-foreground">
Ênfase tipográfica
</em>