How to Set the First Text Style in New Design

Odd Questions on Design and Typography

Wenting Zhang
Odd Questions
3 min readMay 28, 2018

--

Sometimes asking an odd question helps clarify things for me. Here is one: how to choose the first text style for a design system (without losing all my hair)?

In choosing the first text style in a design system, there are three main decisions to make:
1. Which element is the first text style defined for
2. Which font family should the first text style use
3. What type settings should the first text style use

1. Which element is the first text style defined for
The first text style is the baseline for all other text styles to contrast with. It should be for the most fundamental element in our design system. To figure out which element it is the most fundamental, one measure we can look at is which element is taking up the most real estate in your design. For a blog platform( like medium.com), it could be the paragraph text style; for a video platform ( like youtube.com), it could be the video title.

2. Which font family should the first text style use
In selecting font family for the first text style, the general rule is to look for a neutral, versatile font family with many family members, such as different weights, italic, small-cap, and even different fonts for display usage vs. text usage.

The more font variations there are in the family, the easier you can create contrast and visual hierarchy without adding additional font families to your design system. I am always hesitant to introduce new family into a design system.

Including fewer families in your design system gives a significant advantage on maintainability and scalability. However, it shouldn’t be done at the price of sacrificing contrast. If you are in a position that you have to add a new font family to ensure contrast and visual hierarchy, don’t hesitate either.

3. What type settings should the first text style use
To many people’s surprise, it doesn’t matter very much what specific typesetting is chosen for the first text style. A seemingly big type can look too small when put in different context with different neighbors. Whatever typesetting we choose here really can’t define the look and feel of our design. It is like painting on a blank canvas: don’t overthink and just put down your first stroke. You may start with a really bright red color that you may think is too much; but when you add an even brighter color at the second stroke, it loses its overpowering glow instantly in comparison.

Setting the first text style is like putting down the first stroke in painting. Don’t over think.

The only thing I would say is to make sure the first text style is legible on the target medium, and there is room for change later on because we will revisit it when we start defining the other text styles. The first stroke on painting always gets adjusted when painting the second, third, and following strokes.

--

--

Wenting Zhang
Odd Questions

Hello! I am Wenting Zhang, designer, coder & startup founder based in New York City. Building typogram.co