Choosing the Right Type for Web Projects
Copy, text, words – regardless of what you call them, these are central aspects of most web user experiences. Yes, we are seeing a rise of conversational and voice interfaces, but the written word is going to continue to play a key role in how we experience the web.
It can be the long form article content your user reads on the commute, the helper text on a web form field, the call to action on a button – all of these are crucial in supporting your user in their tasks.
All of these will require you to choose a font! Typography “the art and technique of arranging type to make written language legible, readable, and appealing when displayed” (Wikipedia) is a specialization in an of itself, with a long history. Most people working on web design need a basic understanding of some of the key considerations, and who knows, you might fall so in love with it that you decide to go down the typographic rabbit hole!
Accessibility and Readability
Designing on the web means thinking about the different sorts of people who might be trying to use your site, and considering accessibility. Choosing a font to use is no different. As a baseline, using real text instead of images is important, as this can be read by a screen reader and can also be enlarged by screen magnification software. Color choices also come into play here, as it is crucial for readability to make sure there is sufficient contrast between the background and text colors. Using a tool like WebAIM’s colour contrast checker will ensure you are on the right track. Accessibility also means thinking about the different modes someone might interact with an interface – keyboard and mouse, touch, or assistive technologies.
“Fonts now need to be accessible and considerate of touch, it’s no longer simply a question of ‘is this font-size appropriate for visual accessibility,’” said Elina Lawrie, UI and Service Designer.
Readability is a component of accessibility, and while this can be a little harder to quantify, there are some rules of thumb for a good reading experience. There are conflicting opinions about whether serif or sans-serif fonts are more readable. Selecting basic, simple type such as Verdana, Georgia, and Arial, for body copy will support a comfortable reading experience. Some fonts, such as Verdana and Georgia, were even designed with screen readability in mind. If your target users have high rates of dyslexia, there is a new, open source typeface designed to help make their reading experience easier!
When thinking about choosing type, it’s important to understand the context the typeface will be used in. Is this going to be the body of an article? If so, an easy reading experience over longer passages of text is key. Is this a button or navigation label? Again, legibility is important, but these items are often shorter and have less run-on reading involved. Context also means considering the context of display – outside on a sunlit screen with glare, in a dark office on a desktop, on a large TV screen?
“With digital typography being displayed on so many new form factors, designers are increasingly being forced to push beyond their defaults when designing for readability. An unexpected example of this would be an increased font-size on smart watches,” said Lawrie.
Brand and Tone
Certain part of a webpage need to communicate brand and tone – these are the places you might get creative in type choices. Headlines, page titles, logo types; these are often where we see the use of display fonts – the more fun, quirky typefaces with lots of personality. Brand guidelines can inform type choices, but beware the legacy print guideline!
“I find that a lot of branding style guides weren’t necessarily written with the web in mind. I will check to see if there’s a web-safe version of the font available (and for what cost). I’ll also consider readability (a font can work well in print but not translate at all to web),” said Avery Swartz, Web Designer and Entrepreneur.
Font pairings come into play here, and learning how to pair fonts is a subtle art. A popular combination is a serif and a sans-serif, as these provide good contrast. Remember not to go overboard – more than two typefaces is rarely needed and could make the experience feel cluttered!
In the older days of the web, resolution was a concern in terms of serif fonts, as it could be difficult to render the serifs in a clearly discernable way. Technology on the web such as anti-aliasing and font-hinting are going some way toward mitigating these issues.
With modern web-font services like Typekit, , a huge number of type choices get opened up to designers. Typekit also facilitates testing out the look and feel of fonts – prototyping for legibility and tone. However, this also comes with the risk of going font-crazy, which can impact performance. A bad reading experience is one in which it takes ages to load all of the required typeface and font variations!
“Web font services are fantastic, but they can seriously slow down your website if you load them up with too many typeface options. Give yourself a performance budget (I like to keep my font packages under 200k) and try to stay within it,” said Swartz.
It is also important to specify a font stack for your website. A font stack within CSS is a list of fonts, in order of preference. This gives the designer control over what happens if the first choice type cannot be loaded. The font stack should include web-safe fonts, such as Arial or Times New Roman, and end with a generic family – either serif or sans-serif. A good font stack means if a font cannot be loaded due to browser issues, connectivity problems or incomplete character sets in a font, the design intent is still protected.
Choosing type for your web projects is fun!
With improvements in the ways browsers render fonts and web-font technology, there is more choice than ever before! Choosing the perfect type for a smooth user experience with lots of personality is an exciting creative challenge. Written content and text is a crucial part of UX – accessibility, brand and performance are the key considerations.