With more than half of the web traffic (51.89%) coming from smartphones in the second quarter of 2018, having a responsive web design has become a necessity. The three most critical elements of responsive web design are a fluid grid, flexible images and media, and adjustable text. However, web designers often tend to overlook the “adjustable text” element, which is also referred to as “responsive web typography.”
As most of any given website consists of written text, responsive web typography is essentially the foundation for enabling a user-friendly browsing experience. However, it is challenging to create a responsive text. You have to consider various factors including font size, line spacing, line width, and readability, among others. You have to conceptualize and plan every detail carefully and patiently before starting off with the design. Fortunately, if you adhere to a few essential rules, you can create readable, adjustable, and well-thought-out text efficiently.
Here are four responsive web typography rules that you mustn’t ignore as a designer.
1) Choosing the Most Suitable Font Size
Usually, most web designers will tell you that font size needs to be 16 pixels for mobile websites. However, you have to consider a lot more than just the pixels. You need to use the right scale for different screen sizes so as not to compromise the readability. Readability, in turn, not only depends on the screen size but also the distance between the screen and the reader.
As the screen size reduces the distance also declines. For example, a desktop monitor is usually located further away from the reader, while people hold their smartphones a lot closer when reading. Naturally, smaller letters will be easier to read at a closer distance and vice versa. That’s why you can start off with a 16px font size for mobiles, but you need 20 to 22px fonts on full-size monitors and laptops.
You should create a set of fonts for all potential screen sizes you have in mind considering your target audience. This planning will help you streamline your typography process and avoid wasting time and efforts. Once you have finalized the most appropriate set of fonts, set your base font size to 100%. You can scale up the remaining fonts accordingly.
2) Consider the Width of the Text
When it comes to responsive web typography, text spacing is as critical as the font size. The length of a line shouldn’t be too short or too long as it will affect readability adversely. Usually, for a smartphone screen, the width of the text (also called “measure”), is considered between 50 and 75 characters per line.
Keeping it shorter will force your readers to scroll down more frequently while keeping it lingering will affect readability. Either way, it will cost you dearly. According to WCAG’s guidelines, it should not be more than 80 characters or glyphs (40 for Chinese, Japanese, and Korean).
Naturally, a mobile screen will need a shorter measure. You can have relatively long lines of text on a desktop or a laptop though. Still, you should set an upper limit to the number of characters in a line on large screens just like the small ones. You will also need to balance the font size as the width increases.
It will avoid affecting the readability. For example, Klient Boost uses simple text that scales up and adjusts the line width as the screen size changes. The number of characters isn’t overpowering at all. Thus, the user experience stays consistent across devices.
3) Use Appropriate Line Spacing (Leading)
Line spacing (also known as leading) is another crucial, but often neglected part of responsive web typography. It takes at least three-four scrolls to get to the core message on a mobile phone that appears above the fold on a laptop screen. In other words, the more the spacing between two lines on a small device, the longer it takes users to reach the good stuff on your site.
The first 40-50 seconds are crucial for keeping your readers engaged. However, too much leading usually takes up most of this precious time for scrolling. By the time users reach the crux of your content, they are too bored or distracted to continue any further. So, you will unintentionally be increasing the bounce rate of your site on small screen devices.
You should avoid these unpleasant gaps between the texts (as well as paragraphs) while creating responsive web typography. Allow your users to scroll the entire page as quickly as possible. The line spacing should be at least space-and-a-half within paragraphs, and paragraph spacing should be at least 1.5 times larger than the line spacing.
For example, it takes around five-six scrolls to go through the whole homepage of the BarkBox site on both, mobile as well as desktop. They have avoided any unpleasant gaps in the text on both screen sizes without affecting the readability. Of course, these are all guidelines. You can divert from them if your web design and content structure demand it. However, keep in mind the changes you make shouldn’t affect the readability and content discoverability of your site.
4) Test Your Designs on Actual Devices (If Possible)
The importance of testing your responsive web typography designs on real devices can’t be stressed enough. There are dozens of online testing tools out there, both free and paid. These tools are probably the best alternatives if actual devices are not available. However, you can’t experience the same feeling when you are viewing a mobile screen on your laptop or desktop.
Of course, actual testing on all the mobile devices in the market isn’t possible. Still, your team members and colleagues will have different mobile devices as well as tablets. So, what you can do is test the designs on as many actual devices and screen sizes as possible, and use online responsiveness testing tools for the rest.
Parting Words
Typography is an essential element of a responsive web design. Responsive web typography ensures your prospects can enjoy your website content with equal ease on all screens. If you put in as much effort and creativity as you do on layouts and images, your content will be more engaging than ever. Hopefully, these four pointers will help you create adjustable, understandable and readable text for all screens. Whatever is the nature of your project, do make sure to go through these pointers first. Good luck!
(Image credit: 1, 2, 3 & 4)
Author Bio:
Les Kollegian is CEO of Jacob Tyler, a Top Web Design & Marketing Agency in San Diego specialized in Website design, user experience, brand development, marketing strategy, and digital marketing.
