Kerning Adjustment Calculator
Our typography & graphic design calculator teaches kerning adjustment step by step. Perfect for students, teachers, and self-learners.
Reviewed for accuracy by Daniel Agrici, Founder & Lead Developer
Kerning Adjustment Calculator
Calculator
Adjust values & calculateEnter your values below. Every result is computed in your browser โ no data is sent to any server.
Formula: Kerning (px) = (Kerning Units / 1000) x Font Size
Worked example โ Current: -2.88px | Recommended: -5.76px | Needs -2.88px more tightening
Formula
Kerning (px) = (Kerning Units / 1000) x Font Size
Kerning units in design tools are measured in 1/1000 of an em. To convert to pixel values, divide the kerning units by 1000 and multiply by the font size in pixels. Negative values bring characters closer together (tightening), while positive values push them apart (loosening).
Worked Examples
Example 1: Logo Headline Kerning
Problem:A designer is creating a logo with the text 'AVATAR' at 72px in a serif font. The AV pair needs kerning adjustment. The built-in kerning is -40 units. What pixel adjustment is needed, and what is the recommended value?
Solution:Current kerning: -40 units (1/1000 em) Pixel value: (-40/1000) x 72 = -2.88px Recommended kerning for AV pair: -80 units Recommended pixel value: (-80/1000) x 72 = -5.76px Additional adjustment needed: -80 - (-40) = -40 units = -2.88px tighter Size adjustment factor for 72px (display): 1.2x Adjusted recommendation: -80 x 1.2 = -96 units = -6.91px
Result:Current: -2.88px | Recommended: -5.76px | Needs -2.88px more tightening
Example 2: Web Heading Kerning Check
Problem:A web developer has h1 text 'Today' at 48px. The TA pair looks too loose and the To pair also needs work. Calculate the recommended kerning values for CSS implementation.
Solution:TA pair: Recommended: -80 units = (-80/1000) x 48 = -3.84px CSS: letter-spacing: -3.84px on the A character To pair: Recommended: -40 units = (-40/1000) x 48 = -1.92px CSS: letter-spacing: -1.92px on the o character For CSS implementation, wrap each character in a span: <span style='letter-spacing:-3.84px'>T</span>A... Or use font-kerning: normal to rely on built-in kerning.
Result:TA: -3.84px (-80 units) | To: -1.92px (-40 units) | Use font-kerning: normal for built-in support
Frequently Asked Questions
What is kerning in typography and why is it important?
Kerning is the process of adjusting the spacing between specific pairs of characters to achieve visually even spacing. Unlike tracking, which applies uniform spacing across all characters, kerning targets individual pairs that create optical illusions of uneven spacing due to their shapes. For example, the letters A and V have diagonal strokes that create a large visual gap when placed side by side at default spacing. Proper kerning closes this gap to make the spacing appear consistent with surrounding characters. Kerning is essential for professional typography, particularly in logos, headlines, and display text where imperfections are more visible.
How does kerning differ from tracking and letter-spacing?
Kerning, tracking, and letter-spacing are related but distinct concepts. Kerning adjusts the space between two specific characters based on their shapes, addressing optical spacing problems unique to particular letter combinations. Tracking applies a uniform spacing adjustment across an entire range of text, affecting all character pairs equally. CSS letter-spacing is essentially tracking applied uniformly. A well-kerned font has hundreds of pair-specific adjustments built into its kerning table. Designers typically set tracking first to establish overall text density, then adjust individual kerning pairs where the built-in kerning is insufficient, particularly for display type and logos.
What are the most common kerning pairs that need adjustment?
The most problematic kerning pairs involve characters with diagonal strokes, overhanging elements, or open sides. The classic examples include AV, AW, AY, AT, LT, LV, LY, VA, WA, YA, TA, TO, and FA. These pairs create large visual gaps because the character shapes do not fill the rectangular bounding boxes evenly. Pairs involving uppercase T are particularly challenging because the crossbar creates significant white space above adjacent lowercase letters. The pairs rn, cl, and vv can cause the opposite problem where characters appear to merge. Professional fonts include kerning tables with 200-500 or more pairs predefined by the type designer.
How do I measure kerning values in different design tools?
Different design applications use different units and methods for kerning. Adobe InDesign and Illustrator display kerning in 1/1000 of an em, where negative values tighten spacing and positive values loosen it. Figma shows kerning in the same 1/1000 em units in the character panel. Sketch uses pixel values directly. In CSS, the font-kerning property enables or disables built-in kerning (values: auto, normal, none), while individual pair adjustments require JavaScript or SVG manipulation. To convert between systems: divide the design tool value by 1000 to get em units, then multiply by font size in pixels for the pixel equivalent.
What is optical kerning versus metric kerning?
Metric kerning (also called auto kerning) uses the kerning pairs table built into the font file by the type designer. These predefined values represent the designer expert judgment for spacing hundreds of specific character combinations. Optical kerning, available in applications like Adobe InDesign, ignores the built-in table and instead analyzes the actual glyph shapes to calculate spacing dynamically. Optical kerning often produces better results with poorly kerned fonts or unusual character combinations not in the kerning table. However, well-designed premium fonts usually have superior metric kerning. Use metric kerning as your default and switch to optical only when the built-in kerning produces unsatisfactory results.
How does font size affect kerning requirements?
Font size significantly impacts how noticeable kerning issues are and what adjustments are needed. At body text sizes (14-18px), built-in font kerning is usually sufficient because small imperfections are not visible at reading distance. As text size increases above 24px for subheadings and display text, kerning inconsistencies become increasingly apparent and may require manual adjustment. At very large sizes (72px and above) used in posters, billboards, and hero sections, even minor kerning imperfections are obvious and demand precise optical correction. The general rule is that the larger the text, the more time should be invested in manual kerning refinement.
How do I kern text in CSS for web design?
CSS provides several properties for controlling kerning behavior. The font-kerning property accepts values of auto, normal (enables built-in kerning), or none (disables it). The font-feature-settings property can enable OpenType kerning with the syntax font-feature-settings: kern 1. For fine-tuned control, you can wrap individual character pairs in span elements and apply specific letter-spacing values. Modern browsers support the text-rendering: optimizeLegibility property which enables kerning and ligatures automatically. For critical display text like logos, consider using SVG where you have per-character positioning control via the dx attribute on tspan elements.
What are kerning classes and how do font designers use them?
Kerning classes are groups of characters that share similar shapes on their left or right sides, allowing type designers to efficiently define kerning pairs. Instead of setting individual kerning for every possible pair (which could require thousands of entries), designers assign characters to classes. For example, D, O, Q, and C might share a right-side class because they all have similar curved right edges. When kerning is defined for one member of the class (like AO), it automatically applies to all members (AD, AQ, AC). This approach reduces the kerning table from thousands of individual entries to hundreds of class-based rules while maintaining consistent spacing.
Can automated kerning replace manual kerning?
Automated kerning tools have improved significantly but cannot fully replace manual kerning for high-quality typography. Tools like optical kerning in Adobe applications, auto-kerning algorithms in font editors, and AI-powered spacing tools provide excellent starting points that work well for body text and general use. However, automated systems analyze mathematical relationships between glyph shapes and cannot fully account for the subjective visual perception that experienced typographers bring. For critical applications like logo design, book covers, movie posters, and brand identity, manual refinement by a skilled designer remains essential. The best workflow uses automated kerning as a foundation and applies manual adjustments where optical precision matters most.
How do I fix kerning issues in existing logos and branding?
To fix kerning in existing branding, start by identifying problematic pairs using the squint test (squinting makes spacing inconsistencies more apparent) or by flipping the text upside down (which removes word recognition bias and reveals pure spacing). Measure the optical spacing between each pair of characters, adjusting to create visually equal negative space between all pairs. Common fixes include tightening AV, WA, and TO combinations while slightly loosening pairs like HI or NN that may appear too tight. After adjustments, verify the kerning works at all sizes the logo will be used, from favicon to billboard scale. Save the corrected version as outlined text to preserve the spacing across all systems.
References
Background & Theory
History
Reviewed for accuracy by Daniel Agrici, Founder & Lead Developer ยท Editorial policy
Related Calculators
๐งฎExam Curve Adjustment Calculator
Calculate exam curve adjustment with inputs, formulas, and instant results.
๐งฎLearning Curve Calculator
Calculate learning curve with inputs, formulas, and instant results.
๐งฎLearning Objective Alignment Checker
Calculate learning objective alignment checker with inputs, formulas, and instant results.
๐งฎActive Learning Ratio Calculator
Calculate active learning ratio with inputs, formulas, and instant results.
๐งฎLearning Retention Rate Calculator
Calculate learning retention rate with inputs, formulas, and instant results.
๐งฎLearning Style Identifier Calculator
Calculate learning style identifier with inputs, formulas, and instant results.
๐งฎArchitectural Scale Converter
Calculate architectural scale converter with inputs, formulas, and instant results.
๐งฎArt Composition Ratio Calculator
Calculate art composition ratio with inputs, formulas, and instant results.