Principles of UX / UI (Product Design): Typography (Font Pairing, Readability, Line Height)

Typography (Font Pairing, Readability, Line Height)

Typography Study Guide: Font Pairing, Readability & Line Height

(Portfolio-Ready for Aspiring Product & UX Designers)

What This Is

Typography is the art of arranging text so it’s readable, scannable, and emotionally resonant. It’s not just about picking "pretty fonts"—it’s about guiding users effortlessly through your product. For example: - A hospital patient portal might use a clean, high-contrast sans-serif (like Inter or Roboto) for appointment booking to reduce cognitive load during stressful moments.
- An e-commerce checkout flow could pair a bold, attention-grabbing headline (e.g., Montserrat ExtraBold) with a neutral body font (e.g., Open Sans) to highlight the "Place Order" button and reduce cart abandonment.

Bad typography = frustrated users. Good typography = invisible usability.

Key Terms & Principles

1. Font Pairing

Definition: Combining two (or more) typefaces that complement each other without clashing.
Example:
- Headline: Playfair Display (elegant serif) + Body: Lato (clean sans-serif) → Used in luxury brand websites (e.g., Tiffany & Co.) to convey sophistication while keeping text readable.
- UI Rule: Limit to 2-3 fonts max (e.g., one for headings, one for body, one for accents like buttons).

2. Readability vs. Legibility

• Readability: How easily text can be understood (e.g., line length, spacing, contrast).
• Example: A blog post with short line lengths (50-75 chars/line) and 1.5x line height is easier to read than a wall of text.
• Legibility: How easily individual characters can be distinguished (e.g., I vs. l vs. 1).
• Example: Avoid decorative fonts (e.g., Papyrus) for body text—stick to sans-serifs for digital screens (e.g., Inter, Roboto, SF Pro).

3. Line Height (Leading)

Definition: The vertical space between lines of text (measured in em or px).
Example:
- Too tight (1.2x): "The quick brown fox jumps over the lazy dog" (hard to scan).
- Just right (1.5x): "The quick brown fox jumps over the lazy dog" (breathable, easy to follow).
- WCAG Standard: 1.5x line height for body text (minimum 1.4x for accessibility).

4. Contrast Ratio (WCAG)

Definition: The difference in luminance between text and background. Minimum ratios:
- Normal text (14px+): 4.5:1 (e.g., black on white = 21:1, dark gray on white = 7:1).
- Large text (18px+ bold or 24px+): 3:1.
Example:
- ❌ #666666 on white (3.7:1) → fails WCAG.
- ✅ #555555 on white (5.7:1) → passes.
Tool: Use WebAIM Contrast Checker.

5. Font Weight & Hierarchy

Definition: Using boldness (400, 600, 700) to create visual order.
Example:
- H1 (700): "Your Account" (bold, 24px) - H2 (600): "Payment Methods" (semi-bold, 20px) - Body (400): "Add a new card below." (regular, 16px) UI Rule: Avoid more than 3 weights in a single design (e.g., 400, 600, 700).

6. x-Height

Definition: The height of lowercase letters (e.g., "x") relative to uppercase letters. Fonts with taller x-heights (e.g., Inter, Roboto) are more readable at small sizes.
Example:
- Times New Roman (low x-height) → Harder to read on mobile.
- Inter (high x-height) → Crisp even at 12px.

7. Tracking (Letter Spacing)

Definition: Uniform space between all characters in a word.
Example:
- Too tight: "Typography" (letters collide).
- Too loose: "T y p o g r a p h y" (hard to read).
- Just right: "Typography" (default or +5% tracking for all-caps).
UI Rule: Increase tracking for all-caps text (e.g., buttons, labels) to improve legibility.

8. Kerning

Definition: Adjusting space between specific letter pairs (e.g., "A" and "V").
Example:
- Bad kerning: "T o p" (uneven gaps).
- Good kerning: "Top" (even spacing).
Figma Tip: Use Opt + ←/→ (Mac) or Alt + ←/→ (Windows) to adjust kerning manually.

9. Gestalt Principles (Proximity & Similarity)

Definition: How humans group visual elements.
- Proximity: Items close together appear related.
- Example: A label and input field should be closer to each other than to the next form field.
- Similarity: Items that look alike are perceived as a group.
- Example: All buttons use the same font, color, and weight to signal they’re interactive.

10. Fitts’s Law (for Typography)

Definition: Larger, closer targets are easier to click.
Example:
- Bad: A 12px "Submit" link buried in a paragraph.
- Good: A 48x48px button with 16px bold text (e.g., "Place Order") in the thumb zone on mobile.

11. The Rule of Thirds (for Layout)

Definition: Dividing a screen into a 3x3 grid to create balanced compositions.
Example:
- Place a headline in the top-left third, body text in the middle, and a CTA in the bottom-right third for natural eye flow.

12. The Von Restorff Effect (Isolation Effect)

Definition: Items that stand out are more memorable.
Example:
- A red "Delete Account" button among gray secondary buttons → Users notice it immediately (use sparingly!).

Step-by-Step Process Flow

1. Define the Content Hierarchy

Action:
- List all text elements in your design (e.g., H1, H2, body, captions, buttons).
- Assign font size, weight, and color based on importance.
Figma Tip:
- Use text styles (T → Create Style) to maintain consistency.
- Example hierarchy: - H1: 24px, 700, #222222 - H2: 20px, 600, #333333 - Body: 16px, 400, #444444 - Button: 16px, 600, #FFFFFF (on brand color)

2. Choose Your Fonts (Pairing)

Action:
- Step 1: Pick a primary font for body text (e.g., Inter, Roboto, Open Sans).
- Step 2: Pick a secondary font for headings (e.g., Playfair Display, Montserrat, Poppins).
- Step 3: Test combinations in Figma: - Use Google Fonts Pairing Tool for inspiration.
- Rule of thumb: Pair a sans-serif with a serif (e.g., Montserrat + Lora) or two contrasting sans-serifs (e.g., Inter + Space Mono).
Example Pairings:
| Use Case | Headline Font | Body Font | |-------------------|---------------------|--------------------| | Tech Startup | Poppins (700) | Inter (400) | | Luxury Brand | Playfair Display | Lato | | Government Site | Source Sans Pro | Roboto |

3. Set Line Height & Spacing

Action:
- Body text: Set line height to 1.5x font size (e.g., 16px text → 24px line height).
- Headings: Use 1.2x–1.3x line height (e.g., 24px H1 → 30px line height).
- Figma Tip: Use auto layout (Shift + A) to maintain consistent spacing between text blocks.
Example:

[H1: "Your Dashboard" (24px, 700, 30px line height)]
[Space: 24px]
[Body: "Welcome back! Here’s what’s new." (16px, 400, 24px line height)]
[Space: 16px]
[Button: "Get Started" (16px, 600, 48px tall)]

4. Test Readability & Contrast

Action:
- Step 1: Use WebAIM Contrast Checker to verify text meets WCAG standards.
- Step 2: Simulate low vision in Figma: - Go to View → Proof Setup → Color Blindness (e.g., protanopia, deuteranopia).
- Check if text is still readable.
- Step 3: Guerrilla test with 3-5 people: - Show them a mockup for 5 seconds, then ask: "What’s the most important action on this screen?" - If they hesitate, adjust hierarchy (e.g., make the CTA bolder).

5. Refine with Micro-Typography

Action:
- Kerning: Manually adjust awkward letter pairs (e.g., "A" + "V" in "SAVE").
- Tracking: Increase tracking for all-caps text (e.g., buttons, labels) by 5-10%.
- Figma Tip: Use text overrides to test variations without breaking styles.

6. Document in Your Design System

Action:
- Add typography styles to your Figma library: - Text styles (H1, H2, body, etc.).
- Color styles (e.g., text-primary, text-secondary).
- Include dos/don’ts (e.g., "Never use more than 3 font weights in a single screen").

Common Mistakes

1. Mistake: Using Too Many Fonts

Problem: Junior designers often use 4+ fonts in one design, creating visual chaos.
Correction:
- Stick to 2 fonts max (e.g., one for headings, one for body).
- If you must use a third, limit it to accents (e.g., a monospace font for code snippets).
Rationale: Fewer fonts = faster load times and cleaner hierarchy.

2. Mistake: Ignoring Line Height

