Users need to be able to read content on your website. It sounds obvious but it is amazing how many businesses get this wrong.
One issue for businesses is that their websites haven’t been updated in years and years. And while a website is relatively easy to read on a desktop, when it comes to reading content on a smartphone or tablet, it is much harder to comprehend.
To make sure that all visitors can get the most out of a website, the typography and layout must keep pace and adjust on different devices.
How Does Font Size Change on a Mobile Device?
Fundamentally, text is displayed the same on a mobile and on a desktop or laptop. An ‘A’ will still be an ‘A’, a ‘b’ will be a ‘b’ and so on. But there are some important differences as well.
The most obvious display issue is screen size. A headline that features a large font will appear out of scale on a mobile device if the viewport is set correctly and render difficult to read.
If the font size of headlines is not adjusted, the chances of having random hyphenation or a headline that runs longer than the screen size or viewport increases exponentially. It is best practice to adjust the font size of your headlines to ensure your user experience is not affected between devices.
Secondly, without setting a specific font size for mobile devices, the readability of body content also runs the risk of being altered or rendered ineffective.
Standard paragraph text is often at the most risk here as, contrary to header text, it often needs to be increased in size along with corresponding line height. Without the adjustment, the text is often rendered at a difficult to read size and any links within the text do not have the necessary padding to make them touchscreen ready.
A final note of importance in this discussion is regarding typographic hierarchy, a staple of most design concepts. This may need to be adjusted based on screen size to ensure users are guided through the web experience (aka your website) in a meaningful manner. There is no standard rule here. If you have begun with a mobile-first mentality, this should come naturally through the design process.
Adapting for the Scrolling Culture
People scroll through content on their phones. For those who harken to the old days where one actively consumed printed material such as daily newspapers, people scrolled through the articles as well, it just had a different name. Skim reading. The only difference being that the daily news offered limited scrolling or skim reading opportunity ultimately forcing individuals to return to articles that interested them for more in-depth engagement. In the age of the internet, the limit has been removed.
What does that mean for your website and font size? Simply, your body font that makes up most of your website needs to be rendered at a legible font size so that a user who is scrolling can easily comprehend and engage with your content in a short time scale, and ultimately move on. The moving on is inevitable, it is only the first two points where you can pretend to have any control.
Felt like scrolling past this article?
At the Artlab we specialise in constructing web experiences that are optimised for mobile delivery and search engine visibility. We design and develop new websites and work with recurring clients to keep their websites visible on all major search engines.
If what you’ve read here doesn’t seem to be your bag, give us a call at 0161 974 0974 or drop us an email here firstname.lastname@example.org. We can discuss how to make your website mobile friendly and search engine visible so that you can continue to grow your business.