6 ms·
Proper kerning in browsers is still "work in progress" anyway - there's the text-rendering[1] property, which when set to optimizeLegibility enables kerning. Ho
by Daiz 14y ago
Proper kerning in browsers is still "work in progress" anyway - there's the text-rendering[1] property, which when set to optimizeLegibility enables kerning. However, there's some bugs with how it behaves, and only Firefox enables it by default (to fonts over 20px in size).
Anyway, proper outer stroke should not affect the actual text positioning, so it shouldn't really do anything to the kerning. If some people want to use huge stroke sizes and widen the gap between letters, they could always mess with the letter-spacing property.
Here's an example[2]. 50px Constantia, with kerning and ligatures enabled (using text-rendering: optimizeLegibility), with the bottom having a thick 5px outer stroke (example produced with HTML5 Canvas).
As the article mentions, Webkit has prefixed text-stroke CSS properties, but these suck. The reason? They use centered stroke, not outer stroke. This means that a 4px stroke renders 2px inside the glyph, and 2px outside the glyph. On larger stroke sizes or with thin glyphs, the results look awful. Just take a look at this second example[3]: It has 3px centered stroke on top, 1.5px outer stroke in the middle (to demonstrate how much of the 3px centered stroke is actually outside), and 3px outer stroke on bottom. A world of difference, no? Ideally, you should be able to control what kind of stroke you want (inner, centered or outer), but it should most definitely default to outer or be outer-only if there's to be just one option.
[1] https://developer.mozilla.org/en-US/docs/CSS/text-rendering https://developer.mozilla.org/en-US/docs/CSS/text-rendering
[2] http://puu.sh/2776P http://puu.sh/2776P
[3] http://puu.sh/277nM http://puu.sh/277nM