12 Principals of Typography for UI Design

Created by Anagrama Studio | https://www.behance.net/gallery/114545459/Lumio

Arguably, typography has become one of the most demanded designs in the current modern days. The use of attractive fonts and wording brings a lot of aesthetic aspects while giving literal meaning. But when taking it to UI Design, the implementation is not merely cool-looking words or fonts. It should be usable, readable, accessible, aesthetic as well. Here are some tips for you.

The Principal Of Creating Typography for UI Design

1. Understand The Terminology

Before you create those fancy-looking curvy fonts, it is important to understand the terminology term. This kind of knowledge is pretty much the basics of lettering. Jot down and make sure you know the difference of terms such as leading, kerning, and weight. From that term, then you can create even more aesthetically pleasing and readable.

To give you a basic understanding of typography, some of the terms will help you create an appealing UI design. The first one is tracking that also goes with the name of letter-spacing. Just as the name says, tracking is all about increasing or decreasing the horizontal spaces between every character.

Meanwhile, the leading in typography is the vertical spacing between two baselines of the words. On many occasions, you can also call this kind of terminology line-height. At the same time, the baseline itself is the term that explains the invisible line on which the text rests (the underline).

To make your font and lettering readable or stands out, you also need to understand the weight. The weight refers to the thickness of the typography strokes. In the UI design, you can see this kind of term applied as light, bold, and black, which look thicker as it goes. Another thing that is pretty much important to note is the serif and sans serif option.

For your information, you can indicate a serif as a small stroke or small line that is regularly attached to the end of a letter or symbol. The serif itself appears within a particular family of fronts. Meanwhile, the typeface that does not include serif will be called a sans serif. Choosing typefaces is also vital in creating typography in UI design.

Created by Uliana pltnikova | https://www.behance.net/gallery/116666689/BioKai

2. Mind The Scale

When discussing UI design, you will have a lot of font scales to understand. In this case, you can create your font scale to help the reader understand the different hierarchies in your lettering. With the scale, you can also easily indicate which part is a paragraph, button, heading, title, or anything else.

To help you create the most efficient one, you should start with choosing the font. You can get some high-quality UI fonts from Adobe or Google. After that, you can determine the base type scale for the body (mostly in 16pt). After that, you can establish the other scale by determining the line height.

The appropriate line height is ranging from 130% - 180%. You can choose the typography line height as needed. After that, you will need to create a scale value to multiply by your base font size. The common scales to use are around 1.618x, 1.5x, 1.414x, or 1.250x. Choose the one that works for your font and test your UI design. 

Created by Dmitry Plotnikov | https://www.behance.net/gallery/116813397/IVEONE

3. The Hierarchy Of Your Interface

As said in the previous part that your UI lettering will also have a hierarchy. In this case, creating an appealing UI design should implement a hierarchy of lettering to help enhance readability and scannability. The primary reason and usage of the hierarchy itself are to make your audience find the most important information faster.

So, what should you do? Worth noting that most of the time, the UI design consists of a few standards or bare minimum elements. It can be boxes or rectangles, text, icons, or buttons (commonly in rectangles and text). The utilization of all that element will either break or make your interface appearance.

With that in mind, you can underline that the best typography tricks to cope with hierarchy is by doing big. Make every important part bigger or highlighted. It can be a bolder text, a bigger scale, to the use of larger shapes to highlight certain parts. Thus, it will draw people's eyes and see it for the first time. For the less important parts, you can use lighter and smaller text.

Created by Roman Lel | https://www.behance.net/gallery/113708023/Service-for-selection-of-furniture-Furnitex

4. Readability Is the Focus

When you look at many typography designs, most of the time, it has fancy-looking curves and unnecessary winding strokes. The main idea of using this kind of lettering is not only to make it aesthetically pleasing but also to convey the meaning. That is why, when you are creating a UI Design, the essential key is to make the typography readable.

UI design is not always about aesthetics, but you also need to make sure that the audience can navigate and understand it. In this case, you can focus on your lettering readability by considering some basic settings. The first one is the text size that should be around 16 as the minimum since most of the devices will support and appear okay with this setting.

