Table of Contents
Creating responsive typography is a hard thing to do and not many web designers rather don’t talk about it at all. In order to provide the best experience for your users as possible, you better not avoid this subject. Let’s divide it into smaller parts and bring some more clarity into it.
Choose the units
First thing you have to do is to think about what units of measurement will you use. Available and most used units are pixels, ems, rems and the newest viewport units – vw, vh, vmin and vmax. Important to consider is also browser support for individual units. Pixels and ems are safe to use and there is nothing to be afraid of. Rems are little bit more problematic. IE 8 and Opera Mini don’t support them at all. According to information on caniuse, in IE 9 and 10 rem units are not working in font shorthand, line-height and :before and :after pseudo elements. Situation of viewport units are worse. IE 8, Opera Mini, Safari 5 and older versions of Android browser offer no support. IE 9-11 have partial support, however there are many issues across browsers. For more information about browser support visit caniuse.
In example code, I will use pixels to set the font size for body element and then em units for setting size for individual text elements. To start let’s set the font-size for body to 16px. This value will be consistent for all resolutions, so no more code is needed.
CSS:
body {
font-size: 16px;
}
Set the media queries
Now we are getting to more complex part. We will set the font size for typography elements like as h1, h2, h3, h4 and p. For every element we will also include media queries for desktop, tablets and mobile. Size will be set in ems that is now set to 16 pixels (according to body). We will use mobile first approach, therefore let’s set the values for mobile first and then create appropriate media queries. Size of paragraph and h4 will remain same across all breakpoints so they will be defined only in mobile (default) layout to avoid repetition.
CSS:
/*Typography*/
/*Mobile*/
h1 {
font-size: 2em;/*32px*/
}
h2 {
font-size: 1.625em;/*26px*/
}
h3 {
font-size: 1.375em;/*22px*/
}
h4 {
font-size: 1.125em;/*18px*/
}
p {
font-size: 1em;
}
/*Tablet - 481px and more*/
@media screen and (min-width: 30.0625em) {
h1 {
font-size: 2.5em;/*40px*/
}
h2 {
font-size: 2em;/*32px*/
}
h3 {
font-size: 1.5em;/*24px*/
}
}
/*Desktop - 769px and more*/
@media screen and (min-width: 48.0625em) {
h1 {
font-size: 3em;/*48px*/
}
h2 {
font-size: 2.25em;/*36px*/
}
h3 {
font-size: 1.75em;/*28px*/
}
}
– Note: using rem units is better because they are derived directly from root (“r” in rem) element of the page. Ems are influenced by their parent element (if it has different font-size than body). However, if you will not change font-size later on, there is nothing to worry about.
Don’t forget the width
Before we close this, we also have to consider the width of page. One rule applied to typography is Bringhurst’s. This rule says that 66 characters per line is the best for keeping maximum clarity, readability and proportion in print design. To transfer it to the web, amount of character should be in range from 60 to 75 characters per line for desktop. For smaller resolution, like mobile, something between 35 and 40 characters is good choice.
Keep those things in mind while designing the layout of website. On mobile you have less space available and it is better to focus on readability instead of squeezing as much text as you can on one line.
Summary
Typography on web is tricky subject to deal with and can be very difficult if you want to make it responsive. However, if you choose the units, media queries and widths cautiously, you will probably avoid most of the issues. You can also try JavaScript polyfills like FitText.js or FlowType.js and set it appropriately to take care of all necessary steps to get responsive experience.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