Problem: Body text with 1.0x line height (e.g., 16px text with 16px line height) feels cramped.
Correction:
- Use 1.5x line height for body text (e.g., 16px text → 24px line height).
- For headings, use 1.2x–1.3x (e.g., 24px H1 → 30px line height).
Rationale: More space = easier scanning and better readability.

3. Mistake: Low-Contrast Text

Problem: Gray text on a light background (e.g., #999999 on white) fails WCAG.
Correction:
- Use minimum 4.5:1 contrast for normal text (e.g., #555555 on white = 5.7:1).
- For large text, use 3:1 minimum (e.g., 24px bold #777777 on white = 3.1:1).
Rationale: 1 in 12 men have color vision deficiency—low contrast excludes users.

4. Mistake: Overusing Decorative Fonts

Problem: Using Papyrus, Comic Sans, or Lobster for body text.
Correction:
- Reserve decorative fonts for large headlines only (e.g., a poster title).
- For body text, use neutral sans-serifs (e.g., Inter, Roboto, Open Sans).
Rationale: Decorative fonts slow down reading and look unprofessional in UIs.

5. Mistake: Inconsistent Hierarchy

Problem: A "Cancel" button has the same weight as a "Submit" button.
Correction:
- Primary actions (e.g., "Submit") → Bold, high-contrast, larger.
- Secondary actions (e.g., "Cancel") → Regular, lower contrast.
Rationale: Users should instantly know what’s most important.

Design Interview / Portfolio Tips

1. What Interviewers Look For

• Can you explain your typography choices? (e.g., "I used Inter for body text because of its high x-height, which improves readability on mobile.")
• Do you consider accessibility? (e.g., "I tested contrast ratios to ensure WCAG compliance.")
• Can you defend your hierarchy? (e.g., "The H1 is 24px and bold to draw attention to the page’s main purpose.")

2. Portfolio Tips

• Show your process: Include before/after typography tweaks (e.g., "Improved line height from 1.2x to 1.5x, reducing bounce rate by 12%").
• Highlight micro-typography: Show kerning fixes or tracking adjustments in case studies.
• Compare font pairings: Create a side-by-side of two designs (e.g., "Bad: 4 fonts, low contrast" vs. "Good: 2 fonts, 1.5x line height").

3. Tricky Distinctions

Quick Check Questions

1. Scenario:

A stakeholder insists on using the company’s "fancy" serif font (e.g., Baskerville) for body text in a mobile app. How do you respond? Answer:
- Principle: Readability > Aesthetics (especially on small screens).
- Response: "Serif fonts can be harder to read on digital screens, especially at small sizes. Let’s use Baskerville for headings and pair it with a clean sans-serif (e.g., Inter) for body text to balance brand identity and usability."

2. Scenario:

You’re designing a dashboard with 5 data tables. The PM wants to use the same font size (14px) for all text. What’s your concern? Answer:
- Principle: Visual Hierarchy (users need to scan quickly).
- Response: "Using the same font size flattens hierarchy, making it hard to distinguish headings from data. Let’s: - Headings: 16px, bold - Data: 14px, regular - Footnotes: 12px, light This will improve scannability and reduce cognitive load."

3. Scenario:

A developer asks why the line height in your Figma file is set to 1.5x instead of 1.0x. How do you explain? Answer:
- Principle: WCAG Readability Standards.
- Response: "1.5x line height improves readability by giving text room to breathe, especially for users with dyslexia or low vision. WCAG recommends at least 1.4x, and 1.5x is a common best practice for body text."

Last-Minute Cram Sheet

1. WCAG Contrast Ratio: 4.5:1 (normal text), 3:1 (large text).
2. Line Height: 1.5x for body text, 1.2x–1.3x for headings.
3. Font Pairing Rule: 2 fonts max (e.g., serif + sans-serif).
4. x-Height: Taller = more readable at small sizes (e.g., Inter).
5. Tracking: Increase by 5–10% for all-caps text.
6. Fitts’s Law: Make important buttons large and close to the pointer.
7. Gestalt Proximity: Group related text elements (e.g., label + input field).
8. Von Restorff Effect: Make critical actions (e.g., "Delete") stand out.
9. ⚠️ Avoid: More than 3 font weights in one screen.
10. ⚠️ Never: Use decorative fonts for body text.