Skip to content
card background pattern
Level 1

Modern CSS Design Systems

Unlock Full Course

$49.99 $29.99




In this video, we will take a look at typography. Using the links below, we can create the perfect font pairs and ensure proper font sizing before creating css variables for them.



User photo avatar
updated 3 months ago

Personally, I like "--fsh1... --fsh2" where fs is "font size". Though this namespacing can also get overwhelming to look at and to type. Normally I'd do "fsH1, fsH2", but with "h1/h2" not being full words, the camel-casing feels weird. Not totally sure how I feel about this until I use it for awhile and get frustrated lol.

Copy Pastafarian
3 months ago

--h1: 3.052em; --h2: 2.441em; --h3: 1.953em; --h4: 1.563em; --h5: 1.25em; --smallText: 0.8em;

h1 { margin-top: 0; font-size: var(--h1); }

h2 { font-size: var(--h2); }

h3 { font-size: var(--h3); }

h4 { font-size: var(--h4); }

h5 { font-size: var(--h5);}

small, .text_small { font-size: var(--smallText); }

User photo avatar
updated 4 months ago

It might be a plug in, but I think it's native to VS Code. Emmet can lorem ipsum all over your page by typing 'lorem' and hitting tab.

edit: (not actually all over your page. Emmet does exert self control and keep it to the element your cursor is in)

4 months ago

Here is the correct link to fontpair

Something to say?

Become a Pro