Typography in Design Systems

Choose Fonts, Set a Hierarchy, and Integrate with Components

Nathan Curtis
May 5 · 12 min read

Fonts

Families, Weights, and Fallbacks

Type specimens across three weights of the Barlow font

Getting the Fonts, Whether by Download, Link, or CDN


Typography Scale & Hierarchy

Body Text

Small, medium and large text sizes
Contrasting a Lead paragraph from medium or large text

Text Color

Text color across backgrounds

Heading Levels and Special Cases

Eyebrow heading

Heading Levels ≠ H# Tags

Heading levels distinct, yet using same HTML tag

Line Height & Other Properties

Cropped line height vs text elements that include impacts of line height

Responsive Typography

@mixin sys-heading-level-2($responsive: false);
<div class="sys-header sys-header--responsive">
<h2 class"sys-header__title">
Heading
</h2>
<div class="sys-header__actions">...</div>
</div>

Relating Typography to Components

If Tempted to Reset Pages, Control What You Can Control

.system-button {
@include component-font-reset();
...

Tools for Adopters to Make Components Themselves

.my-custom-component-title {
@include system-level-3-heading();
}
.my-custom-component-title {
font-size: 24px;
font-family: "Barlow", ...;
font-style: normal;
font-weight: "Semibold";
line-height: 1.2;
}

UI Typography ≠ Articles (former lacks spacing)


The Header Component

The Header Component from Morningstar Design System

The Article Component, Including Line Length & Element Pairings

Article component’s basic elements, including spacing embedded

EightShapes

A collection of stories, studies, and deep thinking from EightShapes

Thanks to James Melzer.

Nathan Curtis

Written by

Founder of UX firm @eightshapes. Speaker. Writer. Fan of Arsenal, Hokies. Cyclist & runner. Father & husband. VT & @uchicago grad.

EightShapes

A collection of stories, studies, and deep thinking from EightShapes