Pubudu Ranasinghe

What You Need to Know About Font Features in CSS

Did you know that OpenType fonts come with a bunch of features that can make the text look better and easier to read? These features were often hidden away in complex design/typesetting software, so most designers and developers weren’t aware of them.

Now, with modern webfonts and improved browser support, you can just turn these on with a bit of CSS.

Standard Ligatures

Ligatures occur when two or more characters are joined together to form a single glyph. For instance when the letters “f” and “i” are next to each other the hood of the “f” can collide with the dot of the “i”. A ligature can replace this with a combination that is designed to look better. Often these are enabled by default in most fonts.

Offline ff fi fl ffi ffl

font-variant-ligatures: common-ligatures;

Discretionary Ligatures

Discretionary ligatures are to be used at the discretion of the designer. Most of the time they are more decorative and not essential for readability.

Connecting ct sp st

font-variant-ligatures: discretionary-ligatures;

Old Style Figures

Old style numbers have varying heights and alignments to make them blend in better with lower case letters. These are designed to be used inline with a body of text.

52 apples and 7 bananas

font-variant-numeric: oldstyle-nums;

Tabular Figures

Tabular figures, as the name implies, are designed to align better in tables. They all have the same width so that they line up nicely in columns.

25
345
2342

font-variant-numeric: tabular-nums;

Ordinals, Fractions and Slashed Zero

These features are useful when displaying number values. Ordinals format the letters in “1st”, “2nd”, “3rd” to be smaller and raised. Fractions turn “1/2” into a proper fraction glyph.

№ 9 3/4 between 9 th and 10 th

font-feature-settings:
  "frac" 1,
  "ordn" 1;

Swashes

Swashes are decorative pieces often used on start of paragraphs or headings. You may have noticed these on the start paragraphs in books or magazines.

Queen Elizabeth

font-feature-settings: "swsh" 1;

Small Caps/Petite Caps

Small caps are uppercase letters that are the same height as lowercase letters. These are often used for acronyms or at the start of paragraphs. Some fonts also come with petite caps which are even smaller than small caps.

Sir Issac Newton

font-variant-caps: normal;

This is only a few of the many font features available in OpenType fonts. Depending on the font you are using, the possibilities are endless. So next time you are working with text on the web, spend some time learning your font and see what features it has to offer. You can find the features supported by your font at wakamaifondue and checkout an exhaustive list of CSS font features here.