Read for 5 min
The opinions expressed by the entrepreneurs' contributors are their own.
Fonts and text sizes are overlooked on many websites. The default settings on CMS platforms such as WordPress and Wix are 14 pixels (px) and a single distance. Some premium themes have custom fonts, although they're almost always too small. However, by changing the text size, spacing, and font family of your website, you can increase your user's time on the website, page views, and readability. This leads to lower bounce rates and higher search engine rankings.
Below are five ways to improve the readability and ranking of your website by updating the appearance of your content.
1. Text size
Although there is no magic font size, Google can devalue your website if you use font sizes that are smaller than 12 pixels. Google places increasing emphasis on usability and user experience. If you need to zoom a website to read it, this is anything but user-friendly.
A font size of 12 pixels is acceptable and a common default setting for email and document software like Word. However, websites benefit from larger font sizes such as 18px or even 20px.
Before you or your developer start messing with the font sizes on your live website, it's important that they look good. There's no easier way to test font size changes on your website than simply pressing Ctrl and + on a Windows PC or Command and + on a Mac to zoom in. Press Ctrl and – or Command and – to zoom out.
You will find that your website's content looks good and possibly better at 110 percent or even 125 percent. If so, have your developer change the font size to 125 percent of the original. For example, if the original was 14 pixels tall, 125 percent would be 17.5 pixels, which could be rounded up or down with minor changes.
Text size example:
The following image shows the use of the browser zoom function on a Wikipedia page via Google.
Related: How To Make Your Small Business Website Really Really Effective
2. Text sizes for mobile devices
Since mobile devices offer much less screen space, your font sizes must be suitable for mobile phones. For regular paragraph content, my recommendation of 18 to 20 pixels works for a website on any device, from desktop computers to cell phones. But for headers on the True Blue website, we sometimes get big – in some cases 40px to 50px or even larger. If you do this, you will need to make it smaller for mobile devices, otherwise your legibility will be affected. The same applies to small fonts. Your website form may show a small label above the field with a font size of 12 pixels. On a mobile device, this may be far too small to read, especially for the elderly.
Example of a mobile-friendly or a non-mobile-friendly website:
3. Text / font family
Readability is a must, but that doesn't mean you can only use font families like Arial, Helvetica, or Times New Roman. Although using your favorite personal font on your website may not be the best idea, such as: B. Comic Sans (Yikes!), There are tons of great fonts available in the cloud that are available for free.
Fonts like Roboto or Open Sans have become very popular. Using a different font, such as one of these, will help your website and brand stand out a little from the competition. When used correctly, a non-typical font can improve the overall aesthetics and readability of your website. Here's an interesting fact: Roboto was created by Google as the main font for Android devices. While it received a lot of criticism when it was first released, the font has since been used by over 40 million websites.
Related: With this app you can create a fully functional website in seconds
4. Text color and contrast
In order to be legible, the color of your fonts must be clear and offer sufficient contrast. Many websites play it safe and have a white background and black text. But this is not ideal.
Many people have a condition called Irlen syndrome that causes difficulty in processing visual information, including contrast sensitivity. If you have contrast sensitivity, black text on a white background looks something like this:
This red text on a blue background is difficult to read, is it? It is important to find a middle ground. On a white background, a dark gray tone like # 30303a is a safe choice for the font color. This hex code is the specific color of the font that we use on our True Blue Life Insurance website.
5. Text spacing
Use margins and padding to apply the correct spacing to all elements on your website. These are, for example, the gaps in the space under a header or the space above and below the menu items in a header.
In addition to the space between elements, the line height is also a CSS property that determines the space between the individual lines of text in a paragraph.
Row height example:
As with text size, there is no magic number for the row height, but I find a value of 1.5 em or 150 percent is ideal. Take a look at the following graphic, which shows the influence of line height on legibility.
The best content is content that you can read. Not everyone has perfect eyesight. Let us make it easy for our customers to read our content without having to squint. Take the time to test the font family, text size and spacing of your website. The implementation of these recommendations increases the user statistics and search engine rankings of your website.
Related: Enhance your branding with these fonts from Monotype