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.
For Example
Let’s start with some sample kitchen sink markup:
1 |
<h1>Header 1</h1> |
2 |
<h2>Header 2</h2> |
3 |
<h3>Header 3</h3> |
4 |
<h4>Header 4</h4> |
5 |
<h5>Header 5</h5> |
6 |
<h6>Header 6</h6> |
7 |
|
8 |
<p>
|
9 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit iusto adipisci, cupiditate animi, itaque qui aspernatur vel corrupti labore minima, excepturi ab, fuga rem dolores. Ratione sunt autem iusto aliquid. |
10 |
</p>
|
11 |
|
12 |
<ul>
|
13 |
<li>List Item 1</li> |
14 |
<li>List Item 2</li> |
15 |
<li>List Item 3</li> |
16 |
</ul>
|
17 |
|
18 |
<ol>
|
19 |
<li>List Item 1</li> |
20 |
<li>List Item 2</li> |
21 |
<li>List Item 3</li> |
22 |
</ol>
|
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.
We’re using Stylus here because, as you probably know, I’m a huge fan of Stylus’ terse syntax:
1 |
html
|
2 |
padding: 2rem |
3 |
|
4 |
h1, h2, h3, h4, h5, h6, p, ul, ol |
5 |
margin-top: 0 |
Good start, but huge text for huge text and light fonts are a really nice trend going around right now, so let’s add that. We’ll also throw in some line-height to make sure our paragraphs look nice.
1 |
html
|
2 |
padding: 2rem |
3 |
font-size: 24px |
4 |
font-weight: 100 |
5 |
line-height: 1.5 |
6 |
|
7 |
h1, h2, h3, h4, h5, h6, p, ul, ol |
8 |
margin-top: 0 |
Line-height Fix
But now our elements have a huge margin-bottom on them and our headers have a hugeline-height as well. Luckily this is a quick fix:
1 |
html
|
2 |
padding: 2rem |
3 |
font-size: 24px |
4 |
font-weight: 100 |
5 |
line-height: 1.5 |
6 |
|
7 |
h1, h2, h3, h4, h5, h6, p, ul, ol |
8 |
margin-top: 0 |
9 |
margin-bottom: 1rem |
10 |
|
11 |
h1, h2, h3, h4, h5, h6 |
12 |
margin-bottom: .5rem |
13 |
line-height: 1.1 |
There! Our lazy typography is complete. We missed quite a few typographic elements (blockquotes, definition lists, etc.), but feel free to add these to the boilerplate as you encounter them.
Smaller Viewport Woes
Now, again, what happens when we contract our viewport? Our typography looks terrible. It’s difficult to read and will require the user to swipe several times just to read a paragraph.
So let’s fix that by adding some media queries and changing our html selector’s font-size at each breakpoint:
1 |
html
|
2 |
padding: 2rem |
3 |
font-size: 24px |
4 |
font-weight: 100 |
5 |
line-height: 1.5 |
6 |
@media (max-width: 900px) |
7 |
font-size: 20px |
8 |
@media (max-width: 500px) |
9 |
font-size: 14px |
10 |
|
11 |
h1, h2, h3, h4, h5, h6, p, ul, ol |
12 |
margin-top: 0 |
13 |
margin-bottom: 1rem |
14 |
|
15 |
h1, h2, h3, h4, h5, h6 |
16 |
margin-bottom: .5rem |
17 |
line-height: 1.1 |
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.
Further Reading
If you’re particularly interested in really thorough responsive typography, and want to tailor this boilerplate in more detail I highly recommend A More Modern Scale for Web Typography by Jason Pamental.
