Elements of Typography
Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing, and letter-spacing — and adjusting the space between pairs of letters.
Rhythm & Proportion
The density of texture in a written or typeset page is called its color — a metaphor referring only to the darkness or blackness of the letterforms in mass. Once the demands of legibility and logical order are satisfied, evenness of color is the typographer's normal aim.
Color depends on four things: the design of the type, spacing between the letters, the spacing between the words, and the spacing between the lines. For a normal text face in a normal text size, a typical value for the word space is ¼ of an em — written as M/4.
Horizontal Motion
A satisfactory length of line is 45–75 characters. The 66-character line — counting both letters and spaces — is widely regarded as ideal. For justified text, the minimum line length is 40 characters; below 40 may lead to splotchy word spaces or an epidemic of hyphenation.
Typography is two-dimensional architecture, based on experience and imagination, and guided by rules and readability. It is a signal of respect from designer to reader.
Vertical Motion
You must choose not only the overall measure — the depth of the column or page — but also a basic rhythmical unit. This unit is the leading, which is the distance from one baseline to the next. 11/13 means 11pt font-size and 13pt from one baseline to the next.
For the same reason that the tempo must not change arbitrarily in music, leading must not change arbitrarily in type. Headings, subheads, block quotations, footnotes — the total amount of vertical space consumed by each departure from the main text should be a divisible multiple of the basic leading.
Harmony & Counterpoint
Size & Scale
Don't compose without a scale. Type hierarchy clarifies meaning without the need for excessive variation. Change one parameter at a time — for headings, first test the bold weight at text size before reaching for a larger size.
Numerals & Figures
Use lining figures with full caps and text figures in all other circumstances: 1832 versus 1832. Phone numbers: 00 34 93 459 27 38. Year: 2024 CE. Serial no: A7F-19284-Q.
Roman numerals: xiii lowercase and XIII uppercase. Abbreviations in text: the BBC, NASA, HTML.
Ligatures
fi fl ff ffi ffl — the fine office offers affiliate difficult affairs. Sophisticated effectual influence affiliation. The effort to afflict affront affects efficient office.
Structural Forms
Lists
Ordered List
- Read the text before designing it.
- Discover the outer logic of the typography in the inner logic of the text.
- Choose a typeface or group of faces that will honour and elucidate the character of the text.
- Shape the page and frame the text-block so that it honours every element.
- Give full typographic attention even to incidental details.
Unordered List
- Invite the reader into the text
- Reveal the tenor and meaning of the text
- Clarify the structure and the order of the text
- Link the text with other existing elements
- Induce a state of energetic repose — the ideal condition for reading
Dashes & Punctuation
Use spaced en dashes — rather than close-set em dashes or spaced hyphens — to set off phrases. Use close-set en dashes between digits to indicate a range: 2001–2011, pp. 45–72, 25 December–3 January.
Ellipsis that fits the font: the quick brown fox… jumps. Quotation marks: "Well-chosen words deserve well-chosen letters." He said, 'Typography exists to honor content.'
Technical Typography
Code & Monospace
Inline code: font-family: var(--font-mono). Use text-rendering: optimizeLegibility for better kerning. The CSS property font-variant-numeric: oldstyle-nums enables text figures.
/* Type scale — Major Second (1.125) */
:root {
--font-size--1: calc(var(--font-size-0) / 1.125);
--font-size-0: 16px; /* body */
--font-size-1: 18.000px; /* h5, h6 */
--font-size-2: 20.250px; /* h4 */
--font-size-3: 22.781px; /* h3 */
--font-size-4: 25.629px; /* h2 */
--font-size-5: 28.833px; /* h1 */
}Keyboard Shortcuts
Press ⌘ + B for bold. Use ⌘ + Shift + . to increase font size. On Windows: Ctrl + Z to undo.
Tables
| Step | Size (rem) | Usage |
|---|---|---|
| −1 | 0.75 | Captions, footnotes |
| 0 | 1.00 | Body text |
| 1 | 1.333 | Small headings (h5, h6) |
| 2 | 1.777 | Sub-headings (h4, h3) |
| 3 | 2.369 | Section headings (h2) |
| 4 | 3.157 | Page title (h1) |
Special Characters
Dimension sign: 297 × 210 mm. Midpoint separator: Suite 6 · 325 Central Park South · New York. Copyright: © 2024. Registered: ®. Trademark: ™. Section: §2.1.1. Paragraph: ¶5. Degree: 27° C. Fraction: ½ ¼ ¾.
Diacritics: café, naïve, résumé, façade, Zürich, São Paulo, Łódź. Tchaikovsky, Ysaÿe, Vazquez.
Text Box Trim
Fonts carry invisible half-leading above and below glyphs — space that makes equal padding appear unequal. text-box: trim-both cap alphabetic removes that space, aligning the optical bounds of text to the cap-height above and the baseline below.
Without text-box
With text-box: trim-both cap alphabetic
The colored box is the content box — notice how text sits flush to its edges when trimmed.
The shorthand text-box: <trim> <over-edge> <under-edge> combines text-box-trim and text-box-edge. Common values for the over edge: cap (capital height), ex (x-height), text (ascender). For under: alphabetic (baseline), text (descender).
Crystal Goblet
Imagine that you have before you a flagon of wine. You may choose your own favourite vintage for this imaginary demonstration, so that it be a deep shimmering crimson in colour. You have two goblets before you. One is of solid gold, wrought in the most exquisite patterns. The other is of crystal-clear glass, thin as a bubble, and as transparent. Pour and drink; and according to your choice of goblet, I shall know whether or not you are a connoisseur of wine. For if you have no feelings about wine one way or the other, you will want the sensation of drinking the stuff out of a vessel that may have cost thousands of pounds; but if you are a member of that vanishing tribe, the amateurs of fine vintages, you will choose the crystal, because everything about it is calculated to reveal rather than to hide the beautiful thing which it was meant to contain.
Bear with me in this long-winded and fragrant metaphor; for you will find that almost all the virtues of the perfect wine-glass have a parallel in typography. There is the long, thin stem that obviates fingerprints on the bowl. Why? Because no cloud must come between your eyes and the fiery heart of the liquid.
Now the man who first chose glass instead of clay or metal to hold his wine was a 'modernist' in the sense in which I am going to use that term. That is, the first thing he asked of this particular object was not 'How should it look?' but 'What must it do?' and to that extent all good typography is modernist.