An intro to kerning for designers | Webflow Blog (2024)

As Robert Bringhurst said in The Elements of Typographic Style, "Good typography is partly a matter of good taste, but it is also a matter of following rules that have been developed over centuries. Kerning is one of those rules, and it can make all the difference between a readable and unreadable text.” In short, kerning involves adjusting the spacing between individual letters or characters to achieve an optimal visual appearance.

But what is “optimal"? To answer that question, let’s dive into an introduction to kerning, including what it is, why it's useful, types of kerning, and tips on how to use it effectively.

What is kerning?

In typography, kerning is the process of adjusting the spacing between individual letters to create a more visually appealing result. The goal of kerning is to achieve consistent visual spacing between letters, regardless of their shape or size. It is used to create a more harmonious and balanced look and feel, and can be applied to any font or typeface.

Over the years, designers have used several different definitions of kerning, depending on their area of expertise or need. For example, graphic designers may define kerning as the process of adjusting the spacing between letters to make a word or sentence look more visually appealing. On the other hand, web designers may define it as the process of optimizing the spacing between letters for web-based applications and devices.

Why is kerning useful?

Some say that kerning can make your final design more aesthetic. But Jim Krause in Design Basics Index suggests, “Kerning is not just about aesthetics, but about legibility and readability. It's about finding the right balance between letters, so that they work together to communicate a message.” Kerning is useful for various practical purposes, such as improving readability, creating typographic hierarchy, and improving the overall design.

Here are some examples of bad kerning from r/badkerning:

An intro to kerning for designers | Webflow Blog (1)

An intro to kerning for designers | Webflow Blog (2)

Kerning is essential for headlines, typographic logos, signage, and other designs that require high levels of legibility. It is particularly important in designs where text is the primary visual element, such as posters or advertisem*nts. And when done well, kerning can help create beautiful, polished designs.

Types of kerning & kerning tools

There are several types of kerning that designers can use. Plus, there are several powerful tools that are built into software that can help any designer tinker around with typefaces.

Manual kerning

Experienced designers who have honed their kerning skills for years may use manual kerning, which involves adjusting the spacing between individual letters manually. This type of kerning is often used for headlines, logos, and other designs where precise control over the spacing is necessary.

Manual kerning can be a time-consuming process, but it can also help designers achieve a more precise and polished look. To manually kern your text, select the text tool in your design software, click between two letters, and use the arrow keys on your keyboard to adjust the spacing as necessary.

Optical Kerning

Optical kerning is a type of kerning that adjusts the spacing between letters automatically based on their visual appearance. This type of kerning is based on the perceived space and shape of the letters rather than their actual size. This technique can be especially useful when working with a large block of text as it saves you from manually adjusting spacing between individual letters.

To use optical kerning, select the text tool in your design software, highlight the text you want to adjust, and select the optical kerning option from the typography or character settings.

Metric kerning

Metric kerning is a type of kerning that uses predefined spacing values based on font metrics. This type of kerning is usually the default in design software and is often used for body text. If you’re not sure how to start kerning, this would be your go-to type to study the “rules.”

Contextual kerning

Contextual kerning is a type of kerning that adjusts the spacing between letters based on their context within a word. This type of kerning is particularly useful for ligatures and other special character combinations. For those who aren’t aware, ligatures are when two or more characters are combined into a single glyph or symbol. This is often done for aesthetic or legibility purposes, as it can improve the spacing and appearance of the text. It helps the words flow smoothly.

In Thinking with Type, Ellen Lupton provides numerous examples of kerning, including the word "LOVE LETTERS." In this example, the kerning between the VE is adjusted so that the diagonal stroke of the V isn't so noticeable, creating a more even visual rhythm.

An intro to kerning for designers | Webflow Blog (3)

Automatic kerning

Automatic kerning is a type of kerning that is applied automatically by design software. This type of kerning is based on predefined rules and can be adjusted by the designer.

Kerning tips

Kerning can be a challenging skill to master, but there are some tips that can help most designers start experimenting.

Letter combinations

Some letter combinations require more attention when kerning to achieve optimal results. These include letter combinations such as VA, WA, AV, AW, TO, TY, and WA, which have slants in the characters. These letter combinations often require adjusting the space between the letters to prevent them from appearing too cramped or too loose. This can also happen between round letters. Especially when working with the English language. Other problematic letter combinations include:

  • Letters K, W, Y, F, L, and T
  • Words spelled in capital letters
  • Uppercase combined with lowercase letters

In some other languages, this problem transfers to other letters or ligatures. Some examples include:

  • In French, the language uses many accented lowercase letters, such as é, è, ê, and à. Kerning is important in French to ensure that these accents are properly spaced and aligned with the letters they are modifying.
  • In German, the language makes frequent use of diacritical marks such as umlauts (ä, ö, ü) and the Eszett (ß). Kerning in German involves adjusting the spacing between these characters and the letters they are attached to.
  • In Chinese, the characters do not have individual letter forms, but rather consist of complex combinations of strokes. Kerning in Chinese involves adjusting the spacing inside the characters themselves, in order to create a visually pleasing and easy-to-read text.
  • In Arabic, the cursive script requires careful kerning by font designers to ensure that the letters connect properly and that the text is legible. Kerning in Arabic involves adjusting the space between each round letter, depending on its position in the word and the letters that surround it.

