5 Easy Font and Text Tricks to Modernize Your Website Better readability makes for better rankings.
By Brian Greenberg •
Opinions expressed by Entrepreneur contributors are their own.
Fonts and text sizes are overlooked features on many websites. The default settings on CMS platforms like Wordpress and Wix are 14 pixels (px) and single spacing. Some premium themes have custom fonts, though they are almost always too small. But by modifying your site's text size, spacing, and font family, you can increase your user's time on site, page views, and readability — which all leads to lower bounce rates and higher search engine rankings.
Below are five ways to improve your website's readability and rankings by updating the appearance of your content.
1. Text size
While there is no magic font size, Google may devalue your website if you use font sizes smaller than 12px. More and more, Google values usability and user experience, and if you have to pinch-zoom a website in order to read it, that's anything but user friendly.
A font size of 12px is acceptable and is a common default for email and document software like Word. Webpages, however, benefit from larger font sizes like 18px or even 20px.
Before you or your developer start messing around with font sizes on your live website, it's important to make sure it looks good. There's no easier way to test font size changes on your website than by simply pressing ctrl and + on a Windows PC or command and + on a Mac, to zoom in. To zoom back out, press ctrl and - or command and -.
You will find that your website's content may look 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. If the original is 14px, 125 percent would be 17.5px, for example, which could be rounded down or up with minor changes.
Text size example:
The following image illustrates using the browser zoom function on a Wikipedia page about 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 need to be mobile-friendly. For regular content in paragraph form, my recommendation of 18px to 20px for a website will work on any device, from a desktop computer to a cell phone. But for headers on the True Blue website, we occasionally go big — in some cases 40px to 50px, or even larger. If you do this, you'll need to scale it down for mobile devices, or your readability will suffer. The same is true for small fonts. Perhaps your website form shows a small label above the field at a font size of 12px. On a mobile device, this could be way too small to read, especially for older people.
Example of a mobile-friendly versus not-mobile-friendly website:
3. Text/font family
Readability is a must, but that doesn't mean you're restricted to using font families such as Arial, Helvetica, or Times New Roman. While it might not be the best idea to use your personal favorite font on your website, like Comic Sans (yikes!), there are tons of great-looking, cloud-served fonts readily available, for free.
Fonts like Roboto or Open Sans have become very popular. Using a different font like one of these helps your website, and your brand, to stand out a bit from the competition. And, when used properly, a non-typical font can enhance the overall aesthetics and readability of your website. Here's an interesting fact: Roboto was created by Google to be the main font for Android devices. While it received a lot of criticism at first release, the font has since been used by over 40 million websites.
Related: This App Lets You Build a Fully Functioning Website in Seconds
4. Text color and contrast
To be readable, the color of your fonts must be clear and provide sufficient contrast. A lot of websites play it safe and go with a white background and black font. But that's not ideal.
Many people have a condition called Irlen syndrome, which causes difficulties in processing visual information, including contrast sensitivity. When you have contrast sensitivity, black text on a white background looks something like this:
That red text on a blue background isn't very readable, is it? It's important to find a middle ground. On a white background, a safe bet for the font color is a dark shade of gray, such as #30303a. This hexcode is the specific color of the font we use on our website, True Blue Life Insurance.
5. Text spacing
Apply proper spacing on all elements throughout your website by using margins and paddings. These are the gaps of white space below a header, for example, or the white space above and below the menu items in a header.
Along with spacing between elements, line height, a CSS property that determines the amount of white space between each line of text in a paragraph, is equally important.
Line height example:
As with text size, there is no magic number for line-height, but I find that a value of 1.5em or 150 percent is ideal. Take a look at the following graphic that illustrates the impact line-height has on readability.
Bonus tip:
The best content is content you can read. Not everyone has perfect eyesight. Let's make it easy for our customers to read our content without having to squint. Take the time to test your website's font family, text size, and spacing. By implementing these recommendations, your website's user stats and search engine rankings will soar.
Related: Broaden Your Branding with These Fonts From Monotype
