Post without Account — your post will be reviewed, and if appropriate, posted under Anonymous. You can also use this link to report any problems registering or logging in.

Kerning on the fly

  • 5 Replies
  • 2218 Views
*

Offline Phil

  • Global Moderator
  • Sr. Member
  • *****
  • 417
    • View Profile
Kerning on the fly
« March 25, 2017, 07:50:54 PM »
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. Unfortunately, I can't (yet) demonstrate that in this forum, as I can't insert margins on individual characters. Some day maybe I'll add that capability to the forum software. In the meantime, look at an article on kerning (e.g., https://en.wikipedia.org/wiki/Kerning) to see it illustrated. On this web browser: WAVE (it may or may not be kerned for you).

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.

  • 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.
  • 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!
  • 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.

*

Offline Phil

  • Global Moderator
  • Sr. Member
  • *****
  • 417
    • View Profile
Re: Kerning on the fly
« Reply #1: May 16, 2017, 10:45:26 AM »
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 on the "i" may not be fully covered by the ball on the end of the "f"'s ascender.

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, at least for Times New Roman and Georgia fonts. See what it does on your browser and default font.

*

Offline sciurius

  • Jr. Member
  • **
  • 67
    • View Profile
    • Website
Re: Kerning on the fly
« Reply #2: May 16, 2017, 03:15:54 PM »
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:
Quote
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. & Æ ß).

Quote
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.

*

Offline Phil

  • Global Moderator
  • Sr. Member
  • *****
  • 417
    • View Profile
Re: Kerning on the fly
« Reply #3: May 17, 2017, 01:53:52 PM »
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.

*

Offline sciurius

  • Jr. Member
  • **
  • 67
    • View Profile
    • Website
Re: Kerning on the fly
« Reply #4: May 18, 2017, 04:18:59 AM »
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?

*

Offline Phil

  • Global Moderator
  • Sr. Member
  • *****
  • 417
    • View Profile
Re: Kerning on the fly
« Reply #5: May 12, 2018, 08:47:17 AM »
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!