Serif Website Design Examples

143 real sites · 3,630 sections

There are 143 serif website designs here — live sites that set headlines in a serif typeface, including Railway, Resend, Zed, Craft and Oura — cut into 3,630 sections. 90% use a light theme and 10% a dark one; the most common headline fonts are Tiempos Headline (7), Playfair Display (7) and Canela (6). 78 of 143 open with a hero, 20 show pricing on the homepage and 30 carry testimonials.

At a glance

Sites: 143
Sections captured: 3,630
Light / dark: 90% light · 10% dark
Top heading fonts: Tiempos Headline (7), Playfair Display (7) and Canela (6)
Accent colours: neutral 60blue 42red 16
Most common sections: features (125), hero (78), statement (75) and call to action (53)
Top industries: Lifestyle (16), Shopping (15) and Fashion & Beauty (15)
Award winners: 19 of 143

What makes a good serif website design

Serif headlines signal editorial, heritage or craft: they slow the reader down and add warmth, often paired with a clean sans for interface text.

What these 143 serif websites have in common

Measured from the captures, not opinion — use it to plan a serif website against what already works.

Sections they use

125 include features, 78 include hero, 75 include statement and 53 include call to action. 36 answer objections with an FAQ and 53 (37%) close with a dedicated call to action. Read top to bottom, the most common running order is hero → features → footer → call to action → statement. Compare them side by side: features section examples, hero section examples, statement section examples.

Type and colour

Light layouts lead (90% vs 10% dark). Headlines are most often set in Tiempos Headline (7), Playfair Display (7) and Canela (6). The most common accent hues are neutral (60), blue (42) and red (16). Every example lists its exact fonts and hex palette on its page.

Page length

The average homepage here is about 7,051px tall at desktop width — roughly 8 screens of scrolling, with Railway the longest at 11,000px. Open any site to scroll the full-page capture and see where each section falls.

143 serif website designs worth studying

Zed — “Zed is a high-performance, multiplayer code editor from the creators of Atom and Tree-sitter.” 56 sections, headlines in Plex Serif, light theme, palette #0000107 and #010000; the homepage runs hero → testimonials → features → stats.
Craft — “A free notes and productivity app that follows you across all your devices. Premium features available.” 17 sections, headlines in Untitled Serif Font, light theme, palette #030302 and #fcf9f7.
Linktree — “Join 70M+ creators and sell, share & curate everything you do online. One bio link—your Linktree—brings it all together for your audience.” 23 sections, light theme, palette #000000 and #efefef; the homepage runs features → about → features.
ReadMe — “ReadMe helps you create beautiful, interactive API documentation that developers love.” 37 sections, headlines in STKBureau Serif, light theme, palette #030101 and #030000.
Plum Guide — “Plum Guide handpicks the world's best vacation rentals, holiday homes, short term lets and Airbnbs from over 25 different sites” 52 sections, headlines in Domaine Display Narrow, light theme, palette #1d1d1d and #000000; the homepage runs hero → statement → showcase → testimonials.
Mutiny — “Be the one buyers remember. Join the frontier of how the best enterprise sales teams operate.” 37 sections, headlines in Reckless Condensed S TRIAL, light theme, palette #ffffff and #000000; the homepage runs hero → logo cloud → features → call to action.

How to use these references for a serif website

Pair one serif display face with a neutral sans for body and UI, set headlines large with tight leading, and keep the rest of the layout quiet. Start with Railway, Resend and Zed, open each site at full size and compare their features and hero sections; every reference carries its palette, fonts and a build prompt you can paste into your editor.