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.



updated about 18 hours 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
7 days 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); }

updated about 1 month 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)

about 1 month ago

Here is the correct link to fontpair

Something to say?

Become a Pro