Newspaper Typography Previewer
Story settings
Story unit
Presses roll as the type scale tightens
Editors trim leading and widen columns to fit the day's news
Newspaper typography is governed by the fold: what is above it has to sell the paper, and what is below it has to be readable at arm's length on rough paper. Headlines are set tight and heavy, body text is set small on a tight leading, and the rules between stories carry more of the separation than white space does.
A second column of copy continues the story under the same rule, with the column bottoms ragged rather than balanced — that raggedness is itself a newspaper signal.
.story h1 {
font-family: 'Roboto Slab', serif;
font-size: 36pt;
line-height: 1.02;
letter-spacing: -0.01em;
}
.story .deck { font-size: 15.2pt; line-height: 1.25; }
.story .byline { font-size: 9.97pt; letter-spacing: 0.06em; text-transform: uppercase; }
.story .body { font-size: 9.5pt; line-height: 11.5pt; column-count: 3; column-gap: 4mm; hyphens: auto; text-align: justify; }
.story .rule { border-top: 1px solid currentColor; }You Might Also Need
The newspaper typography previewer renders a broadsheet story unit: a banner headline, a deck, a byline, a rule and a multi-column body. The controls that matter are the headline size relative to the body, the leading, which newspapers run tight, and the rule weights that carry the structure when white space is scarce.
What is Newspaper Typography Previewer?
The newspaper typography previewer builds a complete story unit from typed copy and a handful of controls, then reports the two ratios a newspaper setting lives on and exports the CSS behind it.
- Three headline styles are offered: banner in sentence case, stacked caps, and ribbon with a rule above the headline.
- The headline slider runs from 12pt to 84pt, the body from 6pt to 14pt in quarter-point steps, the leading from 8pt to 20pt and the column count from one to five.
- The deck is set at 1.6 times the body size and the byline at 1.05 times with uppercase and 0.06em of tracking, so the supporting levels stay in proportion to whatever body size is chosen.
- Three rule weights are available: hairline at half a pixel, thin at one pixel and thick at three, drawn between the byline and the body.
- The body is justified with automatic hyphenation in the chosen number of columns, on a 4mm column gap.
The headline to body ratio is the figure that decides whether the page reads as a newspaper. It is reported to two decimals along with the leading ratio, and the panel notes that newspapers run their leadings between 1.15 and 1.25, which is deliberately tighter than the 1.45 to 1.8 that body text wants on a screen. A ratio below three to one is flagged as reading magazine-like, with the advice to raise the headline, while anything above that is called broadsheet scale. The preview also demonstrates the structural role of the rules: with white space scarce, the deck, the byline and the horizontal rule do the separating that margins would do elsewhere, and the rule weight is what makes the story unit start and end at the right place on a dense page.
- The column gap is fixed at 4mm and the page is rendered on one fixed paper tone, so neither is adjustable.
- The fold is described in the copy rather than simulated, so nothing shows what actually sits above it.
- The headline-to-body verdict is a heuristic about scale, not a judgement about the headline itself.
- Captions, pull quotes, images and their wells are absent, though they take up most of a real newspaper page.
- The deck and byline sizes are fixed multipliers, and the paper stock is not modelled, so how the type behaves on newsprint is not represented.
Use it when a story page needs a headline scale set against a body size, and again when a rule weight is being chosen, since the three options behave very differently on a dense page. The tight leadings it works with make it the right place to see how far leading can be pushed before the columns start to look like a wall, which is a question the screen-oriented tools do not cover. Where the setting is a magazine rather than a newspaper, the magazine column setter works the same problem on a baseline grid, the hyphenation tester covers the justification behaviour a narrow column depends on, and the print type specification sheet records the sizes in points for the printer.
How to use Newspaper Typography Previewer
- Enter the headline, deck, byline and story copy so the unit is built from real text rather than placeholder lines.
- Choose the headline style and rule weight, which between them set how the story is separated from whatever sits beside it.
- Set the headline and body sizes and read the headline to body ratio, then set the leading and watch the leading ratio against the 1.15 to 1.25 band.
- Adjust the column count until the copy reads in the story unit, then copy the generated CSS for the newspaper block.
When to use Newspaper Typography Previewer vs related tools
Use it when a news or editorial page needs its headline scale set against a body size, when a dense page needs a rule weight decided, or when someone has asked for a broadsheet look and the type currently reads as a magazine. It is also a quick way to show why a newspaper leading will not work on a screen. For magazine setting, the magazine column setter is the closer tool, the hyphenation tester covers the justification a narrow measure needs, and the book interior layout preview applies the same discipline to pages that are read in the hand rather than on a stand.
Privacy & Security
This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.