kerning

You’re reading the English version of this content since no translation exists yet for this locale. Help us translate this article!

Deprecated since SVG 2
This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The kerning attribute indicates whether the spacing between glyphs should be adjusted based on kerning tables that are included in the relevant font (i.e., enable auto-kerning) or instead disable auto-kerning and set the spacing between them to a specific length (typically, zero).

Note: As a presentation attribute kerning can be used as a CSS property. In CSS the property is called font-kerning, though.

As a presentation attribute, it can be applied to any element but it has effect only on the following four elements: <altGlyph>, <textPath>, <text>, <tref>, and <tspan>

<svg viewBox="0 0 150 125" xmlns="http://www.w3.org/2000/svg">
  <text x="10" y="30" kerning="auto">auto</text>
  <text x="10" y="70" kerning="0">number</text>
  <text x="10" y="110" kerning="20px">length</text>
</svg>

Usage notes

Value auto | <length>
Default value auto
Animatable Yes
auto
This value indicates that the spacing between glyphs is adjusted based on kerning tables that are included in the font that will be used.
<length>

If a length is provided, then auto-kerning is disabled. Instead, inter-character spacing is set to the given length.

If a length is provided without a unit identifier (e.g., an unqualified number such as 128), the length is processed as a width value in the current user coordinate system. If a unit identifier (e.g., 0.25em or 1%) is provided, then the length is converted into a corresponding value in the current user coordinate system.

The most common scenario, other than auto, is to set kerning to a value of 0 so that auto-kerning is disabled.

The given length is added to the inter-character spacing value specified by the letter-spacing attribute.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
kerningChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Compatibility unknown  
Compatibility unknown

See also