Typography in Web Design: Readability and Visual Hierarchy

Introduction

95% of the web is typography.

This statement might seem like an exaggeration, but think about it: What is the main content on a web page? Text. Headings, paragraphs, buttons, menus, forms... All text.

Typography isn't just "choosing a font." It determines how information is perceived, how users navigate the page, and how the message is delivered.

Font Selection

Sans-Serif or Serif?

Sans-serif (Manrope, Inter, Helvetica):

• Easy to read on screen
• Modern, clean feel
• Generally preferred for the web

Serif (Georgia, Merriweather, Playfair):

• Traditional, trustworthy feel
• Can reduce eye strain in long texts
• Suitable for specific sectors (law, finance, literature)

Font Selection Criteria

1. Readability

• Is the x-height sufficient?
• Can letters be distinguished from each other? (Il1, O0)
• Does it support the characters you need?

2. Weight Variety

• Minimum: Regular (400) + Bold (700)
• Ideal: Light (300), Regular (400), Medium (500), Bold (700)

3. Performance

• Is it a variable font? (Single file, multiple weights)
• Is WOFF2 format available?
• Is the file size reasonable?

Why Manrope?

At Novexing, we use Manrope. The reasons:

• Wide weight range (200-800)
• High x-height, good readability
• Geometric yet human
• Excellent character support
• Available as a variable font
• Open source (SIL Open Font License)

Typography Scale System

Why Is a Scale Needed?

Random sizes (14px, 17px, 23px, 31px...) create chaos. A consistent system provides visual order.

Popular Scale Ratios

Major Third (1.25):

Base: 16px
-> 20px -> 25px -> 31px -> 39px -> 49px

Perfect Fourth (1.333):

Base: 16px
-> 21px -> 28px -> 38px -> 50px -> 67px

Golden Ratio (1.618):

Base: 16px
-> 26px -> 42px -> 68px -> 110px

Practical Implementation

:root {
  --text-xs: 0.75rem;   /* 12px */
  --text-sm: 0.875rem;  /* 14px */
  --text-base: 1rem;    /* 16px */
  --text-lg: 1.125rem;  /* 18px */
  --text-xl: 1.25rem;   /* 20px */
  --text-2xl: 1.5rem;   /* 24px */
  --text-3xl: 1.875rem; /* 30px */
  --text-4xl: 2.25rem;  /* 36px */
  --text-5xl: 3rem;     /* 48px */
}

Visual Hierarchy

What Is Hierarchy?

The visual order that determines what the eye should see first. Typography is its primary tool.

Hierarchy Tools

1. Size The simplest method. Bigger = more important.

2. Weight Bold headings, regular body text.

3. Color/Contrast Dark headings, light gray secondary text.

4. Position Top and left are read first (in LTR languages).

5. Whitespace Elements with space around them attract attention.

Hierarchy Example

h1 {
  font-size: var(--text-5xl);
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 1rem;
}

.subtitle {
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--text-secondary);
  margin-bottom: 2rem;
}

p {
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--text-primary);
  line-height: 1.6;
}

.caption {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--text-muted);
}

Readability Rules

Line Length (Measure)

Lines that are too long tire the eye. Lines that are too short break the rhythm.

• Ideal: 60-75 characters
• Minimum: 45 characters
• Maximum: 90 characters

p {
  max-width: 65ch; /* ch = character width */
}

Line Height

Cramped lines are unreadable. Lines that are too open lose connection.

• Headings: 1.1 - 1.3
• Body text: 1.5 - 1.7
• Small text: 1.6 - 1.8

h1 { line-height: 1.2; }
p { line-height: 1.6; }
.small { line-height: 1.7; }

Paragraph Spacing

There should be sufficient space between paragraphs.

p + p {
  margin-top: 1.5em;
}

Contrast

WCAG standards:

• Normal text: Minimum 4.5:1 contrast ratio
• Large text (18px+ bold or 24px+): Minimum 3:1

Responsive Typography

Fluid Typography

Font size changes based on viewport width:

h1 {
  font-size: clamp(2rem, 5vw, 4rem);
}

• Minimum: 2rem (32px)
• Preferred: 5vw (5% of viewport)
• Maximum: 4rem (64px)

Breakpoint Approach

h1 {
  font-size: 2rem;
}

@media (min-width: 768px) {
  h1 { font-size: 3rem; }
}

@media (min-width: 1024px) {
  h1 { font-size: 4rem; }
}

Common Mistakes

1. Too Many Fonts

Two fonts are enough. A third is rarely necessary.

2. Inconsistent Scales

Use a system instead of random sizes.

3. Insufficient Contrast

Light gray text might look elegant but it's unreadable.

4. Tight Line Spacing

Can be tight in headings, but never in body text.

5. Lines That Are Too Long

Full-width paragraphs are a nightmare.

Conclusion

Typography is the invisible hero of design. When done right, it goes unnoticed; when done wrong, it ruins everything.

Core principles:

• Use a consistent scale system
• Never sacrifice readability
• Guide with hierarchy
• Fewer fonts, more order