Over and under-kerning

Over-kerning is when the space between letters is too tight, causing the text to appear cramped and difficult to read. Under-kerning is when the space between letters is too loose, causing the text to appear disjointed and unbalanced. It's important to find the right balance between these two extremes to achieve optimal results. As designer Tobias Van Schneider says in this piece, "Designers with experience know that half of excellence is simply a love for detail...they perfect spacing and kerning on every page, for every screen size.They don’t overlook tiny elements and interactions like link states and favicons."

Spacing in text blocks

The space between letters is not only influenced by the individual letters themselves but also by the shape of the text block. For example, a curved text block may require more negative space between letters than a straight text block. It's important to consider the shape of the text block when adjusting the kerning so that it doesn’t hurt aesthetic sensibilities, or just look visually off.

Font sizes, font weights and spacing

Font size can have a significant impact on kerning. As font size increases, the space between letters needs to increase as well to maintain legibility. The larger the font size, the more space there is between letters, and this can make kerning less noticeable. Conversely, smaller font sizes require more attention to kerning to ensure that the spacing between letters is legible and visually pleasing. Additionally, font weight can affect kerning. Bolder, heavier fonts may require more space between letters to maintain legibility, while lighter fonts may require tighter kerning to avoid gaps or inconsistencies in spacing.

Print it and flip it

To get a better sense of the kerning, it's often helpful to print out the text or flip it horizontally (upside down). Looking at the same letters outside of the normal context can help one see the text from a different perspective and identify any issues with the spacing between letters.

Kern at the end

The rule of thumb says, kerning should be the last step in the design process, after all other elements have been finalized. This will ensure that the kerning is adjusted to the final design appropriately and not based on preliminary sketches or layouts. It also ensures that it’s not too much or too little. But it's important not to overthink it. As the father of type Jan Tschichold once said in his book, The New Typography: a Handbook for Modern Designers, “Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes near it in obstinacy.”

Kerning resources for amateur designers

There are several resources available to help designers improve their kerning skills, including online games, built software tools, and tutorials.

  • KernType: One popular typographic kerning game called "KernType," is a fun activity for newbie designers. This game challenges players to adjust the spacing between letters to achieve superlative outcomes.

An intro to kerning for designers | Webflow Blog (4)

  • Kerning pairs: This is built into design software such as Adobe InDesign. Kerning pairs are pre-set adjustments that software programs make to the space between specific pairs of letters. You can access these pairs in the typography or character settings of your design software, and adjust them as necessary to improve the overall look of your text.
  • Tracking: Tracking is a tool that allows you to adjust the overall space between all the letters in a word or sentence. This can be useful if you have a block of text that looks too tight or too loose. To adjust tracking, select the text tool in your design software, highlight the text you want to adjust, and use the tracking settings to increase or decrease the space between letters.
  • Typewolf: Reviewing the work of others is a great way to learn about typesetting. This website provides a collection of typography inspiration and resources, including articles on kerning techniques.
  • Adobe Creative Cloud: Adobe's suite of design tools includes resources and tutorials on typography and kerning.
  • Design Cuts: This website offers a range of design resources, including tutorials on character spacing, typography, and kerning.
  • Skillshare: This online learning platform offers courses on graphic design, as well as classes specifically on typography and kerning.
  • Fonts In Use: This website showcases typography in use in real-world designs, providing examples of kerning techniques in action.
  • Webflow University has free lessons such as Advanced web typography

Alternative ways to improve kerning and spacing skills

Ellen Lupton suggests in Thinking with Type that "Kerning is the secret ingredient that takes typography from ordinary to extraordinary. It's what gives text that perfect balance and flow." And this is why approaching kerning from a different perspective is often a crucial step to avoid bad kerning. So, if you’re just starting out, here’s what you can do:

  • Analyze professional designs: Take a closer look at designs created by design veterans, paying attention to how the letters are spaced and balanced. This can provide valuable insight into effective kerning techniques.
  • Experiment with different fonts: Try working with different fonts and adjusting the amount of space to see how the relationship between letters can affect the overall look and feel of the design.
  • Use a grid system: Consider using a grid system to help guide your kerning adjustments, ensuring that letter spacing is consistent and balanced.
  • Collaborate with other designers: Working with other designers can provide valuable feedback and insights into effective kerning techniques, as well as opportunities to learn from others' experiences and knowledge.

And lastly, sometimes stepping away from a design for a little while can provide a fresh perspective and renewed focus. This can help you to see kerning issues that may have previously gone unnoticed because you’ve looked at them too long. With practice and attention to detail, designers can master the art of kerning and create designs that stand out and communicate their message effectively, and we hope you’re on your way to mastering it already!

An intro to kerning for designers | Webflow Blog (2024)

FAQs

