Typography
Font families, a size scale with paired line-heights, weights, leading and tracking - all Tailwind v4 primitives.
Typography is where visual hierarchy begins. Gremorie uses the native Tailwind v4 scale, which is modular, perceptually spaced, and production tested, and adds line-height pairs so you do not have to think about line height in 90% of cases.
How the scale works
Thirteen stops (xs to 9xl) cover everything from microcopy
(12px) to extreme display (128px). The scale is not purely
geometric: the jumps are larger at the top (display) and smaller
at the base (UI). That mirrors reality: you rarely need "slightly
bigger than 96px", but you constantly need "14px or 16px,
depending".
Each --text-* ships with a paired --text-*--line-height,
calculated to give a comfortable height for that size. Use
text-base and you get a 1.5 line-height automatically. Use
text-4xl and you get 1.111, tighter, the way a heading wants it.
Families
Gremorie inherits the Tailwind v4 system stack: no downloaded
fonts, maximum performance. If you want to switch to Inter, Geist
or anything else, redefine --font-sans in the theme file.
| Token | Classe | Descrição |
|---|---|---|
| --font-sans | font-sans | Sistema operacional do usuário — sem download, máxima performance. ui-sans-serif, system-ui, sans-serif e fallbacks de emoji. |
| --font-serif | font-serif | Pilha serif do sistema — Georgia, Cambria, Times. Para conteúdo editorial e displays com tom literário. |
| --font-mono | font-mono | Pilha monoespaçada — SFMono, Menlo, Monaco, Consolas. Para código, tokens, valores numéricos alinhados. |
Sizes
The Sample column shows the characters "Aa" at the actual
size. The Line-height next to it is the paired default; you
can override it with leading-* when needed.
| Amostra | Token | Classe | Tamanho | Line-height | Uso |
|---|---|---|---|---|---|
| Aa | --text-xs | text-xs | 0.75rem / 12px | 1.333 (16px) | Captions, labels secundários, microcópia |
| Aa | --text-sm | text-sm | 0.875rem / 14px | 1.429 (20px) | Texto compacto em UI densa, tabelas |
| Aa | --text-base | text-base | 1rem / 16px | 1.5 (24px) | Body padrão. Default do sistema. |
| Aa | --text-lg | text-lg | 1.125rem / 18px | 1.556 (28px) | Body em conteúdo editorial, leitura longa |
| Aa | --text-xl | text-xl | 1.25rem / 20px | 1.4 (28px) | Subtítulos, lead paragraphs |
| Aa | --text-2xl | text-2xl | 1.5rem / 24px | 1.333 (32px) | H3 / títulos de cards |
| Aa | --text-3xl | text-3xl | 1.875rem / 30px | 1.2 (36px) | H2 / títulos de seção |
| Aa | --text-4xl | text-4xl | 2.25rem / 36px | 1.111 (40px) | H1 em apps; H2 em landing pages |
| Aa | --text-5xl | text-5xl | 3rem / 48px | 1 | Hero pequeno, números grandes em KPIs |
| Aa | --text-6xl | text-6xl | 3.75rem / 60px | 1 | Hero médio em landing pages |
| Aa | --text-7xl | text-7xl | 4.5rem / 72px | 1 | Hero grande, displays editoriais |
| Aa | --text-8xl | text-8xl | 6rem / 96px | 1 | Display gigante, manchete de portfolio |
| Aa | --text-9xl | text-9xl | 8rem / 128px | 1 | Display extremo. Use com parcimônia. |
Weights
Nine stops, from 100 (thin) to 900 (black). System fonts
usually only ship 400, 500, 600 and 700; the other stops
depend on a custom font being loaded.
| Amostra | Token | Classe | Valor | Uso |
|---|---|---|---|---|
| Texto | --font-weight-thin | font-thin | 100 | Display somente — ilegível em corpo |
| Texto | --font-weight-extralight | font-extralight | 200 | Display refinado em telas grandes |
| Texto | --font-weight-light | font-light | 300 | Editorial, textos longos com pegada elegante |
| Texto | --font-weight-normal | font-normal | 400 | Body padrão |
| Texto | --font-weight-medium | font-medium | 500 | Botões, navs — peso intermediário |
| Texto | --font-weight-semibold | font-semibold | 600 | Headings de UI, labels enfáticos |
| Texto | --font-weight-bold | font-bold | 700 | Headings principais, ênfase forte |
| Texto | --font-weight-extrabold | font-extrabold | 800 | Display, branding |
| Texto | --font-weight-black | font-black | 900 | Display extremo. Pode sobrecarregar a página. |
Leading
When the paired line-height does not fit (multi-line heading compositions, long editorial reading), use the standalone tokens:
| Token | Classe | Valor | Uso |
|---|---|---|---|
| --leading-tight | leading-tight | 1.25 | Headings grandes — fecha o espaço entre linhas |
| --leading-snug | leading-snug | 1.375 | Subtítulos e UI compacta |
| --leading-normal | leading-normal | 1.5 | Body padrão |
| --leading-relaxed | leading-relaxed | 1.625 | Editorial, leitura longa, posts de blog |
| --leading-loose | leading-loose | 2 | Citações, poesia, espaçamento dramático |
Tracking
Letter-spacing used deliberately is a sign of typographic care. Use negative tracking to tighten large display text and positive tracking to open up caps and eyebrows.
| Token | Classe | Valor | Uso |
|---|---|---|---|
| --tracking-tighter | tracking-tighter | -0.05em | Display gigante — corrige spacing exagerado |
| --tracking-tight | tracking-tight | -0.025em | Headings grandes |
| --tracking-normal | tracking-normal | 0em | Body padrão |
| --tracking-wide | tracking-wide | 0.025em | Caps, eyebrows, microcópia |
| --tracking-wider | tracking-wider | 0.05em | All-caps em UI compacta |
| --tracking-widest | tracking-widest | 0.1em | Eyebrows dramáticos, branding |
Best practices
- Pair size with weight. Display uses a lighter weight (light or normal) because the size already draws attention. Body uses an intermediate weight (normal or medium) because heavier weights tire the eye at scale.
- Use the paired line-height whenever possible. It was calculated for that specific size.
- Negative tracking above
--text-2xlcorrects the exaggerated spacing most fonts show at display sizes. - Be careful with
text-9xl. Beautiful on a portfolio page, brutal in any product interface. Reserve it for hero pages and brand displays. - Do not invent weights. If the font lacks
font-extralight, the browser silently rendersfont-light. Audit the synthetic weight that shows up withfont-synthesis.