You also need to consider the color. You cannot create a good efficient UI using colorful or rainbow color without designing it. The striking yellow or green on top of the black background wasn’t the best option anyway. Thus, take the best 4.5:1 contrast ratio as your rule of thumb. You can use a stark plugin to find a sufficient ratio. 

At the same time, UI design should not only rely on color. You have learned about hierarchy and the most standard element in the design, then use it. When you want to emphasize or highlight some information, it is better to include a picture, sign, or symbol along with the color. Thus, people will easily notice the information.

However, you will also need to mind whether the images are necessary or not. Typography that is easy to read will need to support a resizable aspect. In this case, consider choosing a text that can reach up to 200% larger scale without any negative effect on the readability and the function.

Created by Ekaterina Grigoryeva | https://www.behance.net/gallery/108501239/Web-design-for-Trade-Capital-Industrial

5. Optimizing Negative Space

As told in the previous part, highlighting certain areas will help you emphasize the significant information. One thing that you can do is optimize the negative space. In the design itself, your negative space is the white section which does not contain any element. There is nothing in it except the pure white space in your UI design.

It may look like a piece of error in the whole User interface, but the white space allows the viewer to take a break and breath. At the same time, you as a designer can stabilize all the design and components for your design. Take it to your utmost advantage by using typography design in it, so you can lead your reader’s attention to it.

Created by Elena Saharova | https://www.behance.net/gallery/107075281/WayRay

6. Carefully Choosing Typefaces

When you implement the typography in your UI, the type of typefaces you have chosen will create an impression. As you mix too many different fonts, your app will appear sloppy and somehow fragmented. Meanwhile, when it lacks variance, the app will look as if half-done. So, what is the best solution to it?

To Underline that selecting your typeface for UI design isn't a random process. One consideration to make is ensuring the font will connect with your audience. You also need to make sure that your typeface will help you communicate with the reader until the end. So, it is better to understand your target audience beforehand.

Now, think about it! It is mostly impossible to create a big chunky font with bright colors for an office brochure. That kind of UI typography will be more appropriate for kid toys pamphlets. Other than that, you can also reflect your choice by using the same font families. They are mostly consistent and flexible since they are designed to work together.

Created by Snask | https://www.behance.net/gallery/97880525/Travis

7. The Line Height And Length

Don’t forget about the line spacing. Since a long time ago, even to the printed lettering, the line spacing holds an essential role in the result. It can break or enhance the readability of your lettering. So, it does the same with UI design. Optimizing the separation between different device sizes is particularly important in the modern age UI device.

To help you cope with this matter, you can create the lettering with 130% - 180% of line height. It will help enhance accessibility and readability. Apply and try it on different devices, so you can determine the best spot, spacing, and scale for your typefaces. Underline that when it is too little, it will be hard to read. But when it is too much, it is easy to get lost in it.

When trying to make the best typography line, consider always checking the line spacing every time you change the font or the size. One thing for sure, every font has a varying maximum height, which can break your previous setting. If you use smaller typefaces, make sure to have more spacing so it is easier to read.

Along with it, you can consider limiting the line to 70 -80 characters. In this case, a long line of text will look pretty intimidating. At some point, it will be harder and confusing to follow. By implementing this idea, your UI design will appear neat and easy to read. While you are determining the line height and length, make sure that you do it consistently.

Created by Adrian Red | https://www.behance.net/gallery/100144759/Ykone

8. Recognizable And Understandable Words

Most of the time, people only take the aesthetic and the readability aspect of typography. But how about making it more understandable. One thing that you might want to jot down is that readable and understandable are two different terms. Readable words are not always easy to digest, and vice versa.

So, rather than only focusing on making your UI appealing, make sure people will stay and feel contempt for it. One way to do it is by presenting something that they can understand. Making this kind of condition is not that hard. You can implement it on your UI design by following the same old rules in lettering.

The first one is to always keep it short, sweet, but remarkable. Shortened information should not lose its purpose. But instead, it conveys the real meaning without making it a roundabout journey. A very simple example is using the Join Premium To Get Access button than saying Only Premium Members Will Have Access To This Particular Feature.

