The Power of Typography: Everything You Need To Engage Your Web Visitors

By Thomas Drake

Typography is a balancing act. Using various elements of type – color, size, weight – we try to create balance and harmony on the website. Typography uses fonts and typefaces to enhance the meaning, positioning, and power of words. When done right, a good font never goes unnoticed. Graphic designers spend considerable time and efforts in choosing fonts that will match the purpose of the copy and the brand’s core values, and that will evoke certain emotional responses. 

All of these things come together to improve engagement and conversion on a website and refine your social media visuals. When words are legible, beautifully written, and look pleasant on the page, we feel encouraged to continue reading and understand the content better. 

Typography encompasses various elements of the written text:

• Font styles
• Font colors
• Font sizes
• Spaces between lines and paragraphs
• Font weights
• And others.

We manipulate and adjust all these elements to create typography schemes on the website. There are certain rules and standard practices to do that. But what are some simple steps that we can take to increase website engagement; that’s what we’ll learn today. 

So, let’s get on with it. 

• Serif vs. Sans Serif vs. Script

To choose the perfect font for your website, you first need to know what the major font categories are. Each of these categories represents a different era, intent, and personality. Let’s look into it in more detail. 

• Serif

Serif is the most old-timey font, the most traditional. At first glance, they look elegant, imposing, and quite commanding. Because they contain more detail than a sans serif font, they look more intentional and are often used as heading texts whereas the body uses a sans serif font. 

You can identify serif fonts by the short lines present at the beginning and end of a stroke. These short lines are literally called serifs – hence, the typeface style name.

Famous serif fonts from Google Fonts: Merriweather,  PT Serif, Roboto Slab.

• Sans Serif

Everywhere you look on the internet, you’ll find sans serif fonts. They are called sans serif as in they are not serif.  These fonts are the most legible of all font styles and are easily readable on low to hghi-res screens. They look cleaner, have more flow, and are suitable for headings as well as body text. 

Famous sans serif fonts from Google Fonts: Open Sans, Lato, Noto Sans JP

• Script

Script styles are the most statement-making fonts. With their curves and twirls and the handwriting style, these can be hard to read on web pages, so we don’t see them most often. These can work on logos, though. Script styles are adept at representing distinct feelings. Therefore, they work perfectly as fonts for feminine or child-centric brands: cosmetology, apparel, hand-made artisan-style products.

Famous script fonts from Google Fonts: Delius, Rochester, Stalemate. 

• A Large Font Size

Do you want people to read it? Then make it big. Nobody wants to grapple with the tiny, illegible, and poor-contrast fonts on a webpage. To ensure that people keep reading your text and engage with your content, you have to make it decent-sized. 

Because people consume internet content from a certain distance, its regular size needs to be a bit bigger to account for varying eyesight issues and to fulfill accessibility guidelines. According to Web Content Accessibility Guidelines, the web text has to follow a contrast ratio of at least 4.5:1. 

There are several tools that can help you know if your text has enough contrast. Some of these tools are: 

• WebAim’s Contrast Checker
• Contrast Checker
• Contrast Ratio 

Use these tools to find out if your web page font size is appropriate. Additionally, you can also make your text resizable to cater to a wide range of sight and readability requirements. 

• Add Contrast 

Continuing our conversation about contrast, it is important to note that size is not the only way to add contrast in text, though it’s certainly the most prominent. Color is another way to induce contrast in text-based content. If you use bold colors for contrast, it can have as big of an impact as size. 

Black text on a white background is the most common form of color contrast available on the web. It makes for the most readable content. But make the contrast flip – white text on black background – and it strains the eyes. The text color seems sharper and feels as if it’s bouncing off the screen. Gets too much. 

The same is true for softer color contrasts. They are harder to read and after a while, people give up. Poor color contrasts for the text are a death wish if you are designing a logo. It gives nothing in terms of readability and understanding. 

For body text, again, you want dark, muted tones for the background and a flat color for text. To check that your text has enough color contrast, here are some online tools to help:

• CheckMyColours
• Color Contrast Check
• Color Safe

 

• Choose Your Typography Scheme

A typography scheme refers to a systematic arrangement of 2-3 font pairings that will be used to organize and present your text throughout the website. 

If typography is the art of balancing, choosing a scheme lets you achieve this balance. It adds uniformity and cohesiveness to all of your text. Since we all like simpler things, choosing a simple font scheme of no more than 3 font pairings should be your goal. 

One font will act as the heading text, another for the body, and you can keep the third for a particular space on the page, the CTA buttons, for example. The biggest advantage of keeping things simple and uniform is that it helps visitors instantly identify parts of the text. It’s called establishing visual hierarchy. It tells people which parts of the text are more important and should be looked at first. 

For example, a particular font for headings – even if its size is the same as the body – will help people identify it as the heading text. And so on. 

To find out the basic principles of choosing font pairings here’s a helpful article on the topic by Douglas Bonneville of Smashing Magazine. 

• Enough Space Between Letters, Sentences, & Paragraphs

Are letters and words in your text fighting for space? Give them room to breathe by adding enough space between your lines, paragraphs, and letters. If these elements are too narrowly spaced, it makes for a poor reading experience. 

If people can’t read it, they can’t engage with it. If they can’t engage with it, they won’t buy it/subscribe to it. 

Therefore, to get maximum engagement on your website, your text needs to be appropriately-spaced. Increase your line-height and use kerning. Kerning refers to adequate space between letters of the same word, whereas line height allows for the amount of space between lines and paragraphs. When there are enough of both, the text seems to flow on the page. It makes reading smoother and more pleasant. 

Does it match your brand?

This is what it comes down to. Typography will show its truest power when it matches your brand’s core values. Think of the handwritten script used for Coca-Cola’s logo. It matches the brand’s excitement and youthful appeal perfectly. Same with Google’s inviting and colorful wordmark logo – the text is simple and appealing. 

If you’ve chosen a mismatched font – if it doesn’t align well with the brand’s character and concept – no amount of good contrast or perfect line-height can save your text. And when you’ve done all of these things, continue A/B testing. That is the only way to arrive at the golden formula that works for your particular brand.


Author Bio

Thomas is a Freelance Writer and Blogger. He writes on a variety of topics including business management, marketing, branding, and creative writing. He also attends online summits and digital meetups from time to time

 

  Back to Small Business blogs