Typographic Terms

When visual hierarchy is applied to typography, it is termed typographic hierarchy. It guides readers through information coherently according to how the human eye naturally scans screens (F-shaped and Z-shaped scanning patterns).

Typography is grouped into three functional tiers of importance:

1. Primary (Headlines): Catches attention, communicates the core message instantly, and establishes article context.
2. Secondary (Subheadings, Eyebrows, Lead paragraphs): Bridges the gap between title and body, providing structured milestones that enable skimming.
3. Tertiary (Body copy, captions, footnotes): Delivers detailed narrative copy with maximum reading comfort and minimal cognitive friction.

Hierarchy is orchestrated through coordinated contrasts in size, weight, color value, and vertical spacing.

The Headline

Headlines identify primary content topics (e.g., article titles, feature banners).

• UX Rules: Keep them concise and scannable. While display fonts and expressive styling are permissible in headlines, maintain restraint: avoid decorative effects that compromise legibility.

The Eyebrow Headline

An eyebrow headline (also called a kicker or category tag) sits directly above the main headline (like your eyebrow sits above your eye):

• Function: Usually rendered in small, uppercase, bold lettering with positive letter-spacing (tracking).
• Purpose: Provides contextual labeling (e.g., 'DESIGN SYSTEMS', 'SECURITY UPDATE') that anchors the reader's mental model before they read the main headline.
• Usage: Highly effective across article cards, product catalogs, and multi-part educational modules.

Body text follows headlines and carries the primary substance of the product. Because users spend 80% of their reading time consuming body copy, ergonomics is paramount:

Key Body Text Rules

• Font Size: Standard web body copy must never fall below 16px (1rem). On mobile screens, 14px is an acceptable absolute minimum for subordinate captions.
• Line Length (Measure): The optimal line length for reading comfort is 45 to 75 characters per line (including spaces). Lines that are too long cause the eye to lose track of the next line; lines that are too short break reading rhythm.
• Font Versatility: Choose typefaces with at least 4 weights (Regular, Medium, Semi-Bold, Bold) to allow nuanced emphasis without switching fonts.

Alignment determines how text lines anchor relative to container margins:

1. Flush Left (Ragged Right)

The gold standard for left-to-right languages. Aligns neatly on the left margin, leaving an organic ragged right edge. Because every line begins at the exact same horizontal anchor, the reader's eye effortlessly returns to the start of each line.

2. Centered Alignment

Aligned along an invisible central axis. Leaves gaps on both sides.

• Rule: Restrict centered text to headlines or short callouts of 3 lines or fewer. Centering full paragraphs forces the reader to search for the start of every line, inducing severe reading fatigue.

3. Flush Right (Ragged Left)

Aligned to the right margin. Natural for right-to-left languages (Arabic, Hebrew). In Western layouts, use sparingly for numeric columns or short meta tags.

4. Justified Alignment (The Digital Anti-Pattern)

Forces text to touch both margins by algorithmically expanding word spaces. In digital web browsers without hyphenation dictionaries, this creates hideous 'rivers of white space' that severely disrupt readability and create barriers for people with dyslexia. Avoid in digital UI.

Mastery of digital typography requires understanding horizontal character spacing:

Kerning

The selective adjustment of space between two specific adjacent characters to compensate for their optical shapes.

• Letter pairs like 'AV', 'To', 'Wa', and 'Ty' require custom kerning because the diagonal or overhanging strokes naturally collide or leave awkward gaps.
• In digital design, kerning is applied to large headlines, logos, and hero titles where spacing defects are magnified.

Tracking (Letter-Spacing)

Uniform horizontal spacing applied evenly across an entire word, phrase, or paragraph.

• Rule: Apply subtle positive tracking (+0.05em to +0.1em) to all-caps text and small eyebrow tags to prevent uppercase letters from clumping into an unreadable block.
• Warning: Never apply positive tracking to body copy—it separates syllables and drastically slows reading speed.

Line height (historically called leading after the physical lead strips placed between lines of metal type) measures the vertical distance from the baseline of one line to the baseline of the next:

Mathematical Proportions

• Body Copy: Optimal line height is 1.4x to 1.6x (140% to 160%) the font size (e.g., 16px body text requires a 24px line-height). Too little space crowds lines together; too much space disconnects paragraphs.
• Headlines: Because large text carries high visual mass, headlines require tighter relative line height: 1.1x to 1.25x (e.g., 40px headline requires 48px line-height).

Unitless Proportions in CSS

Always specify line-height as a unitless ratio (line-height: 1.5) rather than a fixed pixel value (line-height: 24px), allowing nested children to scale proportionally.