When it comes to web design, the first thing we need to think about is user experience or UX as it is considered key to success for any website. Apart from positioning the design elements properly, it is extremely important to maintain font size for website readability. Web designers might get tempted to use fancy fonts to enhance the style of the website but they should remember that the sole purpose of a website is to offer valuable information for the visitors. If the texts are not readable, they might abandon your website for good.
-
01. Typographic Readability: Basic Principles to Consider
No doubt a ‘WOW factor’ in the website to will make it stand apart from the rest, but that should not compromise the readability. With a little thought and creativity, you can achieve the goal and keep the texts readable. To know what makes texts readable, it’s important to understand how people read.
The eye-tracking study by Nielsen Norman Group released in 2006 show that people often read web pages in an F-shaped pattern, in these three different ways:
- Casually or merely glancing over the text, reading bits and pieces here and there to get an overall sense of the content.
- Scanning with purpose. Such readers usually hover over the text for a brief period, trying to extract the information most useful for them. While they don’t read the text from start to finish, their eyes move from section to section looking for the keywords or terms most relevant to them.
- Engaged readers usually read the whole text at a slower pace than in the above two cases.
One of the core design principles lies in the fact that people don’t read each word individually. Rather, they focus on certain words and fill in the rest. This is especially the case with casual readers and ‘scanners’. Also, as we read, our eyes tend to move to the beginning of the next line, in a vertical motion even before we have finished reading the first line. This constant flitting between horizontal and vertical eye motions creates an F-shaped reading pattern, which implicates certain guidelines for web design—
- Most users don’t read the text word by word. Therefore, you should make it easier for them to find what they are looking for.
- Users tend to read the first two paragraphs more attentively than the rest of the text.
- It’s important that you start the subheads, paragraphs, and bullet points with information-carrying words or keywords that are more likely to get noticed when users scan down the left edge of the text, as per the F-pattern to improve readability. Their attention dwindles as their eyes move horizontally.
-
02. Font Size for Web Pages: Other Important Factors
Nowadays, many websites are designed keeping in mind the millennial community, but a considerable portion of the online audience comprises of people over 60 years of age. This perhaps a big reason why many websites fail to attract the older generations and that way they alienate a whole group of prospects. Again, a lot of people use their mobile devices like smartphones and tablets to browse the internet and fetch information. If the font size for the mobile website is not optimized you may lose a lion’s share of potential customers.
Here are some more factors related to font size for readability that need to be considered when designing a website to enhance its appeal.
-
03. Hierarchy
Hierarchy plays an important role in website designing. By hierarchy, we mean proper structuring of text, that helps maintain the flow of content. For instance, the headlines should be different (bigger in font, different in color, etc.) from the rest of the body. This is important to achieve readable Web typography.
-
04. Contrast
Contrast is the next most important thing to make the text easily readable. The normal convention is black text on a white background, but you can move out of the convention without compromising proper contrast. By maintaining contrast you make the text soothing to the eyes and the readers don’t have to squint to find the information they are looking for.
-
05. Line Height
Enough line height (the space between two lines) should be maintained to make the text more readable and scannable. This should be maintained in the headers as well as in the body text. Optimal line height should be maintained to retain the continuity of the text.
-
06. Letter Spacing
Letter spacing (space between each letter in a word) is another important aspect of Web typography. It helps to maintain the continuity, make the text more readable and soothing to human eyes.
-
07. Line Length
Letter spacing (space between each letter in a word) is another important aspect of Web typography. It helps to maintain the continuity, make the text more readable and soothing to human eyes.
-
08. Some Additional Tips
A website that’s stuffed with way too much information than it should ideally contain is as worse as a website that has too little information. Such a website is not only poor in terms of user experience but in terms of aesthetics and visual appeal as well.
- Here are some additional tips on font size for website readability that will help you optimize website typography further:
- Don’t use font sizes below 16 pixels (off course you need to consider the devices, viewing distance, etc.).
- Integrate features that allow readers to adjust the font size according to convenience.
- Maintain optimal contrast ratios.
- Test the text formats across various devices to make sure it offers similar user experiences.
Readability is one of the most important aspects of web designing and it should never be overlooked. Following the tips on font size for web pages as mentioned above will help you make your website more acceptable among all segments of your audience.
You can connect with Mohammad Mohsin on LinkedIn
