The Elements of User Experience: Typography
Compared to the previous elements of user experience I’ve discussed, your type choice may be the most important one. There’s almost unlimited amounts of customizability, though also a similar amount of rules in how you should be utilizing typography in your designs.
Type Psychology
In typography, there’s a multitude of different font families, all associated with making you feel and respond a certain way. There’s many different categories, with some of the biggest being Serif, San-Serif, Script, Slab, and Monospace
Of the two, serifs and san-serifs will likely be the two most common, with the former often representing tradition and reliability, while the later tends to be seen as more clean in modern. Serifs are typically seen in newspapers and financial institutions while sans-serif is usually aligned with big tech. Ones such as script, slab, and monospace are not as common, but great for representing friendliness, boldness, and progressiveness respectively.
While there’s a tons of different combinations to choose from, these bits of information are important to keep this advice in mind
When choosing fonts for your site, think carefully about how you wish your brand and business to be seen, and what your target audience might be seeking. An elaborate script could be enticing to somebody shopping for boutique clothes, whereas it may come across as snobby to the person shopping for combat pants. A sans serif font may appeal to a hipster seeking a fancy dining experience, but strike a homeowner looking for insurance as being flighty and untrustworthy. A word of warning when it comes to choosing fonts – don’t go crazy trying to fit several different fonts onto your website. This overcomplicates the design and makes the page look cluttered and messy. Best practice is to use one style of font for your body copy and another for the headers.
As with anything in design, knowing your target audience is extremely important. Even if they’re of the same item, boutique clothes and combat pants, it doesn’t mean the same style will work for both. The people who typically buy boutique clothes have a certain mindset, as well as probably a multitude of different reasons for whatever their selection may be. The person buying combat pants just wants practicality, so a script would give him the perception that this place is for people who want clothes for the image, not the usage.
Type in Design
When implementing your type in your design, there’s a number of different minor factors that affect the type. While size and color are self-explanatory, every well designed site pays close attention to these features, leading, tracking, kearning, hierarchy, widows, and orphans.
Leading is the vertical space between types, while kearning is the space between individual characters. Tracking is similar to leading, but rather affects the whole line rather than individual characters. Hierarchy helps differentiate between the fonts by showing which information is most important, as well as properly separating them. Widows and orphans describe when a piece of text is on its own for a paragraph, creating too much white space. Widows are at the bottom of paragraphs while orphans are at the top.
An example of how proper paragraph styling can make the same paragraph look far more presentable
By properly accounting for all these different aspects of typography, it will help make whatever your design is look more professional, as combined it will make your type clean and consistent. Just look at the image above. Those were the same paragraphs, but with proper typography rules applied, it’s much more visually appealing, as well as a lot easier to read
Type in a User’s Experience
Type in a user experience may have to be the most carefully designed aspect of them all. As shown throughout this post, there’s so many different factors going into a font choice. While it’s always important for a font to be legible, it’s even more important for a user experience than say a logo, as the text involved is often the core of the experience. For example, the app for Amazon has a basic san-serif font, as well as a clear sense of hierarchy so you can quickly recognize important info such as the platform a game is for or when it would be shipped.
Another major factor is the use of other elements like space and color to enhance an experience. Many apps have a dark mode of some variety nowadays and with that, they need to make sure every part of the app transitions so that’s all legible. All the type needs to go from black to white and maybe the grays, yellows, and greens that were potentially used will need a different shade. On the other hand, apps like your basic calendar one utilize their negative space very well. Each date is clearly separated, with a little space available for a dot on each day. Once you click on a day you’ll then see even more lines, again all a set distance apart to help show the idea of time moving.
Overall, type may be the most important element of every user experience. Most website or app content contain heavy amounts of reading, with information all throughout the app. If any of this was not legible, the user would quickly leave the app, not wanting to waste time with something they can’t even understand. By having a stable and consistent type throughout, your user will gain a sense of comfort, knowing that each piece of text will remain consistent throughout the whole app.
