Design, UI, UX, Insights
10 Essential Font Tips to Become a Master of Typography
These 10 font tips will make your typography designs impactful. It is a simple science and has nothing to do with talent.
One of the most important aspects of any visual presentation is choosing the right fonts.
And although the right tone and message is the base of any business, the visual performance will make it get across and impact.
This is why in this article we will review 10 essential font tips that you will definitely find useful when you have to make your own combinations.
And if you want to learn more about fonts, and the difference between typeface vs. font-family vs. font, at the end of the article, we’ve answered the question “What does typography actually stands for?”
10 Essential and Easy Font Tips
You may already know some of the font tips, but we recommend you don’t skip them. Go through them, write them down, and check whether you follow them. You will be surprised how often we tend to forget. Everything here is essential for any visual presentation of text and will give you a hand when you need to decide which font to use or how to combine your fonts. So let’s get to it.
1. Plan Your Text Hierarchy
A well-planned text hierarchy hitches the audience to the actions you expect them to take. Start with the copy elements by dividing the content into headings for the main topics, subheadings for the subtopics, body copy for the descriptions, captions, and other elements.
Depending on your design, you could use either of the methods and create a hierarchy through font size, width, colors, spacing, and content position. These methods will establish contrast and highlight the key information you wish your audience to pay attention to.
The typography hierarchy will divide the content into:
- Headings for the main topics [H1, H2]
- Subheadings for the subtopics [H3, H4, H5]
- Body copy for the descriptions, minimum 12px (tend to increase nowadays to 16px)
- Captions
- and other elements
2. Consider Your Potential Audience
This is probably the first thing to consider, so here are the most essential font tips. Think of how to set the right tone for your potential viewers. What is the mood you want to provoke and how does it align with the exact audience you target for your content.
Fonts have their own mood, from serious, business, formal and strict to friendly, funny, and casual. Consider the needs and preferences of your target audience, and what sort of experience your viewers expect.
Since the visual performance of your fonts is what will make the very first impression on the viewers, make sure your fonts don’t create misunderstandings. It might sound over the top, but such a misunderstanding might damage a business’s reputation. For example, if the landing page is strictly for business but the designer chooses a casual or silly font, the audience might question if the agency is indeed trustworthy. On the contrary, if you design a page that aims at teenagers and uses strict, formal, elegant fonts, the targeted audience might consider it boring.
What happens if you need to communicate your message to a wider range of audiences? Here you could consider using more neutral fonts in which personality isn’t that obvious. The so-called workhorse typeface is such a neutral option. The workhorse is a basic font that blends well and doesn’t draw much attention.
3. Think About the Mobile Experience
Unlike designing for the web, creating a mobile design is even harder and it has way more details to consider. A big part of it is mobile typography which requires you to think about what font size and functionality on a small screen.
The font needs to be big enough to be legible and small enough to fit the screen. The clickable text parts also need to be the right size for a finger to easily tap on. Other details that you might find important are the contrast level for a screen with ambient light.
4. Use Two or Three Fonts For The Same Layout
This goes also for different styles of the same font. Although a different style (bold, semi-bold) is great to emphasize key elements of the content, overdoing that will inevitably make the text look messy. This may have the opposite effect and will make your content harder to scan and read. It’s all about a good combination of fonts.
In this example, PACT Media perfectly combines Felix Titling for the heading and background animation with Exo Sans for the navigation and body text. It’s very easy to visually distinguish these typefaces from one another, which allows them to create a good visual hierarchy.
There are a few combinations that have earned their status as classics. The first one is Serif for the headline and Sans Serif for the body that harmonizes perfectly. The reverse combination is much less common. Another good way is to simply combine fonts from the same family that looks to complement each other.
5. Organize With Spacing
Other impactful details of planning are to use of spacing and alignments to avoid a cluttered design. There are a few types of spacing, so let’s view the most common.
- Letter spacing (tracking): the consistent amount of horizontal space between characters in a text passage.
- Line spacing (leaning): the amount of vertical space between lines. Usually 50% of the height of the text line for body text and slightly greater for headings.
- Margins and Paddings: the blank space around the edges of your design, dividing the whole page by boxes
- White Space: every blank space in your design, keeping everything organized and balanced. It allows the content to breathe, it also gives a place for the eyes of the viewer to rest.
6. Be Consistent With Alignment
Alignment improves your typography via consistency and logic. To achieve this, the best practice is to pick one style for the body copy and consistently follow it. Usually, designers use left-aligned.
It’s also advisable to avoid justified alignment as it creates a messy look and disrupts the consistency and readability of the copy. This happens since justified alignment creates irregular spacings and random white space within the lines.
7. Create Contrast
Use contrast to put emphasis and make your key elements stand out. Contrast automatically communicates the importance of your title or any element you wish your viewers to notice. It makes a huge difference and presents your message in a very organized way. You can certainly do that by tweaking size, color, weight, and style.
Here’s what to consider:
- Keep legibility with higher contrast between text and background.
- You can never go wrong with black and white.
- Choose one uniform color for the entire text, except for hyperlinks.
- Use blue only for the hyperlinks.
- Considering the most common type of color blindness is red-green, avoid red and green for visual emphasis.
- In cases where you have to use background images, place the text where the viewer can read it easily.
8. Reduce the Amount of Text
This is something that mostly concerns content writers, however, designers may also play a role in it. If you can say it in 3 words, don’t do it in 6.
Also, think about whether a concept could be displayed in an image or infographic, or diagram instead of a text-based paragraph. Sometimes, it’s more effective to communicate concepts through icons, images, and photographs. As visual creatures, images and graphics are the very first thing we notice when we land on a page.
9. Avoid Faux Bold and Faux Italics
Sometimes, there aren’t files for bold and italic. It might be the designer’s decision or just the fact it requires extra payment for the remaining files. In each case, there are apps that fake those bold and italic versions of a font by skew and slant letters or adding lines around each glyph. This is why these bolds and italics are called faux.
Unfortunately, faux styles often decrease readability since they ignore the difference between the thick and thin elements of a character. In addition, they often look stretched and low quality. To make things worse, some clients and programs can’t even indicate them so it’s up to you to figure out whether they have been applied or not.
Make sure your programs are rendering the intended fonts and always make a comparison to what you actually have on file.
10. Build Your Own Font
I’m not saying you have to craft the fonts for your project. However, as a final piece of the font tips, why not build a font from scratch in your spare time. When you are ready to sit down and start designing, you will be able to put all your creativity and knowledge to the test and gather a deeper understanding of fonts in the process.
It’s a great exercise that will only improve your view and perspective of what’s effective and balanced. After all, mastery challenges itself, so never stop trying and learning.
Typography is the art of arranging letters and text in a way that makes the copy legible and visually appealing to the reader. It involves font style, appearance, and structure, all aiming to evoke certain emotions and convey specific messages.
So let’s first go through the basics real quick and learn more about the different elements of typography:
- Typeface vs. Font Family vs. Font – what’s the difference between the three
- Typefaces Classification – and what are the main groups of typefaces
- Text Hierarchy – how important are the size, weight, color, and space
Typeface vs. Font Family vs. Font
- The typeface is the design of the lettering and each one collects letters, symbols, and numbers, all known as glyphs.
- The font family groups individual fonts that originate from the same typeface, based on common stylistic features.
- Fonts refer to different variations of a typeface or font family, such as light, regular and bold.
For example, IBM Plex by Google is a typeface with three main font families that originate from it: IBM Plex Serif, IBM Plex Sans, and IBM Plex Mono. In the meantime, each font family groups individual fonts. IBM Plex Serif groups IBM Plex Serif Regular, IBM Plex Serif Italic, IBM Plex Serif Bold, IBM Plex Serif Bold Italic, and other fonts.
Typeface Classification
Speaking of stylistic features, typefaces can be classified into a few categories. The most common ones that we’ll focus on are serif, sans-serif, monospaced, script, and display, however, there are also a lot of subcategories such as slab serif, grotesque, geometric, blackletter, handwritten, typewriter, novelty, and many more.
📝 Serif Typefaces
Each serif typeface consists of glyphs with distinguishable details that finalize the strokes of the characters, known as serifs. The characters are classic and elegant and ideal for large blocks in newspapers and books. In terms of online use, however, their readability is considered heavier for long paragraphs. That is why, in digital copies, serif fonts are used mostly for headlines. Serif subcategories are Old Style, Slab, and Modern.
📝 Sans Serif Typefaces
Sans Serifs are cleaner-looking glyphs and the absence of details on the strokes makes them much easier to read for bigger paragraphs in digital format. Today they dominate the online presence as they look modern and minimalistic. Sans Serif subcategories are Grotesque, Neo-Grotesque, Geometric, and Humanist.
📝 Script Typefaces
Aside from the main types, there are also Script typefaces that imitate handwriting. They usually fall into two categories: formal and casual, and their use depends on the design and the feel you need to convey. The formal is elegant and classy and looks great for headlines on 5-star hotel pages, while the casual resemble modern handwriting and look messy and playful.
📝 Display Typefaces
The Display type is the most diverse and eccentric category. These typefaces are more creative and ideal for very short text lines that need to grab attention. Naturally, they are a bad choice for paragraphs as their readability in most cases is extremely poor, however, they are great for headlines and logos.
Text Hierarchy
One of the first steps a designer takes is to plan the text hierarchy, as it is one of the aspects of using fonts that makes a design stronger and more effective. It is what presents your content in an organized way to grant your audience a seamless and intuitive experience while scanning your page.
The most basic classification of text hierarchy is the division of headline, subheading, and text body. However, if your copy has more than one heading, you need to create a hierarchy and organize those headings. It’s most common to start with Heading 1 for the main topic and follow through with Heading 6 for any subtopics.
You can establish text hierarchy through size, weight, style, color, content position, type, and spacing.
- Font sizes: The bigger a text is, the more noticeable and important it gets.
- Font weights: Heavier fonts have a stronger and more impactful presence in a copy. They contrast the thin fonts of the body text and draw attention.
- Font styles and colors: Same as font weights and sizes, some font styles are more eye-catching than others.
- Content position: You can establish text hierarchy without using different fonts, sizes, and weights. Just like in CVs, the headlines go on the left, while descriptions go right to the corresponding title.
- Spacing: It helps the content breathe and gives a much better-organized look. The bigger the spacing between the two elements is, the less related are two sections of the text. It suggests a change of topic, context, and more.
In Conclusion
These ten font tips are not something ground-breaking and unheard of. They just organize what you already knew felt right but probably never decided to put into written rules. Just like in everything related to design, organization, structure, simplicity, and consistency is the key to crafting great typography designs. In fact, designing something that will impact your viewers and make them want to read your message is a simple science and has nothing to do with talent. If you want to master the skill, you can master the skill.
In the meantime, you may also be interested in some of these related articles: