A Quick Typography Guide to Create Copy that Engages

When it comes to creating the perfect website, there are countless things you need to take into account and always be mindful of. You’re bound to be primarily concerned with overriding design elements such as layout, graphics, colours and images, but what about typography?

You may very well have the most amazing website that features all the information, content and copy a visitor could wish for, but without some captivating and compelling typography, the potential impact of that content won’t be as powerful or pertinent.

Web designers and developers should consider typography a priority, as readability has a significant impact on how visitors look at copy and process content. It goes without saying that the words on your website are of great importance and you’ve probably put in a lot of effort to ensure this copy has been produced to a high standard.

But to stand the best chance of engaging and resonating with visitors, typography needs to be top-notch too.

Typography terms

Hierarchy – This is to do with the difference between headers and body text. You can use colours to contrast between the two, but hierarchy typically refers to size more than anything else. It allows the copy to be scanned quickly and easily understood.

Contrast – This could be the difference between easy to read text and copy that forces the audience to squint. Understanding copy is effortless with good contrasts, but bad contrasts make reading difficult, slow and sometimes painful. Black text on a white background is the standard contrast colours and also the most effective. However, other combinations can be impossible to read.

Line height – Referring to the space between lines of text, line height can also help readers scan copy more easily. Too small and the audience has to examine text a lot closer, too large and the lines look like they’re not connected to each other.

Letter spacing – The gap between each letter should not be tampered with too much when it comes to web copy. Negative letter spacing brings characters closer together and is often used for logos or branding, but this will have a detrimental impact on website readability.

Line length – This is often disregarded or ignored by web designers and developers, but line length can improve a page’s readability. Concerning the number of words per line, the audience should be able to make a transition between the ending of one and beginning of the next naturally.

Essential typography considerations

Well-proportioned headers – Headers can establish a hierarchy to the copy, so you’ll want to get the sizing just right. If they are too big, there is a danger of overwhelming the reader. It can also affect the copy’s flow and be an unwanted distraction. But if headers are too small, you run the risk of not establishing a coherent hierarchy. You may also fail to grab the audience’s attention sufficiently enough for them to keep on reading.

Consistency – Without consistency, you’ll struggle to develop a logical hierarchy. An absence of order can confuse readers and they’ll struggle to scan or comprehend copy as a result. Therefore, ensure that all headers and text of equal importance have the same style and font.

Text that can be scanned easily – Even though you’ll want your audience to read and absorb every little nugget of information, several visitors will scan the text first. Typography elements such as header size and position as well body text size and contrast are crucial, but focus points like bulleting, numbering, graphical elements and buttons are equally as important.

Striking a text density balance – Bunched up text or copy with no distinguishable breaks is very difficult to read and leads to a poor user experience. Try to find an agreeable balance between line height, letter space, text size, and sentence length.

The Importance of white space ­– The addition of white space can offset an abundance of text and help website visitors take in content-heavy pages much more easily. It can also act a separator or divider between graphical elements and text, which helps the user’s eyes flow from one to the other.

Place emphasis where appropriate – Emphasising certain elements of the text not only breaks up lengthy copy; it also provides focal points for the user. Highlighting links, bolding certain sentences and italicising quotes will catch the audience’s eye while they’re scanning the text and can draw attention to the most important aspects of your copy.

Supplement copy with graphics and images – Protracted and prolonged copy can sometimes get a bit tedious. As such, there is a good chance your audience will need some visual stimulation to keep on reading. Although this can be a challenge, try and include a clean border with images and leave sufficient white space for icons and illustrations. Remember that your copy takes precedence, so try not to disrupt the text too much.

Think about separators – From single lines to text boxes, separators can enhance the readability of your copy by establishing a solid hierarchy and distinguishing one piece of content from another. If you need to include lots of different and distinctive content on one page, separators will eliminate confusion and increase readability. You can also get quite creative with separators and produce something visually stunning.

Remember your margins – Don’t forget that margins will force your audience to focus inward on the page’s content, which increases readability. Margins can also separate copy from the rest of your page, as text should never bleed or crossover into other design and layout elements.

Typography style and substance tips

Use unique fonts – The easiest way to add a bit of flair and finesse to your text is by choosing a unique or fancy font. However, they should be alongside the standard fonts of the body text and within the page’s layout. Using a single font throughout your entire website can be quite boring and monotonous.

Explore different styling – Rather than choosing a standard font, add a bit of panache with some styling details. Shadows and outlines are ever-present techniques, but letterpress is an increasingly trendy approach to typography. You can add depth to the text and embellish the layout while maintaining readability.

Additional background elements – Although contrast should be your prime concern, it is possible to adjust the background in order to make text stand out and be noticed. Just be careful with colours and always favour readability rather than aesthetics. Background styling can ultimately add suaveness and sophistication on top of reducing legibility.

Use texture to support typography – Text and backgrounds don’t have to be exclusive. Adding in some texture to your typography can make copy even more appealing and interesting. Think about adding layers to the design and layout with separators and margins of different sizes, shapes and styles.

Add some love to your links – On any given page, links are usually underlined and given a different colour from the body text, most commonly blue. But you can add emphasis to these important elements by playing around with colours, italics and fonts. If you want the audience to click on a link, make sure it as attractive and alluring as possible.

Typography summary

Even though consistent and convincing typography can make or break the overall look and feel of a website, it also has an impact on the effectiveness of copy as well. If the textual elements of your site are that important, then it is quite perilous to overlook the role of typography.

After understanding and grasping a few fundamental terms, you can start making relevant changes. At first, these will be essential steps to ensure copy can be scanned and read easily. But you can then move on to making text more appealing and alluring. Ultimately, typography is striking a balance between substance and style in order to increase the impact and influence of website copy.