Today I learned

Using ligatures in CSS

Rico Sta. CruzMarch 05, 2015

Headings can benefit from nice ligatures. Use the font-feature-settings CSS property to enable these OpenType features. Here's a snippet to start you with:

.headings {
  /* don't display digraphs in languages that don't support it */
  font-language-override: normal;

  /* use font-defined kerning info */
  font-kerning: auto;

  /* opentype options: kerning, ligatures, horiz ligatures,
   * discretionary ligatures, contextual swash */
  font-feature-settings: 'kern', 'liga', 'dlig', 'hlig', 'cswh';

  /* allow browser to auto-infer missing glyphs */
  font-synthesis: weight style;
}

Example

Here is what they would look like with EB Garamond. Be sure to also check List of OpenType features for more features you can use.

Use brick.im

Fonts from Typekit and Google Web Fonts may be stripped of all these extra OpenType information. Use fonts from brick.im instead.

Swashes

First letters can look good with swashes (eg, an R with an extra long stem). Just be sure to turn this on on a as-needed basis since it may overlap with the rest of the text.

.headings:first-letter {
  font-feature-settings: 'kern', 'swsh';
}

Disabling ligatures

You can turn off ligatures using font-feature-settings.

font-feature-settings: 'liga' 0;

You have just read Using ligatures in CSS, written on March 05, 2015. This is Today I Learned, a collection of random tidbits I've learned through my day-to-day web development work. I'm Rico Sta. Cruz, @rstacruz on GitHub (and Twitter!).

← More articles