Kerning is the act of adjusting the space between letters to refine the look and readability of text. In web design, having good kerning means your site's typography appears balanced, elegant, and easy to read—whether someone's viewing your site on a desktop, tablet, or smartphone.

If kerning is done properly, it prevents ugly gaps or excessive crowding of letters that can make text messy or hard to read. It's a small but important aspect of creating a professional-looking website.

How kerning works 

Kerning is about the gap between individual letters, not whole words or lines of text. Kerning often involves adjusting kerning pairs, i.e., selected letter pairs that usually need spacing adjustment. There are certain letter combinations, like "Wa" or "To," that inherently have a tendency to create odd spacing because of the shapes of letters involved.

Graphic designers often choose between metric kerning, which uses the font's built-in spacing, optical kerning (software-based adjustment), and manual kerning, where they adjust letter spacing by hand for more precise control. Certain fonts, like OpenType fonts, may include built-in kerning adjustments for a polished appearance. 

Here’s how kerning improves your website’s design:

• Enhances readability: Proper kerning makes text easier to scan and understand.
• Creates visual harmony: Balanced letter spacing helps your typography look neat and professional.
• Boosts brand identity: Consistent, well-spaced text contributes to a cohesive and recognizable style.

Web designers tend to modify kerning in conjunction with other typography settings such as line height, font size, and letter spacing to achieve a well-organized layout.

Examples of good and bad kerning

To see kerning in action, look at the difference between a modern, clean website and one that appears cluttered or awkward. Well-kerned text appears balanced and elegant, while poorly kerned text has letters that appear squashed or too spread out.

Kerning is especially important for lowercase letters, where uneven spacing becomes harder to read and interrupts visual flow. Capital letters usually need less kerning adjustment because they are more uniform in width.

For example:

• Good kerning: The spacing between letters feels even and natural, making the text easy to read.
• Bad kerning: Certain letters might overlap or have noticeable gaps, disrupting the flow of words.

On a website, good kerning ensures headlines, menus, and body text stay visually appealing across all devices.

Why kerning adjustments matter in web design

Kerning might seem like a minor detail, but it makes a big difference in your site’s look and feel. Here’s why it’s important:

• Improved user experience: Text that’s easy to read keeps visitors engaged longer.
• Professional appearance: Polished typography reflects a well-designed, trustworthy brand.
• Better accessibility: Clear, well-spaced text is easier for all users to understand, including those with visual impairments.

Best practices for kerning on your website

Want to make sure your website’s kerning looks great? Keep these tips in mind:

• Choose a readable font: Some typefaces naturally have better kerning than others.
• Adjust for different screen sizes: Make sure your kerning works well on both desktop and mobile layouts.
• Don’t overdo it: Too much kerning can make text look stretched out. Aim for balance.
• Test your typography: Preview your site on different devices to ensure letter spacing stays consistent.
• Use the right tools: While word processing programs might offer basic kerning adjustments, graphic design software or web-based tools often provide more precise control for fine-tuning typography.

When adjusting kerning values, ensure they are appropriate for your font’s design. Different fonts may require different kerning values to maintain readability and a polished appearance across various screen sizes.

FAQs about kerning in web design

How is kerning different from tracking and leading?

Kerning adjusts the space between individual letters. Tracking controls the spacing of an entire word or block of text, and leading manages the space between lines of text. Together, they shape your website’s overall typography style.

Does kerning affect SEO?

Not directly, but good typography (including kerning) improves readability and user experience. These can lower bounce rates and boost your site’s search rankings.

How do I adjust kerning in web design?

You can adjust kerning with CSS using the letter-spacing property, though some design tools offer more precise controls. For custom digital fonts, kerning settings might be built in and adjustable through your website builder.

Do different fonts require different kerning?

Yes! Every font file has unique letter shapes, so kerning often needs tweaking to ensure consistent letter spacing. Some modern web fonts come with optimized kerning, but it’s always worth double-checking.

Create a website with perfect typography using B12

With B12’s AI-powered website builder, you can create sleek, professional sites without worrying about technical details like kerning. B12 ensures your typography stays polished and readable across all devices, helping your business make a great first impression. Launch your website today!