Size in Design Systems

Tuning Type & Space With an Eye on Height Per Component

Nathan Curtis
Apr 26 · 11 min read

Approaching Density With Sizes That Unify Height

Size Resulting from Space and Type
Inconsistent Component Height

Sizing Components, Step-by-Step

1. Identify and Name the Size You Need


2. Identify Components To Unify Height Across Sizes

Common components across which height is unified

3. Start with Button or Input

Button by size

4. Unify Typography

Button and Input with associated mixins used for typography

5. Unify Space

Button and Input with associated space tokens
Grid of components by size

6. Extend and Override the Model Per Component, As Needed

Overrides to default spacing models to account for borders and adjacent elements

Lessons Learned

Implementing Component by Component Leads to Inconsistency

Same Size Name, Different Size Outcomes
Component naming inconsistency — Medium and Small — for the same visual size
Component availability unpredictability or incompleteness

Unify Size Holistically in a Single Pass


Not Every Component Needs Every Size

Medium and Large Alert (Small Unnecessary)
Small and Medium Tag (Large Unnecessary)

Avoid Using “Sizes” for Single-Dimension Options Like Width

Modals available at three discrete widths
Popovers available at two discrete widths

Type Hierarchy ≠ Size. Relate Them, Per Component Size

One heading set applied across component sizes
Heading level sets per component size

Mix and Match Sizes During Composition

Mapping icon size to button size
While small and large buttons have a fixed icon, the medium button offers choice

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