Typography
Let’s dive into Typography in UI/UX Design — one of the most powerful tools for enhancing readability, aesthetic appeal, and user experience in digital products.
What is Typography in UI/UX?
Typography is the art of arranging text — including the font style, size, spacing, and structure — to make content readable, scannable, and visually pleasing.
In UI/UX, typography:
- Guides user attention
- Establishes hierarchy
- Enhances usability
- Reinforces brand identity
Core Components of Typography
1. Font vs Typeface
- Typeface: The overall design (e.g., Roboto, Helvetica)
- Font: A specific weight and size of that typeface (e.g., Roboto Bold 16pt)
2. Font Families
- Serif: Has small lines at the ends (e.g., Times New Roman) — often seen as formal.
- Sans-serif: Clean and modern (e.g., Arial, Helvetica, Poppins) — ideal for UI.
- Display/Decorative: Used for titles or branding (not body text).
Typography Structure in UI
| Level | Purpose | Common Size (Web) |
|---|---|---|
| H1 | Page titles | 32px – 48px |
| H2/H3/H4 | Section headings | 24px – 36px |
| Body Text | Paragraphs and content | 14px – 18px |
| Captions | Labels, notes, metadata | 12px – 14px |
| Buttons | CTA/action labels | 14px – 16px |
Typography Principles in UI/UX
1. Readability
- Can users easily read the text?
- Avoid overly fancy fonts for large text blocks.
- Keep line length to about 50–75 characters per line.
2. Hierarchy
- Use size, weight, and color to show importance.
- Headings should be clearly distinguishable from body text.
3. Consistency
- Use 1–2 fonts across your design.
- Apply text styles consistently across screens.
4. Alignment
- Stick to left-aligned text for body content.
- Avoid center-aligned text for long paragraphs.
5. Contrast
- Text should have enough contrast with the background.
- Use tools like the WebAIM Contrast Checker.
Spacing in Typography
| Spacing Term | Description |
|---|---|
| Line height (leading) | Space between lines of text |
| Letter spacing (tracking) | Space between all letters |
| Kerning | Space between two specific letters |
| Paragraph spacing | Space between paragraphs or sections |
Ideal line height: 1.4 – 1.6x the font size for body text
Avoid crowding: Let your text breathe.
Typography in Figma
Tips for Working with Text:
- Use Text Styles for H1, H2, Body, Button, Caption, etc.
- Name styles clearly:
Heading 1 / 32 Bold,Body / 16 Regular - Apply auto layout for responsive text containers
- Check contrast for accessibility
Example Typography Hierarchy in a UI
[H1] Learn UI/UX Design the Easy Way (32px, Bold)
[H2] Master Design Thinking, Research, Prototyping (24px, Medium)
[Body]
Our beginner-friendly course walks you through the essential skills needed for modern UI/UX design. (16px, Regular)
[Button] Get Started (14px, Semi-Bold, All Caps)
Good Font Pairings (Free on Google Fonts)
| Heading Font | Body Font |
|---|---|
| Poppins | Roboto |
| Montserrat | Open Sans |
| Playfair Display | Lato |
| Raleway | Inter |
Summary: Do’s and Don’ts
Do:
- Use a clear font hierarchy
- Keep text aligned and consistent
- Maintain high contrast for accessibility
- Limit fonts to 1–2 per project
Don’t:
- Use decorative fonts for body text
- Mix too many font styles
- Ignore spacing or alignment
- Use low-contrast text over images
NEXT LESSON – Layout and Grid Systems
