1
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.
A Closer Look at WordPress 6.7: “Rollins”
The WordPress 6.7 release, named “Rollins” honors jazz legend Sonny Rollins, renowned for his improvisational mastery and innovative contributions to jazz. His iconic compositions, like “St. Thomas” and “Oleo,” reflect…
Why Responsive Design is Failing Modern Users
Yet, despite its widespread adoption, modern users are increasingly frustrated. Why? Because the once-revolutionary approach is failing to keep up with the evolving demands of today’s digital landscape. In this…
The Importance of Title Tags: Tips and Tricks to Optimize for SEO
When it comes to on-page SEO, there’s one element that plays a pivotal role in both search engine rankings and user engagement: the HTML title tag. Often overlooked, this small…
How to Reduce The Carbon Footprint of Your Website
On average, a web page produces 4.61 grams of CO2 for every page view; for whole sites, that amounts to hundreds of KG of CO2 annually. Reducing your website’s carbon footprint is…
How to Plan Your First Successful Website
Planning a new website can be exciting and — if you’re anything like me — a little daunting. Whether you’re an experienced freelancer, a team of hardened developers, or a…
Rock Solid WordPress Security: Keeping Your Business Safe
WordPress is the web’s favourite CMS (content management system), renowned for its low-entry level and vast array of themes and plugins. WordPress’s open-source nature allows for endless flexibility, catering to…