Table of Contents
Welcome in part 7 of UI design series, today focused on font families. If you didn’t read the part 6, here is a quick summary … You learned to always create the color palette before going deeper and to prefer vibrant colors. Contrast is the one thing that brings clarity to your UI design and that color preferences will vary across industries. Three colors is the best amount and when in doubt, choose complement colors. Now let’s talk about font families …
The difference between font and typeface
Before moving on to individual steps you can make to create an awesome design, we should first clarify one thing … What is the difference between font and typeface? For those of you coming from web design, we are not talking about font as a CSS property you can use to set font weight, size, line-height and font family. We are talking about font in relation to its roots, the print industry. When people talk about typeface and font in general, they are often confused and interchange these terms.
“Font is what makes up the typeface.”
The difference between typeface and font is actually very simple. Typeface or a font family is the set of fonts composed of characters and numbers. So, when you take a look at the glyphs created for that particular font, this is the typeface. On the other hand, font is what makes up the typeface. It is a specific typeface in a specific size in a specific style – a collection of characters. I hope this will help you distinguish between these terms.
No.7: Define font families
The first thing to do is to understand the basic classification of font. Fonts can be divided into four groups. Serif, sans serifs, scripts and decorative fonts. Most of the time you will see some example of serif or sans seri. The difference between those classes is simple. Sans serif font does not have the small feature at the end of strokes. This feature is called “serif“, it’s from Dutch word for “line”. “Sans” is from French and means “without”. So sans serif is without line. For example, Arial, Futura and Helvetica are Sans serif fonts.
Script typeface is created by and looks like a handwriting. Individual glyphs are organized into highly regular formal types similar to cursive and more casual scripts. Decorative typefaces are not a good choice for body text because they are often harder to read in larger chunks. This is a very brief intro into font classes. More can be found here.
One of the hardest jobs of a designer is to choose the perfect duos. Not only you have to pick one font that will reflect the mood and convey the message you want, sometimes you also need to go through the whole process again. Well, you don’t. You can create amazing design using only one font the whole time only switching between different styles and weights.
“You can create amazing design using only one font.”
However, if you or your client insist on two you can either look for font that is similar to the one you already have or different. With similar fonts, you can create contrast by applying different font styles, weight and size to create a hierarchy. You can also pair fonts of the same typeface classifications (serif, sans serif, script, decorative). It will still give the design a good contrast. Sometimes, the typeface designer will make it easier creating serif and also sans serif versions of the typeface.
When working with font, one or more, it is important to set a clear hierarchy. In case of one font, the easiest way to achieve this is by using different style (italic, oblique), weight (light, book, medium, bold, etc.), size and color. However, the same strategy applies to two or even more fonts. In order to create a clear hierarchy you have to make the individual types of content (title, sub-heading, body, etc.) easy to distinguish so reader can understand the connection between them.
“It is important to set a clear hierarchy.”
Size and weight are probably the most often used ways to create a hierarchy. Even in situation when some font does not have more than one weight, say book (normal or 400), you can still create a contrast and hierarchy through size. In case you are limited in space, another option is to change color. Color should be used according to how important that part of content is. Title should be the most visible, then body text and then sub-headings. Meta data like dates, author and other information are the last and lightest.
One thing to keep in mind is to search for and use legible fonts. Now, we have incredible amount of fonts available and easy to use. However, just because some font is online does not mean it is usable. Even some of the older typefaces used in print are not suited for screen. For example, using Times New Roman on screen is pretty bad idea. On the other hand, Verdana, Arial and Georgia are much better.
“Search for and use legible fonts.”
The problem with many typefaces is that they are not optimized to be used on screen. When rendered by a browser or some device glyphs can be harder to recognize and read. Individual characters can merge together in smaller sizes. They can be distorted, blurred or have other issues. They will not be crisp and clean. To test the legibility of font you should view it in different sizes to see if individual glyphs are still recognizable and readable.
A good idea for your design can be using highlighters. This is not something you can see that often and some people may consider it a small detail, but details such as this matter. By having highlighted specific piece of content “as default” you can suggest to user it is either important or he can interact with it. Don’t forget to check whether the user can highlight part of the text and if it is clear and visible. Highlight that is not readable is useless.
When in doubt choose sans serif font. If you are designing for screen and don’t know what class of typeface to use, it is better to go with sans serif. One good reason for this is that sans serifs are more flexible choice than serifs. They tend to take on the characteristics of other typefaces used with them. Also, on the screen they often tend to be more readable and legible. In the end, the most important factor will always be the mood and message you want to convey.
“When in doubt choose sans serif font.”
Final words
This is all for today and this, seventh, part of UI design series. In a recap … Various font classifications are no longer a mystery for you and you can now surprise your colleagues and friends with your knowledge about typography. You are also better in pairing fonts and creating perfect duos. You know how you can create a visual hierarchy through the content to help reader understand the information. You discovered that not all fonts are optimized for screen and that highlighters can be useful tool in UI design. Last, when in doubt go with sans serif.
As a bonus, you now know the difference between font and typeface!
Thank you very much for your time and see you in the next part of UI design – 10 steps for great user interfaces. In the next part you will learn about image optimization.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
