Just like a non-responsive website can ruin a user’s experience, so can bad typography. The number of digital devices is growing at an exponential rate, yet there are still many websites not using responsive web design, let alone responsive typography. When designing a responsive website, there is a lot to consider. Layout, imagery, target audience and the site’s objective are just the start. But what about responsive typography?
95% of the information on the web is written language. It makes sense that typography can have a big impact on your website. For example, how seriously do you take a website using the Comic Sans font? While your font selection plays a large part in creating great typography, font sizing plays just as an important role. Font sizing helps establish the hierarchy of the content on most websites. Our SEO team talks a lot about the importance of h tags – h1, h2, h3 – and that’s where font sizing comes into play.
Pixels, percentages, ems and rems, or root ems, are some of the unit terminology used in web development to help express font-sizes. Pixels are one of the most common units of measurement on the web. Unlike points and picas, used for printed materials, pixels do not have an exact size. This is due to the fact that pixel sizes change with image resolutions. For example, a font size of 16 pixels (px) might be easier to read on a cell phone than on a desktop computer or TV screen with the same resolution. The difference in readability is due to our faces being closer to the cell phone than a desktop computer or TV screen.
While pixels will remain one of the primary units of measurement on the web, its use has been declining. Thanks to the barrage of new devices, the way we experience and approach text is changing. In fact, responsive websites now require more than a one-size-fits-all approach. Units like ems, percentages and rems can help solve these growing typography inconsistencies.
Em is a responsive unit using an element’s current parent or base font size to determine what size to display an element. The base font size is either set by a browser or a web developer. Most browsers have a default font size of 16 pixels. So, without any custom CSS, 1em is usually equivalent to 16px. If you want to include a responsive headline similar to 32px, you would divide 32px by the base font size (16px) to determine its em value. You would then have a headline with a responsive type size of 2ems.
Using media queries, filters applied to CSS style to make a site responsive, you can set breakpoints in your code to help with font size. The breakpoints will change the base font size for the various screen sizes. For example, if you were to change your base font size to 18 pixels, for larger screens, 1em would be now be equivalent to 18 pixels and 2ems would now be equivalent to 36 pixels. Once you convert all font sizes to ems, changing the base font size should proportionally change all other set font sizes like p, h1, h2, h3, spans, etc.
A website’s intended use and target audience should dictate the need for responsive typography. While it might add more time to the development process, responsive typography can be beneficial to the user experience of a website. Media queries and responsive typography help decrease unnecessary CSS and improve your site’s performance.
