UI/UX Design Typography in UI Design

Typography is the art and technique of arranging type to make written language readable, clear, and visually effective. In UI design, typography does far more than display words — it establishes hierarchy, communicates brand personality, guides the eye, and determines how comfortable a product feels to use for extended periods. Poor typography makes users work harder. Excellent typography makes reading feel effortless.

Why Typography Matters More Than Most Designers Think

Approximately 95% of information on the web is written language. That statistic comes from designer Oliver Reichenstein and it holds as true today as when he wrote it. Images and icons support written communication — they do not replace it. A product with bad typography is a product where most of the information is hard to process.

Consider what typography affects directly:

  • How quickly users understand headings and hierarchy
  • How long users can read without eye strain
  • How professional and trustworthy the product feels
  • How the brand personality comes through without any images
  • How accessible the content is across different screen sizes and viewing distances

Typography Terminology Every Designer Needs

TYPOGRAPHY GLOSSARY DIAGRAM

TYPEFACE vs FONT:
  Typeface = The entire family (Roboto)
  Font     = One specific style within the family (Roboto Bold Italic 16px)

SERIF vs SANS-SERIF:
  Serif:     Letters have small decorative "feet" (Times New Roman, Georgia)
  Sans-serif: Letters have clean, flat endings (Helvetica, Roboto, Inter)

KEY MEASUREMENTS:
  Cap height  = Height of uppercase letters
  X-height    = Height of lowercase letters (the "x")
  Ascender    = Part of letters that rise above x-height (b, d, h, k)
  Descender   = Part of letters below baseline (p, g, y, j)
  Baseline    = Invisible line that all letters sit on

SPACING:
  Kerning     = Space between two specific letter pairs
  Tracking    = Uniform space between all letters in a word
  Leading     = Vertical space between lines (line height)

Serif vs Sans-Serif: When to Use Each

Serif Typefaces

Serifs — the small decorative strokes on letter endings — were originally designed for print. The serifs help the eye follow text along a line in long-form reading. Classic serif fonts include Times New Roman, Georgia, Garamond, and Playfair Display.

In UI design, serifs work well for:

  • Long editorial content, articles, and blog posts
  • Luxury, heritage, or traditional brand identities
  • Display headings where the decorative quality adds personality
  • Products that want to feel authoritative, timeless, or editorial

Sans-Serif Typefaces

Sans-serif fonts — without the decorative strokes — read more cleanly on digital screens, especially at small sizes. They feel modern, neutral, and clean. Popular sans-serif UI fonts include Roboto, Inter, SF Pro (Apple), and Nunito.

Sans-serif works well for:

  • Body text on screens, especially at small sizes (12-16px)
  • Modern, technology, and startup brands
  • Dense data interfaces like dashboards and admin panels
  • Mobile apps where screen space is limited
SERIF vs SANS-SERIF USE CASE DIAGRAM

SITUATION                         RECOMMENDED CHOICE
Long article body text            Serif (Georgia, Merriweather)
App navigation labels             Sans-serif (Inter, Roboto)
Luxury brand logo                 Serif with unique character
Mobile app body text              Sans-serif (clear at small sizes)
Financial dashboard               Sans-serif (dense data reading)
Magazine-style editorial product  Serif or mixed (display serif + body sans)
Children's learning app           Rounded sans-serif (friendly, approachable)

Type Scale: Establishing Visual Hierarchy

A type scale is a set of predefined font sizes that work together harmoniously. Using a consistent type scale creates visual order — users immediately understand what is a heading, what is body text, and what is a caption without being told.

STANDARD TYPE SCALE DIAGRAM (Mobile App)

Display (Hero text):    32px / Bold     -- Landing page hero headline
H1 (Page title):        24px / Bold     -- Main screen title
H2 (Section heading):   20px / SemiBold -- Major section header
H3 (Card title):        17px / SemiBold -- Content block title
Body (Main text):       15px / Regular  -- Standard reading text
Body Small:             13px / Regular  -- Secondary info
Caption:                11px / Regular  -- Labels, timestamps, hints

RULE: Jump at least 2px between levels to create clear hierarchy.
      A 1px difference looks like a mistake, not a choice.

MINIMUM READABLE SIZE ON SCREEN: 11px (some users need larger)
COMFORTABLE READING SIZE:        15-17px for body text

Line Height: The Most Overlooked Typography Setting

Line height (leading in print terminology) is the vertical space between lines of text. Designers often overlook this setting, but it has a dramatic impact on readability.

LINE HEIGHT COMPARISON DIAGRAM

TOO TIGHT (1.0 line height):
  Line 1 text here
  Line 2 text here -- letters from different lines almost touch
  Line 3 text here -- hard to track where one line ends

COMFORTABLE (1.5 line height):
  Line 1 text here

  Line 2 text here -- clear separation, eye tracks easily

  Line 3 text here -- reading feels natural and effortless

TOO LOOSE (2.5 line height):
  Line 1 text here


  Line 2 text here -- too much space makes reading choppy


  Line 3 text here -- feels disconnected and wasteful

GUIDELINES:
  Body text:    1.4-1.6 line height (1.5 is a safe default)
  Headings:     1.1-1.3 line height (tighter for large text)
  Captions:     1.3-1.4 line height

