Displaying ligatures on the web with CSS

Screenshot 2015-10-12 00.02.41

Those of us in graphic design are in the know about type features such as ligatures. In typography, a ligature occurs where two or more letters are joined as a single glyph in fonts that support them. A good example of a ligature is the lowercase f and the lowercase i characters. They can be displayed separately, but some fonts contain a ligature glyph of the f and i joined as fi.

The default behavior of most browsers is to display the separate characters without showing the ligature, but for fonts and browsers that support it, you can now tell the browsers to render the ligatures for supported letter pairings. To do this, you would just declare this in the html tag of your css like this:

html { font-feature-settings: "liga" 1; }

If the font being used supports it, then ligatures will be shown. Typically, many serif fonts will support ligatures, as will some select sans serifs.

Currently, font-feature-settings are supported in Google Chrome, Mozilla Firefox, Internet Explorer 10 and 11, Microsoft Edge (the new browser introduced in Windows 10), and Opera. The only holdout, it seems, is Apple’s Safari and Mobile Safari browsers.

Leave a Reply