A ligature is a character, stroke or bar that connects two letters. These character combinations are particularly important with the Yale Design Fonts to ensure the proper spacing of the letters when rendering the headings on a browser window.

How was this done?

The YaleSites themes incorporate the Typogrify module to adjust the characters for readability. This solution allows content editors to write the way they normally do without requiring the use of special keystrokes or character maps to produce ligatures. In addition, words keep their correct spelling for accessibility and search engine optimization.

As distributed, the Yale Design fonts have their ffi, ffl and ff characters mapped to non-standard Unicode entity values. This first required correcting the OpenType fonts so that these ligatures were mapped to their standard Unicode values. A JavaScript was then added that looks for headings containing the “f” character strings and replaces these with their Unicode ligatures. Finally, the module was configured to replace typographers quotation marks and dashes. Optional filters for the Typogrify module include:

  • Multiple adjacent capital letters can be made small-caps
  • Ampersands can be made italic

Important Notes:

  • Menus and breadcrumbs only show normal letters, not ligatures. The menu item at left and the breadcrumb item at top reflect the page title.
  • Verdana body text remains unchanged because ligatures in this font do not display properly in Windows, fi ff fl ffi ffl

Examples of Character Combinations

The Yale typeface have been typed as normal letters and they’re replaced with ligatures automatically to ensure proper spacing.

fi ff fl ffi ffl




Bold Italic

Accent and Diacritic Marks: double dash becomes endash, triple dash becomes emdash.

Ò » ñ é ç–ô—ü í…

 ”Straight quotes” are converted to curly quotes, and an initial quote hangs left. A single quotation mark produces an apostrophe. This only applies to header text.

“Jayhawks” & KU fans behave extremely obnoxiously.

Widow control is also enabled in heading text, as demonstrated above.