Typography Guide

1. The Anatomy of Typeface

To master typography, one must first understand the biological and mechanical components of a character. Every letterform is composed of specific anatomical features that influence its weight and personality.

• X-Height: This is the height of the lowercase letters (excluding ascenders and descenders). A larger x-height generally improves readability on low-resolution screens because it makes the characters appear larger and more distinct.
• Ascenders and Descenders: Ascenders are the parts of lowercase letters (like 'b' or 'd') that rise above the x-height, while descenders (like 'p' or 'g') drop below the baseline. The balance between these elements dictates the vertical rhythm of a text block.
• Counters: The enclosed or partially enclosed negative space within a letter (such as the hole in an 'o' or 'a'). Deep, open counters are essential for legibility, especially in small font sizes.
• Serifs: The small strokes attached to the ends of larger strokes in a letter. While serifs were historically used to guide the eye along a line in print, their role in digital design is primarily aesthetic and brand-oriented.

2. The Mathematics of Scale: Modular Scales

Professional designers do not pick font sizes at random. Instead, they use Modular Scales—a mathematical progression used to create a harmonious typographic hierarchy. By using a consistent multiplier, you ensure that the relationship between an H1, H2, and body text feels intentional and balanced.

Commonly used ratios include:

• Major Second (1.125): For subtle, tight hierarchies.
• Perfect Fourth (1.333): A standard, balanced approach for most web interfaces.
• Golden Ratio (1.618): For dramatic, high-contrast layouts often seen in editorial design.

For example, if your base body text is 16px and you use a Perfect Fourth scale (1.333), your hierarchy would follow: 16px, 21px, 28px, 37px, and 50px. This creates a predictable visual rhythm that the human eye naturally perceives as "correct."

3. The Physics of Reading: Leading, Kerning, and Tracking

The spacing between characters and lines is just as critical as the characters themselves. Mismanaging these three elements is the most common cause of "text heaviness" and reader fatigue.

"Typography is the craft of endowing human language with a durable visual form."

Leading (Line Height): This is the vertical space between lines of text. For body copy, the industry standard is a leading of 1.4 to 1.6 times the font size. For instance, a 16px font should ideally have a line-height of 24px to 26px. If the leading is too tight, lines blur together; if it is too loose, the eye struggles to find the start of the next line.

Kerning: This refers to the adjustment of space between individual character pairs (e.g., the space between 'A' and 'V'). Professional typefaces often have pre-set kerning tables, but custom layouts may require manual adjustment to prevent awkward gaps.

Tracking (Letter Spacing): Unlike kerning, tracking is the uniform adjustment of space across a whole range of characters. For large headings, a slight decrease in tracking (negative letter-spacing) can make the text feel more cohesive. For very small captions, a slight increase in tracking can prevent characters from bleeding into one another.

4. Accessibility and the WCAG Standard

In modern design, typography is a matter of compliance and inclusivity. The Web Content Accessibility Guidelines (WCAG) 2.1 provide specific metrics to ensure text is readable for users with visual impairments.

The most critical metric is the Contrast Ratio. To meet Level AA compliance, designers must ensure:

• Normal Text: A contrast ratio of at least 4.5:1 against its background.
• Large Text: (Defined as 18pt/24px or 14pt/18.66px bold) A contrast ratio of at least 3:1.

Furthermore, designers should avoid using purely color-based cues to convey meaning. Typography should rely on weight and size to establish hierarchy, ensuring that even users with color blindness can navigate the content structure.