Everyone wants better search engine rankings, and Google has made it apparent that user experience will be the defining factor for the long term.
But while website builders focus on technical aspects like site speed and mobile-friendliness, the actual on-page experience sometimes gets lost. Your website design will impact your traffic, and if users aren't engaged, you won't get the conversion you want.
If you suffer from low dwell time and high bounce rates, the quality of your presentation could be holding you back. One of the simplest ways to boost performance is knowing how typography mistakes show up in your page design. Keep reading to learn more.
A Better UX: Typography Mistakes to Avoid
Typography is a minor consideration for most business owners trying to make a better website, but it has a huge impact on the website's usability and experience.
Poor typography is confusing, hard-to-read, and best left to websites that show up on page 10 of a Google search. Users will have a difficult time navigating your site and staying engaged long enough to reach your CTAs.
Typography blunders involve more than just typos. If you want help boosting your conversion, watch out for these critical design errors on your website.
Font ≠ Brand
The font you choose for your website impacts readability, but it's also an important design element that carries symbolic weight for your brand.
Fonts have associations with certain adjectives. If you're using a font that doesn't mesh with your brand's personality, you send a confusing message to your audience.
You need to find 2-3 adjectives that describe your brand and look for fonts that match. For example, brands that want to convey authority and respect, like an online newspaper, benefit from traditional serif fonts like Playfair Display, Freight Text, or Garamond. On the other hand, A SaaS company might want minimalist and modern sans-serif fonts like Source Sans Pro or Roboto.
Typefaces Galore
Your typography should follow the attitude and values that your audience is looking for. At the same time, a collection of typefaces and fonts helps break up the text to make it easier to scan a webpage.
In too many cases, a designer won't find the balance between the two and will end up adding a dizzying array of typefaces.
You make your brand too confusing when you use too many different typefaces to break up your heading, sub-headings, and other text elements. Your website will look amateurish. Find your style and stick to it, using no more than three fonts to coordinate your layout and create a visual hierarchy.
All Caps All Over
Using capitalized words isn't a general no-no, but it's easy to overdo it. Once all caps lettering starts taking up body text, you know you've gone too far.
Writing in all caps is an excellent way to emphasize ideas and draw attention, as you would with a headline. But in long strings of text, it seems like the author is yelling at you, which can feel rude and angry. If you overuse it, you also diminish the impact of the points that you want to emphasize.
An overarching goal of your typographical scheme should be optimizing readability, which doesn't mean you should be testing your content alone. It also means the design of your lettering should make words easier to read. You don't stand a chance of reaching that goal if you go with all caps.
Lowercase words are easy to identify by the wide variety of contrasting shapes in lowercase letters. Chunky and uniform letters make words harder to scan, and even short text lengths can be too much to handle. If you want to use all caps, limit them to logos and headings.
Text Is Oversized and Overwhelming
The large text theme started gaining speed a few years ago, and for modern page designs, it's a great way to make a statement.
Oversized text is an effective way to get your value proposition across on your website, particularly on the home page. A short blurb that proclaims, "This is how we offer value..." connects with your audience and creates the desire to learn more.
But outside of your hero section, you need to be extremely cautious not to go too big. In the wrong places, oversized text can decrease readability. When you want to get a particular point across, text that is too large won't encourage the reader to slow down and take in all of the information.
Text Is Too Tight
Choosing your fonts is the process of finding the right fit and function for you. They need to fit your brand of course, but they also need to be readable where and when you need them.
That's the problem you'll find with text sizing — you need to find fonts that scale so they're legible even in small sizes when necessary, like on mobile screens and in paragraph bodies.
In some cases, it can be tempting to reduce the amount of space your text takes up, not by decreasing the size of the letters but by reducing the space between them.
Adjusting the gap between letters, or tracking, is a simple fix to a space issue, but you sacrifice legibility if you make the gap too tight or too wide. It can add impact if you tighten letters in certain places such as logos, but it becomes overwhelming to read in body text.
Too Much Text
Reading online isn't like reading a book, and audiences on a webpage want to be able to navigate to the information they need as efficiently as possible. And even if a piece is engaging, large blocks of text can make reading until the end an enormous chore.
That's why design elements like visual hierarchies and images are so crucial — they break up the monotony and keep your reader's attention all the way to your CTA.
Keeping your blocks of text small means limiting their length and height. An agreed-upon rule is to keep your line length around 60-75 characters.
If you're concerned about your paragraphs getting too long, you can usually find ways to break them into four or fewer sentences. Adding pull quotes or bold lines can help you emphasize key points and break up long runs of uniform text.
Don't feel like you have to fill every space on a page with text or images. Negative space gives you breathing room, and it takes the stress off of the user who is trying to comprehend everything.
No Harmony With the Background
Along with your fonts, your color scheme is critical if you want a quality design. And being mindful of the interaction between the two is crucial if you want a better user experience.
Colors have associations, and you'll want to stick with a fairly slimmed-down color palette to give direction to your brand. Sometimes designers can take this in the wrong direction and make the text a tint or shade of the background color. This can make legibility difficult if the tones are too similar and irritating if they're too contrasty.
To simplify the matter, you can use a light background tone that doesn't demand that the text be a bold color to make it legible. On the other hand, you can also stick with a neutral (black is a great choice) for your text.
If you're uncertain about the readability, you can squint your eyes and see if you can still read the text. It will be difficult to read text that doesn't have enough separation from the background, indicating you need to increase the contrast.
Of course, you won't always have a solid-colored background. A stunning image can capture attention and will often pair well with overlaying text. But if your pictures are too busy or too contrasty, it can distract from the text and make certain sections more difficult to read.
Manipulating your images is an easy way to fix readability issues. Some techniques to try include selectively adjusting tones around the image, blurring the background, or adding a text box.
Text Is Centered in the Wrong Places
People love symmetry, but the centered text should see limited use around a webpage. In long paragraphs, the centered text creates a visually unappealing and hard-to-follow flow.
Users need to search for the beginning of a line when reading from one line to the next. A left-justified body of text can be read efficiently because the beginning is predictable. With a jagged, zig-zag alignment, centered text loses that efficiency.
Centered text can make a positive difference in the right context. Headlines and shorter strings of text can be highlighted with a centered alignment. If you only have two lines of text, this alignment will often look fine.
Is It Time to Update Your Typography?
It can be surprising to hear that something like a font can cause you to lose business, but as a part of your overall design, it has a huge impact on the user experience design. Avoiding costly typography mistakes can make a profound difference that shows up in your website performance analytics.
Finding the right solutions to your user experience problems can be a chore. You can A/B test all day and all night, but there's no telling how long it will take to strike gold. If you want to make a better user experience today, get a free UX audit with the Look-See service.