{"id":58648,"date":"2020-02-25T17:11:39","date_gmt":"2020-02-25T14:11:39","guid":{"rendered":"https:\/\/newblog.creatopy.com\/blog\/?p=58648"},"modified":"2023-07-24T14:15:56","modified_gmt":"2023-07-24T11:15:56","slug":"kerning-typography","status":"publish","type":"post","link":"https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/kerning-typography\/","title":{"rendered":"The Art of Kerning Typography: 10 Tips for Kerning Like a Pro"},"content":{"rendered":"

Have you ever looked at a logo, a newspaper headline, or a subway sign and felt the need to adjust the awkward space between letters? <\/span><\/p>\n

If the answer is yes, that means you’re good at spotting kerning issues.<\/span><\/p>\n

<\/p>\n

What Is Kerning?<\/b><\/h2>\n

In typography, kerning is defined as the adjustment of space between two specific characters.<\/span><\/p>\n

\"Kerning<\/p>\n

The goal of kerning is to balance the perceived negative space<\/a> between all the letters of a text, pair by pair, to improve readability, legibility, and make everything more pleasing to the eye.\u00a0<\/span><\/p>\n

Even though most modern fonts<\/a> usually come with hundreds of kern pairs incorporated, sometimes you need to make the adjustments yourself.<\/span><\/p>\n

Here are ten tips to help you kern like a pro.\"\"<\/a><\/span><\/p>\n

1. <\/b>Understand the Spatial Relationship between Letters<\/b><\/h2>\n

Kerning is about equalizing the spaces between characters as well as you can, but you won’t achieve the desired result if you set a mathematically equal distance between all letters.<\/span><\/p>\n

Different combinations of letters create different sizes of perceived space between them.<\/span><\/p>\n

\"equal<\/p>\n

The words look best when the mathematical distance between letters varies based on their shapes.<\/span><\/p>\n

Typographer Ilene Strizver<\/span><\/a> is the one that best explains this. She recommends that the distance between two straight letters should be slightly bigger than the gap between a straight and a round letter.\u00a0<\/span><\/p>\n

In turn, the distance between a straight and a round letter should be slightly bigger than that between two round letters.<\/span><\/p>\n

Confused? Have a look at the image below.<\/span><\/p>\n

\"spatial<\/p>\n

As you can see, consistency is vital.\u00a0<\/span><\/p>\n

A round-to-straight letter combination should have the same spacing as a straight-to-round one. <\/span><\/p>\n

Also, if you settled on a certain distance for a specific letter combination, make sure you maintain it in all other instances those letters appear together.<\/span><\/p>\n

\"letter<\/p>\n

2. <\/b>Watch Out for Tricky Letter Combinations<\/b><\/h2>\n

Text kerning mostly involves negative adjustments. Certain letter combinations create more perceived space than others.\u00a0<\/span><\/p>\n

In these cases, you need to slide the letters into each other’s negative spaces. This is most obvious with capital letters.<\/span><\/p>\n

Keep an eye out for kern pairs that involve letters such as A, V, W, Y, T, F, L, P, or other similar ones.\u00a0<\/span><\/p>\n

A perfect example, in this case, is the combination between A and V\u2014the symbol used for the kerning tool in various graphic design programs.\u00a0<\/span><\/p>\n

Usually, when set next to a rectangular letter, such as H or M, or a straight letter like I, the diagonal line of either A or V would nearly touch the horizontal line of the adjacent letter.\u00a0<\/span><\/p>\n

\"kerning<\/p>\n

However, if you apply the same spacing when A and V are set next to each other, the combination will create too much negative space.\u00a0<\/span><\/p>\n

This needs to be corrected through kerning.<\/span><\/p>\n

\"negative<\/p>\n

Remember to also be on your toes when it comes to upper and lowercase pairings, such as ‘Fa’ or ‘Te,’ especially when the lowercase letter is a round vowel.<\/span><\/p>\n

\"uppercase<\/p>\n

Though rarer, positive adjustments do exist. They often involve accented letters or punctuation.<\/span><\/p>\n

3. <\/b>Size and Font Do Matter<\/b><\/h2>\n

When kerning font, you should settle on the size of the text before you begin the process. If you decide to resize it later, all your work might be undone.\u00a0<\/span><\/p>\n

That is because, at a smaller point size, letters require more space between each other in order to remain legible.\u00a0<\/span><\/p>\n

Conversely, at a bigger point size, letters would come closer together to increase readability.<\/span><\/p>\n

Consider this, especially when you have to design a logo that would be printed on banners or t-shirts, as well as on small business cards.\u00a0<\/span><\/p>\n

Instead of just resizing your work, create two versions of it, each of them kerned separately. Your client or boss is bound to be impressed, even if they won’t necessarily be able to pinpoint the difference.<\/span><\/p>\n

Pro tip: the bigger the design, the more visible bad kerning becomes.<\/span><\/p>\n

Size is also one of the reasons why you should choose the font of the text before starting to kern it. Other reasons include the shapes of individual letters and ligature issues.\u00a0<\/span><\/p>\n

For example, if you switch from a print font to a<\/span>\u00a0hand lettering font<\/span><\/a> after kerning, your letters might not be properly connected, as in the case below.<\/span><\/p>\n

\"ligature<\/p>\n

4. <\/b>When in Doubt, Less Is More<\/b><\/h2>\n

Believe it or not, under-kerning can make a text awkward or downright hard to read.\u00a0<\/span><\/p>\n

But over-kerning can make it indecipherable, especially in smaller sizes, or worse\u2014the words can end up meaning something else entirely.\u00a0<\/span><\/p>\n

There are plenty of<\/span> bad kerning examples<\/span><\/a> online. <\/span><\/p>\n

The combination of lowercase c and l can become a d, r, and n can become m, and not enough space between words create laughable misunderstandings that sometimes go viral in a bad way.\u00a0<\/span><\/p>\n

When in doubt, always err on the side of under-kerning.\"\"<\/a><\/span><\/p>\n

5. <\/b>Flip Your Text Upside Down<\/b><\/h2>\n

The familiarity of the words you’re working with might make it difficult for you to properly kern your text. A neat solution for this problem is turning the words upside down.\u00a0<\/span><\/p>\n

This way, you won’t be distracted by their meaning, and you’ll be able to focus on the spaces the letters create between each other.<\/span><\/p>\n

\"kerning<\/p>\n

6. <\/b>Kern in Groups of Three<\/b><\/h2>\n

Another great trick that works well mainly with lengthy words is kerning in groups of three. It’s easier to miss details when you’re looking at the entire word.<\/span><\/p>\n

Start with the first three letters of the word you’re kerning and try either covering the rest or changing the color of the letters you’re working with.\u00a0<\/span><\/p>\n

Then, move on to the next group of three, one letter at a time, until you’ve reached the end of the word. This way, you’ll be able to compare the spaces one pair at a time.<\/span><\/p>\n

\"space<\/p>\n

7. <\/b>Know the Difference: Leading vs. Kerning vs. Tracking<\/b><\/h2>\n

In typography, leading, kerning, and tracking are the three ways to adjust the space between letters.\u00a0<\/span><\/p>\n

While kerning and leading are easier to differentiate, kerning and tracking are often confused with each other.\u00a0<\/span><\/p>\n

Knowing the difference between the three is essential for any designer working with text.<\/span><\/p>\n

Leading refers to the adjustment of the vertical space between two lines of text. The name comes from the time when pieces of lead were used to separate lines when working with the printing press and is therefore pronounced <\/span>ledding<\/span><\/i>.<\/span><\/p>\n

The leading distance is measured from baseline to baseline and needs to take into consideration special features of certain letters, such as ascenders and descenders.\u00a0<\/span><\/p>\n

Usually, this distance should be about 20% bigger than the font size, but it varies with style.<\/span><\/p>\n

\"what<\/p>\n

Tracking defines the horizontal distance between the letters in a text. But instead of adjusting the distance between two individual letters, like kerning, tracking increases or decreases the space between all the letters uniformly.<\/span><\/p>\n

Negative letter tracking can make more characters fit into a certain space, but overdoing it can cause these characters to overlap, making the text illegible.\u00a0<\/span><\/p>\n

Positive letter tracking can help you fill a certain space and makes the words seem airier. <\/span><\/p>\n

However, too much of this makes the spaces between words hard to discern.<\/span><\/p>\n

\"kerning<\/p>\n

Like with changing the size of your design, it’s best to take care of leading and tracking before kerning, so you won’t have to do it twice.\u00a0<\/span><\/p>\n

8. <\/b>Kern Manually\u2014Don’t Let the Software Do It for You<\/b><\/h2>\n

Graphic design programs usually come with two auto-kerning options: Metrics (or Auto) and Optical.\u00a0<\/span><\/p>\n

In Photoshop, InDesign, or Illustrator, you can find these included in the Kerning dropdown in the Character panel.<\/span><\/p>\n

The Metrics setting uses the font’s built-in kern pairs, spacing the letters as the font designer specified in the font file. Many suggest using this option rather than Optical, especially when working with professional fonts.<\/span><\/p>\n

The Optical setting overrides the built-in kern tables and adjusts the spacing between adjacent letters based on their shapes, using an algorithm. <\/span><\/p>\n

Optical can also be used to automatically kern text that includes different typefaces.<\/span><\/p>\n

However, any of these two options can still leave you with oddly-spaced letters.\u00a0<\/span><\/p>\n

The human eye can be extremely reliable when it comes to kerning. Additionally, manual kerning gives you the most control.\u00a0<\/span><\/p>\n

You can definitely see the difference when you overlay the results of these three kerning methods.<\/span><\/p>\n

\"types<\/p>\n

9. <\/b>Kerning for Web Designers Does Exist<\/b><\/h2>\n

If before, kerning text was considered a matter of static design, once the internet gained popularity, web designers needed to kern too.<\/span><\/p>\n

The CSS kerning property, font-kerning, controls whether or not the kerning parameters built in a font will be used or not.\u00a0<\/span><\/p>\n

There are three values for it:<\/span><\/p>\n