HTML and CSS Reference
In-Depth Information
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
different glyph.
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.
No ligatures
Ligatures
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
:
font-feature-settings: "liga";
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
feature:
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