What is Kerning?
Kerning is the process of adjusting the space between individual pairs of letters to create visually balanced and readable text. Unlike uniform spacing adjustments, kerning targets specific character combinations that naturally create awkward gaps or visual collisions. For example, in the word "AVATAR," the letters A and V have a large triangular gap between them. Proper kerning tucks these letters closer together, creating a harmonious word shape that reads smoothly as a single unit rather than fragmented shapes.
The Origins of Kerning
The term "kerning" originates from the metal typesetting era, where physical metal type pieces included small, removable pieces called "kerns" that projected from the front of certain letters. These kerns allowed letters like "f" or "r" to overhang and sit closer to adjacent characters, creating more natural spacing. Modern digital typography inherited this concept, though the implementation is now purely digital and infinitely adjustable.
Why Individual Letter Pairs Matter
Different letter combinations create unique spacing challenges based on their shapes. Letters with angled strokes, such as A, V, W, and Y, naturally create large negative spaces when placed next to each other. Conversely, letters with curves or extended strokes, like f, j, or t, may collide with neighboring letters if not properly spaced. Each of these combinations requires individual attention--something uniform spacing cannot achieve.
To build a solid foundation in typography for web interfaces, understanding these spacing fundamentals is essential. Our web development services help businesses create polished digital experiences where every design detail contributes to user trust and engagement.
| Aspect | Kerning | Tracking | Leading |
|---|---|---|---|
| Focus | Individual letter pairs | Uniform character spacing | Vertical line spacing |
| Application | Targeted adjustments | Entire text blocks | Between lines of text |
| Best For | Headlines, logos, display type | All-caps, body text density | Multi-line paragraphs |
| Visibility | Most visible in large text | Affects overall density | Critical for long-form reading |
Why Kerning Matters in UI Design
Good kerning is invisible to most users--but its absence is immediately felt as discomfort or unprofessionalism. In UI design, where every pixel contributes to user perception, proper kerning builds the subtle trust that converts visitors into customers.
Improves Readability and Comprehension
The primary goal of any text in a user interface is to be read. Poor kerning creates visual friction that forces the reader's brain to work harder to recognize words. When letters in a word appear disconnected or crowded, the cognitive load increases as users unconsciously struggle to parse the information. Properly kerned text creates a smooth, rhythmic flow that allows users to consume content effortlessly, improving both speed of comprehension and overall user experience.
Creates Professional, Polished Aesthetics
Attention to detail separates amateur designs from professional ones. When users encounter perfectly spaced typography, they subconsciously associate that precision with the overall quality of the product, service, or brand. This perception of quality builds trust--users assume that if designers cared about the small things like letter spacing, they likely cared just as much about functionality, security, and user experience.
Enhances Visual Hierarchy
Kerning contributes to visual hierarchy by allowing designers to create subtle distinctions between different text elements. A headline with tighter, more controlled kerning appears more compact and impactful, naturally drawing attention away from body text with standard spacing.
Professional web design requires this level of attention to typography. Learn how our web design services incorporate these principles to create interfaces that build user trust through thoughtful design details.
Not every piece of text requires manual kerning adjustment. Focus your efforts where they matter most.
Headlines and Display Text
Large display text amplifies every spacing imperfection. At headline sizes, the default spacing between letters becomes immediately visible, making headlines a top priority for careful kerning.
Buttons and CTAs
Buttons are conversion points where clarity and professionalism directly impact business outcomes. Button text needs to be perfectly balanced for quick readability.
Logos and Brand Marks
A logo is a permanent representation of a brand, and any kerning issues become permanently associated with the brand identity. Logo design requires obsessive attention to kerning.
Data Visualizations
When displaying numbers or labels in charts and dashboards, clear spacing is essential for accurate data interpretation and preventing user confusion.
How to Adjust Kerning in Design Tools
Modern design tools provide intuitive controls for kerning adjustments. Understanding where to find these controls and how to use them efficiently is essential for incorporating kerning into your regular workflow.
Figma
In Figma, select the text layer and open the Design panel on the right side. Locate the text section where you'll find a "Kerning" field, typically measured in units or as a percentage of em units. Alternatively, place your cursor between two letters and use keyboard shortcuts: Option + Left/Right Arrow (Mac) or Alt + Left/Right Arrow (Windows) to make incremental adjustments.
Adobe Photoshop
Select your text layer and open the Character panel (Window > Character). The panel displays current kerning values for selected text, with a dropdown offering "Metric" and "Optical" options. "Metric" uses the font's built-in kerning pairs, while "Optical" adjusts spacing based on letter shapes.
Adobe Illustrator
Illustrator provides the most precise kerning controls of the Adobe suite. With text selected, open the Character panel and locate the kerning dropdown. Place your cursor between letters to see a specialized cursor indicating kerning mode, then adjust using the field or keyboard shortcuts.
CSS for Web Design
In CSS, the letter-spacing property provides tracking adjustments, while direct kerning control is limited. To ensure kerning is enabled, verify that your font files include kerning data and that font-kerning: normal is set in your CSS. Implementing proper typography in web projects requires attention to these details, which is why our web development services emphasize design-system consistency across all text elements.
Best Practices for Kerning in UI Design
Use Optical Kerning as a Starting Point
Most design tools offer optical kerning options that analyze letter shapes and adjust spacing accordingly. Using optical kerning as your default provides a solid starting point that handles obvious spacing issues automatically. From there, you can make manual refinements for specific pairs that require special attention.
Reserve Major Adjustments for Display Text
Body text at standard sizes (typically 14-18 pixels for web) rarely requires manual kerning. The smaller size makes spacing issues less visible, and the density of body text paragraphs means individual word shapes matter less than overall flow and readability. Reserve your kerning attention for display text.
Maintain Consistency Across Similar Elements
If two headlines serve similar purposes in your design, they should have similar kerning treatment. Inconsistent kerning creates visual discord that users register as unprofessional. Establish spacing standards for your design system and apply them consistently.
Consider Context and Adjacent Elements
Kerning decisions should account for the surrounding context, not just the isolated word. Test your kerning choices in the actual context where the text will appear, including at different viewport sizes.
The Business Impact of Good Kerning
Conversion Rate Optimization
Call-to-action buttons with professional typography--including proper kerning--perform better than those with obvious spacing issues. Users make rapid judgments about trustworthiness, and any visual cue that suggests carelessness can impact their willingness to click, sign up, or purchase.
Brand Credibility and Trust
Typography quality contributes to the overall perception of brand professionalism. Users who encounter consistent, thoughtful typography across touchpoints develop stronger associations with brand quality. These associations influence purchasing decisions, word-of-mouth recommendations, and long-term brand loyalty.
Accessibility Considerations
Proper kerning improves accessibility for users with visual processing differences. While typography adjustments alone don't solve all accessibility challenges, clear letter spacing helps users with dyslexia and other reading difficulties process text more effectively.
When typography and design details align with professional standards, users trust the brand more readily. Our web design services help businesses achieve this level of design excellence that translates into measurable business outcomes.
Frequently Asked Questions About Kerning
What is the difference between kerning and tracking?
Kerning adjusts space between individual letter pairs to fix specific spacing problems. Tracking adjusts space uniformly across all letters in a word or text block. Think of kerning as targeted surgery and tracking as overall adjustment.
Does kerning matter for body text?
At standard body text sizes (14-18px), kerning matters less because smaller sizes make spacing issues less visible. Focus kerning efforts on headlines, buttons, and display text where larger sizes amplify spacing problems.
How do I know if my kerning is correct?
View your text at different distances--from up close and from a few feet away. If spacing looks wrong at any distance, adjust until the word shapes appear balanced and harmonious. Trust your visual judgment over numerical values.
Should I always use auto-kerning?
Auto-kerning (optical or metric) provides a good starting point but shouldn't be your only approach. Review auto-kerned text and make manual adjustments where specific letter combinations need extra attention.