You can also make it simple by starting your saying with an objective. In this case, you can use To Get Premium Discount, Click The Registration Button Now. You also need to make the lettering consistent, use present tense and avoid any jargon. Yes, jargon is fun. But remember that not all people are experts in the same field as you are.

Created by Adoratorio Studio | https://www.behance.net/gallery/108886915/Awwards-Conference-2020

9. Using Proper Grammar

A little slip of the tongue can change the whole meaning. It does the same with typography. As one of the essential parts of UI design, whatever you wrote on your UI will be displayed and seen by the audience. Every little detail of your fancy stroke of fonts, color, scale, to line height is what your customer sees, including your wording and grammar.

No matter how good and cool your typography is, a little error in spelling and grammar will leave a long-lasting mark in your application. At some point, your application and design can appear very cheap, unsightly, and have a negative impression. That is why proper grammar will boost your UI Design work professionalism.

Created by Cantiere Creativo | https://www.behance.net/gallery/92384381/Archivio-Michelangelo-Antonioni

10. Considering Language Support

Typography is not only limited to one or two languages. The freedom of using fonts and typefaces means that you can consider language support as much as you want. Except for some countries that use different alphabets, such as Arabic and Hebrews, you will need to consider alignment. It will be one of the essential keys since the character starts from right to left.  

Appearing professional and supporting multi-language is not something new in UI design. However, the implementation itself is not as easy as you think. The different characters, displays, and lengths of words can drastically affect your layout and pixel. It mostly happens in the button and the certain section of your UI.

If you are trying to use this idea, you should keep in mind the word length. Different languages can have varying word lengths. Even though the typography uses glyphs, the spelling can be way too diverse. You name some of them., such as German and English. The word NEW only takes three letters. But in German, it turns into NOUVEAU with 7 characters.

The same with Arabic and Hebrew that have different orientations. Your UI design can turn into disarray without proper accounting. In this case, the design acquires proper adjustment in the aspect of size, spacing, and alignment. You can experiment and try several times to make sure that the typography works well in your UI, even with different languages. 

Created by Eirik Eriksen | https://www.behance.net/gallery/97900459/reMarkable-Digital-Magazine

11. Emphasizing The Important Part

If you are trying to convey something important in your UI design, then make sure you emphasize it. As said many times in some previous points, you can do this kind of trick by highlighting the elements. You got a lot of ways to make your typography stand out. From playing with the weight, size, color to everything just to make it distinguishable for others.

You can say that this kind of idea is part of the essential key of UI design. By emphasizing something, your audience will have something to go and run after. It is also very helpful to improve the scannability of your interface. Thus, the reader will understand what are the most important things that they have to find in the UI.

Another thing that makes this idea vital is the fact that you can lead the reader to do your desired action. A simple Typography trick such as a popping color and sign is easier to recognize than a full-length article. You can ask them to buy a certain product, offer a discount, show the current occurrence, and much information you want to tell.

Created by 10Clouds Team | https://www.behance.net/gallery/70302235/Zick-App

12. System Fonts As The Last Resort

There is no doubt that UI designers want to make a signature touch in their product. That is why the typography for UI design is particularly thought of over and over again. But when the desire is too challenging and it just not worth it to make it from scratch, then choose the system fonts. This kind of option might sound trivial but worth the effort.

Good news for you if you are keen on perfect typography, Android and iOS possess native system typefaces that are more flexible and adjustable. Most of the options support ranges of languages, weight, styles, and size. It also supports dynamic types that are resizable. That is why you can create UI design easier. 

Created by 10Clouds Team | https://www.behance.net/gallery/102048063/Daily-Recipe-Mobile-App-Interaction-Cooking

Conclusion

When talking about typography, of course, this particular design harbor looks, aesthetics, and meaning. But when you use it for UI design, it is not merely using a fancy-looking font. You should consider the scale, the terminology, focus, readability, height and length, grammar, and your choice of font and color.

So, which tips are the most challenging for you? Feel free to give your feedback by writing in the comment section below. We hope you enjoy this article and have a great day!