# Nielsen Norman Group — Longform Design Study No. 04

Study of the longform article layout at Nielsen Norman Group (NN/g), the UX-research publication. Reference article: "Homepage Design: 5 Fundamental Principles."

## Overview

NN/g reads like an academic journal, not a blog. There is no hero photo, no gradient, no motion. The page earns credibility almost entirely through typographic convention: a serif body set at a large size with unusually loose leading, a bold sans headline, an abstract-style summary block, and a fixed right rail of contextual "related" cards. The personality is "trust through convention" — a reader who has seen one NN/g article knows exactly where every part of the next one lives, and spends all their attention on the argument rather than on learning the page.

The signature to reproduce: serif BODY for long-form credibility + bold sans headline, ultra-high 1.85 leading, a functional two-column layout with contextual cards, a restrained red-orange brand accent and blue links, and a summary/abstract lead block.

## How it structures longform content

Reading order, top to bottom, identical on desktop and mobile except for where the rail sits:

1. Black slim promo bar (offer + link + dismiss X).
2. Masthead: NN/g wordmark (slash in red-orange), nav pills, search, cart, log in.
3. H1 headline in bold sans.
4. Byline: circular avatar + blue name link + gray date, with Share right-aligned.
5. Summary / abstract block: 3px left rule, bold "Summary:" label, set in the serif.
6. Body: serif 20px / 1.85 with modest serif H2 section heads.
7. Inline figures with sans captions (~30 figures in the source), each explanatory, sized within the measure, never full-bleed.
8. Related-reading card rail on the right.

Hierarchy is built from **typeface contrast, not size explosions**. One bold sans H1; serif H2s at a quiet 22px semibold that read as pauses rather than billboards; the summary block is the loudest structural device and it is only a rule plus a bold label. Colour is rationed — black does structural work, blue marks links, and one red-orange is reserved for the wordmark slash and the small triangles on category chips. Because the accent appears so rarely it carries weight when it does.

Imagery strategy: figures are evidence, not decoration. Every image is a screenshot or diagram of the thing being discussed, captioned in the sans face and constrained to the text measure.

## Desktop treatment

- Body: Source Serif 4, 20px, line-height 37px (1.85), colour black.
- Measure: 835px article column, roughly 84 characters per line (generous end of the readable range).
- H1: Source Sans 3, 40px, weight 700, tight tracking.
- H2 section heads: Source Serif 4, 22px, weight 600.
- Links: #385AFF, no underline until hover.
- Layout: two columns — an 835px article + an ~300px related-reading card rail on the right.
- Cards: title (serif semibold), one-line description (sans), and a category chip (red-orange ▲ + uppercase sans label).
- Document height: ~25,000px end to end — a genuinely long read.

## Mobile treatment (390px)

- Body **holds at 20px / 37px (1.85)** — the size does not shrink. This is the single most distinctive responsive decision: legibility of the prose is held constant while the layout adapts around it.
- Measure: 343px column, roughly 34 characters per line.
- H1: reduces to ~34px, still Source Sans 700.
- Section heads, link colour, and leading are unchanged from desktop.
- Layout: single column; the card rail collapses and stacks **below** the article.

The takeaway: the layout adapts (measure narrows, rail relocates) but the reading contract — face, size, leading, link colour — does not.

## Design system (tokens)

Type:
- Body: Source Serif 4 (optical sizing 8..60), 20px / 1.85, weight 400.
- Headline (H1): Source Sans 3, 40px, weight 700.
- Section head (H2): Source Serif 4, 22px, weight 600.
- Summary lead: Source Serif 4, ~1.28rem, bold "Summary:" label, 3px left rule.
- Category chip: Source Sans 3, 0.7rem, weight 700, uppercase, .08em tracking, preceded by a red-orange ▲.
- Google Fonts: `family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&family=Source+Sans+3:wght@400;600;700`.

Colour:
- Paper `#FFFFFF`
- Ink `#000000`
- Body text `#111111`
- Link blue `#385AFF`
- Brand red-orange `#E5321B`
- Card border `#E2E2E2`
- Rule `#D8D8D8`

Layout:
- Measure 835px (~84 CPL desktop, ~34 CPL mobile).
- Leading 1.85, held across breakpoints.
- Two-column grid: 835px article + ~300px rail; single column below ~980px with the rail stacked underneath.

## Signature techniques

- **Serif body at generous leading** — signals "sit down and read this," the posture a reference site wants.
- **1.85 line-height** — unusually loose; it is what makes a 20px serif comfortable over thousands of words, and it survives onto mobile.
- **Type size held on mobile** — no reflexive drop to 16px; the measure adapts, the size does not.
- **Summary / abstract block** — a one-sentence lead behind a 3px rule sets expectations before the scroll.
- **Category chip** — red-orange ▲ plus an uppercase sans label; colour is never the only signal.
- **Avatar byline** — circular avatar, blue name link, gray date, right-aligned share.
- **Contextual card rail** — a fixed ~300px right column of related links that recommends without interrupting.
- **Rationed accent colour** — one red-orange for brand and chips, one blue for links, black for everything else.

## What to steal

1. Set long reads in a serif — it signals credibility before a word is read.
2. Loosen leading well past instinct — 1.85 looks like too much in a design tool and reads beautifully in a browser.
3. Hold type size on mobile — let the measure adapt, not the point size; legibility beats density on a text page.
4. Give the reader an abstract — a one-sentence summary behind a left rule respects their time.
5. Use accent colour like seasoning — rarity is what makes an accent read as intentional.

## Visual references

- Desktop: ../assets/screenshots/04-nng-desktop.jpeg
- Mobile: ../assets/screenshots/04-nng-mobile.jpeg

## Source URL

https://www.nngroup.com/articles/homepage-design-principles/