Typography

Let's explore how you can select fonts for your website and how you can make them responsive.

We'll cover the following

Use system font stack

The standard advice is to use either the system font stack - built-in device fonts that are faster because no download is needed - or a maximum of two custom fonts - one for headers and one for body text. Canva’s font combinations app and Google Fonts can suggest pairings for you.

Pick color based on personality

Font selection is a rabbit hole and a discipline unto itself; just remember that the high-level goal is to pick based on the personality you are trying to convey:

Don’t forget that you can also make your fonts responsive, using the font-size: calc(1rem + 2px + ((100vw - 550px) / 250)) trick.

Level up your interview prep. Join Educative to access 80+ hands-on prep courses.