How to enable kerning in Firefox 3 ?
If you don't know about kerning please visit wikipedia article on kerning. Kerning deals with space adjustments between letters to make words more readable. Now a days most of the fonts are shipped with kern hinting but very few applications make use of this extra information. Firefox 3 now officially supports kerning for text elements.
Please make sure you only apply kerning to the elements which use larger font sizes because you won't observe much difference with smaller ones. And use kerning carefully as it could slowdown page rendering because of extra math calculations.
With Firefox 3 you can use the css property text-rendering to enable or disable kerning. text-rendering takes following 4 possible values.
- auto - If the font size is less than 20px then Firefox uses fast text rendering method provided by operating system otherwise it enables both ligatures and kerning.
- optimizeSpeed - will disable font kerning.
- optimizeLegibility - this option enables both kerning & ligatures.
- geometricPrecision - this option too enables kerning.
And the syntax is
text-rendering:optimizeLegibility;
Firefox 3 automatically enables kerning for text with font-size greater than 20px.
You can change 20px boundary limit by editing the following key in about:config.
browser.display.auto_quality_min_font_size
This blog now uses kerning for headings and all other kinds of text elements. And I am no longer going to use inferior letter-spacing techniques. Firefox 3 is the only browser on the market to support kerning. Safari guys have disabled kerning so that they can drum up about their benchmarks.
Mozilla documentation on text-rendering property.
Comments
Bert Terpstra
Netherlands