Search code examples
htmlcsssvgfontsadobe-illustrator

Does Optical Kerning in in Adobe have a CSS equivalent?


Is anybody aware of whether the Optical kerning in Illustrator via algorithm has a CSS equivalent?

My hunch is that the answer is no.

CONTEXT: The Optical Kerning done by Illustrator is done via an algorithm which as far as I can tell is not within the CSS spec.

I am referring specifically to Optical Kerning (not Optical sizing) -- the difference was made abundantly in this Stackoverflow question & answer.

The most similar property I could find is this: text-rendering: optimizeLegibility the definition of which you can see here (scroll down to 'text-rendering' property - ON).

It's options are auto, optimizeSpeed, optimizeLegibility, geometricPrecision

(And yes, I realize I am going on a very light connection via a semantic similarity only but it was the closest CSS property I could find. It turns out it is hard to prove a negative after all.)

Findings so far:

  • text-rendering's mdn's web page is here which states the property enables ligatures when font-size is smaller than 20px. (Pretty different, so not the same.)
  • text-rendering is actually an SVG spec and not a CSS spec per say
    (but that's not a huge deal as it is supported in HTML rendering by Gecko, WebKit, and Blink (Firefox, Safari, and Chrome) respectively
    (not CSS per say, but for practical purposes, doesn't seem to matter for my use case)
  • In this css-tricks article about text-rendering, it says Some font files contain additional information about how the font should be rendered. optimizeLegibility makes use of this information, and optimizeSpeed does not.. The fact that it is included in the font file says to me, it is manually added by the foundry hence not via algorithm. (Pretty different, so not the same)

So at this point, I'm thinking Optimal kerning in Illustrator does NOT have a CSS equivalent. Would appreciate your thoughts and experience on the matter.


Solution

  • To be supported in CSS, it has to be supportable in all browsers. This sounds like a proprietary Adobe algorithm. Not surprisingly, I don't see anything like this in CSS.

    What CSS does provide is the font-kerning property. One of the values defined is auto, which means that the browser can use its own criteria to decide whether to enable kerning. But it doesn't appear to be intended that the browser can decide how kerning is done: "This property controls metric kerning, kerning that utilizes adjustment data contained in the font."

    The data in the font can take one of two forms. The legacy 'kern' table was part of the original TrueType spec and can be used to list specific glyph pairs and the spacing adjustment for each. Size-wise, it's not very efficient.

    A newer approach was introduced in the OpenType spec: the 'kern' feature (or the 'vkrn' feature for vertical layout) can be used to activate metric adjustment actions in the 'GPOS' (glyph positioning) table. In the GPOS table, positioning actions can be specified for sets of glyphs that require the same metric adjustments.

    The GPOS table supports several different types of positioning actions. (In the OpenType spec, these are referred to as "lookup tables".) When using a GPOS table with the 'kern' feature, typically the font developer would implement using pair positioning actions.

    With font-kerning, whether the browser is utilizing a 'kern' table in the font or activating a GPOS 'kern' feature, the amount of spacing adjustment for any glyph pair is specified in the font with data provided by the font developer. Adobe's "optical kerning" is using an algorithm that examines the shapes of glyphs to decide how much to adjust spacing for a given glyph pair rather than relying on 'kern' or GPOS data in the font.