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

AI Changes Everything and Nothing

The marketing frenzy surrounding the recent flood of AI-powered apps and services has caused some observers to question…

15 Best New Fonts, March 2023

Fonts are one of the most critical tools in any designer’s toolbox. With clever use, you can transform a design from hu…

20 Best New Websites, March 2023

We have another exciting collection of the best new sites on the web for you. In this month’s episode, there are severa…

Exciting New Tools for Designers, March 2023

We have invoicing apps and scheduling tools. Some resources will save you the trouble of hiring a designer or developer…

Free Download: Budget Planner UI Kit

Designing an onboarding process can be tricky; there are so many different options, and if you get it wrong, you could …

3 Essential Design Trends, February 2023

There’s a common theme in this month’s collection of website design trends – typography. All three of these trends show…

Free Download: Education Icons

Icons are essential for successful web design. They provide an eye-catching, unobtrusive way to communicate important i…

15 Best New Fonts, February 2023

The fonts you embed in your website transform the design and can mean the difference between an extraordinary brand exp…

Unlocking the Power of Design to Help Users Make Smart Decisions

Users are faced with decision-making on websites every day. The decision-making process can be far more complex than it…

20 Best New Websites, February 2023

The quality of websites in 2023 has moved up a gear, with designers cherry-picking trends as tools, embracing new ideas…

AI’s Impact on the Web Is Growing

Despite the massive strides tech has taken in the last few years, we rarely see a week as tumultuous as this. When your…

Exciting New Tools for Designers, February 2023

No matter what you’re working on, you can guarantee that there’s a cool app, resource, or service that will help you do…