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.

Good design holds up to a long look

The same copy in a serif feels elegant and formal, like an editor's pick in a magazine.

Serif · Georgia / Songti

Good design holds up to a long look

The same copy in a sans feels modern and clean, like the interface of a productivity tool.

Sans · System default

Quick checkChoose the best answer

A bilingual editorial site wants serif headings and sans-serif body text. English samples work, but Chinese falls back to browser defaults. What comes next?

Choose whichever serif or sans font feels best for each heading at the same levelChoose bilingual fonts and fallbacks, then test them with real copySpecify only the English font and let each browser choose its own Chinese fallback

You can say this to an AI Agent

Create bilingual font rules: use a serif with Chinese coverage or an explicit fallback for headings and a readable sans-serif for body text. Keep peer roles consistent and test real Chinese, English, numerals, bold text, and load failure.

When to use it

Set a clear tone for headings
The character of designA serif display headline creates an editorial feel.
Choose a comfortable body typeface
Evergreen Private BankFinance and law firms: serif = trustworthy
Pair two families with distinct roles
Project nameOwnerUse sans-serif in interfaces: clean, efficient, and easy to scan.
Test Chinese and Latin text together when both appear
“Good design is as little design as possible.”Quotes can use a contrasting typeface, but it still needs to suit the language and context.

When NOT to use it

Choose a font only because of a style label
This is a long body paragraph set in a small serif. At this screen size and weight, the letter details are not clear enough.
Mix several families without clear roles
Server monitoring dashboard
Normal3 alerts
Forcing an elegant tone onto an engineering tool creates a mismatch.
Use a display face for long body text
Vibe Design GuideWith only Georgia specified, Chinese falls back to the browser’s default serif.
Assume one family renders every language equally well
This month’s goalsData dashboardTeam membersMixing two typefaces at the same heading level splits the visual tone.

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

Norr Home Shop　Stories　About

Bring Nordic light
into your living room

The 2026 Spring/Summer collection is live — solid wood, handmade.

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?

Want GPT or Codex?VibeHubGPT support

GPT-6 Astra

Build in 3D. Put your computer to work.