Fonts and Ligatures

I just noticed that the IE test drive website has some new demos that show the use of OpenType font features . Over the next few weeks I thought I'd take a look at each of the different features in turn.

OpenType is a technology that is supported by IE10 and Firefox 4+ allows you to use some of the features that are stored in font files to make fonts on webpages look better, you can read more about it here. So on to todays topic:

Ligatures

Sometimes letters look awkward when they are positioned next to each other. The type designer may fix this by welding two letters together, e.g:

liga

To enable ligatures in a supported browser you use the CSS below:

-moz-font-feature-settings: "liga=1";
-ms-font-feature-settings: "liga" 1;

You will notice that there is currently a slight difference between the syntax between Firefox and IE, this is because the draft has changed. Don't worry by the time the feature is standardised we will likely use the same syntax, this is the whole reason we use vendor prefixes (if you don't know what vendor prefixes are check out this post).

Published by thebeebs

Martin works for Oracle as a Developer Evangelist. He’s been a developer since the late 90s and loves figuring out problems and experimenting with code.