Pair Geist Serif with Geist Sans when you want an expressive headline and a quiet reading voice. Start with the serif at 64px and the sans at 18px; on a narrow screen, try 40px and 17px. The three original specimens above show how changing hierarchy and spacing changes the result while keeping the same fonts.
Choose the layout before adding another font
| Project | Headline | Body | Starting width |
|---|---|---|---|
| Editorial introduction | Serif 64px / 1.05 | Sans 18px / 1.65 | 58 characters |
| Product announcement | Serif 56px / 1.08 | Sans 18px / 1.6 | 48 characters |
| Studio project page | Serif 72px / 1.02 | Sans 17px / 1.7 | 56 characters |
These are design recipes, not measurements of reading performance. All three use the same family pairing so you can compare the layout rather than three unrelated font choices. Replace the sample copy with your longest real headline before choosing.
1. Editorial: give the headline room
Use the first specimen for a newsletter introduction or journal landing page. The large serif establishes the subject; Sans carries the summary and reading text. Keep the headline short enough to fit into a few lines without shrinking the whole composition.
At 390px, start at 40px with generous side padding. If the title wraps awkwardly, edit the words or reduce the headline slightly. Do not force a desktop line break into every phone width. Keep paragraphs left aligned, and test a full paragraph rather than judging the pairing from a two-word title.
2. Product announcement: separate expression from controls
The second specimen places a serif statement beside a plain supporting explanation and a Sans button. Use Sans for navigation, forms, prices and small labels. A decorative headline should not make a visitor work harder to identify the next action.
Use one short call to action. Check that the button still fits when its label becomes longer or is translated. Avoid using a synthetic bold serif to create emphasis: increase size, change spacing or use a Sans label instead.
3. Studio project: use scale, not extra decoration
The third specimen lets the project title lead, with restrained metadata and a longer Sans description. Start at 72px on desktop and 44px on mobile. Keep the project number and category in Sans so they remain easy to scan.
If every section gets an oversized serif heading, the page loses its rhythm. Reserve this treatment for the project title, then use smaller Sans subheadings for process details and specifications. The numbers are starting points; dense copy needs a different balance.
What the current font actually supports
Vercel's 30 October 2026 announcement positions Geist Serif as a display face. The first release has one Regular weight and four dot-shape variants. A prototype was shown on 1 April 2026. Additional weights, italics and a text face are future work, not features these examples rely on.
The official repository provides the fonts under OFL 1.1 and says Serif is not on Google Fonts yet. These specimens use local official font files, not a Google Fonts request or a fallback disguised as Geist Serif. Keep the accompanying license when redistributing the files.
Use the CSS with your own files
Download the official fonts, retain their license, then adapt the local paths in each recipe. The preview uses the supplied Regular serif without synthetic bold or italic. Geist Sans handles reading text. A fallback remains useful while fonts load, but inspect the loaded font before approving a design.
For Chinese or mixed-script work, this Latin specimen is not evidence of Chinese glyph coverage. Select a Chinese-capable companion and test the real Chinese text separately.
A five-minute pairing check
- Replace the sample with your actual title, longest button and a full paragraph.
- Compare desktop with a 390px viewport. Check wrapping and horizontal overflow.
- Confirm both fonts load in the browser network panel; do not approve a fallback preview.
- Read the smallest labels at normal zoom. Keep the display serif out of dense small text.
- Save the CSS only after the mobile title and paragraph both feel comfortable.
Continue with font pairing rules or compare the Instrument Serif pairing guide.