Cassiopeia Themer — typography examples
Your saved fonts, live in a real article. Headings are set in your headings font and colour, body copy in your body font, and the whole page uses the Default reading rhythm. Regenerate this from Identity → Create typography examples article after changing your fonts.
Reading rhythm: Default — Bootstrap heading spacing and line-height.
Your fonts
jumps over the lazy dog.
jumps over the lazy dog.
The type scale
h1
Heading level one
h2
Heading level two
h3
Heading level three
h4
Heading level four
h5
Heading level five
h6
Heading level six
Body copy
This paragraph is your lead — a slightly larger opening line, still in your body font, that sets the tone before the article proper begins.
Body text runs in system-ui. Everything you see here is your saved theme rendering the real Cassiopeia article chrome — not a mock-up. Notice the link colour tracks your primary brand colour, emphasis and strong weights sit comfortably in the copy, and inline code and Ctrl pick up their own surfaces. Numerals and punctuation: 0123456789 & ($1,234.56) — “quotes” • ½ ¾.
Good body typography is about rhythm — the line-height, the measure and the space between blocks. Read a full paragraph aloud in your head: it should feel even, unhurried and easy to track from line to line. If a heading crowds the paragraph above it, or the lines feel cramped, adjust the reading rhythm on the Identity screen and regenerate this article.
Typography is what language looks like. Your fonts carry your brand as much as your colours do.
Unordered
- Primary drives buttons, links and the banner.
- Headings render in your headings font.
- Body copy renders in your body font.
Ordered
- Pick a heading and a body font.
- Save the Identity screen.
- Regenerate this article to confirm.
At a glance
| Element | Font | Driven by |
|---|---|---|
| Headings h1–h6 | system-ui | --cassiopeia-font-family-headings |
| Body & paragraphs | system-ui | --cassiopeia-font-family-body |