Line Length: How Wide Text Columns Should Be

The width of a text column affects reading comfort significantly. Very long lines force the eye to travel far across the page, making it easy to lose your place when wrapping to the next line. Very short lines interrupt the reading rhythm with constant line breaks.

LINE LENGTH DIAGRAM

OPTIMAL:
  Characters per line: 50-75 (sweet spot for comfortable reading)
  In CSS: max-width: 65ch (ch = width of the character "0" in current font)

TOO WIDE (100+ characters per line):
  The eye travels far across the page, struggles to return to
  the correct line, and reading speed drops. Users get tired faster.

TOO NARROW (20-30 characters per line):
  Short and
  choppy lines
  interrupt flow
  constantly and
  feel cramped.

MOBILE CONSIDERATION:
  Phone screens are narrow by nature.
  Single-column layouts with 16px side margins create comfortable
  reading widths automatically on most devices.

Font Pairing: Combining Two Typefaces

Most products use two typefaces: one for headings and one for body text. A good pairing creates contrast between heading and body without clashing. An easy way to find a safe pairing: use a serif for headings and a sans-serif for body text. The contrast between them creates clear hierarchy while both remain readable.

FONT PAIRING EXAMPLES DIAGRAM

PAIRING 1: Classic and Professional
  Heading: Playfair Display (serif, editorial)
  Body:    Source Sans Pro (clean, modern)
  Use for: News sites, editorial blogs, financial services

PAIRING 2: Modern and Clean
  Heading: Inter (bold, geometric sans-serif)
  Body:    Inter (regular weight)
  Use for: SaaS products, dashboards, tech apps
  Note:    Single-family pairings work when weights differ clearly

PAIRING 3: Friendly and Approachable
  Heading: Poppins (rounded, geometric)
  Body:    Nunito (rounded, warm)
  Use for: Consumer apps, health apps, community products

RULES FOR SAFE PAIRING:
  1. Vary weight significantly (Bold heading + Regular body)
  2. Vary size significantly (24px heading + 15px body)
  3. Keep body text in a highly readable, neutral font
  4. Limit to 2 typefaces -- 3 or more creates visual chaos

Font Loading and Performance

Every custom font loaded on a web page adds a network request and increases page load time. This matters for UI design because slow-loading fonts cause a phenomenon called FOUT (Flash of Unstyled Text) or FOIT (Flash of Invisible Text) — where the page loads with the wrong font or with invisible text until the custom font arrives.

Best practices:

  • Use variable fonts — one font file that contains multiple weights, reducing file sizes dramatically
  • Limit custom fonts to 2 typefaces and 3-4 weight variations total
  • Use system fonts (SF Pro on Apple devices, Roboto on Android) when performance is critical — they load instantly because they are already installed on the device
  • Use Google Fonts for free, reliable font hosting with good performance

Typography in Different UI Contexts

Navigation

Navigation labels should be short, clear, and consistent in capitalization style. Use title case (Home, About, Contact) or all lowercase (home, about, contact) consistently. Never mix. Font weight should be regular or medium — not bold, which feels too heavy for navigation items.

Buttons

Button text should be sentence case or all caps, never title case. "Sign up" or "SIGN UP" — not "Sign Up." Short button labels (1-3 words) with clear action verbs work best: "Buy now," "Save," "Get started."

Error Messages

Error messages need to be immediately readable under stress. Use the same body font, same size as body text, and a color that contrasts against both the error background and surrounding content. Never use italic for error messages — it implies the text is secondary when it is in fact urgent.

Empty States

Empty states — screens with no content yet — need encouragement, not just absence. Use a slightly larger body size, a friendly tone, and a clear call to action. Centered text with comfortable line height works well in empty state layouts.

Responsive Typography

Font sizes must adapt across screen sizes. A 48px heading that looks great on a desktop monitor becomes enormous and disrupts the layout on a mobile phone.

RESPONSIVE TYPE SCALE DIAGRAM

                MOBILE      TABLET      DESKTOP
H1 (Page title): 24px        30px        40px
H2 (Section):    20px        24px        30px
Body:            15px        16px        17px
Caption:         12px        13px        13px

Technique: Use CSS clamp() for fluid font sizes that scale smoothly
between breakpoints without jumps.

Example: font-size: clamp(24px, 5vw, 48px)
  This means: minimum 24px, scale with viewport, maximum 48px

Key Points

  • Typography establishes hierarchy, brand personality, and reading comfort simultaneously
  • Serif fonts are decorative and editorial; sans-serif fonts are clean and modern — most UI body text uses sans-serif
  • A consistent type scale creates visual hierarchy that users understand without explanation
  • Line height should be 1.4-1.6 for body text; too tight causes eye strain, too loose disrupts reading flow
  • Optimal line length is 50-75 characters per line
  • Pair a distinct heading font with a highly readable body font — limit to two typefaces total
  • Never use color or style alone to distinguish text importance — pair with size, weight, and spacing changes too
  • Responsive typography scales font sizes down for small screens and up for large screens
Previous lessons
Back to courses
Next lessons

Leave a Comment