Posted by Vivian on November 3rd, 2009

1 Comment

Making a world of difference with 0.05em

Typographic sensibility can make or break a design, both in print pieces and online. In web design, attention to typography is especially important since the majority of online content is written information. It is often said that the strength of a web designer can be judged through their ability to create an engaging UI with just text.

There are many tools and tricks available to web designers when it comes to styling type: size, colour, alignment, line-height (leading), word-spacing (don’t do it), but an important one I find most often ignored by developers is letter-spacing (tracking). Letter-spacing is literally the space between the letters… and it can make a big difference in terms of legibility and the overall feel of a site.

“Don’t blame me; you forgot the letter-spacing…”

As a designer, it feels like I am often getting flack from developers for type that is “too small”. Ninety-nine percent of the time after I hand off an Illustrator file or PSD of a design, the coded page comes back to me without any letter-spacing included in the CSS. Letter-spacing is like air: you don’t really notice it, but it makes a difference whether it is there or not.

It’s easy, just do it.

I’m really bad at math, but the other day it dawned on me how to figure out the CSS letter-spacing measurement from my AI (or PSD) file. Tracking in Adobe programs is measured in 1/1000em so when the design file specifies “50″ or “100″ in the tracking character palette, it is 100/1000 = 0.1em. That 0.1em can take a 10px all caps style from “too small” to “completely awesome”. See below:

EXAMPLE WITHOUT ANY LETTER-SPACING, OMG SO TIGHT, NOT IN A GOOD/SEXY WAY.

ADDED 0.1EM OF LETTER-SPACING. LOOK HOW AMAZING IT IS NOW.

2PX OF LETTER-SPACING? CRAZYTOWN! GET THE EFF OUT OF HERE!

Of course there are issues…

Like in many cases, basically Firefox is the only browser that does letter-spacing right. Depending on your product/audience, this may not be an issue, but it is definitely something to keep in mind when specifying sub-pixel measurements that may be rounded up or down in browsers other than Firefox.

Negative letter-spacing: it’s just a fad, right?

This is so tight, yo! I can’t even read it!

Over the last couple years a big web typography trend has been the bold sans type with negative letter-spacing, “all the cool kids are doing it.” While I can see the appeal (in that it speaks to the whole web 2.0 design aesthetic), I expect that this trend will soon remedy itself. Letter-spacing is meant to be applied with a gentle touch, and when heavy-handed negative (or positive) tracking occurs, it can definitely affect the legibility, as some of those examples clearly show.

The bottom line

Always use letter-spacing to your advantage and not to your own detriment, just because it’s “in”. Yell at developers when they omit it from the CSS and then decide to blame you, the designer. And if that doesn’t work, do what I had to do: get the keys to the site or app, then tweak to your heart’s content.

  Posted by Vivian on September 8th, 2009

5 Comments

4 Fears of @font-face

The future of web typography seems to be almost here with Firefox 3.5 supporting @font-face, making web-safe fonts a thing of the past. Through CSS3’s linking/embedding of any font file, @font-face opens the floodgates to the millions of font options available to designers. The design possibilities are extremely exciting, but in the coming @font-face infancy, we can likely expect a dark period of uglification.

1. Bad typography is too easy
2. Illegible and annoying sites
3. @font-face + CSS3 effects = disaster
4. Pirates and the shipwrecked

Bad typography is too easy

A lot of bad or amateur-looking print design is victim of poor type decisions paired with improper typographic finesse. With all the choice out there, why pick Papyrus or Hobo for a menu or brochure? It happens far too often in print and now it can happen easily online with @font-face. For every beautifully crafted typeface, there are probably 10 mediocre ones, and 25 really fugly ones; the odds are stacked against us, but hopefully designers will exercise restraint and common sense.

Illegible and annoying sites

@font-face has the potential to marry beautiful typography with usable, accessible, and indexable content, but there are also foreseeable legibility disasters in this free-for-all. One of the best things about web-safe fonts, such as Verdana and Georgia, is that they are fairly cross-platform reliable, and have proven legibility. With its large x-height, giant counters, and distinctly varied characters, Verdana was designed to be read easily on-screen at small sizes. However when used in print, it sometimes falls comically flat – look at how IKEA just screwed their print branding by using this traditionally web typeface.

Techniques like Cufón and sIFR are technologically hefty, often limiting use just to headline text. Since @font-face is lightweight enough to use throughout an entire site, paragraph text styled poorly in an awkward font can easily impede legibility and annoy users. It’s not worth sacrificing access to the content just to make something look nicer.

CSS3 effects + @font-face = the internet circa 1995

Pair a little cheesy text-shadowing with a “funky” typeface and the internet has been set back 15 years. There is probably never an online situation that calls for drop-shadowed, glowing, or flaming type; we’re talking web design, not cereal boxes. Like crappy flash intros, just because it exists, doesn’t mean it should be used. Let’s hope that clients don’t get a whiff of this one and start requesting it for home page headlines.

Pirates and the shipwrecked

Though it can be argued that pirates will always find a way to get what they want for free, why make it any easier to steal fonts? If used incorrectly, @font-face can offer up copyrighted font files for free. Solutions like Typekit are taking steps in the right direction, but there are bound to be inexperienced slip-ups at first. Browser compatibility issues with @font-face may also end up leaving users on older browsers behind, viewing (in theory) less typographically rich content. It will be fun watching the online typographic revolution unfold once copyright issues are resolved, and cross-browser support is ready. Hopefully @font-face will make the internet a more beautiful place, and not like a bunch of designers got drunk on the punch and barfed typefaces everywhere.