Masthead | Display

This site is interesting for its use of the CSS property optimizeLegibility in the site masthead. The image below shows the property turned on, left, and off, right

The property activates standard ligatures and kerning, and although it isn&lsqu;t universally adopted yet, is a useful way to create interesting typographic effects.

Two aspects of this execution are notable; one is its use in a headline. Ligatures are a legibility aid for smaller text sizes; they combine two (or sometimes more) characters into a single glyph that would otherwise clash, such as fi, fl, and these are known as Standard Ligatures, and are usually activated by default. In larger text sizes, legibility isn't such an issue but aesthetics are. Type designers therefore sometimes create Discretionary Ligatures, which tend to be more more ornamental even if they are distracting and obstructive to an immersive reading experience. As such, they&lsqu;re turned off by default, which brings us to our second point of interest.

Unusually, Sevigne, used here to set the site masthead, has all its ornamental liguatures in the slots normally specified for Standard Ligatures, and so are able to be activated by applications and browsers that don&lsqu;t support OpenType features — making it a great display font for the web.

Fonts used

Preview Image