How to optimize for legibility using text-rendering

Paddi Macdonnell.
May 07, 2013
How to optimize for legibility using text-rendering.
The most frustrating aspect of web design for designers trained for print, is the persistent lack of typographic control. Careful typographic choices are the hallmark of quality work and the lack of that quality online never ceases to be jarring for those of us that know what we’re looking for. Fortunately, the level of control that we have is increasing all the time and support for more advanced typographic rendering is also increasing. Whilst it’s certainly not possible to deliver the kind of treatment that applications like Illustrator deliver — where every letter can be tweaked if required — there are tools available to increase quality. One of the least known is the text-rendering property. You won’t find the text-rendering property in any CSS specifications because it’s technically not CSS, it’s an SVG property, although it's used just like a CSS property. The most important thing is that with a single line of CSS, we can eliminate a few rivers and other imperfections from our text. The text-rendering property has four settings:
  • auto: allows the browser to choose a setting itself
  • optimizeSpeed: focuses on speed
  • optimizeLegibility: focuses on advanced rendering
  • geometricPrecision: precise rendering
Sadly, the use of the browser default ‘auto’ will normally favor speed rather than legibility — indicative of a standard finalized by developers instead of designers. As most of us don’t produce pages that are substantial enough to justify the need for the optimizeSpeed setting, we’ll only really be interested in optimizeLegibility (although geometricPrecision is useful for certain fonts). The CSS code is as follows:
.myClass { text-rendering: optimizeLegibility; }
Here’s a direct comparison of optimizeSpeed and optimizeLegibility, as you can see if you look closely, there are two significant improvements in the more legible version: the ‘ffi’ characters in the first line have been correctly replaced with a ligature, and the kerning has been improved throughout, which is especially notable in the fifth line, where the space between the ‘V’ and the ‘e’ has been corrected. The kerning improvements can be seen more easily in these overlays: Chrome Mac Chrome Windows Firefox Mac Firefox Windows Internet Explorer 9 Windows Safari Mac Browser support is currently inconsistent, however, the fact that text-rendering fails silently in browsers that don’t support it, means that it’s very usable right now. Do you use the text-rendering property in your CSS? Would anyone but a typographer even notice the difference? Let us know your thoughts in the comments. Featured image/thumbnail, fine-tune image via Shutterstock.

Paddi MacDonnell

Paddi MacDonnell is a designer and entrepreneur from Northern Ireland, follow her on Twitter.

Read Next

6 Best AI Productivity Apps in 2024

There’s no escaping it: if you want to be successful, you need to be productive. The more you work, the more you…

3 Essential Design Trends, February 2024

From atypical typefaces to neutral colors to unusual user patterns, there are plenty of new website design trends to…

Surviving the Leap from College to Real-World Design

So, you’ve finished college and are ready to showcase your design skills to the world. This is a pivotal moment that…

20 Mind-Bending Illusions That Will Make You Question Reality

Mind-bending videos. Divisive Images. Eye-straining visuals. This list of optical illusions has it all. Join us as we…

15 Best New Fonts, February 2024

Welcome to February’s roundup of the best new fonts for designers. This month’s compilation includes some innovative…

The 10 Best WordPress Quiz Plugins in 2024

Whether it’s boosting your organic search visibility or collecting data for targeted email marketing campaigns, a great…

20 Best New Websites, February 2024

It’s almost Valentine’s Day, so this latest collection is a billet-doux celebrating the best of the web this month.

Everything You Need to Know About Image Formats In 2024

Always trying to walk the tightrope between image quality and file size? Looking to branch out from JPGs and PNGs this…

The 10 Best Logos of 2023 - Ranked

From vintage aesthetics to innovative new color schemes, we’ve seen a lot of creative logo designs this year. In this…

Exciting New Tools for Designers, February 2024

2024 is well underway and shaping up to be an interesting year. So, to help you keep your focus on working hard and…

The Art of Engineering AI Prompts

In the rapidly evolving world of artificial intelligence, the ability to communicate effectively with AI tools has…

15 Best New Fonts, January 2024

In this month’s roundup of the best new fonts, we find a large number of vintage, retro, and revival typefaces. Is it…