Have you ever wondered why some designs look so much better than others? Chances are, it’s all in the typography. Well-used typography can greatly enhance the quality and visual appeal of your work. To help you improve your typography skills, I’ve put together 20 practical typography tips you can implement today.
Whether you are a seasoned professional or just starting out, these tips offer actionable ways to improve your typography skills and take your designs to the next level.
1. Consider the Audience
Typography is not just about selecting the right font or text size; it’s about conveying the right message and emotions. That’s why it’s so important to consider the audience you’re designing for.
The fonts you choose can hugely impact people’s feelings about your design. For example, sans-serif fonts give off a modern and sleek vibe, while serif fonts feel more traditional and refined.
Likewise, an extra-large headline can feel cutting-edge and experimental, which could be perfect for something like an architectural firm. But for a medical design, you might want to pick more modest font sizes.
2. Choose Professionally Designed Fonts
Professionally designed fonts are designed by experienced type designers and offer a wide range of styles and weights. They go through a higher level of quality control to ensure consistency and readability across different platforms and devices.
Would you like some inspiration on which fonts to use? Check out my monthly font fix for February and March.
Design tip: Many professional type foundries offer free trial versions for designers. You can use this opportunity to experiment with different fonts.
3. Apply Hierarchy
To avoid overwhelming the viewer with too much information, every design needs a clear hierarchy of information. One way to achieve this is by using different font sizes, styles and colours. This way, you can direct the reader’s eye and highlight the most important information.
I love how simple yet effective this website hero image by MyMind is.
Design tip: Ask yourself what information the reader should perceive first, second, and third… then start designing.
4. Use Grid Systems
Grids divide a layout into columns and rows to create a frame of reference for content placement. They thereby help align text and images in a consistent and orderly manner.
There are different types of grids, such as:
- the manuscript grid,
- the column grid,
- the modular grid,
- the baseline grid,
- and the hierarchical grid.
Depending on the application, certain types of grids are more suitable than others. For example, a manuscript grid is most often used for book layouts, while a column grid works well for web designs.
Design tip: Take some time and experiment with different grid types to see which one works best for your project.
5. Break Out from the Grid
I know! I just told you to use grids, and now I’m telling you to break out of them.
Grids can be a useful tool to create a structured layout. However, there’s a risk that your design can become too rigid and predictable if you stick too closely to the grid. Breaking the grid can add a surprising element to your design and make it more dynamic and appealing.
Design tip: Like everything in design, don’t overdo it. Just one or two elements breaking the grid is often enough to create a sense of tension.
6. Don’t Mix Too Many Font Styles
When choosing fonts for your design, less is often more. If you use too many different fonts, your design can quickly become cluttered and unprofessional. “No more than three” is a good rule of thumb when combining fonts.
Design Tip: Fonts that are too similar don’t go well together. Try to create contrast by combining a serif font with a sans serif font, for example. In this article, you will find some more tips on combining fonts.
7. Use Contrast
I have just touched on contrast before. You can create contrast by combining fonts. But also through the use of different font sizes, colours and weights (eg. bold vs. light). Contrast helps create a clear information hierarchy and directs the reader’s eye.
One example I really like is from the German chocolate company Jokolade. They placed a colourful shape beneath the typography to make the text stand out.
Design Tip: As you see, contrast can be created not only through typography, but also through the use of other design elements such as shapes, images, and colours.
8. Use Whitespace
Beginners often make the mistake of neglecting white space. But you don’t have to fill every inch with text or images. Often less is more.
White space is the empty space around the design elements. If you use it consciously, you can create a sense of balance and draw the reader’s eye to the elements you want them to notice.
To show you an example, have a look at how Aesop uses very few elements in their designs.
Design tip: Try to strip away everything not necessary for communicating your message. Then, slowly start introducing more design elements.
9. Avoid Pure Black and White
Did you know that pure black and white don’t really exist in nature? Everything reflects subtle hints of the colours around it.
Sure, contrast matters. But especially for websites, using pure black text on a pure white background can quickly strain people’s eyes.
Take my website as an example. The black I use is #0D0E11 and the white is #FFFEFD. Hard to notice, isn’t it? But it does make a difference.
Design tip: Try to experiment with different shades and hues to find the right balance for your design. Trust me—your audience will thank you for it.
10. Balance Type Elements Optically, Not Mathematically
Instead of aligning text mathematically, you should align it optically. Type designers also use optical tricks to make letters appear balanced and pleasing to the eye. Why should font placement be any different? Even if something is perfectly measured, it doesn’t automatically feel balanced.
Check out these examples to get a better feel for what I mean.
Design tip: Trust your instincts and optically align text until it feels right.
11. Use a Type Scale
A type scale can help you determine the size of headings, subheadings, and other text elements. This creates a visual hierarchy and makes your content easier to read.
Start by setting a font size for your body text and then use a specific scale to determine the size of all other text elements. Popular ratios include the golden ratio or the modular scale.
Design tip: Check out typescale.com for a handy tool that calculates font sizes for you. But don’t be afraid to optically adjust the sizes if they don’t feel right.
12. Use Display Fonts for Headlines
Display fonts are specifically designed to look sophisticated and elegant, which makes them the perfect choice for headlines.
With their bolder strokes and more intricate details, they can add a refined touch to your designs. But remember to use display fonts only for large text as they become illegible in smaller sizes.
Also, beware when choosing fonts for a website. Each font installed can increase the loading time, leading to slower page speeds.
So, while it’s great to aim for elegance in your typography, it’s also important to keep practical considerations in mind. In some cases, faster loading times might outweigh the benefits of using a particular font.
Below is an example of the font Freight Display Pro by Cindy Hernandez. Do you notice the delicate details?
Design Tip: Display fonts are usually named something with Display, but they may also go by Headline, Banner, Poster or other names.
13. Adjust the Leading
Leading, or line spacing, is the vertical distance between lines of text. Choosing appropriate line spacing is crucial for ensuring that the text is legible. The ideal leading strikes a balance between being neither too tight nor too loose.
Line spacing is influenced by various factors, such as font type, size and line length. Longer lines generally require larger line spacing than shorter lines, and headings tend to need smaller line spacing than body text.
Design tip: Generally, a leading value of 1.2 to 1.5 times the font size is a good starting point.
14. Use Lead Paragraphs
Lead paragraphs are short, eye-catching summaries placed at the beginning of an article. They are designed to grab attention and give your reader a quick overview of what’s to come.
Lead paragraphs are especially useful for the web, where people tend to skim content. In this case, a lead paragraph can entice readers to delve deeper into an article, even if they’re short on time.
Plus, they can be a valuable tool for people to share content without having to read the whole piece.
Design tip: Set lead paragraphs in a larger font size or start them with all caps or a drop capital.
15. Use Low-Stroke-Contrast Fonts for Body Text
When you’re designing for accessibility (or really, anyone), make your body text as easy to read as possible.
Stroke contrast is one factor to consider. If you go for a typeface with high stroke contrast, such as Bodoni, its thin and delicate strokes fade away in small sizes, making it difficult to read.
16. Use Fonts With a Larger X-Height for Body Text
Another factor to consider is the x-height of the font you choose. Fonts with a larger x-height give more room for the spaces within the letters like e and o (apertures and counters), making them easier to read.
Just be careful not to choose fonts with an x-height that’s too large, either. We read by recognising the word shapes rather than just individual letters. Too large x-heights can make it harder to make out these shapes.
Design Tip: Choose a font with the word text in its name to be safe.
17. Use Italics Rather Than Bold to Highlight Text
Many people, including some of my clients, tend to emphasise words on their websites by making them bold.
It makes me cringe, as this makes the text harder to read. When certain words stand out too much, it can cause the reader’s eyes to jump around the page, making it hard to focus on something.
I suggest using italics instead of bold to highlight. This way, the emphasis is more subtle, and the reader can easily absorb the entire message without distractions.
18. Pay Attention to Kerning
Kerning is about adjusting the spacing between letters to improve the appearance and readability of the text. This is particularly important in logo design or headlines, for example.
Good kerning results in a balanced and uniform typography, while poor kerning can result in awkward spacing that detracts from reading.
Design Tip: If you want to practice your kerning skills, check out this kerning game.
19. Use OpenType Features and Glyphs
Check out the OpenType features and glyphs. They can very quickly enhance your design. They offer a variety of features, such as ligatures, alternate characters and small caps.
Ligatures, for example, are combinations of two or more letterforms that blend seamlessly to create a more appealing image.
Design Tip: To access the OpenType features and glyphs panel in Illustrator, go to the “Window” menu and select “Type > OpenType” or “Type > Glyphs.”
20. Use Proper Punctuation
Clear punctuation is an essential aspect of successful typography. Proper punctuation helps prevent confusion and ensures your message is conveyed clearly.
Make sure you use punctuation marks such as commas, hyphens, and dashes correctly and with the appropriate spacing.
Want to improve your punctuation straight away? Here is a brief list of the most commonly confused punctuation marks:
- Use a Hyphen (-) to join two or more words to form a compound word or to break words at the end of a line.
- Use an En Dash (–) to indicate a range of numbers or to connect two related words.
- Use an Em Dash (—) to indicate a break in thought or sentence structure or to set off parenthetical statements.
- Use a Midpoint (·) instead of bullets to separate a list.
- Use proper quotation marks (“ ”) to indicate a direct quotation or a word or phrase used in a specific sense.
- Use an Apostrophe (’) to indicate the possessive case of a noun or to show the omission of letters in a word.
- Use an Ellispes (…) to indicate the omission of words or to suggest a trailing off of thought.
- Use the correct symbols, such as ½ instead of 1/2.
Conclusion: How to Improve your Typography Skills
Typography plays an essential role in the success of any design. In this blog post, we have discussed 20 typography tips to improve your typography skills.
Let’s recap everything again.
You understood the importance of knowing the audience. Before you start the design process, think about who and what you are designing for.
You learned that a clear hierarchy of information is essential to conveying information in an easily digestible and visually appealing way. This includes the following tips:
- Leave enough white space
- Use grid systems to align text
- Add contrast through font pairing, colour, or size
- Use a type scale to create harmonious sizes for your headlines
But when trying to create a hierarchy, beware:
- Don’t mix too many fonts
- Break out from the grid once in a while to create tension
You learned that when it comes to body text and website designs, it’s especially important to pay attention to readability. Here are some tips:
- Adjust the leading
- Use a low-stroke-contrast font for body text
- Use fonts with a larger x-height for body text
- Use italics to highlight text rather than bold
You understood that small details make all the difference when it comes to mastering type:
- Pay attention to kerning
- Use OpenType features and glyphs
- Avoid pure black and pure white
- Use display fonts for headlines
- Balance type elements optically, not mathematically
- Use proper punctuation
Finally, you learned that professionally designed typefaces come with more styles and higher quality control. This gives you more flexibility and improves the readability of the text.
Follow these typography tips to take your typography skills to the next level, and you’ll see your designs improve significantly.
Are you interested to improve your typography skills even further? Numerous books and courses offer an excellent way to delve deeper into the subject.
A valuable resource is also The Flawless Typography Checklist by Typewolf, which synthesises insights and expertise from various sources.
If you enjoyed reading this article, you may also find my other articles on typography interesting.
If you have anything to add, I would love to hear your thoughts.
