Typography is an essential element of the UI and UX design of any website or applications. It is a key to create a strong brand identity, make good first impressions, and grab users' attention. Some may not take it seriously, but oh well, bad typography can actually bring down your brand and business.
You might ask, "How come?" So let's just dig deeper into this article to get the answer!
In UI/UX design, typography is known as the art of organizing typefaces to create readable, usable, and user-friendly interfaces or experiences.
90% of digital products interfaces, such as websites or apps are made up of typography: text and copywriting. So, what appears online will definitely affect people’s perception of your brand and business. A wrong choice of typography may lead to dreadful results.
Now, we’re getting into the ultimate question: why and how can bad typography bring down your brand or business?
Let’s try by looking at this picture.
Two same sentences, different typefaces, and you’ll get different feelings while reading those sentences. Typography can really have a direct influence on the emotional state of users.
Take a look at another example. If there are two websites, one presents information as in the left picture, while the other arranges it as in the right picture. They use the same fonts to give the same information. But which one will be easier for users to read?
Yup, the right one would be easier for users to read. Users may become tired if they spend too much time reading the text on the left website because the spaces between the lines are too tight together. So, choosing a font is only one aspect of typography. It also matters how you arrange and present the texts.
The wrong choices of typefaces & fonts, font size, color, letter spacing, line spacing, alignment + too many typos may also discomfort users experience and negatively impact their perception of your product & brand.
The worst case scenario? They won’t be using your products anymore if they can find a better one.
There are quite a lot of reasons what good typography can bring to your products.
Good typography conveys information in an engaging manner, improving the readability and accessibility of the UI. Users can read, scan, and navigate with simplicity thanks to this. Additionally, it makes it easier for them to locate the desired information.
You need to give your users the gift of well-designed typography to make their experience on your website or apps effortless since they are giving you their time and attention.
Users are more likely to stay on your websites or apps when the typography is good. If they become disappointed, there are always engaging alternatives just a click away.
Some studies have shown that there is the influence of typography on the establishment of credibility. The New York Times conducted a study by showing the same information using 6 different typefaces (Baskerville, Computer Modern, Georgia, Helvetica, Comic Sans, and Trebuchet) to 45,000 readers.
The result showed that those who read the text in the Baskerville typeface were significantly more likely to agree that the information was accurate. People who read it in Comic Sans, on the other hand, were much less likely to believe.
So if your goal is to establish credibility among your users, paying attention to the typography you use is important. Trust & reputation are something that cannot be built overnight, but they can be built through every small detail, including typography.
Now you know how important typography is. What elements go into building good typography that impact your brand image? Here are some of them:
The terms "typeface" and "font" are often used interchangeably today, though actually they refer to slightly different things.
Typefaces are used to describe characters that share design features. Helvetica and Times New Roman are examples of typefaces. Meanwhile, fonts are the particular weight, style, size, and effect of a typeface. For instance, the Helvetica typeface, for instance, has 51 fonts, including Helvetica Regular, Helvetica Bold, and Helvetica Light.
Nowadays, the term typefaces is also known as “font family”.
Each typeface or font is associated with a certain image. A font may create a sense of professionalism, while the other might resemble something modern and simple. So think inwardly when choosing the typeface and font to use for your website or apps. What sort of impression do you think your product wants to convey to users?
Different font sizes are suitable for different purposes. Do you need to convey a catchy headline? Then you need to choose a larger size. Choose the appropriate size to make your text readable.
According to a study case by clicklaboratory.com, the conversion rate increased by 133% when the font size on Numara Software's website was adjusted from Arial 10 pt to 13 pt. Because the font size used previously was too small, it was difficult for users to read.
Another crucial component of typography is color. You must select a text color that will both make the text readable and appealing to the eye. Make sure the text color stands out against the background color.
Let your text breathe. Letter spacing, also known as tracking, is about adding or eliminating space between letters. Again, the purpose of adjusting it is so users won’t struggle while reading the text.
Line spacing or leading is the amount of vertical space between lines.
Text, graphics, and images are combined and composed through the process of alignment to ensure that there is an equal bit of space, size, and distance between each element.
This is something additional but is equally important. Misspellings or typos that appear on your website or apps might not directly harm your brand. However, when it’s too much, it might also affect your credibility.
The New Yorker maintains its image across print and online media by bringing their magazine's recognizable font to the web. The reader will have the impression that The New Yorker is a traditional and well-established publication thanks to the use of serif font and the Irvin typeface. Additionally, the site's clean, minimalist layout will make for a pleasant browsing experience for users.
Finland's capital city, Helsinki, developed a new brand identity in 2017 to convey the idea that Helsinki is a simple, beautiful, contemporary, useful, and enjoyable place. The city's official website, myhelsinki.fi, as well as other locations are all updated concurrently with the new identity. To support this branding, The Helsinki Grotesk, a customized sans-serif typeface, is used.
.jpg)
Through the consistent visual languages used throughout its milk cartons, websites, and social media platforms OATSIDE, an oat milk brand, successfully conveys its colorful and playful identity. The identity is also communicated through the casual and humorous copywriting, and a well-thought-out bold yet clean typeface.
There is no single standard on how to create the well-crafted typography for your products. However, the secret of success lies in clearly understanding your purpose, your target users, as well as the medium you use.
