Improving CSS text decorations(blogs.adobe.com)
blogs.adobe.com
Improving CSS text decorations
http://blogs.adobe.com/webplatform/2013/02/19/improving-css-text-decorations/
7 comments
Using gradient seems to be key in a lot of design. Does anyone have a few resources that explain in detail how to design them to get the various effects? Choose the colors and offsets? For example, the raised look in text or buttons. From looking at many examples, it seems that there's always a transition after the first few percent (e.g 3%).
I've been looking at exactly this issue this last week. I have a logo with a gradient and a small border outline for increased legibility. I'd much rather do this in html/css than as an image, but I'm going with an image for now since these text features are a moving target.
I agree the examples are a little garish, but if you look around, most logos are some mix of these attributes (font, stroke, fill). And it would be much easier (for me) to resize and update logos in html/css than to have to supply 3 or more versions every time I need to create or update a logo.
I agree the examples are a little garish, but if you look around, most logos are some mix of these attributes (font, stroke, fill). And it would be much easier (for me) to resize and update logos in html/css than to have to supply 3 or more versions every time I need to create or update a logo.
The strokes look like they'll mess up the kerning something fierce.
Word Art for web indeed.
Word Art for web indeed.
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
[2] http://puu.sh/2776P
[3] http://puu.sh/277nM
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
[2] http://puu.sh/2776P
[3] http://puu.sh/277nM
I love how Adobe are contributing to web standards. They're doing great things for CSS and its support for beautiful typography.
Between the Adobe proposal and this, the future of stylish typography on the web seems very bright:
http://robert.ocallahan.org/2013/02/svg-in-opentype-new-appr...
I can hardly wait for either, not to mention both, to become widely supported.
http://robert.ocallahan.org/2013/02/svg-in-opentype-new-appr...
I can hardly wait for either, not to mention both, to become widely supported.
It looks like Word Art
But I recall such kinds of post flourishing when people were discussing box-shadows, text-shadows and background-gradients a few years back. Examples also tended to exaggerate the effects for the sake of demonstrating the capabilities. Anyway, these CSS features ended up being useful for designers like me. So I'm trying to overlook the visually strong examples of these CSS properties and envision their future implementations in a more subtle way.