Editorial Website Examples: Fonts, Colors, and Spacing

Contents

• [Start with a clear editorial brief](#start-with-a-clear-editorial-brief)
• [Compare the type system](#compare-the-type-system)
• [Build a restrained color and spacing plan](#build-a-restrained-color-and-spacing-plan)
• [Turn references into a design decision](#turn-references-into-a-design-decision)
• [Use this in your AI agent](#use-this-in-your-ai-agent)

The fastest way to choose an editorial website direction is to compare three things in order: headline typography, reading width, and the spacing rhythm between sections. Start with references that show the balance you want, then record visible choices instead of copying a page wholesale.

Start with a clear editorial brief

Write a short brief before collecting examples:

• Subject: magazine, culture, publishing, portfolio, research, or brand story
• Mood: quiet, literary, energetic, premium, experimental, or documentary
• Reading behavior: long articles, short features, browsing, or image-led scanning
• Content mix: headlines, decks, body copy, captions, pull quotes, cards, and metadata
• Constraints: mobile reading, multilingual text, accessibility, or a limited font budget

This prevents an attractive reference from sending the project in the wrong direction. An editorial site for long essays needs different type sizes and spacing from an image-heavy art direction site.

Open the references below and compare the first visible section before borrowing a pattern. Use each as a prompt for investigation: ask what the layout, type, color, and spacing are doing for the content rather than assuming that a reference's styling should be reproduced.

The font evidence above is specifically labeled as captured on linear.app. Use it as typography evidence for that reference, not as proof that either editorial example uses the same families. Verify type details on the relevant captured page before treating them as a design decision.

Compare the type system

Look for a complete hierarchy rather than one attractive headline font. Record:

1. Display face: What makes the main headline distinctive? Is it serif, sans, condensed, italic, or highly contrasted?
2. Body face: Can paragraphs stay comfortable at the intended reading width?
3. Supporting face: Does metadata use the body face, a mono face, or a separate sans?
4. Scale: How much larger is the headline than the deck and body copy?
5. Measure: How many characters fit on a body line before reading becomes tiring?
6. Spacing: How much room separates a headline from its deck, and a paragraph from the next heading?

The captured Linear reference shows that one product can combine roles: Inter Variable for the primary sans, Berkeley Mono as support, and Tiempos Headline as an occasional editorial display face. That is a pattern to evaluate, not a prescription. Test whether a display face improves the story or merely adds decoration.

Build a restrained color and spacing plan

Choose roles before choosing many hex values:

• Page background: paper, warm white, tinted neutral, or dark field
• Main text: the strongest readable contrast
• Secondary text: metadata, captions, and supporting labels
• Accent: links, rules, tags, or interactive states
• Image treatment: natural, muted, high contrast, or color-blocked

Then define a spacing rhythm, such as 8, 16, 24, 40, 64, and 96 pixels. Use smaller steps inside components and larger steps between editorial sections. If every gap is different, the page feels improvised even when the colors and fonts are good.

Check the same choices at desktop and mobile widths. A headline that feels elegant on a wide canvas may wrap into too many lines on a phone. A subtle gray used for captions may disappear against a tinted background. Adjust the system, not each page by hand.

Turn references into a design decision

Make a comparison table with these columns: reference, headline style, body style, reading width, dominant colors, section spacing, image behavior, and one idea worth testing. Score each reference from 1 to 5 for readability, personality, and fit for your content.

Choose one reference for structure, one for typography, and one for atmosphere only when the evidence supports those roles. This creates a direction with reasons behind it. Before implementation, produce a small test page containing one headline, one deck, three paragraphs, a caption, a link, and a card. If the system works there, expand it to the full site.

Treat observed details as evidence for your design process, not as an official internal design system. Keep a record of what was observed and what you changed for your own content. That makes later revisions easier and reduces the risk of copying a surface treatment that does not fit your material.

Use this in your AI agent

> Find real editorial website references with distinctive headline typography, readable body text, restrained colors, and a clear spacing rhythm. Compare the references by type roles, reading width, color roles, section spacing, image treatment, and mobile behavior. Use the captured evidence only where it is labeled for that reference. Recommend one structure, one type direction, and one color-and-spacing system for my content. Separate observed details from recommendations, and include a small test-page checklist. > > Install Fudge for your AI agent to investigate the references and compare the details directly.

Choose based on the content's reading job, not on which style looks more fashionable. A serif direction can work well when the page depends on essays, criticism, cultural writing, or a sense of printed history. A modern sans direction often works better for fast browsing, product-adjacent editorial content, listings, and pages with many labels or interactive controls.

Test both with identical content: a two-line headline, a 20-word deck, three paragraphs, a caption, and a link. Compare the headline shape, body text at mobile width, distinction between metadata and prose, and the vertical space needed. Keep the direction that makes the content easiest to scan while still expressing the intended mood.

You can combine roles carefully. Use a distinctive display face for headlines, a highly readable face for body copy, and a restrained supporting style for labels. Limit the number of families and let size, weight, case, and spacing create most of the hierarchy.

Give the agent a compact brief and a comparison set rather than a vague request to make the page editorial. Include the content type, target devices, preferred mood, required page sections, and examples that show the structure or atmosphere you want.

Ask it to return a design system with named roles: display, body, metadata, caption, link, page background, text, muted text, accent, border, card, and spacing steps. Require a small specimen page before the full build. The specimen should include a headline, deck, long paragraph, pull quote, caption, navigation label, card, and mobile layout.

Also ask the agent to label every choice as either observed from a reference or recommended for your project. That distinction makes revisions easier and prevents accidental copying. Have it check line length, headline wrapping, contrast, focus states, and spacing at both desktop and mobile widths before applying the system across the site.

Related questions

• Real AI Product Landing Page Design Examples for an AI Coding Agent
• Editorial Website Design References for Claude Code
• Ecommerce Product Page Examples with Fonts, Colors, and Spacing
• Real developer tool homepage design examples for an AI coding agent