Why is kerning important in design? ›

In typography, kerning is the process of adjusting the spacing between individual letters to create a more visually appealing result. The goal of kerning is to achieve consistent visual spacing between letters, regardless of their shape or size.

What does the technique known as kerning do in a design? ›

Kerning is the spacing between individual letters or characters. Unlike tracking, which adjusts the amount of space between the letters of an entire word in equal increments, kerning is focused on how type looks — creating readable text that's visually pleasing.

What are the rules for kerning? ›

Typographer Ilene Strizver recommends these kerning principles(opens in a new tab or window): two straight letters need the most space; a straight and around need slightly less to look equivalent, and two round letters need slightly less than that. It helps to visualize this (check out the example below).

What does leading and kerning refer to provide visuals and why are they so important? ›

This helps to adjust the space between lines of type to create a more balanced and visually appealing design. It is important to understand kerning vs leading and tracking vs kerning. While kerning adjusts the space between individual characters, leading determines the space between lines.

Is kerning good or bad? ›

If the kerning in a font is well done, optical kerning won't be quite as good as it can mess up the rhythm of the type. In the end, it probably won't make much difference to the reader.

Why is spacing important in design? ›

Proper spacing is one of the basic but most important elements in every great design. It helps organize information while also setting the rhythm, structure, and hierarchy in your design.

What is the kerning formula? ›

But there's no mathematical or scientific formula for kerning. It's all about using your visual judgment to create the perfect optical illusion — one that'll help make your text more legible, visually appealing, and engaging. Pro tip: Lots of people confuse kerning with tracking, but they're not the same.

What is an example of kerning? ›

Positive kerning is used mainly in conjunction with special characters and punctuation (for example, the lower case letter f followed by right parenthesis or quotation mark). Depending on the font, some small positive kerning may also be required for accented letters and for pairs like Bo, Dw, and TY.

How do you tighten kerning? ›

Keyboard Shortcut: Click between the two letters, hold down the option or alt key and use the right and left arrow keys to adjust the kerning.

Where is kerning generally used? ›

Kerning means adjusting the space between individual characters within a word. This is mostly used for singular words in a logo or heading that is going to be used at a large scale.

What are the criteria for kerning? ›

Ilene Strizver, a type designer, suggests using the following kerning typography guidelines: two straight letters require the greatest space, a straight and a round letter require slightly less space to seem similar, and two round letters require somewhat less space still.

What is the difference between kerning and spacing? ›

Letter-spacing refers to the overall spacing of a word or block of text affecting its overall density and texture. Kerning is a term applied specifically to the spacing adjustment of two particular characters to correct for visually uneven spacing.

What is the difference between kerning and tracking text? ›

Kerning is the process of adding or subtracting space between specific pairs of characters. Tracking is the process of loosening or tightening a block of text. Note: Values for kerning and tracking affect Japanese text but normally these options are used to adjust the aki between roman characters.

What is spacing between lines called? ›

In typography, leading (/ˈlɛdɪŋ/ LED-ing) is the space between adjacent lines of type; the exact definition varies. In hand typesetting, leading is the thin strips of lead (or aluminium) that were inserted between lines of type in the composing stick to increase the vertical distance between them.

What is the role of tracking within design and typography? ›

Tracking is commonly used in typography to achieve optimal visual spacing between characters, ensuring readability and aesthetic consistency. Designers adjust tracking to improve the overall appearance of text, particularly in headlines, titles, and display typography.

What is the function of kerning? ›

Kerning refers to the way spacing between two specific characters is adjusted. The idea is to give a better looking result by reducing the spacing between characters that fit together nicely (such as "A" and "V") and increasing the spacing between characters that don't. Select the text that you want to change.

How does proper kerning impact the readability and overall aesthetics of a design? ›

Roles of Kerning in Design

Improving readability: By optimizing the space between characters, kerning helps make text more readable. Enhancing aesthetics: Proper kerning maintains a visually harmonious distribution of space, contributing to the overall beauty of the design.

What does kerning do in Indesign? ›

Kerning is the process of adding or subtracting space between specific pairs of characters. Tracking is the process of loosening or tightening a block of text.

Why is font spacing important? ›

Adjusting the letter-spacing of a text can have a significant impact on its readability, legibility, and overall visual appeal. It can help to prevent text from appearing too cramped or too spread out, making it easier for the reader to scan and comprehend the content.

Top Articles
Latest Posts
Article information

Author: Carmelo Roob

Last Updated:

Views: 6321

Rating: 4.4 / 5 (65 voted)

Reviews: 88% of readers found this page helpful

Author information

Name: Carmelo Roob

Birthday: 1995-01-09

Address: Apt. 915 481 Sipes Cliff, New Gonzalobury, CO 80176

Phone: +6773780339780

Job: Sales Executive

Hobby: Gaming, Jogging, Rugby, Video gaming, Handball, Ice skating, Web surfing

Introduction: My name is Carmelo Roob, I am a modern, handsome, delightful, comfortable, attractive, vast, good person who loves writing and wants to share my knowledge and understanding with you.