Designer’s Wishlist

August 12, 2003 12PM PST

I’m currently subscribed to www-style, the W3C’s mailing list for CSS development. CSS-3 is being developed this very moment by engineers and programmers. Why aren’t a few designers involved in building a language meant for style? I honestly don’t know. Maybe none of us were ever asked. Maybe none of us ever volunteered.

Mike Pick started a wish list today with linked text boxes and alpha-channel runarounds, two features he’d like to see carried over from the print world. Both are logical to the designer, and already work in existing software applications. Here, then, are a few more to add to the pool.

Element Awareness

Visual design is all about proportion. If I have to guess at arbitrary values for text blocks of varying lengths, I can’t properly design how they relate to each other. I may want #elementTwo to be 500 pixels high because #elementOne is, but if the user has a different default font size than what I designed for, my plans go out the window.

If I was able to apply height: inherit(#otherElement); to a specific element, the problem would be solved.

Better Vertical Alignment

The vertical-align property has been around since CSS level 1, but it’s currently a poor concept in general use. You may only apply it to inline elements (and later, table-cell elements) — we need block-level vertical alignment too, guys. Why can’t we apply it to both?

Type Improvements

Credit where credit is due: CSS handles type really well right now. line-height and letter-spacing attributes and first-line/first-letter selectors go a long way toward addressing what designers traditionally do with type. But since there’s always room for improvement, here are two things I wish to see addressed. Compare the following:

corkboard

corkboard

It’s possible you’re scratching your head and wondering the difference, but trust me, typography geeks will see it. You may only see one intended effect, but there are two problems (assuming the size is the same!) with this demonstration.

The first is that I have no idea which font the top word renders in. Theoretically, you should be seeing Helvetica. But if you don’t have it installed, chances are you’re seeing Arial instead. The fact that I have to guess at this highlights a big problem. Typefaces are important, and to some designers, having to dish up Arial as a substitute for Helvetica is almost as reprehensible as serving Comic Sans as a substitute for Caslon. This problem isn’t really the W3C’s to solve, but someone has to figure it out.

A proprietary solution exists in Microsoft’s WEFT, but when was the last time anyone actually used it? Thanks to licensing issues involved in embedding fonts, the whole process of selecting a character subset from a font that’s actually safe to embed is almost onerous enough to invalidate the method.

The second problem with the above example is something the CSS working group can address. Notice the difference in spacing between the two words? The top is loose and looks about as good as setting type with any imaging program before adjusting. The second is tightly-kerned and far more refined. In Photoshop, as with any high-end design program, I can adjust the space between each letter individually. Yes, this is important.

While kerning in the style sheet would quickly become a burdensome task for any longer passages — and really, who kerns body text? — I should at least have the option of adjusting my display text; that is, my headlines. A possible interface might look something like kerning(5): -10, +5, -20;. The first value would apply to the space between characters five and six, with the subsequent values affecting those between six and seven, and seven and eight, respectively. Units could be percentages of an em, or for maximum obfuscation they could be full em values (and the designer would just have to put up with three-digit decimal values).

What do you want to see out of CSS? What kind of functions do you find in traditional design software that you wish existed in CSS? If the list grows to significant proportions in the comments, I’ll consider submitting some of these to www-style.