In digital marketing and design, there are several closely related terms and elements that are frequently confused with each other. When crafting a beautiful design for your website, the emphasis is put on the style, quality and placement of the content. Colour palette, imagery and media, copywriting, branding and messaging being at the forefront of most business owner’s minds. Today’s savvy digital designers have a lot of critical choices to make in bringing essential elements together into a succinct, cohesive and user-friendly work of art. The legibility and readability of fonts and typography is one such consideration that can literally make or break the success of your traditional and digital marketing efforts.
What’s the Difference Between Readability and Legibility?
Readability is the arrangement of fonts and words in order to make written content flow in a simple, easy to read manner. Legibility refers to how easily distinguishable the letters in a typesetting or font are from one another. Readability is a responsibility shared by both the copywriter or content writer and the designer. While creating legible text typically lies solely on the designer and developer in digital material.
So what’s more important? If the legibility of your fonts are crystal clear; but presenting poor quality content - your customer’s won’t read it. If the readability of your copy is compelling and on point; but lost in physically difficult to read typography...your customers can’t read it. If readers find it an effort to read and navigate your text, your business can wind up lost for words.
Copywriting for Readability
When producing web or print copy, writers are required to inject as much information, tone and value into as few words as possible. They’re tasked with ensuring the information presented flows in a way that makes sense to the reader, helps them find the information they’re looking for, and gets the brand objectives (including tone) across clearly.
To do this well, content should be distributed in palatable blocks that are easy to skim and absorb. Each block of text should have a specific purpose and goal in mind. SEO Copywriters also sprinkle target keywords naturally throughout the content where they’ll be found and understood correctly by search engines, but not so obvious that it annoys the reader. How is this done?
- Keep sentences and paragraphs short and to the point
- Make strong use of headlines and subheadings
- Use dot points and bullet lists
- Bold key points within your copy; but don’t overdo it
- Simplify your content, speak TO people, not AT them
- Ensure perfect punctuation, spelling and grammar
Credit: Sakara
Designing for Readability
Designers are responsible for piecing all media and design elements together in a way that creates an enjoyable customer journey. To ensure readability designers support the message and purpose of the copy, with their thoughtfully branded design, and typography choices.Readability for user experience is critical across all designs, print and digital. From project proposals to brochures and business cards; anything that constructs your overall marketing ventures. The goal is for prospects to easily read and navigate your material.
- Make good use of white space (see the Apple example below)
- Ensure a readable type size
- Support copy blocks with appropriate imagery
- Ensure proper placement of CTA’s
- Choose clear and attractive typefaces and fonts
- Assemble typography following modern design principles
- Ensure responsiveness and readability on all devices
Credit: Apple
Typography Design Elements
There are various elements that designers need to consider to ensure typography is readable and legible for a smooth user experience. Principles may slightly vary depending on whether the design project is online, or in print. Let’s explore the main typography elements that can make or break the user experience.
Type Design for Readability
Typefaces and Fonts
Often confused as one and the same, a typeface is the design style, for example, Helvetica. Font, on the other hand, is the representation of the text character. Font’s refer to the style, weights and widths of a typeface family. For example “Helvetica Regular, Helvetica Light Oblique or Helvetica Bold.”
Designers must carefully choose complementary typefaces and will typically never use more than three different fonts. Of the three basic typeface options, serif, sans-serif and decorative, it is typical to pair a serif with a sans-serif font in headline and body text, while keeping decorative fonts - which are typically more difficult to read - to a minimum.
Whether you choose a serif type for your headers, and sans-serif for your body text or vice versa, depends largely on what best aligns with your brand, and what your target audience responds better to. Consider whether your target audience might find the style of font or typeface too distracting or difficult to read.
Good Use of White Space
It can be tempting to fill voids with more and MORE information you may feel is relevant to your audience. Use of white space is actually a proactive design element, not a gap. Business owners and their marketers will read and consider each and every element on their designs - whether print or web, but your customers might not. Clever use of white space allows us to avoid clutter, and gently lead customers through the information we’re presenting, without scaring them away.
Type Size
Typically in print design a 10-12pt font is desirable for body text. Online there is more to consider. 16 pixels is a good digital font size guideline for your body text; however, percentages should be applied rather than fixed heights to ensure adaptability to different screen resolutions and customer browser settings.
Some typefaces appear smaller or larger than others in point sizes, this also needs to be taken into consideration.
Type Case
SENTENCES AND HEADLINES IN CAPS CAN BE DIFFICULT TO READ! So choose wisely when opting for caps. If you have a VERY important point to emphasise, caps are powerful in delivering the tone of voice.
Line Length
This is a classic and very common problem online. If lines of text are too long on a page, readers eyes will have trouble following the text. It can be difficult to continue on the correct line in larger blocks of text if the line exceeds a certain number of characters. What is the optimal line length? Your text blocks should have a fixed pixel width to accommodate text. Most designers recommend lines within the range of 50-75 characters in length. Depending on the size and type of font you’re using, this might translate to a pixel width of between 560 - 700 pixels. Keep in mind we have become a mobile-first world, and are now accustomed to browsing websites and reading text blocks with a significantly reduced resolution. Large blocks of text that are palatable on desktop may need to be broken up with imagery, or into shorter paragraphs to maintain readability on mobile.
Leading / Line Spacing
Leading or line spacing is the distance above and below lines of text. Obviously lines should be spaced evenly and with enough distance that makes the text easy to read. Narrow leading causes ascending and descending letters in a blog of text to appear ‘squashed’ affecting legibility, and making the writing less attractive to the eye. Within reason, it’s best practice to have more rather than less leading; but in keeping with what is considered a natural distance. Various fonts and their unique ‘highs and lows’ will require different leading settings.
UX Design Considerations for Legibility
Contrast
Colour choice is no accident. Designers, while ensuring they are consistent with infiltrating the brand colours throughout marketing material, need to ensure there is enough contrast between the text and its background. This means that the text colour must have optimal contrast to the background colour in order to be legible. A simple way to test whether or not there is enough contrast in your design is to convert the text block to grayscale. If the grayscale version is difficult to read, it indicates that your colours are not a friendly pair. A common contrast problem on many websites is using black text on a white background. While this seems logical, it’s actually too much contrast and can strain the eye. On most well-designed websites, you will find the dark text on a white or light background is actually a shade of grey, much softer on the eye and easier to read. You can see an example of how contrast can dramatically affect readability.
X-height
x-height (also called corpus size) is the distance between the baseline and the top of the lowercase letters in a font. Some typefaces such as Koch Antiqua feature a very low x-height, which results in capital letters appearing more prominent. While this style of text can be attractive when used well in short headlines, typically you should steer clear of low x-height fonts in your body copy. Conversely, if your x-height is too high you’ll have the same problem. Choose a medium to high typeface based on the individual characteristics of the type, and the content you’re presenting.
Tracking or Letter Spacing
Careful consideration should be given to the space between letters of your chosen typeface. Use tracking to manipulate spacing in order to reduce density in a block of text, and increase legibility. Thoughtful tracking can make a world of difference, as you can see in this example.
Kerning
Kerning, often confused with tracking, is the typography design practice of increasing or reducing the distance between two particular letters, rather than setting the distance between letters in each word. It is commonly used in logo design and headlines, and also after applying tracking to a font, where some letters may appear too far or close together compared to others. In kerning, it’s all about maintaining proportion to support legibility.
Weight
Weight refers to the relative thickness of a font stroke. A typeface can come in many weights including thin, light, regular, medium and bold. Very light, or very heavy weights are more difficult to read. So, use bold and thin typeface variations wisely.
Counters
“Counters” in typography refers to the white space that lies enclosed, or semi-enclosed within a letter such as c, e o p and q. Most typographers believe that large counters are an important aid in easy character recognition. Counters can be negatively affected by the weight of type, or stroke applied to a font. Choose fonts and settings that support nice open counters. The smaller the counter, the harder your text is to read.
How to tell if your material is readable and legible?
The most readable and legible texts are those that are essentially “transparent” to the reader. Meaning, the design, layout, flow and legibility doesn’t draw attention to itself. All design should serve only to portray the message, inform and convey meaning, speak and relate to your audience, and elicit a positive feeling about the context of your communications and personality of your brand. In short, we don’t want your customers considering our text placement, choice of fonts and colours, or placement of keywords. We want readers, whether online or in print, to enjoy the easy atmosphere of your marketing collateral.
This helps to build a level of trust and kinship with your business. If you make your customers’ buying journey effortless, they’re likely to return and become loyal brand ambassadors. Who would have thought the composition of words on a page would be such a critical UX element? This is one of the many reasons why the Anchor crew love every fluid element of what we do to help your business grow. Contact us today.
