The Lazy Person’s Guide to Responsive Typography

Typography is arguably the most important part of any website’s design. A huge header on a blank white page might look like a minimalist’s dream come true, but what happens when we start start shrinking our page for smaller and smaller devices?

Hnnggghh!!! Everything breaks and looks terrible.

This is why we need responsive typography. We need typography that will adjust itself to shrink at breakpoints. But nobody in their right mind wants to go through all the trouble of resetting all of their baseline styles for each and every typographic element on their page.

Luckily we can change the size of the html selector so all of its descendants inherit a relatively smaller size.

Push it off the walls a bit by padding our html selector, and we’ll reset the margin-topon all of our typographic elements because it’s really annoying when the top of your h1 tag is about an inch below an image it’s supposed to sit next to. Everything else will remain at the browser default for now.

Voila!

There you have it, a responsive typography boilerplate in five minutes. All the typographic elements are sized in relation to the html element, so by having a smaller html font-size on smaller screens we reduce everything proportionally.