`Font-kerning` - CSS Property

font-kerning

Summary of characteristics of the `font-kerning` property

Quick description

Adjusting the kerning between characters.

Status

Standard

Usable for

HTML

Predefined values

auto | normal | none

Percentages

Not applicable.

Initial value

auto

Inherited by default

Yes.

Animation type

Discrète: during an animation, the font-kerning property passes from one value to another without transition.

Canonical order

Single: single value (no order).

W3C Module

CSS Fonts Module

References (W3C)

🡇

🡅

CSS Fonts Module Level 4

Document status: WD (Working Draft)

CSS Fonts Module Level 3

Document status: REC (Recommendation)

Syntax diagram of `font-kerning`.

Syntax diagram of the font-kerning property.
The links in the diagram provide more details about the values.
Download the diagram in SVG.

Description of the `font-kerning` property.

The property font-kerning defines whether character kerning should be used. Kerning involves adjusting the spacing between letters more or less depending on their shape. For example, the uppercase letters A and V have a shape that allows them to be brought closer together.

The output is more harmonious when kerning is applied, especially when the character size is large.

Fonts of the OTF or WOFF type contain the information necessary for kerning. This is not the case for all formats. On fonts that do not contain this kerning information, font-kerning will have no effect.

Values for `font-kerning`.

font-kerning: auto;

Default value. The browser chooses whether or not to apply kerning, based on criteria such as the size of the characters.

AWAY

font-kerning:auto;
font-kerning: normal;

Kerning is applied. Preference is given to quality rendering, at the expense of a slight decrease in speed. But the kerning processing is light and has little impact on performance.

AWAY

font-kerning:normal;
font-kerning: none;

Kerning is not applied. This value aims to improve processing speed.

AWAY

font-kerning:none;
font-kerning: initial; (auto) font-kerning: inherit; font-kerning: revert; font-kerning: revertLayer; font-kerning: unset;

Common values are presented on these pages: initial, inherit, revert, revert-layer, unset.

Animation of the `font-kerning` property.

The property font-kerning can be animated, but for an insignificant visual effect.

J'AVOUE J'EN AI BAVÉ, PAS VOUS ? ⁽²⁾

(2) Serge Gainsbourg - La Javanaise

Manipulating the `font-kerning` property programmatically.

Modify kerning permission in Javascript.

In JavaScript, here are two code examples to modify the value of font-kerning. The first uses the typical CSS notation: a hyphen to separate words (kebab-case notation). And the second uses a capital letter to separate words (camel-case notation).


	let el = document.getElementById('id');
	el.style['font-kerning'] = 'none';
	// or
	let el = document.getElementById('id');
	el.style.fontKerning = 'none';

Read kerning permission in JavaScript.

Here is a first example of code to read the value of the font-kerning property. It only works if the property has been initialized in the style attribute of the element (so in the HTML code). Values assigned via a CSS selector are not recognized by this code.


	let el = document.getElementById('id');
	let value = el.style['font-kerning'];
	// or
	let el = document.getElementById('id');
	let value = el.style.fontKerning;

Read the computed value of `font-kerning` in Javascript.

The computed value is the one that results from the cascade of inheritances: direct value, inherited value, or failing that the initial value of the property, which, in the case of font-kerning, is auto.


	let el = document.getElementById('id');
	let value = window.getComputedStyle(el).getPropertyValue('font-kerning');

Modify the kerning permission with JQuery.

Like Javascript, JQuery also accepts both kebab-case and camel-case writing for the property name.


	let value = $('#id').css('font-kerning');

Read the computed value of the property `font-kerning` with JQuery.


	let value = $('#id').css('font-kerning');

Test it yourself.

Whatever button is used, the result will be the same with font-kerning because this property only accepts predefined values.

Simulator.

The words "AWAY" or "WAVE" in capital letters, alternating A's, V's, and T's, is particularly suitable for the study of kerning. Notice that, without kerning, the first letter seems detached from the rest of the word.

The samples are given in two different fonts.

font-kerning :

auto

normal

none

AWAY - WAVE
AWAY - WAVE

Browsers compatibility with `font-kerning`.

The table below illustrates both the consideration of the font-kerning property and the possibility of character kerning, insofar as the font used contains kerning information.

Column 1

Support for the property font-kerning used to manage character spacing.

font-kerning
property

Estimated overall support.

19%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

KaiOS Browser

Opéra Mobile

Opéra

Safari

Safari sur IOS

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Historic of the `font-kerning` property.

CSS Fonts Module Level 3

This specification concerns fonts. A font contains the visual representation of characters. In its simplest form, it is just a matter of associating character codes with their shapes.
Within a typeface family, the shapes are defined but can vary in stroke thickness, slant, width, etc. The CSS properties font-... allow choosing the final appearance of the characters.
Fonts can be located on the user's computer or downloaded.

Regarding font-kerning. First appearance of the Font-Kerning property.

July 21, 1997
Working Draft.
October 03, 2013
Candidate Recommendation.
August 14, 2018
Proposed for recommendation.
September 20, 2018
Recommendation .
CSS Fonts Module Level 4

This level 4 of the specification on fonts reprises what is defined in level 3. It adds the possibility to define what happens when a font takes a long time to load or is missing. It also adds support for colored fonts and clarifies many points still poorly defined in level 3.

Regarding font-kerning. No changes to the font-kerning property.

July 11, 2017
Working Draft.

Font-kerning - CSS Property

Summary of characteristics of the font-kerning property

Syntax diagram of font-kerning.

Description of the font-kerning property.

Values for font-kerning.

Animation of the font-kerning property.

Manipulating the font-kerning property programmatically.