CanvasRenderingContext2D: fontKerning property

Value

The property can be used to get or set the value.

Allowed values are:

auto

The browser determines whether font kerning should be used or not. For example, some browsers will disable kerning on small fonts, since applying it could harm the readability of text.

normal

Font kerning information stored in the font must be applied.

none

Font kerning information stored in the font is disabled.

Examples

In this example we display the text "AVA Ta We" using each of the supported values of the textRendering property.

HTML

<canvas id="canvas" width="700" height="140"></canvas>

JavaScript

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px serif";

// Default (auto)
ctx.fillText(`AVA Ta We (default: ${ctx.fontKerning})`, 5, 30);

// Font kerning: normal
ctx.fontKerning = "normal";
ctx.fillText(`AVA Ta We (${ctx.fontKerning})`, 5, 70);

// Font kerning: none
ctx.fontKerning = "none";
ctx.fillText(`AVA Ta We (${ctx.fontKerning})`, 5, 110);

Result

Note that the last string has font kerning disabled, so adjacent characters are evenly spread.

Specifications

Browser compatibility