Eloquent Design System 04 — Typography

Two things to know about typography is that there are fonts, and there are typefaces. How do they differ? A typeface is one of many varieties of a font. Therefore a font is a collection of typefaces. Montserrat is a font, and the associated typefaces would be Montserrat Light, Montserrat Regular, Montserrat Medium and Montserrat Bold. You get the idea.

Please note: I am using Montserrat simply because it’s a free-to-use font at the time of writing.

Typefaces

What we want to identify, is how many typefaces should be used. We go for 4 typefaces. One that is light, one that is medium, one that is regular and one that is bold. This means we need to load in 4 custom URLs in our Design system.

Font sizes

Like before with spacing, we can define our font sizes with t-shirt sizing. Our smallest font is going to be 12px. Anything smaller would be considered too small and difficult to read. Our designer would define the following sizes.

We will be using rems. 1 rem by default is 16px. So to define 12px as the smallest font-size, we do 0.75rem. Here are our definitions.

FONT_SIZE_XS: 0.75rem
FONT_SIZE_SM: 1rem
FONT_SIZE_MD: 1.25rem
FONT_SIZE_LG: 1.5rem
FONT_SIZE_XL: 1.75rem
FONT_SIZE_XXL: 2rem
FONT_SIZE_XXXL: 2.25rem