Switch between common and standard ligatures, as well as apply stylistic alternatives to OpenType fonts.

Using CSS you can unlock some advanced features of OpenType Fonts.

Switch between common / standard ligatures

In the two examples below, notice the difference between the spacing and the ‘dot’ on the letter i .

Common ligatures

fi fl

font-variant-ligatures: common-ligatures;
-moz-font-feature-settings: "liga", "clig";
-webkit-font-feature-settings: "liga", "clig";
font-feature-settings: "liga", "clig";

Standard ligatures

fi fl

font-variant-ligatures: no-common-ligatures;
-moz-font-feature-settings: "liga" 0, "clig" 0;
-webkit-font-feature-settings: "liga" 0, "clig" 0;
font-feature-settings: "liga" 0, "clig" 0;

Switch between stylistic alternatives

Alternatives on

Today you will see

-moz-font-feature-settings: "salt" 1;
-webkit-font-feature-settings: "salt" 1;
font-feature-settings: "salt" 1;

Alternatives off

Today you will see

-moz-font-feature-settings: "salt" 0;
-webkit-font-feature-settings: "salt" 0;
font-feature-settings: "salt" 0;

Fractions (supported fonts only)

Convert numbers separated by a slash as fractions.

1 1/3 cup of flour, cook for 1/2 hour

font-variant-numeric: diagonal-fractions;
-moz-font-feature-settings: "frac";
-webkit-font-feature-settings: "frac";
font-feature-settings: "frac";