Deciding what’s most important in the UX design process is always going to be subjective, dependent on multiple factors that will ultimately be decided by the goals your client is seeking to achieve through its digital products, and what you believe the design needs in order to achieve those goals.
And yet, when considering all the design elements that go into building a product that not only communicates your client’s message but does so in a way that maximizes the user experience, it’s nearly impossible to overstate how vitally important typography is to the process. The reality, though, is that while typography might not be as niche a skillset as some others (color theory, anyone?), in the hierarchy of your expertise, typography might not be near the top.
After all, when you work in a relatively young field that thrives on innovation, seeing typography referred to as an “ancient discipline” could be enough for you to permanently pass this part of the process off to someone else on your team. Add to this the fact that there is a lot that goes into perfecting typography—there are by one estimation at least 100,000 fonts on the web alone—that trying to master the discipline can seem overwhelming.
But, again, typography’s significance in the design process is such that some experts see it as having the biggest impact on your final product.
As the Interaction Design Foundation noted in a recent blog post:
"
More than any other part of the design—choosing the right fonts and displaying those fonts in the right way will either make or break the user experience.
"
In fact, the significance of typography’s role in the design process has long been recognized. Way back in 2006, Oliver Reichenstein, founder and CEO of iA Inc., declared that “Web design is 95 percent typography.”
Now, there’s a caveat to Reichenstein’s assessment, which was based on his estimation that “95 percent of the information on the web is written language.” This might have been true 13 years ago; but depending on how you define information, it might not be true today. At the time Reichenstein made his declaration, YouTube was only a year old, Instagram was still four years from launching and we were more than a decade away from the “peak” podcasting era we’re in now.
So, the information landscape has changed a lot over the past 13 years; but there’s still a very good chance that the website or app you’re designing will have a significant amount of text on it. And this text will still be vitally important to your client’s brand, to its messaging and to the overall user experience.
With that noted, a good place to start—if you are still at the starting point – is to get the basics down. Microsoft’s Michael Crump has a good rundown—as does Therese Fessenden from the Nielsen Norman Group—of the important terms and principles that you’ll need to know. This includes kerning (character spacing), character width, leading, font selection and some general differences between serif and sans-serif fonts. There is also an excellent interactive typography cheat sheet developed by Christian Heilmann that’s worth checking out as well.
One key takeaway from Crump’s brief tutorial is that when using multiple fonts, “ensure the font families complement each other” including their width, whether they’re serif or sans-serif and just their basic look.
“The fonts should not be so different that the reader wonders why the fonts were chosen (ideally, users should not notice the font at all), but they should still be different enough to add visual interest,” Crump notes.
There are no hard and fast rules when it comes to using typography in UX design, which gives you a lot of creative leeway; but the lack of strict guidelines can also make it pretty challenging when you’re new to the discipline. However, if you think about typography as being another visual component of UX design (as you should, of course) then it makes sense that one of the most important things to think about with text is the same as what you think about with all of your design elements: How it looks on a page.
The look of your typography starts with your choice of typeface and font. (If you’re new to this, typeface is the “family of fonts” to which a specific font—like Times New Roman, Helvetica, Garamond, et cetera—belongs). Depending on the project you’re working on, you could be working with multiple fonts—but it’s important to remember not to get too carried away here.
When there are too many different fonts on any platform, it “makes a website look unstructured and unprofessional,” according to Nick Babich, editor-in-chief of UX Planet. Babich suggests a maximum of three different fonts for a website, though two is preferable; and he notes that a lot of websites look fine with just a single font used throughout.
Babich also suggests that you use standard fonts because “users are more familiar with standard fonts and can thus read them faster.” Although you will often develop a custom font when designing a logo for a client, he warns against doing the same for standard text. Babich explains:
"
Unless your website has a compelling need for a custom font, such as for branding purposes or to create an immersive experience, it's usually best to stick with the system fonts.
"
If you are using multiple fonts on a website—this could be useful, for instance, if the site has content with headlines and subheads—then it’s good to create a “high visual contrast” between your fonts, meaning that “the visual differences need to be obvious enough to instantly understand the relative importance of each element,” notes Martin Ollivere, a co-founder of Our Own Thing. With that in mind, “one of the most tried and tested routes to typographic harmony” is balancing a serif font with a sans-serif one, he adds.
However, Ollivere cautions that while your fonts should contrast in order to create a visual hierarchy, they should not clash. Ollivere notes that a good way to avoid clashing fonts is to choose fonts that share similar shapes, similar traits—x-heights, glyph widths, et cetera—but don’t share the same classification (such as pairing two serif types “where the serifs themselves have noticeably different styles”) which can create “an unseemly clash of font features.”
Even if you knew only the very basics about typography, you still know when a certain font just looks wrong. For example, when NBA star LeBron James left his hometown Cleveland Cavaliers back in 2010 to go play for the Miami Heat, Cleveland’s owner Dan Gilbert posted a now-infamous angry open letter online venting about James’ “betrayal” … except he did so using Comic Sans.
Comic Sans is the type of font one uses on posters at a daycare; it’s not something a billionaire professional sports owner should use to display a certain gravitas about an issue involving his team. Gilbert was rightly mocked online until Cleveland took the letter down.
There are certain fonts that have a “distinctive personality,” as Ollivere writes, while some have a “neutral body”—he points to a sans-serif header for the former, with the latter being a common serif font. (Serif is the most generic of fonts, which isn’t a bad thing; it can be exactly what your client needs to convey a certain feeling about its brand). In fact, there’s even a psychology to typography that looks at how people react to certain fonts, similar to how colors can make people feel certain ways.
But effective typography goes beyond just picking the right font; it depends significantly on the space (or leading) between lines that you’re creating on a page, whether it be a desktop or a mobile device. Keep in mind that spacing effects the way a user sees the text on a page, which means having too little or too much space is going to negatively impact the readability.
Of course, not all spacing problems are created equal: “Most serious is having too little space between lines,” Tom Clarke, marketing content editor at Justinmind, explains in a blog post.
Clarke notes that line spacing—which is defined as the vertical distance between each line of text—is normally calculated by a percentage of the font size. The standard thinking is that 130-150 percent“is ideal for readability,” with 140 percent generally “the most quoted sweet spot.”
By comparison, setting your line spacing at 100 percent would actually leave no space between adjacent lines, causing them to touch each other.
“This makes for poor readability and atrocious accessibility,” Clarke warns. “It should be avoided at all costs.”
Typography’s role in UX design remains unquestionably important, even if 95 percent of the information on the web is no longer written language. Content is growing increasingly important to brand awareness across industries; and enough of this content will continue to be delivered as text, which means that typography will continue to be inseparable from the user experience.
