# Penthera type system

> How is type set on penthera.org?

## Scale

- `--t-poster`: 42 to 124 px, Helvetica. The poster headline.
- `--t-h1`: 40 to 88 px, Helvetica. Page titles.
- `--t-h2`: 32 to 56 px, Helvetica. Section titles.
- `--t-h3`: 26 to 40 px, Helvetica. Post titles in a list.
- `--t-lead`: 22 to 28 px, Helvetica. Standfirsts.
- `--t-read`: 18 to 20 px, Charter. Reading.
- `--t-text`: 17 px, Helvetica. Interface text.
- `--t-mono`: 16.5 px, Departure Mono. Section heads in a post, inline code.
- `--t-small`: 15 px, Helvetica. Captions and tables.
- `--t-note`: 13 px, Departure Mono. Notes and small print.
- `--t-label`: 11 px, Departure Mono. Stickers and labels, at the font’s own size.

## Rules

- Keep lines to about 65 characters. Long lines lose the reader on the way back. The reading column is 35.5 rem wide and grows with the reader’s own text size. (Bringhurst 2.1.2)
- Measure vertical space in lines. One line of text is the unit, so the column keeps its beat past heads, lists and figures. (Bringhurst 2.2.2)
- Leave the right edge ragged. Browsers justify by stretching word gaps. A natural rag reads better, with no automatic hyphens. (Bringhurst 2.1.3)
- Let weight fall as size rises. Big type is already loud. Large heads are medium, small heads are bold, and each step changes one thing. (Bringhurst 3.5.1)
- Use real marks. Curly quotes, true apostrophes and single-character ellipses, set at build time. Code stays exactly as typed, so a command still pastes. (Bringhurst 5.4)
- Never fake a letter. No synthetic bold, italic or small caps. If a face lacks a style, we do without it. (Bringhurst 2.1.9)
- Give each face one job. Charter reads, Helvetica heads, Departure Mono labels. No fourth face. (Bringhurst 6.5)
- Match the ink to the paper. A cool near-black on light grounds. Warm blacks suit ivory, not gray. (Bringhurst 9.5.3)
- Spend the fun on the furniture. Stickers, blocks and colored keys live around the text, never behind it. (Bringhurst 1.1.1)

## Rules we break on purpose

- Space between paragraphs. The book prefers indents. Space is easier for many readers on a screen.
- A heavy title on the blog. Size with weight breaks 3.5.1 once, on purpose. It’s the one poster moment.
- Lining numbers. Charter has no old-style figures on most devices, and we don’t fake them. Where the font has them, they appear.
- 13 px mono. Departure Mono is drawn at 11. Notes at 13 trade a little crispness for reading comfort.

Source: https://penthera.org/type