Adobe Creative Cloud

April 14, 2016 /UX/UI Design /Web Design /

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.

type1

Everlane makes bold but minimal typography choices – using a serif for the navigation items and an all caps sans serif for the call to action.

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.

type2

The Let’s Make Mistakes podcast uses a cursive display font in combination with a strong sans serif – putting typography choices front and center in creating a distinct first impression of the experience.

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!

type3

The Boston Globe uses two serif fonts – Miller Headline, for headlines, and Georgia for body copy and a sans-serif type is used for the navigation items. This creates a contrast, maintains the brand by evoking a newspaper feel, and provides a legible experience.

Performance

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.

UX/UI Design, Web Design

Design. Prototype. Share. All in Adobe XD.

Go from idea to prototype faster with Adobe Experience Design CC (Beta), the first all-in-one tool for creating and sharing website and mobile app designs. Test drive XD and tell us what you think.

DOWNLOAD

Join the discussion

  • By Craig Allen - 1:50 AM on April 15, 2016  

    I’m intrigued by the idea of fonts for dyslexics. I anticipate that enabling users to switch to such a font at the click of a button could become a key accessibility requirement for websites.

  • By MG Cooper - 7:48 PM on April 15, 2016  

    Hi, Linn. For years I’ve spent more time than I care to admit trying to pick out just the right font(s) for every new blog, web page or online/offline marketing device for my company. I confess: I was maniacally obsessed with font styles. But it occurred to me recently that since every visual form of communication I produce ultimately promotes my company’s brand maybe I should stop the time-sucking madness and, more importantly, stop confusing my customers with so much design (brand!) inconsistency. So, here’s what I finally did.

    After thoughtfully considering the overall vibe and mission of my company I spent a a couple of hours one morning looking at dozens of font families from which I would choose no more than five to represent my company’s brand. I was careful to choose from among fonts that offered a broad number of styles within each family, i.e. Regular, Bold, Italic, Bold/Italic, Condensed, etc. while still maintaining the necessary consistency. I also focused on fonts that were classic in design; Those that wouldn’t go out of style twenty minutes later. Here are the results.

    The primary “winners” in this selection process included three san serif (Century Gothic, Myriad Pro, and Genuine Regular), two serif (Palatino Linotype and Times New Roman). Finally, I recorded these selections, with examples, in my Evernote notebook as a ready-reference so as not to have an excuse for going on yet another hours-long safari for the “coolest font of the week”. And what has been the result of the deliberate effort?

    The biggest benefit of my new-found design discipline has been a tremendous savings in time in producing business communications both online and offline. Knowing that I don’t have to spend an entire morning (or more!) anguishing over which font to use for a project is a HUGE load off! Could there be a sacrifice in limiting my choice of font styles? Perhaps. But so far I can’t tell that my company’s brand and messaging have suffered from this switch to a more disciplined use of fonts as a critical design element.

    P.S. Not everyone who reads this will agree with my choice of fonts for my company. Unfortunately, I don’t have anyone in my company who is any smarter or intuitive about visual design elements in company branding. And, believe me, I’m no expert. I would, however, appreciate very much any authoritative suggestions from you or anyone else that might help me further.

    Also, each of the fonts I’ve chosen have at least one nearly identical web font offered on Google Fonts when I need one.

  • By Bill Watters - 8:28 AM on August 25, 2016  

    As a designer somewhat older than middle age I am constantly frustrated by text so pale that it is uncomfortable to read. There seems to be a trend towards using pale grey as a colour for body text. When your blog copy is viewed on a wide screen desktop the contrast between text and background is insufficient. I have just made a comparison between colours and found #444444 hits a reasonably acceptable contrast. I appreciate that viewing on a mobile device is different than the 2000px screen on a desktop machine but whatever the device legibility is the issue.