8 tips on website typography that will help you boost your UX in 2018

Web Fonts for typography

The goal of a good website design is to communicate better with the target audience. Several foundations of communication play vital roles in the UX. The most apparent feature that contributes greatly to website community is text. Almost all website designers and webmasters have finally come to believe that typography has a serious role to play in the future of a website and its gross performance. Type fonts elicit distinct responses and emotions from the visitors. The choice of font can either drive a new visitor away or drive them further into the sales funnel and boost the ROI.

Why does font type demand so much importance?

Any genuine website development company will tell you that over 95% of website design is all about typography. This comes from the fact that over 95% information on the web was written content, up until three years ago. Right now, the advent of visual content has pushed video and infographics further up the ranks. Nonetheless, the text stands to be one of the most critical factors that govern the KPIs of a website. Even a running website can experience drastic changes (better or worse) by simply changing their web type-font.

What do you need to remember while picking a type for your website?

Your website typography deserves more importance than you are giving right now. It can optimize your user interface, and it can enhance your website’s UX. It can be one of the least expensive design elements of your website that can change your design outcome.

Don’t experiment too much with typography

You should try font embedding services. Google Web Fonts and Typekit provide several interesting font types. You can choose from hundreds of new and conventional fonts for dressing up your website. However, experts always recommend choosing traditional font types since most users are comfortable with system fonts like Arial and Calibri.

Use limited fonts

It is better to stick to just one font for the headline, one for the body and one for CTAs. You should stick to a maximum of 3 fonts for your website design. Too many fonts can spoil the broth! In fact, you should try to limit the number of font families to just one. If you want to switch things up a little, you can always check out expert reviews on fonts that pair well with beef steak and a good Merlot.

Keep line spacing even

Do not mess up the line spacing. Line height or the leading needs to be the same between two lines. By increasing or decreasing the line height can disrupt the readability. The only time you can vary the line height is when you want to indicate the end of a paragraph and the beginning of another. The proper utilization of white space between paras often increases readability by over 20%.

Choose correct color contrast

Do not choose colors that blend into each other for your background and your fonts. Choose sufficient contrast that makes your website content easy to scan. The colors you pick should also be soothing to the eyes. You do not want to scare your visitors off with neon color combinations that scream Las Vegas on a screen. You need your visitors to stay, look around and contribute to your website revenue. It is of paramount importance that you pay enough attention to the color contrast ratio. As per the W3C recommendations, your small text should have a 4.5:1 contrast ratio at a minimum and large text should have a 3:1 ratio at a minimum against their respective backgrounds.

Your font should have distinguishable letters

In many cases, we have trouble distinguishing between the “i”s and “l”s. This is often due to the font choice and letter spacing. When you choose the type, always check the individual letters and the different contexts where your site might be using it. Picking the correct type has a lot to do with user experience and user satisfaction.

Do not use all caps

Today, using all caps is equivalent to yelling or just being too obnoxious. Acronyms and logos are alright, but when you choose all-caps fonts for regular website content, it can be annoying for your regular reader. In fact, research shows that it decelerates the regular reading speed and decreases user satisfaction considerably.

Choose a typeface for all sizes

You must remember the factor of mobile readiness or responsiveness of your website. Therefore, any font you choose should look good large and legible even when minuscule. Apart from website responsiveness, you will have to think about typeface in different contexts like title, description, image title and body content. Therefore, you must have a font that works for multiple text sizes.

Do not use strange font effects

When we say “strange” we mean blinking, shimmering and fading texts for your website. Apart from several leading website design companies emphasizing on the medical concerns (trigger of epileptic seizures), blinking texts or shimmering texts are plain annoying. The unnecessary effects can distract the user from the real message and put them off. Not laying enough emphasis on text effects and design effects can efficiently drive your potential customers off from your website to your competitors’ sites in no time.

Typography is more important for a website that most website owners deem it to be. Your designer should ask you about your preferences, find out all about your branding and logo fonts, and make suggestions about typefaces that perfectly reflect your brand personality. That is the telltale sign of a good and experienced designer. A designer, who does not pay enough attention to font types and picks multiple fonts out randomly for each web page demands a reconsideration of your design plan. Your fonts should be legible, clean and easy to scan. Choosing traditional fonts with traditional color schemes is the best way to go in case you have no idea which type is best suited for your website or brand personality.

Michael Pignataro
Co-Chief Executive Officer - Operations at 'corePHP'
Entrepreneur, family man and long-time magician, "Magic Man" Michael Pignataro is co-owner of 'corePHP' with his mirror-image twin brother, Steven. Michael is 'corePHP's Co-Chief Executive Officer - Operations. He's also got a wicked fast wrist at the foosball table.