Main font
Headlines
Primary headline
Used for all hero messaging, key statements, and high-attention moments. Always in sentence case or uppercase. Tight tracking, no softness. It sets the tone before words even land.
Size:
72px
Tracking:
-0.01em
Line-height:
Desktop/Laptop
120%
Tablet/Mobile
110%
DM Serif Display
Sub heads
Used to introduce sections and clarify the thought under a headline. Sentence case only—no all caps. Maintain hierarchy with smaller size and lighter emphasis than the primary headline.
Size:
36px
Tracking:
-0.005em - 0em
Line-height:
Desktop/Laptop
130%-140%
Tablet/Mobile
125%-135%
DM Serif Display
Body
Used across paragraphs, explanations, and descriptive content. Professional but with character. Set at 18px with 160% line-height by default for clean rhythm and readability.
Size:
18px
Tracking:
0em
Line-height:
Desktop/Laptop
160%
Tablet/Mobile
140%
Inter Display
*Tracking = Letter-spacing
Universal spacing that scales
Line & Letter Spacing
Line-height in %
Line-height is the vertical gap between lines. Line-height in '%' sets the space between lines relative to the font size.
100% = line height equals the text size.
120% = 1.2× the text size.
160% = 1.6× the text size.
Why it’s better than px: If you change the text size later, the spacing auto-scales. You don’t have to recalculate anything.
Tracking in em
Tracking is the space between letters, letter-spacing. An 'em' is based on the current font size.
0em= no extra space added.+0.01em= add ~1% of the font size between each letter.-0.01em= tighten by ~1% of the font size.
Why em is good: if the text size changes, the spacing scales automatically (no recalculating pixels).
If % and em both auto-scale based on font size, why not just use one of them?
Compatibility: Many tools expose line-height as %/multiple (Figma, Google Docs/Slides, most email editors). Very few let you enter
emfor line-height. Tracking, on the other hand, is widely supported asem(or “letter-spacing” length).Behavior: On the web, a unitless/percent line-height keeps the ratio consistent if child text changes size. A length (like
emorpx) can “freeze” the exact pixel height and inherit poorly, so small text may look cramped. Using % avoids that trap.
How to structure text.
Hierarchy & Usage
The font’s spacing is key to maintaining clarity and consistency. Adjust tracking and kerning subtly to ensure balanced, readable text.
Use consistent line-height to maintain hierarchy and visual flow across all applications. Proper spacing ensures the brand always looks sharp and professional.
Tracking & leading is perfect
Tracking
0.02 em
Line
0.9 em
Tracking & leading is too tight
Tracking
-0.02 em
Line
0.7 em
Tracking & leading is too loose
Tracking
0.08 em
Line
1.1 em
Fonts in action
Composed Text Sample
Every line is built for readability and trust—steady spacing, honest contrast, no decoration for its own sake. Keep the pairing consistent from page to page and the tone stays unmistakably yours.
– Headlines carry the point.
– Body carries the proof.
– Nothing gets in the way.
Use these roles across pages and the message does the talking.
Typography is the tone you feel before you read. This pairing sets volume, spacing, and pace so the words carry authority without strain.