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 significantly 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 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
Every design needs a clear hierarchy of information to avoid overwhelming the viewer with too much information.
One way to achieve this is by using different font sizes, styles and colours. This will 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 help align text and images consistently and orderly.
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 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 useful tools for creating a structured layout.
Yet, if you stick too closely to the grid, your design can become too rigid and predictable. 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 my article on brand fonts, you will find more tips on combining fonts.
7. Use Contrast
I have just touched on contrast before. You can create contrast by combining fonts or using different font sizes, colours, and weights (e.g., bold vs. light). Contrast helps create a clear information hierarchy and directs the reader’s eye.
One example I 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
As beginners, we often neglect white space. But you don’t have to fill every inch with text or images. Usually, less is more.
White space is the space around your design elements. If you use it intentionally, you can create a sense of balance and draw the reader’s eye to the elements you want them to notice.
For example, look at how Aesop uses remarkably few design elements.
Design tip
Try to remove everything that is unnecessary to communicating your message. Then, slowly introduce more design elements.
9. Avoid Pure Black and White
Did you know that pure black and white don’t 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 white background can quickly strain the eyes.
Take my website as an example. The black I use is #0D0E11, and the white is #FFFEFD. Hard to notice. But it does make a difference.
Design tip
Try experimenting 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 always align it optically.
Type designers use optical tricks to make letters appear balanced and pleasing to the eye. Why should font placement be any different?
Precise measurement doesn’t automatically feel balanced. Check out these examples to see 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, 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 adjust the sizes if they don’t feel right optically.
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, display fonts 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 consider practical considerations. 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 called something with Display but 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 tight nor loose.
Line spacing is influenced by various factors, such as font type, size, and line length. Longer lines generally require larger spacing than shorter lines, and headings need smaller 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 reading the whole piece.
Design tip
Make your lead paragraphs stand out. Use a larger font size or a different font, or start with all caps or a drop capital.
15. Use Low-Stroke-Contrast Fonts for Body Text
When designing for accessibility (or anyone), make your body text as easily 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.
Be careful not to choose fonts with an x-height that’s too large, either.
We read by recognising word shapes rather than individual letters, and 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, 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 recommend using italics instead of bold to highlight. This way, the emphasis is more subtle, and the reader can easily absorb the 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 quickly enhance your design and 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
Precise punctuation is an essential aspect of good 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 discuss 20 tips for improving your typography skills.
Let’s recap again.
You understood the importance of knowing the audience for whom you’re designing.
You learned that a clear information hierarchy is essential to quickly and visually appealingly convey information.
To achieve hierarchy effectively, consider these 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 it’s especially important to pay attention to readability when it comes to body text and website designs. 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 how details make all the difference when it comes to mastering typography:
- 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 your designs will improve significantly.
Are you interested in improving 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.
You may also find my curation of branding resources helpful.