15 Typography Tips for Design Professionals
Designers are always looking for new ways to improve their work, and typography is no exception. In fact, even the most experienced designers can benefit from a refresher on the basics of good typography. And that’s what we’re doing here today. We’re offering 15 typography tips, tricks, and best practices for you to use in your next design project so you can continue to impress your clients and grow your skills in the process. Onward!
1. Use Hierarchy to Your Advantage
One of the most important aspects of typography is the hierarchy, which refers to the way in which different elements are arranged in a design. By assigning different levels of importance to different pieces of text, you can control how users will read and digest your content.
There are a few ways to establish a hierarchy in your designs. One is to use different font sizes for different levels of text. Another is to use contrasting colors or font weights (like bold or italics) to make certain words stand out.
In the below example from Google Fonts, you can see headings providing context for the paragraphs that follow – providing structure to the overall layout.
2. Consider Kerning and Leading
Kerning is the space between individual letters while leading refers to the space between lines of text. Both of these metrics can have a big impact on the overall look and feel of your design, so it’s important to take them into account.
When it comes to kerning, a good rule of thumb is to add extra space between wide letters (like W and A) and condensed letters (like I and L). This will help keep your text easy to read.
Here’s an example of kerning gone wrong from Adobe:
You can also try kerning upside down. Yes, you read that correctly. Some designers believe that flipping your text upside down can help you to better see which letters need more or less kerning.
As for leading, the general rule is that the longer the line of text, the more space you should add between the lines. This will help to keep your text readable and prevent users from getting overwhelmed.
3. Make Use of White Space
In addition to kerning and leading, another important factor to consider is white space (or negative space). This is the empty space around and between elements in a design, and it can be just as important as the elements themselves.
White space can help create balance in a design, make the text more legible, and add visual interest. So don’t be afraid to use it generously and follow the old adage, less is more. As in most things in life, it really is true within the typographic design world as well.
4. Stick to a Consistent Font Family
When choosing fonts for your design, sticking to a consistent font family is important. This means using two or more fonts that share the same overall look and feel.
There are a few reasons for this. First, it helps create visual harmony in your design. Second, it makes it easier for users to read your text since they won’t have to adjust to a new font every few words.
Most font families include regular, italic, and bold fonts, but they can also include thin, light, heavy, and other weights as well. This example from Google Fonts illustrates this point well:
5. Limit Yourself to 2-3 Fonts
While you want to stick to a consistent font family, you also don’t want to go overboard with the number of fonts you use. A good rule of thumb is to limit yourself to 2-3 fonts total.
Any more than that and your design will start to look cluttered and messy. So stick to a few simple fonts and you’ll be on the right track.
6. Really Think About How Fonts Will Appear on Mobile Devices
With more and more people accessing the internet on mobile devices (the majority, in fact), it’s important to think about how your fonts will appear on those devices. After all, what looks good on a desktop screen might not look so good on a smaller phone screen.
One way to account for this is to use responsive design principles. This means using different font sizes, weights, and styles for different screen sizes. That way, your text will always look its best no matter where it’s being viewed. You can also test your site designs using a browser and device emulator like BrowserStack or LambdaTest to ensure the fonts you’ve selected appear as you intend across all browsers and devices.
7. Use Contrasting Colors
In addition to using contrasting font weights, you can also use contrasting colors to make certain words or phrases stand out. This is a great way to add visual interest to your design and grab attention where you need it.
Just be careful not to go overboard with this technique. If you use too many contrasting colors, your design will start to look busy and distracting. Stick to one or two at most.
8. Follow Best Practices When Selecting Fonts
When it comes to choosing fonts for your design, there are a few best practices you should follow:
- Choose fonts that are easy to read. This means avoiding fancy or decorative fonts in favor of simple, sans-serif fonts for your text blocks.
- Pick fonts that complement each other. As we mentioned before, it’s important to stick to a consistent font family. But within that family, you should also choose fonts that work well together.
- Avoid using too many different font styles. In general, it’s best to stick to 2-3 fonts total. Any more than that and your design will start to look cluttered, confusing, or unprofessional.
9. Go Back to the Basics of Typography
If you’re ever feeling stuck or uninspired, it can be helpful to go back to the basics of typography. This means focusing on the elements that make up every font. Refamiliarize yourself with basic terms and concepts like:
- The x-height, which is the height of the lowercase letters.
- The ascenders, which are the parts of the letters that extend above the x-height.
- The descenders, which are the parts of the letters that extend below the x-height.
- The counter, which is the negative space inside of a letter (like the ‘o’ or ‘e’).
By understanding these elements, you’ll have a better understanding of how to create balanced and harmonious fonts. And having the correct terminology in your back pocket means you can think more creatively about solutions – as well as search for solutions to your issues more readily.
10. Read Timeless Books About Typography
So much of good typographic design comes from deeply internalizing the style elements that go into its creation. Learning through hands-on practice is essential but reading books by experts in the field can help, too.
Here are a few of our favorites:
- The Elements of Typographic Style by Robert Bringhurst
- Stop Stealing Sheep & Find Out How Type Works by Erik Spiekermann
- Typography for Screen: Type in Motion by Wang Shaoqiang
- Just My Type: A Book About Fonts by Simon Garfield
11. Experiment With New Tools
If you’re feeling stuck in a rut, one of the best things you can do is experiment with new tools. There are always new programs and apps being created that can help you design better typography.
Here are a few to consider:
- Modularscale: This tool helps you to get your typography hierarchy perfect every single time.
- emotype: With this tool, you can find fonts to use in your designs based on the emotions they evoke.
- Fontjoy: This A.I.-powered tool helps you land on the perfect font pairings with just one click.
So don’t be afraid to explore and try out new things. You never know when you might find the perfect tool for your next project.
12. Use Simple Layouts
One of the best ways to showcase your typography is to use a simple layout. That way, your text will be the star of the show.
Try using a single-column layout with plenty of white space around your text. This will help create a clean and uncluttered design that puts the focus squarely on your words.
13. Keep Tabs on Tracking
Tracking is another important element of typographic design. But it’s easy to get carried away with this technique and end up with text that’s difficult to read.
So be sure to keep an eye on your tracking and make sure it’s not too tight or too loose. This differs from kerning, which is the process of adjusting the spacing between specific letter pairs, whereas tracking adjusts the spacing for an entire block of text.
14. Use Blur to Your Advantage
According to an article by Brian Hoff, blur can actually be a helpful tool in your typographic arsenal. What he means here is letting your eyes fall out of focus. Or, you can blur an image of your typography manually using an image editing tool like Photoshop to then evaluate.
Making the text blurry will help you see it more objectively and get a better sense of the kerning and white space rather than the individual letters themselves (and perhaps what they say).
15. Don’t Forget About Webfonts
If you’re a web designer, then you can’t forget about webfonts. While there are some great options for system fonts, they can be limited. That’s why webfonts are so vital.
Webfonts give you a much wider selection of fonts to choose from. Plus, they’re designed specifically for the web so you know they’ll render correctly on all devices.
You can source webfonts from numerous places online including:
Bonus Tip: Brush Up Your Hand Lettering Skills
You’d be amazed just how much you learn about improving your typography skills on-screen just by picking up a brush pen and paper.
Hand lettering is a great way to experiment with different typefaces, styles, and layouts. And it’s also a lot of fun! So if you’re looking for a way to improve your typography skills, consider giving hand lettering a try.
Elevate Your Typography With These Tips
And that’s it! These 15 tips should help you create better typography for your next project. Remember to keep things simple, experiment with new tools, and have fun. With a little practice, you’ll be designing like a pro in no time.