Check out a free preview of the full Design Systems with React & Storybook course

The "Typescale Solution" Lesson is part of the full, Design Systems with React & Storybook course featured in this preview video. Here's what you'd learn in this lesson:

Emma demonstrates how to add typography and typescales to the project started in the previous section, and answers questions about the use of different fonts within the same project.

Preview
Close

Transcript from the "Typescale Solution" Lesson

[00:00:00]
>> What is your view on combining different typographies for headers versus body text?
>> Yeah, absolutely. That's a great question. So should you have more than one font family? The answer is yeah, you can absolutely have more than one. I wouldn't do more than three maximum. Typically, what you would do is see combinations of a sans serif header with a serif font.

[00:00:20]
For example, you want them to be differentiated enough. I'm gonna go back to fonts.google.com and show you that if you click on a font, they typically will do pairings, I forget where they put it. If you select it, I think they do suggest the pairings with this font.

[00:00:38]
I forget where it is. But Google has an option to actually check out different font family pairings. So yeah, you would pair maybe a sans serif header with a serif font or a serif header with a sans serif body text and maybe some monospace for code snippets. But never pick more than three.

[00:00:55]
It's going to be a little hard for your users.
>> And at what point on the H1 through H5 do all the headers, are they all gonna be consistent or, as they go down, do you have a breaking point where this isn't considered a header for differentiation? Would I go H1 through H5 as a serif font and then just my paragraph, helper text and copyright as a sans serif?

[00:01:19]
>> Yeah, any body text is going to be probably all the same font family, so you need helper text, legal text, paragraph text. Any headers, so H1 through H5 or H6, as someone pointed out in the chat. I only did through H5 cuz that's all that type scale generator gave me, but you could totally have another one.

[00:01:35]
Keep all your headers the same font family, keep all of your body and copy text the same. Yeah, great question.
>> Thank you.
>> Awesome, so yeah, I don't know where the font pairing is on Google, but it definitely exists, I promise. You should go check that out at some point when.

[00:01:52]
I can link that, I'll link that in my teacher notes.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now