

Improving CSS text decorations - joxie
http://blogs.adobe.com/webplatform/2013/02/19/improving-css-text-decorations/

======
bbx
It's always hard to get excited by such new 'fancy' CSS features when the
examples (espcially the gradient and pattern ones) look like Word Art
renderings.

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.

------
melling
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%).

------
JCraig
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.

------
kmfrk
The strokes look like they'll mess up the kerning something fierce.

Word Art for web indeed.

~~~
Daiz
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>

------
TazeTSchnitzel
I love how Adobe are contributing to web standards. They're doing great things
for CSS and its support for beautiful typography.

------
PavlovsCat
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...](http://robert.ocallahan.org/2013/02/svg-in-opentype-new-approach-to-
svg.html)

I can hardly wait for either, not to mention both, to become widely supported.

------
Bjartr
It looks like Word Art

