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.

For Example

Let’s start with some sample kitchen sink markup:

<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>

<p>
  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.
</p>

<ul>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
</ul>

<ol>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
</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:

html
  padding: 2rem

h1, h2, h3, h4, h5, h6, p, ul, ol
  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.

html
  padding: 2rem
  font-size: 24px
  font-weight: 100
  line-height: 1.5

h1, h2, h3, h4, h5, h6, p, ul, ol
  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:

html
  padding: 2rem
  font-size: 24px
  font-weight: 100
  line-height: 1.5

h1, h2, h3, h4, h5, h6, p, ul, ol
  margin-top: 0
  margin-bottom: 1rem

h1, h2, h3, h4, h5, h6
  margin-bottom: .5rem
  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:

html
  padding: 2rem
  font-size: 24px
  font-weight: 100
  line-height: 1.5
  @media (max-width: 900px)
    font-size: 20px
  @media (max-width: 500px)
    font-size: 14px

h1, h2, h3, h4, h5, h6, p, ul, ol
  margin-top: 0
  margin-bottom: 1rem

h1, h2, h3, h4, h5, h6
  margin-bottom: .5rem
  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.


Fullscreen demo on CodePen.

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.

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.

For Example

Let’s start with some sample kitchen sink markup:

<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>

<p>
  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.
</p>

<ul>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
</ul>

<ol>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
</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:

html
  padding: 2rem

h1, h2, h3, h4, h5, h6, p, ul, ol
  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.

html
  padding: 2rem
  font-size: 24px
  font-weight: 100
  line-height: 1.5

h1, h2, h3, h4, h5, h6, p, ul, ol
  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:

html
  padding: 2rem
  font-size: 24px
  font-weight: 100
  line-height: 1.5

h1, h2, h3, h4, h5, h6, p, ul, ol
  margin-top: 0
  margin-bottom: 1rem

h1, h2, h3, h4, h5, h6
  margin-bottom: .5rem
  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:

html
  padding: 2rem
  font-size: 24px
  font-weight: 100
  line-height: 1.5
  @media (max-width: 900px)
    font-size: 20px
  @media (max-width: 500px)
    font-size: 14px

h1, h2, h3, h4, h5, h6, p, ul, ol
  margin-top: 0
  margin-bottom: 1rem

h1, h2, h3, h4, h5, h6
  margin-bottom: .5rem
  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.


Fullscreen demo on CodePen.

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.