Typography
Typography is one of the most important aspects of your design system to establish early on—think of how much information you'll communicate to users through type. Type could account for 85-90% of any given screen. Typography is often one of the foundational components you will want to get a handle on as it will need to work harmoniously with other elements like icons and UI controls. Your line-heights may even influence many other structural elements like spacing and grids. Here are a few key areas you'll want to think through.
Choosing typefaces
There are many considerations when choosing typefaces, especially for use on-screen. You may also need to work cross-functionally with brand/marketing teams to accommodate your brand's typefaces and determine how they'll fit into your system. Typefaces can be another touchpoint to help subtly convey the right tone and personality throughout your digital experiences. If your brand has a very unique typeface, not ideal for extended reading or small sizes, you may opt to reserve it for display sizes for elements like headlines that are used less frequently. In this case, you may want to pair it with a more legible typeface for the bulk of the typography that will appear at smaller sizes. If performance is a critical goal, many design systems will often leverage system/native font-stacks for different platforms to avoid loading web-fonts (as seen in the Shopify Polaris system). Of course, you may also decide to handle these things depending on whether your system needs to support product or a marketing website (where brand personality may be a higher priority). There are many things to factor into your decision, but its a good idea to find the right balance between personality, performance, and on-screen legibility.
Choosing font-weights and styles
Consider how many weights or variations you'll need to create concise hierarchies in the most complex of screens. Where does it make sense to use a bold version or a condensed one? Keeping this list of font-variations short usually pays off, as loading every weight of an entire font-family may not be very performant (and more costly to license). How often will you use certain styles in your UI? For example, if you have one or two very small applications for an italic variant, consider weighing out the pros and cons of loading an additional webfont vs. leveraging browser rendered italics. Also, look for opportunities where you may be able to achieve the same effect on hierarchy by increasing type size instead of adding additional font-weights.
Font sizes, line-heights, and responsiveness
Once you know the fonts you're working with, this is probably the area you will spend the most time working through. Font sizes and line-heights are closely related, and are usually influenced by, or will influence, some of the underlying grids used in your design. Many designers will start by establishing a base font size (usually the most commonly used size for body copy) and determine a suitable line-height from that. A line-height that is 1.5x font size is a general rule of thumb as a starting point. Many designers will use line-height as a foundation to establishing an underlying baseline grid to which all sizes are mapped to or divide equally into. A systematic approach here will help you define other characteristics of your system like icon sizings, margin, padding and spacing values, and general sizing of UI components.
As you start to work on these font and line-height parings, also think about how many sizes you need, and which sizes will map to particular weights or styles. Make sure you accommodate all of the applications you'll need, factoring in everything from helper-text and form labels, to body copy and subheads, to headlines.
You will also want to define how these sizes work across different device and viewport dimensions. Quite often the biggest variances in scale between devices will happen at the larger display sizes. Your approach may also be influenced by your choice in type units, from px, to rems, ems, and even vh/vw units (a fluid unit that is based on viewport width or height). From a technical perspective, many of these values will get codified into an easy-to-use token or variable system, rather than hard-coded, to make them easier to maintain over time.
Here are a few typography deep-dive guides to get you started:
A framework to create an accessible & harmonious typography system for faster design-dev handoff
Priyanka Godbole walks you through how to audit your typography, determine a base font-size, headline sizes, weights, and line-heights. This 10-step process used for establishing the typographic system for PracticeFusion’s Electronic Health Record is applicable both if you are starting from scratch or if you are refining an existing system.
Frustrated with the existing taxonomy of typography in design systems, Dan Mall explores different approaches toward making typography in design systems more predictable and intuitive. He advocates for canonical presets using a numeric system with each preset including any combination of properties—size, leading, weight—needed in your system. This allows any changes at the preset level to be systematically applied to any component that inherits that style.
Create your design system, part 1: Typography
Typography is arguably the most essential part of any website. When we think about the content of a web page, we think about words. Sebastiano Guerriero breaks down how to think about setting up typographic design systems using CSS globals. From choosing the right font family to creating a modular type scale controlled by variables, this guide walks you through the fundamentals of creating a harmonious set of values for your design system.
Your mathematics professor was right, you should’ve paid more attention in class! Brent Jackson walks us through designing better typographic systems for the web. By rooting your typographic system in math, you can reduce complexity while maintaining a consistent reading experience that scales across device size. The web lives everywhere from your pocket to your giant desktop monitor, which means your type system needs to strike a balance between consistency and flexibility. Brent’s article walks us through the fundamentals of designing CSS type systems for every device.
Tim Brown walks us through an example of using modular scales to build a web experience from type and explains why he uses specific numbers for his scale. This includes choosing particular proportions, using second base numbers to develop a double-stranded modular scale, and applying the scale’s numbers to specific CSS measurements. He also dives into tactics for determining line-height and line spacing.
