CTS logo
hazy blue Catskill Mountains in distance

A Thought…

I do not need the promise of heaven or the threat of hell to do the right thing.

   — MFelkins, Non Sequitur comic letters

Kerning on-the-fly

Posted on 2017-Mar-25 at 19:50:54 by Phil
Last update on 2022-Mar-20 at 15:11:00 by Phil

One thing good text handling should do is kerning of letters, which means to close up (usually) pairs of letters to prevent excessive white space between. The classic example is A and V (or V and A), where the sloped sides match up nicely.

AWAY WITH THE WAVE!

AWAY WITH THE WAVE!

In addition, you can look at an article on kerning (e.g., this one ) to see it illustrated.

Fonts normally include kerning tables, where given a pair of candidate letters to be output, it looks up in a table how much to the left the second character should be moved (or, possibly, to the right in some rare cases). The distance is scaled by the font size currently in use. The intent is to close up large gaps. This works fairly well for a given typeface and attributes (e.g., Times-Roman normal weight, at a given size). However, it can break down in a number of cases, leaving the output with no kerning.

  1. Unusual or rare accented characters are being used, that the font designer didn’t account for. This is especially true if the character has to be built up or composited from a base letter and one or more combining accent marks. There may simply not be a table entry for that.
  2. The font characteristics change between the two letters. This could be the font size, its weight (boldness/lightness), even its slant or obliqueness (not to mention italics). The tables assume the same characteristics between two characters. A common example might be “faking” small caps by scaling down the small caps from regular sized capitals. It’s not a great way to get small caps, but if the font doesn’t include them, that may be the best you can do. You want to print Time (the weekly magazine) in small caps: TIME. Note that the “I” is probably not tucked under the “T”, as it should be. It may even be possible that the word is split between “T” and “I”, due to the HTML tags!
  3. The font face (family) changes (e.g., from Times-Roman to Helvetica). I’ve never seen a kerning table to handle such a case.

What could be done to improve this situation? Anything algorithmic should probably leave current cases alone (where a kerning table entry is provided), as the amount of kern has been very carefully (usually) adjusted by a typographer to look its best. Those cases aside, what could be done? Has anyone looked at drawing a convex polygon (hull) around each character in a pair, and adjusting the start of the second character to make the nearest “approach” of the two a certain maximum distance (scaled by the smaller font-size in use)? Creating a convex polygon is going to be a fairly expensive process, so it should be done once and included with the font data. Creating one on-the-fly may be needed if the character in question already has had an accent mark added to it.

There is also the issue where a pure convex hull or polygon may not be appropriate. For instance, a vertical “stack” of accent marks may not interfere in the least with the neighboring character’s convex hull, but would force the letters further apart than necessary. There also may be cases where an “inlet” in a (non-convex) polygon could allow admission of part of another letter.

Anything involving a fair amount of geometry (measuring the closest approach of two polygons) is going to be computationally expensive, and may be worth it only for the finest quality typesetting intended for printing. For web pages, it would almost certainly not be worth the effort. However, once a pair’s kerning has been calculated, the value might be stored in a database or lookup table for future use.


Posted on 2017-May-16 at 10:45:26 by Phil

Another place where kerning is of interest is in synthesizing ligatures on the fly. A given font (typeface + variant) may not include ligatures (joined letters) allowable in a language (e.g., English), and it may be desirable to close up certain letter combinations until they are literally touching each other:  waffle can have an ffl ligature, field can have an fi ligature, etc. Times New Roman: waffle, field; Georgia: waffle, field. Keep in mind that these generated ligatures may not be as pleasing to the eye as a real ligature, as, for example, the dot (tittle) on the “i” may not be fully covered by the ball on the end (hook) of the “f”’s ascender.

It appears that my browser (Firefox) and its (Window’s) font files may be attempting to do just this (synthesize ligatures), as the letters in ffl and fi appear to be closer than normal, at least for Times New Roman and Georgia fonts. See what it does on your browser and default font.


Posted on 2017-May-16 at 15:15:54 by sciurius

Another place where kerning is of interest is in synthesizing ligatures on the fly. A given font (typeface + variant) may not include ligatures (joined letters)

Typographic ligatures are carefully designed glyphs that originate from two or more individual letters. It is far too simple to consider ligatures as:

close up certain letter combinations until they are literally touching each other

