demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 1.5K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Make Your Web Pages More Legible With Ligatures and Kerning Pairs

css / typography

Estimated reading time: 2 minutes, 35 seconds

For many web designers, CSS3 webfonts have enough richness and variability to occupy their time. A good developer will carefully deliberate in choosing a strong font family and designing a decent font stack. They will certainly modify font-size, line-height and color to maximize attractiveness and readability of text, and maybe add a little letter-spacing for heading elements, but that’s usually as far as it goes.

A well-designed typeface has more depth to it than most people appreciate. One example of this buried richness are automatic kerning controls: some letters that appear beside each other become much more readable if they are moved closer together. These are known as kerning pairs. In some cases, the letters might be conjoined into a new set of characters, called a ligature.

WAR WAR
Text with kerning pairs (bottom)

A good example would be the capital letters W and A. Kerned like every other letter, they appear too far apart in many typefaces: the A should, in most cases, slip in closer under the trailing stroke of the W.

A correctly applied kerning pair effect is subtle, but effective, greatly increasing readability while allowing more glyphs per line of text.

Another example would be the lowercase letters f and i: in many cases, the period on the i will display on top of or very close to of the overhang of the f, causing a visual “splotch” on the page. This can be changed into a ligature:

finnegan’s fine fiddles
Text with automatic ligature font substitution (bottom)

It is important to understand that these adaptations are built directly into the font: all we need to do is gain access to them. Traditionally, ligatures were created by inserting HTML entities, but in modern browsers it is much easier to turn on the appropriate CSS property. (In Firefox, kerning pairs and ligatures are automatically engaged if the font is above 20 pixels in size).

CSS3 offers many controls for kerning, but the easiest and fastest is very simple:

body { text-rendering: optimizeLegibility; }

The text-rendering property is supported in all current versions of Firefox, Safari and Chrome, and automatically substitutes kerned pairs and ligatures as appropriate throughout your selection. Sadly, support is currently lacking in IE and Opera. However, text-rendering is a near perfect example of progressive enhancement: users with browsers that do not support the property will still be able to read the text, just without the subtle advantages of advanced CSS3 .

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.