EightShapes
Published in

EightShapes

Typography in Design Systems

Choose Fonts, Set a Hierarchy, and Integrate with Components

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

--

--

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nathan Curtis

Founded UX firm @eightshapes, contributing to the design systems field through consulting and workshops. VT & @uchicago grad.