The fonts you choose have a high impact on both your brand and your user experience.
Keep legibility in mind as you select the right fonts for your system. Keeping to common system fonts like Helvetica, Times New Roman, or Verdana can be a great shortcut, as they are familiar to the user’s eye. Some companies prefer custom web fonts to better reflect their brand, but pay special attention to how you use them as performance can be affected.
Most design systems include just 2 typefaces: 1 font for body copy, and an additional font for headings that compliments the body font. Most design systems do not have a need for more, unless you have a system that supports multiple brands. It’s best to keep the number low as it’s not only a best practice of typographic design, it also prevents performance issues caused by excessive use of web fonts.
Type scale
When selecting the size to set your type, consider the legibility of the font you’ve chosen. In most cases, a 16px font size works well. It’s the default font size in most browsers, and it’s quite easy to read for most people. We use 16px as it works with the 4-based metrics used by Apple and Google (and is gaining traction as the standard approach). We recommend this as your baseline, though we use it in a relative format like 1rem for CSS-based systems.
You can use a modular scale for larger or smaller font sizes for other elements such as headings. A modular scale is a set of numbers in which you have 1 base number, and a ratio to generate the next number. You keep applying the ratio to the new number to get yet another number.
Vertical Rhythm
Vertical rhythm is one of the most important practices when working with typography. Vertical Rhythm is a concept that originated from print typography and it aims to keep vertical spaces between elements on a page consistent with each other. This is often done with the help of a baseline – A common denominator used to create consistent spaces. We use 16px as baseline because it works with the 4-based metrics used by Apple and Google (and is gaining traction as the standard approach), though we use it in a relative format like 1rem. In web design baseline grids are slightly different because of the way the line-height property works. We often see a baseline grid that looks like this instead:
https://jamonserrano.github.io/plumber-sass/
https://zellwk.com/blog/why-vertical-rhythms/#:~:text=What%20is%20Vertical%20Rhythm%3F,to%20create%20the%20consistent%20spaces.
https://builttoadapt.io/8-point-grid-vertical-rhythm-90d05ad95032
http://v7.carbondesignsystem.com/style/typography