Typography is the voice of your website. Getting the size, weight, and spacing right is non-negotiable for superior user experience (UX). This guide breaks down the essential rules for defining your type scale and ensuring maximum readability across all devices.
The Core Type Scale (Desktop Baseline)
A strong hierarchy starts with well-defined base sizes. For a modern, high-impact design, consider the following baseline pixel values:
- H1 (Primary Headline): 80px
- H2: 56px
- H3: 32px
- Body Text (Large): 18px
- Body Text (Small): 16px
Mastering Responsiveness: Scaling for All Devices
Your type must fluidly adapt to desktop, tablet, and mobile screens. While smaller text sizes may remain constant, larger headings must scale down to prevent overwhelming the mobile viewport.
Weight, Line-Height, and Line-Length: The Trifecta of Readability
Size is only one part of the equation. To optimize for reading comfort, you must control the surrounding elements:
- Font Weight:
- Body Text (16px–20px): Use regular or medium weight for standard paragraphs.
- Body Accent/Headings: Use semibold or bold weights to establish contrast, highlight keywords, or define headings (24px and up).
- Line-Height (Leading): This is crucial for guiding the eye from one line to the next.
- Body Text (16px–20px): Set line-height between 140% and 175%.
- Headings (24px+): Use a tighter line-height between 100% and 120%.
- Line-Length: The optimal line length for body text is generally considered to be 50 to 60 characters per line. This minimizes eye strain and maximizes reading speed.
Comments