HTML and CSS Reference
Glyphs and ligatures
Glyph is the typographical term for the graphical elements that make up a font.
It differs from a letter —any individual letter can be represented by any one of a
number of glyphs in a font depending on the context in which it's placed. A com-
mon example in old English was the long s and short s forms that were used at
the start and end of words, respectively—both represented the letter s but use a
A ligature is a glyph that replaces a sequence of letters. In traditional English
printing, this was generally used to increase legibility or to work around limita-
tions of ink or lead type. But in some scripts, the particular ligature used can af-
fect the meaning.
Ligatures are a feature of the font being used. Each font has a replacement table
that maps certain sequences of characters in the text to single glyph.
Following are some example ligatures from the Calluna Regular font.
Currently, Firefox and Safari render ligatures automatically, if they're
available in the font, above a certain font size. CSS3 gives you complete
control over them through the font-feature-settings property. The
property requires a single value: a quoted string containing a comma-
separated list of font settings. To turn on ligatures, you use this CSS :
All the features have a four-character code. If the value is present, it
means the feature is enabled. It's also possible to add a value to each
font-feature-settings: "liga" 1;
A value of 1 or on means the feature is enabled, and 0 or off means the
feature is disabled. The complete list of possible features is available in