正在进入 VibeHub 实训中心…/ 正在加载 AI 实战词典、互动闯关与三分钟配方
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.
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 headingsThe character of designA serif display headline creates an editorial feel.
- Choose a comfortable body typefaceEvergreen Private BankFinance and law firms: serif = trustworthy
- Pair two families with distinct rolesProject 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 labelThis 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 rolesServer monitoring dashboardNormal3 alertsForcing an elegant tone onto an engineering tool creates a mismatch.
- Use a display face for long body textVibe Design GuideWith only Georgia specified, Chinese falls back to the browser’s default serif.
- Assume one family renders every language equally wellThis 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
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?
Recommended tool
Web fine-tuning tool · Selector Pro
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗Further reading
Quick check
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?
ANS Original Methods