Kerning Adjustment Calculator
Our typography & graphic design calculator teaches kerning adjustment step by step. Perfect for students, teachers, and self-learners.
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)\nPixel value: (-40/1000) x 72 = -2.88px\nRecommended kerning for AV pair: -80 units\nRecommended pixel value: (-80/1000) x 72 = -5.76px\nAdditional adjustment needed: -80 - (-40) = -40 units = -2.88px tighter\nSize adjustment factor for 72px (display): 1.2x\nAdjusted 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:\nRecommended: -80 units = (-80/1000) x 48 = -3.84px\nCSS: letter-spacing: -3.84px on the A character\n\nTo pair:\nRecommended: -40 units = (-40/1000) x 48 = -1.92px\nCSS: letter-spacing: -1.92px on the o character\n\nFor CSS implementation, wrap each character in a span:\n<span style='letter-spacing:-3.84px'>T</span>A...\nOr 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.