Tying Things Together: Why Typography Matters

December 19, 2014 Steve Hawley

Quick – take a look at this excerpt from a Dr. Seuss book:









 

ligatures

 

I took this picture with my phone shortly after reading with my son and found this page particularly jarring.  Like many technologies, automated type came from a hand-driven process.  Writing used to be hand done until Gutenberg and then after, it’s been a continual struggle to get technology to be able to create something that can be done by a talented calligrapher.  In this case, the problem is ligatures.  Ligatures are sets of glyphs that are tied together (ligated) by their shapes.  They are necessary because they improve the appearance and readability of a document.  Here is a pretty good blog entry on ligatures.

Now look back at the Seuss.  Here’s what I saw immediately (and I am not a typographer):

ffiflff

which are all pairs which should be replaced with an equivalent ligature.  In particular, the fl is bad because of the f just barely touching the l and in the ffi, the dot from the i is almost but not quite hitting the second f.  It feels off to me.

I first encountered ligatures while I was working on Adobe Acrobat version 1.0.  I was assigned the task of “fixing” the built-in find tool, which as it stood could find a single word in the document and no more.  I built it up to handle phrases and text that was perhaps on a curve (which made maps searchable).  Working on this tool taught me about ligatures because, for example, that ffi in the document was represented by a single character which may or may not bear any relation to the actual glyph.  So the text consuming code had to internally undo the text encoding and then undo the ligature expanding it to something that could be matched, but it had to keep the mapping so that we understood that three characters in the search key might not map to three glyphs on the page for highlighting.  It was interesting and as a result my eye has been trained to spot ligatures, or more precisely to spot when ligatures are not there.

Here is what the above text looks like with ligatures in place – I approximated the font.  It’s not quite right, but it’s close enough so you can see the difference

ligatures

ligatureswith

 

And to its credit, Photoshop did the ligatures for me as I typed in the text.  I’m glad that another engineer has had an eye for this detail. I can’t wait for this to be better supported on the web.  Chrome, Firefox and Safari appear to have support for it on Windows, but not Internet Explorer.

About the Author

Steve Hawley

Steve was with Atalasoft from 2005 until 2015. He was responsible for the architecture and development of DotImage, and one of the masterminds behind Bacon Day. Steve has over 20 years of experience with companies like Bell Communications Research, Adobe Systems, Newfire, Presto Technologies.

Follow on Twitter More Content by Steve Hawley
Previous Article
How to Give Your Company a Really Bad Reputation
How to Give Your Company a Really Bad Reputation

Step 1-through-infinity: offer the worst support ever.  Nothing can make...

Next Article
Failure Modes
Failure Modes

Software engineering is funny.  It shares a lot with Computer Science...

Try any of our Imaging SDKs free for 30 days with Full Support

Download Now