Typography
The three type families, the sixteen-step scale, and the rules for using them.
Type families
Three licensed families are available in the Clinia design:
font-display
NaN Serf B
Headlines, display text
font-sans
CircularXX
UI, body text
font-mono
CircularXX Mono
Code, tokens
-
Display (
font-display, NaN Serf B) - Used by default for headlines, hero copy, and every step in the Display and Title scale. -
Sans (
font-sans, CircularXX) - The default for the rest of the text sections, including body copy, labels, buttons, form fields, navigation. -
Mono (
font-mono, CircularXX Mono) - The default for eyebrow labels and code.ex: Eyebrow label
Scale
Sixteen font sizes covering hero text, down to a 10px eyebrow. Each group (Display, Title, Body and Eyebrow) has its own job and family, so sizes overlap between groups.
Display · Marketing heroes and campaign headlines.
Display XL
6rem
Aa
font-display text-display-xl
Display L
5.5rem
Aa
font-display text-display-l
Display M
4.5rem
Aa
font-display text-display-m
Display S
3.5rem
Aa
font-display text-display-s
Title · Headings, H1 to H4: page, section, subsection, card.
Title XL
5rem
Aa
font-display text-title-xl
Title L
4rem
Aa
font-display text-title-l
Title M
2.5rem
Type scale
font-display text-title-m
Title S
2rem
Type scale
font-display text-title-s
Title XS
1.5rem
Type scale
font-display text-title-xs
Body · Running text and UI: paragraphs, labels, buttons, fields.
Body XL
2rem
The quick brown fox
font-sans text-body-xl
Body L
1.5rem
The quick brown fox
font-sans text-body-l
Body M
1rem
The quick brown fox jumps over the lazy dog
font-sans text-body-m
Body S
0.875rem
The quick brown fox jumps over the lazy dog
font-sans text-body-s
Body XS
0.75rem
The quick brown fox jumps over the lazy dog
font-sans text-body-xs
Eyebrow · Section labels above a heading.
Eyebrow L
1rem
Section label
font-mono uppercase tracking-widest text-eyebrow-l
Eyebrow S
0.625rem
Small label
font-mono uppercase tracking-widest text-eyebrow-s
Sizes off the scale
An app moving to Clinia UI maps each size it uses to a step, as in the table. Sizes under 16px move up a pixel or two, which makes those screens less dense. Sizes from 17 to 19px move down to body-m (16px), and headings from 20 to 28px land on title-xs (24px) from either side. Compare each screen before and after.
| Size in the app | Step |
|---|---|
| 9 to 10px | eyebrow-s for an eyebrow label (mono, uppercase), otherwise body-xs |
| 11 to 12px | body-xs |
| 13 to 14px | body-s |
| 15 to 19px | body-m |
| 20 to 28px, headings | title-xs |
| Larger headings | The nearest Title step |
Tailwind's text-xs, text-sm and text-base are allowed. They're the same sizes as body-xs, body-s and body-m, and the components use them. They also set Tailwind's line height, which the scale steps leave to the surrounding text.
Headings
Showcases how headings (H1 to H6) map onto the allowed size scale. H1 to H4 use NaN Serf B, H5 and H6 use CircularXX Medium.
H1
4rem
Close the loop
font-display text-title-l tracking-tight
H2
2.5rem
Close the loop
font-display text-title-m tracking-tight
H3
2rem
Close the loop
font-display text-title-s tracking-tight
H4
1.5rem
Close the loop
font-display text-title-xs
H5
1rem
Close the loop
font-sans text-body-m font-medium
H6
0.875rem
Close the loop
font-sans text-body-s font-medium
Weights
Five weights across the three families, to keep the range tight: CircularXX has three, CircularXX Mono and NaN Serf B have one each.
CircularXX
Book 400
Close the loop
font-sans font-normal
CircularXX
Regular 450
Close the loop
font-sans font-[450]
CircularXX
Medium 500
Close the loop
font-sans font-medium
CircularXX Mono
Regular 400
Close the loop
font-mono font-normal
NaN Serf B
Book 400
Close the loop
font-display font-normal
Italic
Only CircularXX has italics, in Book 400 and Medium 500. NaN Serf B and CircularXX Mono have none, so italic on them does not render.
CircularXX
Book Italic 400
Close the loop
font-sans font-normal italic
CircularXX
Medium Italic 500
Close the loop
font-sans font-medium italic
Headlines carry no emphasis on a single word. NaN Serf B has one weight and no italic, so an <em> or a <strong> in a display line renders like the rest of it, with no warning. Write the line so it doesn't need one, and drop the tag.
Links
Links keep the text colour, in Medium, and carry a thin accent underline (Trust, ) set a little below the text. Trust sits on the underline only. A hovered link dims slightly, and a focused one shows the focus ring.
- Keep the underline at the font's own thickness. A thicker or text-coloured underline makes a paragraph of links read as bold.
- Never set link text in Trust: at body size it measures 4.06:1 on white, under AA.
- A heading's anchor link stays plain: the heading is already the link.
Body M
16px · Medium 500
Every answer carries its sources, so a clinician can open the record behind it before acting.
font-medium text-foreground underline decoration-accent underline-offset-4
Body S
14px · Medium 500
Every answer carries its sources, so a clinician can open the record behind it before acting.
font-medium text-foreground underline decoration-accent underline-offset-4
For the container widths and rhythm that type sits inside, see Containers. For type space and case per surface, see App getting started and Marketing getting started.