Typography in Design Systems

Choose Fonts, Set a Hierarchy, and Integrate with Components

Nathan Curtis
May 5, 2019 · 12 min read
Image for post
Image for post

Fonts

Image for post
Image for post
Type specimens across three weights of the Barlow font


Typography Scale & Hierarchy

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

Image for post
Image for post
Text color across backgrounds

Image for post
Image for post
Image for post
Image for post
Eyebrow heading

Image for post
Image for post
Heading levels distinct, yet using same HTML tag

Image for post
Image for post
Cropped line height vs text elements that include impacts of line height

Image for post
Image for post
@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

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

.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;
}


Image for post
Image for post
The Header Component from Morningstar Design System

Image for post
Image for post
Article component’s basic elements, including spacing embedded

EightShapes

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

Thanks to James Melzer

Nathan Curtis

Written by

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

EightShapes

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

Nathan Curtis

Written by

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

EightShapes

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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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