Typography in UX: How Text Changes on a Screen
Typography is an important and widely known skill for any designer, but understanding it in print media and digital media can be very different. Many people don’t have a strong understanding of just how important typography is in UX design. The majority of web-based content is text; that means users are going to be seeing typography everywhere they go, even if they don’t explicitly notice it. One of the most important concepts to understand when examining typography is that successful typography is rarely noticed. Bad typography, however, can make a webpage unusable. Here we’ll examine how to master type for digital content and how to make your typography so brilliant it’s not noticed at all (except for those looking for it, of course!)
Choosing a Typeface
Choosing the right typeface for your project can be the hardest and most time consuming step of the typography process in UX design. Jaye Hannah brings up a great point in her article “How To Use Typography in UI Design: A Beginners Guide,” and that is to focus on choosing a font that matches your brand’s identity and one that will connect with your audience. If you know you’re designing for a group of people who tend to zoom in on their devices or enhance images, choose a typeface that is bolder, larger, and easier to read for your audience. Younger and more tech-savvy audiences may be more appreciative of rounder, thinner, and more modern typefaces; it’s all about knowing and connecting with your audience here!
Remember also that you need your typeface to be very easily legible. In this day and age, people don’t spend a lot of time on one webpage; if they have any struggle reading your content, they’ll move onto the next web page in a matter of seconds. When you’re designing for the web, it is more beneficial to work with sans-serif typefaces. According to the National Library of Medicine’s explanation, Serifs were invented for print media to ease readability, but this doesn’t translate well onto a screen. Computer screens can have difficulty rendering the small ends of serif letters, making them less legible when compared to sans-serif fonts. This has improved as computer screens are developed with higher resolutions, but there’s no guarantee that your audience is using a super HD screen, and the goal here is to make your content accessible to as many as possible.
Finally, when choosing typefaces, limit your variety. It is significantly better to use one to two typefaces with an abundant amount of fonts for emphasis than it is to use many different typefaces. Remember that when you use a typeface, it needs to be taken from a font library. Asking a single webpage to recall a large number of typefaces can reduce load speeds and make your webpage more frustrating for users to navigate.
Make Your Content Accessible
A huge part of modern design is an emphasis on accessibility, and rightfully so! You have important information to provide with your design work, so you want as many people as possible to be able to access it. There are numerous tricks to ensuring that your type choices can be as accessible as possible, so let’s get into them.
A great tip is to stick with typefaces that are simple. It’s always fun to try out new options, but if you stray too far from what people are used to reading, it can cause your work to have a decrease in legibility. AEL Data is committed to making our world more accessible, and they suggest working with typefaces like Arial, Helvetica, Open Sans, and Verdana to keep your information as accessible as possible.
There are also fonts that are created specifically for people with dyslexia. According to AEL Data:
“These fonts use stronger lines, curved letters, and different lengths of sticks and tails to make it easier to tell each letter apart”
While creating an entire webpage using these typefaces can be confusing to non-dyslexic individuals, having a dyslexic-friendly toggle that will swap body copy to these typefaces can be extremely beneficial for your content.
Another important consideration is your colors. While not strictly related to typography, color is always important to consider when you’re trying to make content readable. The color of your text needs to have significant contrast with your background. There are some lovely and stunning color palettes that are tempting to use for brands and websites, but sometimes these palettes don’t provide a wide range of value. Remember that your type needs to be readable in any location with any brightness setting. If you want to work with a palette that doesn’t have a huge amount of contrast, that’s still doable, but consider throwing in some much darker darks and some much lighter lights to ensure that you have options when you start creating web-based content.
Use Responsive Font Sizes
A huge part of UX design for the modern world is responsive design. You want your content readable and accessible on any platform. That means your design needs to be equally easy to navigate on laptops, tablets, phones, watches, televisions, and much more. The best way to ensure this happens is to make sure your typefaces are responsive!
Normally, font size values change based on breakpoints that are defined through CSS coding. This allows us to set specific values for font sizes based on the dimensions of the screens we’re displaying content on. This is an immensely important first step in responsive font sizing. Remember that 12pt font on your laptop is greatly different than 12pt font on your phone; your design should reflect that!
Recently, web developers have been using the CSS clamp function to explore even more responsive font sizing. This function allows your text to scale in real-time as your screen size changes; think about when you’re on a laptop and you begin to scale your browser window. The fonts generally change size as you do so to ensure it matches your window size. CSS clamp allows you to make this happen. I still need to explore CSS clamp personally; I think it will definitely be the next element of web design that I look into!
A Quick Recap
Generally, typography for UX and typography for print media function a lot differently. UX puts a much greater emphasis on your user and making your content accessible and easy to navigate. It makes it more challenging to strike a successful balance between creating something that looks compelling and unique, but not so foreign that your audience gets confused. That being said, it’s a worthy and fun challenge to take on. Successfully creating content that not only looks amazing but functions perfectly is, in my opinion, one of the most satisfying challenges to overcome!
Hey! I’m Maggie Theall
I’m a graphic designer with a passion for creating work that not only looks great, but functions as intended.
Through my design journey, I’ve made plenty of mistakes and learned lessons from every one of them. This blog exists to document my experiences and research, so let’s learn together!
Have similar experiences or want to discuss further? Reach out, I’m always excited to connect with other designers!