Some ligatures look like letter combinations (e.g. ff fl and friends) but most do not (e.g. & Æ ß).

It appears that my browser (Firefox) and its font files may be attempting to do just this (synthesize ligatures), as the letters in ffl and fi appear to be closer than normal,

What makes you think this is not just normal kerning?

Also, synthesizing ligatures can and will produce incorrect results, e.g. English: shelfful (shelf-ful), Dutch: skijack (ski-jack).

Bottom line: If a font has the appropriate ligature, use it. If not, leave the letters alone.


Posted on 2017-May-17 at 13:53:52 by Phil

Granted, playing with kerning (see also composite letters discussion) will not cover all ligatures, but could be of use if your font does not include preformed ligatures such as those commonly encountered in English. Ligatures specifically created by a font designer will almost always look better, but in some typefaces, synthesized ligatures may be acceptable. I’m just suggesting that this could be done for at least some ligatures, and could be interesting to play with. Æ and ß would of course not be possible with this method, but most fonts include them anyway, so nothing’s gained trying to synthesize them.

As I said, my browser may be attempting to synthesize a ligature — the letters look a little closer together than normal, but it’s hard to tell. I don’t fully trust the browser zoom function to preserve letter spacing when zooming in. It might be normal kerning, or it might be an attempt to create a ligature.

Yes, shelfful is a commonly-given example of misuse of a ligature in English, and your typesetting software needs to be aware of this whether you’re using an ff ligature built into the font, or synthesizing your own through kerning.


Posted on 2017-May-18 at 04:18:59 by sciurius

As I said, my browser may be attempting to synthesize a ligature — the letters look a little closer together than normal, but it’s hard to tell.

I’m still wondering what makes you think that this is not normal kerning?


Posted on 2018-May-12 at 08:47:17 by Phil

Thinking a bit more about this, kerning might best be done by rendering both characters as a fairly coarse bitmap, and just doing a limited center-to-center comparison of selected pixels (right-most edge of left letter, left-most edge of right letter). Find the current minimum distance, adjust right letter, and repeat until minimum distance reaches a certain value +/-. The same might be done to create synthetic ligatures (to zero distance, or even overlapping).

Of course, this will still be fairly costly, even if it’s done instead of comparing each stroke and curve geometrically. For font files that support built-in kerning and ligatures, such as TTF and OTF, it would probably be much better to do it just once and add kerning data (or new ligatures) to the font. This would also allow inspection and fine-tuning by eye.

Something between simple kerning and making ligatures would be to do things like “tuck” an h under a T (in “Th”) by scaling down the “h” and setting kerning to move the “h” left. This should be done by eye and not automatically, to pick which pairs. It could also move a character vertically to fit in with another (or pair surrounding it). All sorts of fun things could be done, but don’t get carried away and create an unreadable mess!


Posted on 2022-Mar-20 at 15:52:00 by Phil

I’m still wondering what makes you think that this is not normal kerning?

Letters such as “f” and “l” are moved together until very nearly touching — this is not something that kerning normally does (filling in sloped empty spaces). They’re not quite touching (e.g., I can see the f’s hook not covering the i’s tittle), so it’s not really a ligature. It’s just excessively close, if they’re not going to do a real ligature.


Posted on 2023-Apr-30 at 12:26:00 by Phil

A special case of kerning is drawing an underline just under the text baseline. For best appearance, it needs to not actually touch any of the letter descenders, but leave a small gap between the underline stroke and the letters. I’ve discussed this in Underlining Issues (for PDF::Builder). It involves knowing just where ink is put down for each glyph, and so overlaps kerning algorithms to some extent.

Overlining of text may also intersect text ascenders, unless the overline position is placed high enough to clear all characters. With a Strikethrough line, which is generally placed at roughly 1ex height, the intent is to intersect the letters (to emphasize the destruction of the text), so a simple full-length line will do.

 

All content © copyright 2005 – 2025 by Catskill Technology Services, LLC.
All rights reserved.
Note that Third Party software (whether Open Source or proprietary) on this site remains under the copyright and license of its owners. Catskill Technology Services, LLC does not claim copyright over such software.

 

This page is https://www.catskilltech.com/utils/show.php?link=kerning-on-the-fly

Search Quotations database.

Last updated Sat, 28 Dec 2024 at 11:29 PM

Valid HTML 5

Tue, 11 Feb 2025 at 1:29 AM EST