In an October blog post, we talked about how color can be applied in your website design to align with your brand positioning, buyer behavior, and audience targeting strategies. But there is another element to your website design that also plays an important role in influencing the tone of your website and user experience: typeface – which you can think of like the outfit your text wears to the party. No one wants to read endless blocks of text that are all the same size and thickness (or weight) – that’s a sure recipe for losing visitors.
Your website is your chance to introduce your brand to the world and tell them what makes it special. And no matter how powerful the words themselves are, they run the risk of remaining unread without the right typography treatment, which is simply the style and appearance of the text.
The difference between typeface & font
Before we get into the nitty-gritty about how typography can contribute to the success of your website’s design, let’s talk about the difference between typeface and font.
Today most people use the terms interchangeably, but in reality, there is a difference.
- A typeface is a set of design features for letters, numbers, and other characters. These design features include serif or no serif, the weight and balance of the letters, the spacing and height difference between uppercase and lowercase letters, etc.
- A font, however, is the variation in the size and weight of the typeface, such as roman, bold, italic, condensed, etc. For example, the Garamond typeface has its own set of design features for letters and other characters. It also has many fonts, including italic or bold, and various point sizes. Basically, fonts are one of the characteristics of a typeface.
So now, let’s take a closer look at how typeface (including fonts) can be utilized in your website design strategy.
Typeface and brand positioning
Brand positioning refers to how you want consumers to see your brand, especially as it compares to competitors.
You can use typography to create a context for your brand and give it personality. It can be modern, old-fashioned, romantic or business-like. It can represent your brand and what it stands for. It can have an impact on people, creating feelings and inspiring trust.
Here are some examples:
- Serif typefaces (the letters have anchors or “little feet” at the end of each letter—e.g., Times New Roman and Garamond) convey that your brand is trustworthy, traditional, and old school.
- Sans serif typefaces (the letters have smooth edges and no “feet”—e.g., Arial or Franklin Gothic) convey that your brand is sleek and modern.
- Script typography channels cursive handwriting (e.g., Allura and Pacifico) and can add a luxurious or feminine feel to your brand.
- Display typefaces are those whose letters have specialized elements like unusual shapes, outlines, shadowing or a hand-drawn look (e.g., Metallica’s lightning bolt typeface). These typefaces make a bold statement about your brand and can make it memorable.
Aside from choosing a typeface that appropriately spells out your brand positioning, here are some other important ideas to consider when selecting the typography of your website:
- Your typeface(s) must be readable for the digital environment. Author and brand strategist/designer Jordan DeVos writes, “Choosing a typeface can be done by virtually anyone—simply click a name in a dropdown list. And yet, choosing the right typeface is one of the most deliberated decisions of the design process.”And while the typography decision is important across all types of media, there are special things to consider when you’re dealing with it in the digital world. What you want to say to your audience is no longer on a printed page—it’s on a lit-up screen. And with one click, a user can banish your website into digital obscurity if they decide it is unattractive or difficult to read. Here are some things to consider:
- Your website typeface will appear differently on different screens. This depends on a variety of factors, such as screen size, screen resolution (older monitors with low pixel density will make your text more difficult to read), and screen calibration (brightness levels). While print typefaces are designed for ink, website typefaces are designed to be made of square pixels.There are web typefaces that have been specifically crafted to enhance screen legibility. Some sources for such typefaces are Google Fonts, Font Library, and Adobe Typekit. Your website typeface will appear differently on different browsers. The browser also controls how the font is rendered on internet-connected screens. To manage this anomaly, it is recommended to use what is referred to as Web Safe Fonts. A collection of fonts that the browsers are likely to be able to render correctly. If you don’t use a Web Safe Font, the browser will choose an alternative font to put in its place, potentially compromising the design look of the website.
- Never use all caps—it’s more difficult to read and can make your readers feel like you are yelling at them.
- Don’t make your line length too long. Readers want to consume web copy in small chunks and often just skim the page to hone in on what’s important to them. They will find long lines of type tedious and straining on their eyes and will soon click somewhere else on the web. You can test text sizes and their related line-height and lengths with a tool like Grid Lover (https://www.gridlover.net/try), which uses sliders to change the appearance of text as you change text size. A rule of thumb for optimal line length is 45-75 characters per line.
- Background color is important too. The contrast between the background color and the text affects readability. Tools like Contrast Checker https://webaim.org/resources/contrastchecker allow you to test different options. A basic guideline is to choose colors that provide a contrast ratio of at least 4.5:1. Generally, white or light-colored text in a black or dark background will not meet recommended standards for contrast and should be avoided.
- Be consistent: The typography of your website can be effectively used to create a hierarchy of messaging that quickly “trains” readers on how to read the site. Your system of typefaces, font sizes, and line heights and widths helps readers navigate your site. They like headlines and calls to action to be presented consistently. They want to know where to start reading and how to proceed down the page and through to other sections of your site.
Don’t ever underestimate the power of typeface in your website design. It can tell your audience the most important information they should know about your brand before they even read a single word, and when they do actually start reading, it will draw them to your key brand messaging.
Sources:
https://www.toptal.com/designers/typography/web-typography-infographic
https://www.purelybranded.com/insights/the-impact-of-typography-on-web-design-and-brand-messaging/
https://thelogocreative.medium.com/why-typography-is-important-in-branding-1eebe65cd8fb