Design Systems

Typography
  • * Typography
  • *Scale
  • * Line height
  • * fonts
  • * Responsive
  • * Typography
  • *Scale
  • * Line height
  • * fonts

I analyzed 40+ Systems!

In my recent study of typography across 44 design systems, I identified common patterns and distilled them into nine key insights. These insights address frequent questions about

fonts
organization
naming
type_scale
size
line_height
responsiveness

Overview

I began by focusing on systems built in Figma to quickly extract and study text styles. Using resources from designsystems.com and designsystemsforfigma.com, I assumed these collections contained the top design systems.

Data Collection

I created a spreadsheet on Google Sheet to map out standard variables such as text style name, font name, font weight, etc. I extracted 127 text styles and sorted, grouped, and created charts to look for common patterns.

Insights

Fonts

What are the most common fonts used by these systems? Here’s a bar chart illustrating this. The x-axis displays all fonts, while the y-axis shows the number of design systems using each font. These top fonts are either native fonts or Google fonts, likely chosen for their wide availability and performance benefits.

Five out of 44 (11.36%) used

Roboto

seven out of forty-four systems (15.9%) used

Inter

SF Pro Display

SF Pro Text

Text Syles

How are text styles commonly organized? I identified four levels in building the typographic hierarchy, each with a specific role and font size range:
1.Display: Largest size, made to stand out using striking arrangements or larger, bold, or italic faces.
2.Heading: Creates titles for sections, helping users quickly navigate.
3.Body: Contains the main content, including links.
4.Label: Also known as subtitles, captions, or small text, supporting body text.
On average, there are four display text styles, six heading text styles, three body text styles, and three label text styles.

Naming Conventions

Text styles often follow a pattern consisting of a base and up to two modifiers. For example, “Display Extra Large” where “Display” is the base and “Extra Large” is the modifier.

Common bases include:
Typographic levels (e.g., Display, Heading)
HTML tags (e.g., H1, H2)
Token approaches (e.g., Font Size 1)
T-shirt sizes (e.g., Small, Medium)
Modifiers include:
Font weight (e.g., Bold)
Numerals (e.g., 100-900)
Text emphasis (e.g., Italic)
Context (e.g., Link)
Letter case (e.g., Uppercase)
Device size (e.g., Mobile)
The most common naming convention observed was typographic level, t-shirt size, and font-weight.

Type Scales

What are the most common type scale ratios?
A type scale can be thought of as a ramp going from the smallest to the largest font size, calculated by multiplying each size increment by a ratio. The most common type scale ratio was the major second (75%), followed by minor third (16%), major third (4.5%), and minor second (4.5%).

Font Sizes

Common font sizes were identified for each level:

Display: 36, 42, 48, 60, 72, 78, 96
Heading: 14, 16, 20, 24, 28, 32, 40, 48
Body: 12, 13, 14, 16, 18
Label: 10, 12, 13, 14

Line Height

Figma allows setting line heights using percentages or specific values. For systems that set line heights with specific values, they often use multiples of 4. For this analysis, I focused on line height percentages:
Display: Average 120.81%
Heading: Average 132.36%
Body: Average 147%

Label: Average 141.76%

Generally, larger font sizes have lower line heights, while smaller sizes have higher line heights for better legibility.

Letter Spacing

Letter spacing values were provided in percentages:

Display: -2.5% to -1%

Heading: -2% to 0%

Body: 0% to 1%

Label: 0% to 3%

Larger font sizes have tighter spacing, while smaller sizes have looser spacing.

Responsive Design

How do these systems scale text styles for responsive design? Three methods were identified:

1. Separate Text Style Groups per Breakpoint Range: Scale down all text styles for each breakpoint range by adjusting the base size in the type scale.

2. Separate Text Style Groups for Headings per Breakpoint Range**: Scale down all heading text styles by one position in the type scale for smaller breakpoint ranges.

3. Scaling Down Largest Headings per Breakpoint Range: Scale down headings 1-4 for smaller breakpoint ranges, keeping headings 5-6 unchanged.