Building a beautiful website requires a combination of striking images and colors, but it also hinges on eye-catching typography. On an ecommerce website, text is more than a tool for communication; typography design can have a big impact on both legibility and appeal. Paying attention to small details like character spacing can help your page stand out, whether you’re designing a logo or adding product information.
Learn more about how good kerning helps create visually appealing text.
What is kerning?
Kerning refers to the horizontal space between two letters or characters, known as kerning pairs. Adjusting kerning helps create consistent, proportional spacing between letter pairs. This practice is especially important for prominent pieces of text, such as brand logos or typographic art displays. Properly kerned text is clear and legible.
In ZARA’s brand logo, for example, the letters are spaced so close together that they’re overlapping, connecting the letters without obscuring the brand name itself.
When skin care company Dieux teamed up with haircare brand OUAI, the brand logos appeared side by side. Dieux uses a unique kerning that places the letters close together, with the “U” almost enveloped between the “E” and “X.” OUAI’s logo, meanwhile, features equally spaced out kerning for a more uniform look. These are both examples of how kerning can make a dramatic difference in the visual presentation of a brand name.
Automatic vs. manual kerning: What’s the difference?
Digital fonts use automatic kerning—font files include preset distance measurements based on font metrics—but these predefined rules might not always be effective. Modifying font size or applying styles, such as italics, can alter text appearance and spacing requirements. In these cases, graphic designers can manually kern each character pair to achieve balance.
Manual kerning involves adjusting the kerning value to add or remove space between sets of adjacent characters. Using equal numerical space between each character, also known as mechanical spacing or metric kerning, can create an optical illusion—some letters may appear farther apart and others closer together. This occurs because letters take up different amounts of space. Width and shape both affect the perceived distance between letter pairs.
A pair of two straight letters and a set of two round letters may require mathematically different spacing to appear even. Graphic designers use manual kerning to account for each letter’s unique form. This process relies on optical spacing—it’s based on visual appeal instead of scientific measurements. Adjusting kerning involves modifying the horizontal space between letters to find the right balance.
Kerning vs. tracking: What’s the difference?
Tracking is another way to alter the horizontal space between letters in graphic design. Increasing the tracking value adds negative space between characters so that the entire word appears wider. Unlike kerning, adjusting tracking adds (or subtracts) the same amount of space between each letter, number, or symbol. Without kerning, tracking changes can exaggerate perceived spacing irregularities.
Leading is another common typography term related to spacing—it refers to the vertical space between multiple lines of text. Increasing the leading value moves lines further apart so that the text appears longer on the page. Tightly spaced text may be hard to read. Changing the leading can help maintain legibility by adding more space between lines.
Tips for using kerning in web design
- Apply optical kerning
- Trust your eye
- Look out for tricky letter combinations
- Set style elements first
- Zoom in and out
- Flip the text
Proper kerning can improve the visual appeal and legibility of design assets like email banners, advertisements, and social media posts. Kerning adjustments typically occur during the design process. Popular design programs such as Adobe Photoshop and Adobe Illustrator, and free design software like Canva, allow kerning edits, but the exact procedure varies depending on your chosen software.
Finding the perfect balance for a piece of text requires a practiced eye and careful attention to detail. Try these tips to improve your kerning skills and build a beautiful website:
Apply optical kerning
Many design programs have an optical kerning tool that adjusts the horizontal space between letters for visual appeal. Photoshop, for example, offers both optical and metric kerning options.
Navigate to the character panel and select the optical kerning option from the dropdown menu labeled V/A to find this setting in Photoshop. In Canva, the optical kerning option is located in the typography control panel. To enable optical kerning, open the typography tool, select the three-dot menu on the control panel, click the typography tab, and toggle the kerning switch.
Automated optical kerning settings can be a quick way to fix spacing problems, especially for large blocks of copy. For prominent text, such as headlines and logos, consider using this tool to establish a baseline before making manual kerning adjustments.
Trust your eye
Kerning is about visually consistent spacing. This means that your eye is the best way to evaluate your designs. Review your text and look for any areas that feel off balance. Consider the negative space between letters as well as the letters themselves. Take note of any cramped letters, overlapping elements that clutter rather than adding visual appeal, or awkward gaps that make it unclear where a full word ends. Make manual adjustments as needed to achieve consistent visual spacing.
Look out for tricky letter combinations
When it comes to font kerning, certain letter combinations are known troublemakers. Balancing diagonal lines, like those found on capital letters A, V, W, and Y, or lowercase letters v, w, and y, next to straight or round letters can be tricky—their angled sides create uneven gaps. Diagonal lines often require negative kerning adjustments, or reducing the space between characters.
When a period follows a capital Y, for example, web designers often use tighter kerning. They’ll typically position the punctuation mark closer to the base of the letter instead of after the trailing edge. Placing the period outside of the bounds of the letter leaves a visual gap.
Set style elements first
Select the font size and apply style choices, such as italics or weight, before you start kerning. These elements can affect visual spacing—if you change the point size or treatment after kerning, you may have to redo your work. If you’re designing a text element that will appear in multiple places, such as business names and taglines, consider creating several variations in different font sizes. This will ensure consistent quality.
Zoom in and out
Try zooming in and out to evaluate your design. Close-up views are great for detail work, but zooming out to look at all the letters together helps assess overall balance. Adjusting your screen’s zoom setting can help you spot kerning issues. A zoomed-out view is a more accurate representation of the way that consumers will view your work in the real world.
Flip the text
Examine your design from every angle—literally. Rotating or mirroring your canvas can give you a fresh perspective. This technique helps you assess the shape and balance of the design without automatically reading the letters.
What is kerning FAQ
What is kerning vs. spacing?
In typography, spacing is a broad term that can refer to word spacing, letter spacing, or line spacing. Kerning is a specific term to describe the space between two letters, also known as kern pairs. Kerning is also distinct from letter spacing, or tracking. While letter spacing adjustments are uniform, kerning modifies the space between individual character pairs.
What is the purpose of kerning?
Designers adjust kerning to create balanced, visually pleasing text. Manually setting the horizontal distance between characters helps achieve visually consistent spacing—bad kerning can look sloppy and off balance. Small variations in character width and shape can create the illusion of uneven spacing when mathematically identical distance is applied between letters.
What is an example of kerning?
The space adjustment between capital letters A and V is a well-known example of kerning. These characters feature parallel diagonal lines. With mathematically equal spacing, these lines can create the appearance of additional space. Applying a negative kerning value to reduce the space between A and V pairs, like in the word MAVEN, creates visual balance.
