Serif & Sans
You might say
Use a serif font with a little character for the headings, then keep the body text clean and simple.
Choose letterforms that match the content and reading taskSerif typefaces have finishing strokes; sans-serif typefaces do not. Neither is automatically more readable or modern. Choose from the product's tone, text length, language support, and screen sizes, then test real headings and paragraphs.
When to use it
- Set a clear tone for headings
- Choose a comfortable body typeface
- Pair two families with distinct roles
- Test Chinese and Latin text together when both appear
When NOT to use it
- Choose a font only because of a style label
- Mix several families without clear roles
- Use a display face for long body text
- Assume one family renders every language equally well
Anatomy
AgSerif font: thin horizontally and thick vertically, with small feet at the endAg
The small finishing strokes at the ends of letters — where the elegance comes from
Serif type pairs thin horizontals with thick verticals, echoing handwriting
No decoration, even strokes — clean and modern
Variants
Serif Display
Our Story
Brand and content pages that want an elegant, editorial feel
Sans Body
Body copy set in the system font: clean, efficient, quick to read.
UI body copy — modern, clean, and efficient
Serif Quote
“Character hides in the details.”
A sparing accent for quotes and mottos
Typical use cases
Editorial article
Product interface
The corner bakery with a ten-year line
Food Weekly · Maya Lin · 12 min ago
Editor's Picks
The City Archive at 4 A.M.
The Golden Two Minutes of Pour-Over
Brand homepage
Project Settings
Project Name
Owner
Bilingual content
Tool builders often forget: users don't want a feature list — they want the certainty of getting things done.
“Good design is as little design as possible.”
—— Dieter Rams
So before adding a button, ask first: what if it weren't there?
Further reading