Illustration by Gleren Meneghin
One key element to include in your user interface (UI) style guide is how typography will appear in your mobile or web application. When discussing typography with your design team for the first time, you can select whether you want to use a pre-existing font or create a new one that is unique to your brand. But as your typography decisions get more granular, you will eventually need to discuss kerning.
If kerning is a new concept for you, this article will help clear up what it is, its purpose, and how you can use it to improve your designs that include typography. Let’s first define kerning to get a better understanding of what it is.
What is kerning?
Kerning refers to the spacing that exists between two single letters. It is a method of typography that dates back to the printing press, and it was originally referred to as inter-spacing. While you may have already encountered letter kerning in a recent UI design, it’s important to understand kerning best practices and the best way to get started. Let’s take a closer look at kerning and how you can begin incorporating it into your design process.
What is the purpose of kerning?
The purpose of kerning is to have full control of the spacing of your typography so that each letter has adequate breathing room. For example, kerning for fonts is not a problem if you’re placing distinguished lowercase letters like ‘l’ and ‘i’ together (‘li’), but it does make a difference if you’re placing uppercase ‘V’ and ‘A’ (‘VA’) together due to the increased spacing. Kerning can also help you overcome issues of cognitive overload by making typography easier to read and less intimidating.
When designers build out their UI infrastructure using their design system tools, they document the spacing between paragraphs, components, margins, padding, and more. This careful approach to spacing between elements should extend to how you think about designing typography.
Kerning in digital typography
Even if your design tools automatically incorporate spacing into your typography, kerning is still something you need to consider based upon what you’re currently designing and how you plan to incorporate typography into that design. Below, let’s break down what kerning values and kerning tables mean to help you get started.
Kerning values
When adjusting the spacing between letters during the kerning process, there are positive and negative values. Each positive increment will increase the spacing between any two letters, whereas negative increments will decrease the spacing. However, keep in mind that each letter comes in different shapes and sizes, so highlighting all your text and adjusting the value for all the spacing simultaneously will likely not result in the effect you are aiming for.
Kerning tables
With kerning being a staple of typography design since the invention of the printing press, kerning tables were created to help guide designers in their process. Kerning tables are a list of letter pairings that includes optimal spacing values for each listed pair. These tables can be useful to reference during the typography design process, but it’s important to remember that the font you select plays a role in letter spacing.
4 types of kerning
There are four key ways to adjust the spacing of your typography, including:
- Metric kerning
- Optical kerning
- Manual kerning
- Contextual kerning
Let’s take a quick look at each one to discover what they mean and how they work.
1. Metric
Metric kerning is an automatic kerning option that easily creates space between letters without committing a lot of time to the design. This method of kerning uses a kerning table that has values stored for specific spacing between every pairing of letters.
2. Optical
Optical kerning is an advanced feature that automatically detects the outline of each letter. This method of kerning uses an algorithm to calculate the most optimal spacing between the letters.
3. Manual
Manual kerning is simply adjusting the spacing between each letter yourself, which may seem very tedious to do. However, adjusting the kerning manually gives you a level of control that the automatic option just won’t give you. It is the preferred method for designers who work a lot with typography, especially in graphic design.
4. Contextual
Contextual kerning essentially looks at a string of letters to determine the proper spacing between all of them. This kerning method automatically moves letters based on the most optimal spacing for an entire word, instead of only looking at two letters as a set.
Kerning tips for improving your typography
Now that you understand the different kerning options available to you, it’s time to look at some key tips that can help guide you through the process.
- Keep an eye out for specific letter pairings. Letters come in a wide variety of shapes, some of which are very awkward when placed next to one another. Be sure to watch out for slanted letters (A, K, V, W, Y), letters with arms or cross strokes (F, L, T), and specific letter pairings (W or V with A; T or F with A).
- Watch how spacing changes with font sizes. As you increase or decrease font sizes, the spacing between the letters can change and alter the intended look of your typography. You should be applying the same visual hierarchy methodologies from the rest of your designs to typography spacing.
- Let letters breathe. When adjusting kerning manually, make sure not to decrease the space too much or too little unless it’s for a specific use case. Otherwise, it can decrease the readability of the word, harming the overall experience of the user. This is especially important when using typography in motion or user experience (UX) animation design.
What are the best fonts for kerning?
The best fonts for kerning are those that already have good spacing between the letters, as this will save you a lot of editing time. Also, try to pick a minimalistic and legible font that will make it easy for anyone to read, especially if you are still just learning how to do kerning for the first time.
The value of kerning and how to get started
While kerning might seem like a minor tweak that isn’t worth investing a lot of time into, the reality is that it makes a huge impact on how your audience consumes and appreciates your typography. For example, large text on the home page of your website with inconsistent spacing between letters can really distract from the experience, and it may also disrupt the scannability of your site.
If you are still unsure how to get started with kerning, visit different websites and save images of typography examples to your design inspiration mood board. If you come across a unique typography challenge, you can likely solve it by looking at your collection of favorite samples.