Basic Responsive Typography Solution I Often Use

Published Oct 9, 2016 by Marta Sztybor

Typography for Web and, specifically, responsive typography is a very broad topic. To be honest, I haven’t mastered yet any bulletproof responsive typography technique. I usually work with web applications, which mostly don’t include huge chunks of text. In such cases the solution described in this blogpost can be sufficient.

But if you are looking for a verbose, extensive article presenting various aspects of (responsive) typography, jump straight to further reading. I recommended a list of articles which can help you to learn the aspects of web typography.

Basic responsive typography with rems

Solution described below can be a good starting point to learn more sophisticated techniques. Here we will use a combination of media queries and using rems as our sizing units for fonts and measure.

The first step is to set a base font size on the document root element. We will be using rems, so to make maths simpler we’re going to set it as 10px.

html {
  font-size: 10px; /* 1rem = 10px */
}

We will be also implementing a mobile first approach, so the font size above will be applied for smallest screens. The next step is to set root font sizes for a couple of breakpoints for larger screens:

html {
  font-size: 10px;
}

@media screen and (min-width: 48em) {
  html {
    font-size: 12px;
  }
}

@media screen and (min-width: 62em) {
  html {
    font-size: 14px;
  }
}

@media screen and (min-width: 75em) {
  html {
    font-size: 16px;
  }
}

The breakpoints are set in ems for proper scaling when user zooms in the page.

The base font-size: 10px is too small even for the smallest screens, so we need to set a font size for body, which will cascade for all elements. I picked 1.4rem, which equals 14px for small screens and will scale up according to breakpoints shown above.

body {
  font: normal 1.4rem/1.45 Arial, sans-serif;
}

And the last step of our setup is to globally set the font sizes in rems for basic typography elements like paragraphs and headings.

p {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

h1, h2, h3, h4 {
  line-height: 1.2;
  margin: 1.5rem 0;
}

h1 {
  font-size: 2.25rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.8rem;
}

h4 {
  font-size: 1.6rem;
}
Responsive typography setup demo: check it out on Codepen
Responsive typography setup demo

Further reading

Solution described above doesn’t take into account things like vertical rhythm or responsive headlines. Here is a list of articles which can help you understand such aspects and learn how to implement them into your projects.