Most designers learn typography by choosing fonts. They open a type selector, browse until something feels right, and adjust the size until it looks good. This produces results that are sometimes acceptable and rarely excellent, because it is not typography — it is decoration.
Typography is the discipline of making language visible. It is about the relationship between words and space: the space inside letters, between letters, between words, between lines, between paragraphs, and between the text and the edge of its container. Every one of these relationships is controllable, and every one of them affects how the text is read — not just how it looks.
Here are the fundamentals that every designer who works with type must understand precisely.
Type Anatomy: The Vocabulary That Makes Communication Possible
Before controlling type, you need to name its parts. This is not pedantry — it is precision. When a design brief says “tighten the leading” or “increase the x-height,” designers who don’t know the vocabulary cannot execute or evaluate the direction.
Baseline: The invisible line on which letters sit. The foundation of all vertical alignment in typography.
X-height: The height of lowercase letters (specifically the lowercase ‘x’) relative to capital letters. Typefaces with a high x-height feel more legible at small sizes because the body of the letter is taller. Georgia and Verdana have high x-heights; Garamond has a low one. This is why Georgia was designed for screens and Garamond for print.
Ascenders and descenders: Ascenders are the parts of lowercase letters that rise above the x-height (the strokes in ‘b’, ‘d’, ‘h’, ‘k’). Descenders fall below the baseline (‘g’, ‘p’, ‘q’, ‘y’). The interplay between ascenders and descenders determines how much vertical space a typeface needs to breathe — which directly informs leading decisions.
Cap height: The height of uppercase letters. Not always the same as the height of ascenders.
Stem, bowl, counter: The stem is the main vertical stroke. The bowl is the curved closed form (as in ‘o’, ‘b’, ‘d’). The counter is the enclosed or partially enclosed space within a letter. Large counters improve legibility at small sizes, which is why humanist sans-serifs like Gill Sans perform better as body text than geometric sans-serifs like Futura.
Serif vs sans-serif: Serifs are the small terminals at the ends of strokes. Serif typefaces (Times New Roman, Garamond, Georgia) tend to guide the eye horizontally across a line — helpful in long-form text. Sans-serif typefaces (Helvetica, Futura, Inter) have no serifs and tend to feel more neutral or modern. The old rule that “serifs are for print, sans-serifs for screen” is obsolete at modern screen resolutions, but the underlying reading dynamics are real.
The Type Scale: Why Arbitrary Sizes Are Always Wrong
A type scale is a defined set of font sizes based on a mathematical ratio — typically 1.25 (Major Third), 1.333 (Perfect Fourth), or 1.5 (Perfect Fifth). Starting from a base size (usually 16px), each step up or down is multiplied or divided by the ratio.
A Perfect Fourth scale at 16px base produces: 11px, 13px, 16px, 21px, 28px, 37px, 50px.
Why does this matter? Because type that exists on a mathematical ratio feels inherently harmonious. Type sized arbitrarily — 16px body, 22px subheading, 36px heading — creates sizes that feel slightly wrong even when the viewer can’t articulate why.
The scale also enforces constraint. Designers who don’t work from a scale end up with 8–12 different font sizes across a product. Designers who do work from a scale have 4–6, and every size feels intentional.
Tools like typescale.com allow you to generate and preview scales. The Major Third (1.25) works well for interfaces where the range of sizes is compressed. The Perfect Fifth (1.5) works well for editorial contexts where dramatic size contrast is desirable.
Leading: The Most Misunderstood Property in Typography
Leading (line-height in CSS) is the vertical distance between lines of text. It is measured from baseline to baseline.
The default leading in most applications (120% of the font size) is designed for display text — headlines and short passages. For body text meant to be read for sustained periods, 145–175% is the appropriate range.
Too-tight leading (less than 120%) forces the ascenders and descenders of adjacent lines to compete. The eye can’t scan horizontally because vertical interference creates visual noise. Text becomes dense and tiring.
Too-loose leading (above 180%) breaks the visual connection between lines. The eye finishes a line and has too far to travel to the next one, increasing the chance of losing place.
The correct leading for body text is determined by three factors: x-height (higher x-height needs more leading), line length (longer lines need more leading), and typeface weight (heavier weights need more leading).
A useful starting heuristic: 16px type, 65-character line, regular weight → 1.6 line-height (25.6px leading). Adjust from there.
Tracking and Kerning: Two Different Problems
Kerning is the adjustment of space between specific letter pairs. It is a property of the typeface, not the designer — the type foundry has kerned the font’s letter pairs as part of the design. Your job as a designer is to choose typefaces with good kerning (most professional-grade fonts) and to manually kern display text above 48px where the optical irregularities in kerning become visible.
Tracking is uniform spacing added or removed across a range of characters. It is a design decision, not a typeface property.
The rules for tracking:
- Display type (above 40px): Slightly negative tracking (-10 to -20 in most software) tightens the letterforms and makes large text feel more cohesive. Type that is set large and tracked normally looks loose.
- Body text: Zero tracking or very slightly positive. Never negative on body text.
- Small text and all-caps: Positive tracking (50–100). All-caps text set with zero tracking is difficult to read because the uniform height of capitals creates visual crowding. Spacing the letters out restores the rhythm.
Word spacing is the amount of space between words. Adjusted with the CSS word-spacing property. Rarely needs changing in normal body text; useful for justified text (see below) where the typesetting engine distributes space unevenly.
Measure: The Optimal Line Length
Measure is the length of a line of text. It is typically expressed in characters (including spaces) or in typographic units.
The optimal measure for body text is 45–75 characters per line, with 65–66 being the ideal. This range is derived from studies of reading speed and comprehension: too short and the eye makes too many return trips, interrupting the reading rhythm; too long and the eye has difficulty finding the start of the next line.
In CSS, the ch unit is the width of the ‘0’ character and provides a convenient way to set measure:
body { max-width: 65ch; }This is more reliable than setting a pixel width, because 65ch scales correctly when the user changes their browser font size.
The most common typography mistake on the web is full-width body text. A paragraph that spans a 1400px container has a measure of 150+ characters — more than twice the readable limit. This is why most readable websites — this one included — constrain body text to a column of 640–720px.
Typographic Hierarchy Without Multiple Typefaces
A common misconception: typographic hierarchy requires multiple typefaces. It does not.
A single well-chosen typeface with multiple weights (Light, Regular, Medium, Bold) can establish all the hierarchy a typical product or publication needs. The hierarchy comes from the six variables described in the principles of visual hierarchy: size, weight, colour, spacing, position, and style — not from font diversity.
When a second typeface is introduced, it should serve a distinct purpose: a serif for long-form reading paired with a sans-serif for UI elements, or a monospace for code paired with a humanist sans-serif for prose. The distinction should be semantic (this type of content vs that type) not merely visual (I want more variety).
Two typefaces used well is more sophisticated than four typefaces used carelessly. The designers who understand type deeply almost always work with restraint.
This post is an excerpt from content covered in Typography & Typographic Systems (HD·P3·02), part of the Visual Design silo in the Hacking Design professional track. Explore the silo at hackingdesign.in/professional/visual-design/.