Web Typography
Let's say typography concerns itself with letter forms, choosing typefaces, the connection and spacing between letters, indicating the structure of the content, and page layout.
(In a way, typography is "print usability". This article, though doesn't consider interactive usability.)
What stays the same, and what's different when you go from books and magazines to websites? Allow me one digression, and then I'll get to specific implications of the switch to onscreen reading.
Re-intermediation
Time was, a typographer would spec a book, but it was up to typesetters to go through and set each character. Excellence of the typographer was mediated by the typesetter. Desktop publishing brought control of the typesetting aspect to the typographer, at the cost of the more primitive capabilities of the software.
Browsers today, of course, give us extremely primitive text layout capability, but that's not really my point. My point is that the ability to do excellent typography on the web is mostly out of the hands of designers. The people who can do interesting things are the people who control the web servers and the pubishing systems behind the scenes.
Designers probably have no idea what is possible to do with the publishing system, and the people building the publishing systems typically aren't designers, and so don't know what to make possible.
Onto the elements of typography....
Letter forms
Monitors still have very low resolution compared to print: 72 pixels per inch for my monitor, versus 1200 dots per inch for my laserprinter. If you want to design typefaces for the screen, there isn't much point in delicacy.
Admittedly it's a finer point, but individual character shapes vary. For example, Verdana's uppercase 'J' is not pretty or elegant, especially in bold. If an uppercase 'J' is a big deal on your website, you might not want to use Verdana. Many fonts have similar quirky characters.
Choosing Type Fonts
Time was, a font was a particular size and shape of a typeface. Italics were a different font than the bold. Thus choosing a font involves the typeface, as well as the variations. Few people make the distinction between font and typeface anymore.
Typeface
Serifs at typical sizes just don't work out well onscreen. At slightly larger than normal sizes they are fine, but most fonts appear very black as the font size increases.
The selection of typefaces is typically limited and perilous. I might absolutely love Chapperal and Fairfield, but they aren't sitting out on many people's hard drives. My Palm only uses one font.
Using Microsoft web typefaces was pretty safe for a few years, but Microsoft is scaling back their typeface generosity, just as many new devices are becoming available.
Once upon a time browsers could load fonts across the web. One day this will surely come back, because it will create a huge boom in the market for typefaces.
Verdana deserves special mention. Verdana is uniquely easy to read at small sizes. If you specify a very small, but easy-to-read size for Verdana, your text may be unreadable by someone who doesn't have Verdana. You will have more and more customers who don't have Verdana on the particular device they are trying to see your website with. At some point, you will have to give up on Verdana.
Emphasis
Italicizing a word tends to de-emphasize it, onscreen -- at normal sizes. Italicizing sans serif fonts is dubious, anyway. At larger than normal sizes, serif italics do tend to add emphasis.
The web has more options than plain, bold, and italics. Color is cheap (even if different on different monitors). Interaction is an easy option, including rollovers, and the "hover" property for links.
I've never liked underlined links. It certainly makes the underlined text stand out, but color is surely enough for that. I rather like the approach of color for links, with underlining for the hover.
On link colors
People commonly specify link colors in which visited links fade from view. I suspect choosing the brighter link color should be like placing land mines: if you expect users to click through to a high percentage percentage of the links, make the unvisited link stand out. But if you expect each user to visit only a small percentage of the links, then the visited links should stand out.
Jakob Nielson would surely say to go with the choice that most other websites make. I'd say that's the obvious answer, but I'd leave room for further consideration.
As for specific link colors, black body text on a white background leaves the color red as the obvious choice. Unfortunately, red displays very poorly on television sets (WebTV, etc.), and some people are color blind. The original default link colors Netscape chose were, um, unsophisticated. And yet one option is not to specify link colors at all, leaving it to the user to choose. Users who choose their link colors to match a black background lose if you specify a white background, but they have seen this before, and probably override the background color of the page, too.
Ultimately, we tend to pick colors for links based on colors used in other elements of the website design.
Font sizes
Ideally, you would use font sizes that are relative to the user's default. That would let users with poor vision read your website easily. Because of various glitches and quirks, it's hard to use relative sizes. You can do it, but there are a lot of things you have to be careful of. In a business where attention is the scarcest resource, web designers pretty consistently choose to use pixel font sizes.
If you pick a pixel size for type that works for one user, there will be several others for whom it will be too big or too small for comfortable reading. To some extent, short lines and extra linespacing can make up for tiny text. But not at extremes.
Using pixel sizes for type wouldn't so bad, except that Microsoft also decided not to allow users to change the size of text that was specified in pixels. Web designers prefer to prevent a percentage of your customers from using your website, rather than take the extra effort to design (and maintain) an easily accessible site.
The fundamental question is: why do you need to specify type size. If it is to fit with graphics, forget it. It's guaranteed to break for someone. If it's because you want precise gradations in text sizes -- well maybe. But maybe the thing to do is use a design that doesn't require the same precision.
I wrote a script that would read the pixel size of the browser's default text size, so you could choose relative pixel sizes that will suit the user. But why bother?
The Connection and Spacing between Letters
Browsers basically remove consideration of letter and word spacing. Specifying linespacing works with stylesheets. Adding a little more space between lines is the first thing I want to do, so I'm pleased about this.
Forget hyphenation in browsers, so it's better also to forget justifying text. (Justifying unhyphenated text is likely to lead to very uneven wordspacing, which is ugly -- as a German newsmagazine -- and more difficult to read.
One interesting difference between web and print is that monitors are usually farther away than we would hold a book or magazine. Potentially, this allows for longer lines, as the typical maximum has been thought of as two and a half "eye spans". But there's also a simple maximum number of characters to a readable line of text. You could have slightly longer lines of larger characters, but larger font sizes are not usually what designers want, and our font scaling technology makes larger characters appear blacker.
Regarding paragraphs -- indenting or blank line separation -- I have two opinions. When I'm intently reading long blocks of text, indented paragraphs are certainly fine and traditional. They don't look nearly as nice with very short paragraphs, though.
In fact, the nature of the medium may argue for blank-line paragraph separation: compared with time holding a book in our hands, we spend a much smaller percentage of our time actually reading on the web. First we search for a web page that might have the information we're looking for. Then we scan the page to see if it does. If it does, we may well simply read the one paragraph that has the information, and skip the rest.
For the circumstances in which we are scanning a document, blank line paragraph spacing may be more efficient. Blank lines are more obvious separators. Using lots of indented lists, it works ok to have more blank lines.
What I notice is that short paragraphs and lots of lists and headlines work pretty well for scannability on the web. But this isn't the context in which indented paragraphs are most useful and attractive.
On the other hand, blank lines between paragraphs make for more scrolling. For very short screens, indent paragraphs.
(For that matter, who even knows how to write a paragraph any more? I learned to write "paragraphs" in the third grade. I know for a fact I didn't write that way by the tenth grade. I don't see anybody else writing that way, either.)
Indicating the Structure of the Content
The content of most web pages is far simpler than a book, or even many magazine articles. This means that structure is more likely to be found in the navigation through pages of the site, rather than in individual web pages.
This isn't so different from books, which typically have each chapter start a new, right-hand page, but it highlights that much of what is typography in print becomes interaction design on the web.
Although it's common to have fewer levels of headings in a web page than in long documents, it's convenient to have more summary and heading elements to make it easier to scan the text.
In particular, it should always be instantly obvious that the user arrived at the page he intended to find. Typically, the page heading should match the text of the link to the page. It doesn't necessarily matter how big the heading is, so long as it is clearly the starting point for reading the page. The good news in that regard is that users are well-practiced at ignoring banner ads and navigation bars and even large images -- they're pretty good at finding the start of the text.
Page Layout
Typography in print necessarily chooses the size and shape of the paper, in conjunction with the layouts on the page and the typeface decisions, and the structure of the content.... Of course, if you know that all your web readers have 21-inch monitors (with Javascript turned on) you can pop up a new browser window that's exactly your choice in shape and size. But it might not help someone with a smaller monitor, or a TV or a pda....
And of course "sexy" in print is almost always huge pages with lots of whitespace. You can't expect to get away with that on the web.
I contend that interactivity is a substitute for page size, both in sexiness, and in that you can cram more information onto one screen by having interactive content.
One of the tensions in page design for the web is the desire to cram as many links as possible onto index pages, versus readable line lengths. People will make pages 800 pixels wide to have room for four or more columns of links. But when you get to a page with an actual article on it, there is some physically determined upper limit to reasonable linelengths. Without extra linespacing, lines probably shouldn't by more than 350 or 400 pixels wide.
It's also true that at some point, it's just as well not to distract people from reading. If I finally get to the product I'm hunting for (on a commerce site), you want to minimize the chances of me clicking away. Keep my attention focused on buying.
I say this argues against making hugely wide webpages crammed with links.
I have no desire to make text columns grow to the width of a users browser. The goal of presenting text is for it to be read, and it therefore needs to be readable. The designer's job is to make sure the lines of text are readable.
If I allow line lengths to grow, I have to have enough leading for the longer lines. If I have enough space between lines for very long lines, it means people with more reasonably sized windows will scroll more. I would just as soon reduce the amount of scrolling required.
At big websites these days, pages are run through some kind of templating engine. Typically, there are very few templates for actual content pages. I'd like to think we'll see more variety as things go along. Even with automation, all pages don't have to look the same.
I think we can do more interesting things with page layout, but we have to admit a fundamental fact of the web: one size doesn't fit all. One version of one page -- if it takes advantage of Flash, it won't work on a pda. If it is simple enough to work on a pda, it's missing out on interactive technology that can make the site more useful and appealing.
People using cellphones to get information and spend money will demonstrate this to everyone.
If you can create several versions of a document, you can give each user a version to match their hardware and software. I contend that you can make an advanced user interface that works much better for 40-80% of users. Everybody else gets a different version of the site. (Actually, there might be several other versions of the site, and even the most advanced version might have several different flavors -- to take into account differences between major browsers.)
Finally, a note on background colors. Bright white backgrounds -- even in print -- are harsh and less reading-friendly. White as a background color for the screen is dramatically more harsh. The few people who bother to complain about black text on a white background for screen make a perfectly reasonable case. In the best of all worlds, you could just reduce the brightness of your monitor. Alas, this is not a good option because of some other quirks and flaws. If you really wanted people to use your website comfortably, you would choose a soft background color -- a light gray, yellow, or brown. But please have enough contrast between the background color and the text color!
Copyright © 1998-2008 J. R. Boynton