Want a strong design system to help you speed up your workflow, improve consistency and allow you to get straight to the creative bit?
Check out simplekits!

This series is aimed to help you create your own adaptable design system. One which you are able to create, edit and tweak as you like to fit your own needs moving forward!

However, I know design systems can be a large investment and be a bit daunting. So, if you want to skip the setup and use a robust design system right away, visit simplekits.co and give my very own design system a go!

So here are the areas we will cover (I will update the links as they get posted)

1. Color Styles
2. Typography Styles (This one)
3. Complex Buttons
4. Conditional Inputs
5. Interchangeable Dropdowns
6. Responsive Cards & Modals

I have made a Figma File for you to duplicate and use/follow along if you would rather that than create from scratch

This part of the series talks about how we go about choosing our Fonts, weights, and sizes as well as how we can set them up in Figma so that we can easily use and update our fonts across all future projects.

Let’s get started.

Rules For Picking Your Fonts

Many will refer to this as one of the hardest parts when creating a design system. There are so many fonts to choose from, with subtle details that can change the entire feel of the system itself.

Keepin’ it simple.

The approach I typically take when creating an adaptive design system is to keep it as neutral as possible — meaning, something trendy and nice-looking, but not something with too much unique flair.

Keeping it generic makes it easier to modify it when the time comes, as you are not working around the more unique choices some fonts make.

But obviously, choose one that fits the style you want your design system to have as its default.

When I am looking for generic, but well-received fonts, I typically browse Google Fonts for their most popular/trendy and pick one from there.

Number of families

The rule here is, don’t overdo it. It is usually good practice to limit your designs to two fonts max. But, you can get away with just one font too, depending on how you use hierarchy within your system.

If you decide upon two fonts, pick the one you plan to use as the “main” font. Usually titles headers, etc. And the other to be “supporting” and “body” fonts. Ones that compliment the main font well, but are also easy to read at smaller levels. Think of it as one for style, one for function.

For our system, I am going to go with one Font Family (Open Sans) to keep things simple.

Setting Your Type Styles

As I mentioned in Part One, I use Figma so some of this section will have references to how I use Figma to set up my styles, but the sizing, naming, and other conventions can be used anywhere you like, but may have different ways about setting them up.

Type Scales

When it comes to design, there are so many subtle decisions that go unnoticed but play an essential role. One of these subtle decisions is the scaling rhythm of your font sizes.

To figure out this scale, you would typically start at a base size (usually 16px, 17px, or 18px and then multiply each “step” by X.

For example, if we wanted to follow the golden ratio we would multiply our 16px base value by 1.618, and that would be our next step, then times that by 1.618 again to get our next step, and so on.

However, I am not much of a math guy and prefer to use various tools to do this for me, as well as explore my options. Type-Scale is great for single-font systems, and archetype is perfect for those who decide to go with two font families.

Once you have your scales selected, apply those settings to some lines of text within your design file. (You may find you need to round up the numbers, decimals are a no-go in most cases!) Like so -

It’s good practice to use either a sentence that uses every letter of the alphabet (also known as a pangram), or if you so fancy, a funny one liner.

I typically have a set of headers ranging from around 10px — 12px up to the maximum size I want to use. Then, I also make a set of body text, which is usually 12px, 14px, 16px, 18px, but can sometimes vary.

Font Settings

At this point, it is worth messing around a little bit with your font settings. Consider things such as Paragraph spacing, Line height, and letter spacing. These settings will likely be different for each font size as well as font “use”.

For example, my header's line-height is usually pretty close to the default font line height. However, my body line height is generally set to around 150–170%, as it allows for easy reading and less eye strain for users.

A good way to test line height is simply placeholder text (usually I settle for Lorem Ipsum) so that there is enough content to test line heights & paragraph spacing.

Font Weights

Now that your set of default font styles are ready, you may want to save them into the Figma font style tool. However, I would first take the time to make duplicates with varying font weights.

To do this, copy the list of various sizes you already made two more times, and apply a different weight to each column. If you have more than 3, find a suitable medium between the boldest you would like, and the lightest you would like.

In this example, I have Regular, Semibold, and Bold.

Usually I would neaten up my typography pages, and order them by “Use” (Headers and Body) and then into groups by size. Largest at the top, to smallest. But for simplicity, I wanted to keep them separate to see how to quickly create duplicates.

Setting up Figma Styles

The time has come to turn these random lines of type into a powerful tool within Figma (or your preferred tool).

First, we need to settle on a naming convention. This choice will impact how users will browse and interact with your fonts later down the line.

For example, we can group by weight first, and then size, resulting in something more like this -

Or, we can group by size first, and then by weight. Meaning our Font Styles List will look something like this-

This choice is totally up to you. The one rule I stick to and suggest you do too, is to the first group by their role. Meaning are they a header text, or a body text? This is important because, as you may have noticed when adding font settings, your body may have a more considerable line-height, and that would likely not be used the same way as a header.

So, if you would like to group by weight, you would click the “plus” icon upon the font styles panel to create a new style, then name your new style something like “Header/16px/Bold”.

If you wanted to group by size, it would instead be “Header/Bold/16px”. The 16px would be swapped for the size of your currently selected font.

But wait, there is an easier way than doing this one by one!

There are some fantastic Figma Plugins to speed this process up. I would suggest seeing which one works best for your approach!

Managing & Updating

That’s it; you have set up a robust and adaptable typography system within Figma!

When using any text within your design file, make sure you attach a text style to it, otherwise when it comes time to update your fonts in a new project, you will be left with half updating and those that have no style, staying the same. So, be consistent with your text style usage!

On that note, updating your type styles is easy; you just “edit” the styles you previously made. However, this is a long and tedious task. Instead, we rely again on some great Figma Plugins to speed this up!

My go-to for the task of updating my Text Styles is Batch Styler. It lets you select all your fonts (or just the ones you want) and apply new fonts, line heights, letter spacing, weights, and anything else you need in one fell swoop.

Wrapping Up and Next Steps

Next post, we will cover our first steps into creating reusable components with the creation of buttons. But, not just simple buttons, we will explore the various ways to set up buttons, from fast but straightforward, to complex but consistent. Both have a time and place within any design system!

Want a design system without the hassle of creating ever single component yourself? Then check out simplekits, a Design System Kit made with all the core components you could need for any project.

If you liked this post, please give it a share and follow me for more posts just like this one.

Other Bits & Bobs

• Stop by and say hi on Twitter
• Check out my products & design work
• Sign up to heeed, a website feedback community.