244 HOW: Visual Tools: General Hints on Type
Experiment with different sizes and faces to get a feeling for which type of anti-aliasing is appropriate for each face, size, and weight. This also varies depending on the background being used, the visual interaction of other elements on the page, and so on. Most web designers choose Crisp most of the time.
General Tips
As just mentioned, the smoother or heavier the anti-aliasing, the greater the number of edge pixels in various shades, and the more bytes the resulting GIF image will require. When bandwidth is at a premium—and it is always at a premium—err in the direction of Crisp.
Not all type needs to be anti-aliased. Smaller type might be easier to read with no anti-aliasing at all. For instance, 10px Helvetica will be easier to read (and will use up less bandwidth) if you choose “None” in the AntiAliasing dialog box. But rather than create GIF type of that nature, a more responsible course would be to use HTML and CSS to create small bits of web type because such text may be easily copied, pasted, and indexed by search engines—whereas type GIFs are simply images.
GENERAL HINTS ON TYPE
Pardon the pun. (Get it? Type? Hints? Never mind.) Every aspect of web design involves trade-offs and potential problems for some web users. When setting typography for the Web, here are some points to keep in mind.
The Sans of Time
Let’s just get it over with: Sans serif fonts are far easier to read onscreen than serif fonts. This is the exact opposite of what is true for books. But printing is high-resolution; the computer screen is low-resolution. There are simply not enough pixels to correctly render the tiny details required by serif typefaces. This is especially true with smaller type, such as body text and subheads. (It is also true for CSS text.)
Taking Your Talent to the Web |
245 |
It helps to think of your type GIFs as icons, which must be rendered pixel by pixel in a 72ppi environment—because that is essentially what they are. Anti-aliased fringe colors must use up an entire pixel (there are no halfpixels). Now add subtle ascenders and descenders to this mix, attempt to wedge such nuances into discreet pixels, and you can see why serifs work poorly onscreen.
You also can see why typographic colors should be web-safe. Add dithering to the unholy mix of anti-aliasing and serifs, and you have an illegible mess.
This inherent preference for sans serifs on the Web might be behind the present resurgence in Helvetica. We could be talking through our hats, but we haven’t heard a better theory, and as we’ve shown earlier, web styles have been entering mainstream media as fast as designers could rip each other off.
From this discussion, it might seem that the Web is no place for fine typography. But that is not the case. Juxt Interactive is one agency that creates superb type treatments online, and their work repays careful study (www.juxtinteractive.com).
Space Patrol
In most cases, web type is more readable when it is widely spaced because such spacing makes allowances for the imprecise spreading of unruly edge pixels. So when setting type, try loosening your tracking in the Type dialog box. If you’ve done any TV design, it’s pretty much the same thing. If you haven’t, just trust us.
Lest We Fail to Repeat Ourselves
Always start with web-safe colors for your type and your background to avoid ugly dithering in low-end monitors.
246 HOW: Visual Tools: Navigation
Accessibility, Thy Name Is Text
The more text you create graphically, the less a search engine will understand about your client’s web page and the more problems you create for readers with disabilities or those using alternative web browsers.
As mentioned elsewhere in this book, use <ALT> and <TITLE> attributes in your HTML <IMG> tags to explain what the search engine and the disabled visitor cannot see. If HTML and a text GIF look equally good, choose HTML because it increases the accessibility and usability of your page, makes it easier for search engines to locate the relevant information, and almost invariably uses less bandwidth than graphics.
In most cases, HTML text can be resized by the user. Type GIFs cannot. Keep in mind that small type that looks great to you might be difficult or impossible for folks with impaired vision to read.
If you were wondering why you see so much large bold sans serif typography on the web, now you know. It’s not that web designers are copycats. Well, we are, but it’s not just that. It’s that we’ve learned by experience that small fonts, sans serif fonts, and tightly kerned text can all be problematic for the people who use our sites.
As support for CSS improves, it becomes a little easier to sell clients on CSS-style text instead of type GIFs. But resistance to this notion is widespread because clients seek branding, and designers like creating it. And, most of the time, type GIFs just work better for that purpose, regardless of their accessibility issues.
NAVIGATION: CHARTING THE VISITOR’S
COURSE
We covered the guiding principles of navigation in Chapter 3, “Where Am I? Navigation & Interface.” And in Chapter 7, “Riding the Project Life Cycle,” we learned that developing a branded, intuitive navigational menu—or a series of hierarchical navigation menus—is only the beginning and that most web firms perform interface testing, asking volunteers to work with the developing site. And as problems are identified, the designer is asked to rethink and redesign.
Taking Your Talent to the Web |
247 |
Focus group testing in advertising often results in mediocre campaigns, but focus group testing of a web interface can result in a better site—if those who run the tests know what they are doing.
What this means in the context of Photoshop is that you will be creating a lot of comps until you truly crack the interface problem, and then you will be refining your comps based on feedback from user tests.
When the perfect interface has been designed in Photoshop, there is still more to do. Often, the design team will implement a menu bar that changes state via JavaScript as the visitor navigates the site. On the simplest level, changing state means that the menu bar subtly indicates where the user is within the site structure. For instance, when the visitor reaches the About section of PlanetRX (http://www.planetrx.com/information/about.html), the About portion of the menu bar is highlighted to remind the visitor “you are here.” Refer back to Chapter 3’s Figures 3.2 and 3.3 to see how this “you are here” state change is handled on the Gap site.
Changing state to reinforce the visitor’s position within the site can be accomplished by simple HTML, via JavaScript, or with the help of publishing systems that swap visual elements on-the-fly. The choice of implementation varies by the scope of the site and the size of the budget. On a small site, the menu bar can be changed via HTML or JavaScript. On a very large site that is constantly updated, a publishing system will probably be used.
No matter how the technique is implemented, it is up to the designer to create the alternate state graphics on separate layers in the Photoshop document. (These will come in handy later in the process when the work is sliced and produced in ImageReady.)
Typical navigation menus also “light up” or otherwise change state when the user drags the mouse cursor over a given menu item selection. Again, this is accomplished via JavaScript, and again, though there is no substitute for home-cooked code (or working with good developers), ImageReady can help out, as we are about to see.