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
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
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:
The breakpoints are set in
ems for proper scaling when user zooms in the page.
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.
And the last step of our setup is to globally set the font sizes in
rems for basic typography elements like paragraphs and headings.
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.