Skip to content

Latest commit

 

History

History
30 lines (23 loc) · 2.11 KB

fonts-and-ligatures.md

File metadata and controls

30 lines (23 loc) · 2.11 KB
title authors intro types categories published updated status
Fonts and Ligatures
thebeebs
I just noticed that the [IE test drive website](ht...
shorts
web
html5at5
2012/03/02 12:00:00
2012/03/02 13:00:00
archived

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).