Styling Typography


Updated Sep 16th, 2022

When building out styles for typographical elements, (headings, paragraphs, list items, etc.)

Goals & Basics

Created a handful of different styles with as little custom CSS as possible. Use CSS variables and relative units to make any future changes simpler.

H1 largest and H6 Smallest

Things to Watch Out For

Different fonts have different natural sizes. Swapping a font may result in more work than you would think. This is especially true when swapping say generic for headline, or monospace for san-serif. This includes sometimes a margin-bottom built into the font.

Markdown Specific

A simple markdown package may not have the ability to add class-names and hence, color variation. For this se

Watch Others

See how libraries accomplish this. Style guides.

Like other good design, you know when you see it.


As usual, there is a lot of depth to this topics See CSS Tricks article here.

Liked this article here