Vertical Type on the Web

In the desire to create something truly unique, web designers may be tempted to utilize visual techniques in typography that are borrowed from print form. Of these techniques, one popular method is to place text vertically.

Today‘s question that I‘d like to address is: “Should vertical/rotated type be used in web design?”

My quick-draw gut-reaction answer is: “No. I don‘t believe it should.” Read on, to find out why.

Vertical what?

First, lets go over what I mean by vertical typography: Vertical (or rotated) typography is when you have the letters of a word (in a traditionally horizontal language, specifically English for the limit of this article) stacked one on top of the other, in such a way that the word area appears very tall and narrow. To achieve this, the three methods to this are: the letters can be straight-stacked/unrotated (as shown in Example A), they can be rotated clockwise (Example B), or they can be rotated counter-clockwise (Example C).

In print form, the most typical use of this is for page tabs (and simulated tabs) for the paper edges of reference publications and binders. Many video game guidebooks currently use this to allow thumbing through sections easier to manage.

In some cases, there‘s even a clever design system that forms the text together to support the meaning behind the words. An example of this is when “SAVES” is connected to the first “S” in “JESUS”, seen on buildings and churches in many cities. The vertical type supports the shape of the cross. There‘s also signs that use vertical text to direct attention in a specific way, such as signs used to bring attention to an entrance. Simple, yet effective.

This technique has also been around for a long time to create signs for buildings that stand tall. These usually serve multiple purposes: To draw a passer-by‘s eye to the entrance, to maximize the available space between the side of the building and the street, and (in large applications) to strengthen the physical mounting against the wear of gravity.

To have a solution, you must start with a problem.

On the web, there are little, if no, physical or practical issues that necessitate the use of vertical text. The problems that this technique solves in the real-world no longer exist, so the so-called solutions become nearly moot. It then becomes a pure aesthetics dilemma that comes down to the question: “What problem is vertical text going to be solving here that doesn‘t cause more problems?”

One of the first advantages you‘ll find when using vertical text is how well it catches the eye. You can easily draw and direct attention in your layout when you apply this effect. The horizontal real-estate is narrow enough to also warrant usage. The downside however, is that it can (depending on your choice of typography/fonts and general rendering abilities) be more difficult for your audience to read. Currently CSS support for vertical text is so broken that a rasterized graphic is the only feasible way to create vertical text.

With graphic text, you‘ll need to consider how accessible the image needs to be. Will there be a portion of your audience that just won‘t see the label at all? This is especially true if you decide to use vertical text as a way of displaying navigation. You‘ll want to make sure that users can continue to browse through the site, as well as keeping it crawl-able for search engines like Google.

One Example.

After a few days of searching, I found just one website that used vertical text in a visually effective way that I really liked.

macrabbit is the little company that creates the great CSS-Authoring tool for the Mac: CSSEdit. Their use of vertical text on the homepage link is well-placed. It‘s set outside of the page design‘s vertical grid, is minimal, space-conserving, easy-to-read, and supports the navigation bar nicely. The only concern I have is that the homepage link isn‘t as accessible as it could be. They‘re using an image replacement technique that fails at accessibility (a topic too deep to go into here), even though the usability of the graphic works fine.

So, where does that leave you?

What do you think? Are you up for the challenge of attempting vertical text on your site? Is it worth the trouble you‘ll have to go through to make it work? Will it solve your specific problems? I certainly don‘t want to be the one to discourage you from being creative, but I do want you to think very carefully about what you‘re getting into when trying to transform real-world solutions into digital metaphors. Because very often, these so-called “good ideas” turn out to be design nightmares, unmanageable, and awkward to work around. As risk-taking as I tend to be with my own design work, I still don‘t encourage exploring the vertical type idea unless there‘s a darn good reason to (and usually there‘s not).

Here‘s my advice: consider your options very carefully, seek the honest advice of your peers, and keep an eye on possible alternate solutions that could serve you better.