The most irritating facet of internet design for designers educated for print, is the persistent lack of typographic management.
Careful typographic decisions are the hallmark of high quality work and the dearth of that high quality on-line by no means ceases to be jarring for these of us that know what we’re on the lookout for.
Fortunately, the extent of management that now we have is rising on a regular basis and assist for extra superior typographic rendering can be rising. Whilst it’s definitely not doable to ship the form of therapy that purposes like Illustrator ship — the place each letter will be tweaked if required — there are instruments out there to extend high quality. One of the least recognized is the textual content-rendering property.
You gained’t discover the textual content-rendering property in any CSS specs as a result of it’s technically not CSS, it’s an SVG property, though it’s used similar to a CSS property. The most necessary factor is that with a single line of CSS, we will remove just a few rivers and different imperfections from our textual content.
The textual content-rendering property has 4 settings:
- auto: permits the browser to decide on a setting itself
- optimizeSpeed: focuses on pace
- optimizeLegibility: focuses on superior rendering
- geometricPrecision: exact rendering
Sadly, using the browser default ‘auto’ will usually favor pace reasonably than legibility — indicative of a normal finalized by builders as a substitute of designers.
As most of us don’t produce pages which can be substantial sufficient to justify the necessity for the optimizeSpeed setting, we’ll solely actually be fascinated with optimizeLegibility (though geometricPrecision is beneficial for sure fonts).
The CSS code is as follows:
.myClass textual content-rendering: optimizeLegibility; Here’s a direct comparability of optimizeSpeed and optimizeLegibility, as you possibly can see should you look carefully, there are two important enhancements within the extra legible model: the ‘ffi’ characters within the first line have been accurately changed with a ligature, and the kerning has been improved all through, which is very notable within the fifth line, the place the house between the ‘S’ and the ‘e’ has been corrected.
The kerning enhancements will be seen extra simply in these overlays:
Chrome Mac
Chrome Windows
Firefox Mac
Firefox Windows
Internet Explorer 9 Windows
Safari Mac
Browser assist is at present inconsistent, nevertheless, the truth that textual content-rendering fails silently in browsers that don’t help it, implies that it’s very usable proper now.
Do you utilize the textual content-rendering property in your CSS? Would anybody however a typographer even discover the distinction? Let us know your ideas within the feedback.
Leave a Comment