How font-kerning: normal Controls Letter Spacing

The CSS font-kerning: normal property ensures that text renders with the typographer’s intended spacing between specific character pairs. By explicitly activating the kerning metrics embedded within a font file, this property resolves awkward visual gaps and collisions between adjacent glyphs. This article explains how the property functions, how it accesses font data, and why it provides consistent typographic balance across web browsers.

How Typographic Kerning Operates

Typographic kerning is the process of adjusting the horizontal space between specific pairs of glyphs to achieve a visually harmonious result. Standard proportional fonts assign a default advance width to every character, which dictates where the next character should sit. However, characters with asymmetrical or diagonal contours—such as "A", "V", "W", "T", and "Y"—leave noticeable empty spaces or collide when placed next to certain letters.

For example, without kerning, the pair "AV" appears with an excessive gap because the bounding boxes of the letters keep them too far apart. Typographers resolve this by assigning specific offset values to pairs like "AV", "To", or "Wa" within the font file. When kerning is applied, the second letter shifts closer to or further from the first to balance the negative space.

Accessing Embedded Font Tables

Fonts store their kerning rules inside internal data tables, most commonly the kern table or the advanced OpenType GPOS (Glyph Positioning) table. When a browser renders text on a webpage, it must read these tables to position each glyph properly.

Applying font-kerning: normal explicitly instructs the browser’s text-shaping engine to read these embedded kerning tables and apply the offset values to every matching character pair in the selected text. If the font file contains kerning definitions, the browser honors them without exception.

The Difference Between normal, none, and auto

The font-kerning property accepts three primary values that dictate how the browser treats these tables:

  • normal: Kerning information stored in the font is strictly applied. This guarantees that all defined letter pairs are visually corrected.
  • none: Kerning data is completely ignored. Characters are positioned strictly based on their default advance widths, which often results in uneven spacing, especially in headings.
  • auto: The browser decides whether to apply kerning. While modern desktop browsers typically default to enabling kerning, some mobile browsers or low-power rendering engines may disable it to save CPU resources, particularly for small text or large DOM trees.

Using font-kerning: normal removes browser discretion, ensuring predictable and uniform typographic rendering across all supported platforms.

Kerning vs. Letter-Spacing

It is important to distinguish font-kerning from the CSS letter-spacing property:

  • font-kerning is contextual. It selectively alters spacing only between predetermined pairs defined by the type designer (such as "Ta" or "Vo"), preserving proportional harmony.
  • letter-spacing (tracking) is uniform. It adds or subtracts a fixed amount of space between every single character, regardless of their shapes.

Even when letter-spacing is modified, font-kerning: normal should remain active so that the relative, proportional relationships between problematic character pairs are maintained within the expanded or condensed text.

Font Dependency

font-kerning: normal does not generate kerning algorithms on its own. It relies entirely on the metrics embedded within the font file being rendered. If a low-quality or incomplete font lacks kerning tables, setting font-kerning: normal will have no visible effect, as there is no data for the browser to apply. High-quality web fonts provide comprehensive kerning pairs that, when activated with this property, produce sharp, legible, and visually balanced typography.