In design, we often underestimate the value of how we write text. Words have meaning when you communicate them. But more than that, the tone you use and how you convey them matters more. Typography helps designers in understanding how you can convert words into a story-telling machine.
Before we begin, let us define the meaning of Typography:
Typography is the systematic arrangement of letters and words to make it visually aesthetic and readable for everyone. Modifying weights, size, and spacing of texts all come under typography.
Importance of Typography
So, what is the big deal in how our text looks? They are just words after all.
Nevertheless, the way you visually present it conveys different meanings to the public. And here, we will look at the significant reasons why designers should take it considerably in their UI design:
- Typography makes word legible
In UI design, it is our job as designers to ensure the user engages with our interface. Make your text legible to achieve this purpose. A user must read texts on your interface clearly and understand every bit of the message written. Poor use of typography in your interface can confuse users and often makes their reading experience uncomfortable.
- Typography conveys the right message
The way you write your text matters a lot. Having a well-structured, legible, and appealing text in your interface provides transparency to the user. Everyone looks for clarity. And the way you represent words in your interface helps users to interpret your message quickly.
- Typography grabs attention
Having a hierarchy in your text (such as utilizing headings, sub-headings, body text) helps users distinguish your content. You can increase the font size for the text you want more exposure to and use different colors to make them stand out. As a designer, you can control what you want your users to focus more on.
- Typography adds structure and consistency
Having a hierarchy and font style adds a bit of a structure to your interface. People like to see aesthetically pleasing interfaces that make them comfortable spending time on that web page or app. Good use of typography adds consistency to your interface, making it tidy and organized for reading.
- Typography sets the mood
Suppose when we speak, we can communicate the same sentence in two or more different tones. And it gets interpreted differently. Likewise, the same applies to typography. The font type, colour, and spacing all can represent different feelings when modified differently.
- Typography creates brand recognition
We have seen many top companies utilize their fonts that distinguish them from others. Brands such as Coca-Cola, Samsung, Virgin megastore, etc., have a unique writing style. Applying unique and consistent typography to your interface will allow you to stand out against your competition. Users will identify you from a pool of competitors just by looking at your unique typography structure.
Few tips to keep in mind before using typography in your design
As an enthusiastic beginner, these tips will help you to make good use of typography and how much of an impact you can make in your design:
Tip #1: Never confuse Typeface with Font
A common mistake we make is we often identify a particular Typeface as a Font. A Typeface is a family of all fonts, whereas a Font is a single graphical representation of the text. It is comparable to how chapters belong in a book.
Tip #2: Space your texts well
It is crucial to maintain some social distance between your texts. Ensure your line space (line-height) between your text is not too close and not too far from each other.
I would recommend adjusting it around 1.5 times the font size. Likewise, make sure the space between characters in each word doesn’t get too close with each other.
Tip #3: Alignment matters too
The alignment in your text matters a lot as well. Many are more comfortable reading texts from left to right. (exception some languages that require you to read from right to left)
Users have to keep shifting their starting line while reading a paragraph. And that is annoying.
So, we highly recommend left alignment when modifying your body text. If you want to grab attention for a specific text, then a center alignment can be used in these situations.
Tip #4: Liven up your texts with color
Color plays a vital role in decision-making. Using color psychology, modify your texts with colors that will influence the user into making an action. Using dominant colors for call-to-action text and urgent content is a good practice to draw attention.
Tip #5: Hierarchy is essential
Having a hierarchy in your website or application gives an organized look to your interface. It helps the readers to break down texts they want to read and understand the context. Hierarchy mainly includes headers, sub-headings, and body text.
I highly recommend not using the same font for all three forms. It is best to experiment and use different fonts that complements well. E.g., Serif bold for Headers and San Serif for Body text.
Tip#6: Ensure there is a contrast in your design
Contrast is essential to make your text stand out and your users to distinguish between them. It is best to use a color contrast of 4.5:1 with your background. It helps your text to stand out, so the user pays more attention to your message.
Design your perfect message
It is truly incredible how you can deliver different meanings using typography. A slight variation to the way you present text psychologically affects the user’s decision-making.
To make good use of the concept, make sure your text is legible, visually pleasing, and delivers the right message to your audience.
Now, what are you waiting for? Grab your design tool and start finding your favorite font combinations.