Skip to content

Instantly share code, notes, and snippets.

Created October 16, 2013 09:50
Show Gist options
  • Save bramstein/cd5924aa4d1208076617 to your computer and use it in GitHub Desktop.
Save bramstein/cd5924aa4d1208076617 to your computer and use it in GitHub Desktop.
CSS Kerning


This proposal introduces a new text-kerning property:

text-kerning: [ <upoint> <upoint> <length> ] #

The <upoint> pairs are the left and right code points of a kerning pair and <value> is the kern value. Kerning pairs and values can be repeated multiple times by separating them with a comma. Kerning is applied to all unicode code point pairs in an element that match the kerning pairs specified in the text-kerning property of that element.

The <upoint> token is a single unicode code point, identical to the single unicode code points in the unicode-range property of the @font-face syntax. Ideally we would modify CSS tokens to introduce a UNICODE-POINT token that matches a single unicode code point (e.g. u\+[0-9a-f?]{1,6}) and modify the UNICODE-RANGE token to use it (e.g. {unicode-point}(-{unicode-point})?).

Kerning is applied cumulative. This is in line with the "kern" table in OpenType fonts and similar CSS properties such as word-spacing and letter-spacing.

When ligatures are available for kerning pairs, the kerning pair is ignored and the ligature is used (unless ligatures are turned off.) Partial matches within a ligature have kerning applied as usual.

If the font-kerning property is set to none on an element that also has a text-kerning property, the text-kerning property is ignored by the user agent.


text-kerning: U+56 U+41 -0.02em;

This defines a kern pair between "V" and "A" and subtracts 0.02em from the default kern value.

text-kerning: U+56 U+41 -0.03em, U+54 U+54 1px;

This defines two kerning pairs, the first one decreases the default kern value between "V" and "A" with 0.03em, and the second one increases the default kern value between "T" and "T" by 1px.

font-kerning: none;
text-kerning: U+69 U+69 2px;

This should increases the default kern value between "i" and "i" by two pixels, but the property is ignored because font-kerning is set to none.

text-kerning: U+66 U+69 -0.1pt;

This decreases the kerning between "f" and "i" by 0.1pt. If the active font contains an "fi" ligature, the kerning pair is ignored.

Copy link

astearns commented Nov 5, 2013

Note that with this syntax you cannot accumulate kern pairs using multiple declarations. If you had a style block with these two declarations:

text-kerning: U+56 U+41 -0.03em, U+54 U+54 1px;
text-kerning: U+66 U+69 -0.1pt;

then you'd only have the one kern pair defined between "f" and "i" - the two kern pairs in the first declaration would be discarded. To accumulate kern pairs, you'd need to add them to the list of a single declaration.

Copy link

FWIW, I want to clarify that this proposal is for a CSS property that will ultimately be implemented in browsers and authoring tools.

Copy link

neave commented Dec 5, 2013

For the sake of simplicity and readability, what do you think of the option to use actual characters in quotes, such as

text-kerning: "V" "A" -0.02em;

Copy link

Read two codepoints from a string, allow multiple strings:

  text-kerning: "VA" "WA" "YA" -0.02em;

Copy link

CSS doesn't have a nice way to accumulate rules other than by cascade:

:kerning("VA") {letter-spacing: -0.02em;}
:kerning("WA") {letter-spacing: -0.02em;}

Copy link

0b10011 commented Dec 5, 2013

Like @pornel's idea, but it gets confusing mixing code points and strings if you use space to separate:

text-kerning: U+56 U+41 "WA" -0.03em, "YA" -0.02em;

What about changing the syntax a bit so spaces separate groups and / separates code points:

text-kerning: U+56/U+41 "WA" -0.03em, "Z"/U+41 "YA" -0.02em;

(Or a character other than /, it just worked for highlighting to get the point across.)

Copy link

Please discuss this on the CSS WG’s mailing list, that’s where spec editors and implementors are:

Copy link

@bfrohs Syntax with / is nice, but maybe not even necessary—you can also use codepoints in CSS strings: "\56\41".

Copy link

I second what SimonSapin said above, please take that discussion to www-style so the whole community can contribute. Thanks!

Daniel Glazman, CSS WG Co-chair

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment