Sitemap
EightShapes

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

Follow publication

Typography in Design Systems

12 min readMay 5, 2019

--

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
EightShapes

Published in EightShapes

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

Nathan Curtis
Nathan Curtis

Written by Nathan Curtis

Design systems consultant contributing to the field through the specs plugin, writing and workshops. VT & @uchicago grad.

Responses (16)