Prose
CSS scope for long-form MDX content
Preview
Heading level 2
How vexingly quick daft zebras jump. The five boxing wizards jump quickly at dawn. Amazingly few discotheques provide jukeboxes, and yet the line holds an 18px body without fatigue.
Quiere la boca exhausta vid, kiwi, piña y fugaz jamón.
El pingüino Wenceslao hizo kilómetros bajo exhaustiva lluvia y frío; añoraba a su querido cachorro.
Heading level 3
Jovencillo emponzoñado de whisky: ¡qué figurota exhibe! La cigüeña tocaba el saxofón detrás del palenque de paja.
The real CSS from prose.css (the canon), with no overrides: the sizes you see (h2 40px, body 18px, blockquote 28px Aleo italic) are the production ones. In real use the container centers at 90ch.
Elements
| Element | Family | Desktop | Mobile |
|---|---|---|---|
| h1 | Aleo | 64px / 500 | 36px |
| h2 | Aleo | 40px / 400 | 28px |
| h3 | Aleo | 32px / 400 | 24px |
| p | Georama | 18px / 400 | 17px |
| strong | Georama | 18px / 500 | 17px |
| blockquote | Aleo | 28px / 400 italic | 22px |
| table | Georama | 16px | 16px |
| figcaption | Georama | 14px | 14px |
Constraints
- No @tailwindcss/typography. All styles are custom.
- Bold = weight 500. Never 700.
- Max-width 90ch.
- Only two MDX components: Lead and Figure/Caption.
Decisions
| Decision | Why |
|---|---|
| 90ch max-width | 65ch was too narrow for an 18px body |
| Strong at weight 500 | Georama 700 is too heavy |
| Blockquote in Aleo italic | Sets it apart from the body by a change of typeface, not just a border |
| Fallback for an orphan figcaption | Prevents visual breakage if the figure wrapper is forgotten |