Have you ever observed how font size brings a huge impact on your website? Keeping an appropriate font size comes under the category of the right typography.
One of the main questions I have often seen people asking regarding Typography is, what should be an appropriate size for body texts and Headings.
When it comes to guidelines for responsive websites, the first thing that comes to our mind is Legibility, and one of the many ways of making the site legible is setting the appropriate size. This guide will be all about Font size to clear the confusions of many people. Let’s start the guide and discuss every point in detail.
Mobile Typography Guide
Have you ever gone through a particular product but didn’t purchase it because of being uncomfortable with its description text that wasn’t appropriate? It might happen with many of us, and it is all because of not applying proper font size.
We all know that majority view our site from mobile, so mobile typography is the most significant thing. Let’s discuss those points through which you can make mobile Typography accurate.
1- 16px Font Body
The main thing I want to mention here is, every font appears different in the same font sizes. Let’s take example of two different fonts. You can’t expect Helvetica neue font and Arial font to appear same at 16px. Hence before choosing any font size, make sure what font you are using and at what number it will appear accurate.
To make the body font readable and legible, I suggest you go for 16px font body because it is considered good for mobile default size. If you read the text from the mobile, you want to have a clear and readable size even from a distance, so 16px will be appropriate. Start from 16px and in case you feel like decreasing or increasing it a bit, go ahead.
2- Keep an Appropriate Secondary Font size
Whatever secondary font you are using in the design, make sure it is 2 times smaller than paragraph text size. For instance, you have used 16px for body text, ensure than secondary font size is 13 or 14. Don’t go for 15 size because it will not make a big difference, and people won’t be able to distinguish the text.
These little things make a big difference because the key element of making the website successful is paying special consideration towards its legibility and higher legibility score comes when you don’t take these things for granted.
3- 16px Text Input Size
Now comes the Text Input size that should also be 16px that is an ideal and appropriate size. This is the rule that if you are making any website that people are going to view from mobiles, then you have to keep the text input size at least 16px. If you will keep a small size than 16, then the viewer has to zoom the text. You can keep the text more than 16px but not go below this size as it won’t look appropriate.
4- View the Design on Different Devices
It is one of the highly recommended guidelines that once you are done with the design, don’t forget to view it on different mobile devices. People across the globe use different mobile screens, so make sure on every type of screen your text appears accurate. You can get this idea by viewing your design on different mobile screens.
Ensure that from font size to spacing; everything appears as good as you were expecting. This process is highly recommending when it comes to mobile Typography.
Web Typography Instructions
Now comes the web typography that is equally important and needs to be done with care and consideration. In Desktop typography, we usually divide the design into 2 types, and those types include Text-heavy pages and interaction heavy pages. Let’s discuss both in detail.
1- Text-Heavy pages
If we talk about text-heavy pages, we need a font with a large text size. If your viewers are reading the text for a long period of time, then make sure they won’t get uncomfortable, use that font size that makes them feel comfortable even after reading for a long time.
If we talk about a perfect minimum Text-heavy page, go for 16px. If you go a little further, then 18px would be an ideal choice in this regard. However, if you are planning to use more than 20px, then it is worth trying. Though you will feel it odd at the start but with the time you will feel satisfied.
I have seen the best default size of 21px in a few articles. Apart from all this, whatever size you will choose, keep the text readable because it is what every viewer expects from your site.
2- Interaction-Heavy Pages
Interaction heavy pages are those pages that involve more interaction, clicks and views. If we talk about the size of those pages, I think small size fonts go best for them. If you look a few such pages, you will find that for less important information, small text size has been used while important information has been highlighted with large size texts.
It entirely depends on the situation that what size should you chose for such pages. Sometimes 18px size looks odd for such pages. I have seen such pages where event name has been listed with 12px that is medium, and for dates, 48 px was used. Whenever you make any interaction-heavy page, make sure that you need to change the font on a case-by-case purpose.
Final Thoughts
The font size brings value to the text, and it makes your design readable and legible. In case your website didn’t appear appropriate to the visitor due to size issue, it would be a big loss. Hence, pay particular attention to the text size in order to make your website successful.
I have enlisted a few essential points for the mobile and web typography so that you can understand which points needs to be bothered in the future when you design a website. Be thoughtful with your website, and make sure you select the valid size of the text.
Digital Web Services (DWS) is a leading IT company specializing in Software Development, Web Application Development, Website Designing, and Digital Marketing. Here are providing all kinds of services and solutions for the digital transformation of any business and website.
