| The art and science of typography offers different challenges in different media: Type choices for a brochure will differ from those for a highway billboard or a television commercial. And the web presents its own set of challenges. 6 challenges of web typography: Font availability. On the Web, you must use fonts that your users have installed on their computers. Otherwise, your site won't look the way you designed it. The problem is: Most users have only the limited choice of fonts that came with their computer. Screen legibility. Most digital typefaces were designed to print well on a page; not much attention was paid to on-screen legibility. As a result, most fonts are hard to read online, especially at small point sizes. Cross-platform inconsistencies. Different fonts come installed on the Mac and the PC, and fonts with the same name may display differently on the two platforms, making precision typography difficult. Lack of precise positioning. HTML is a ham-handed tool for type placement. This has improved greatly with the advent of stylesheets, but advanced effects like overlapping letters or text wrapped around an image can be maddeningly difficult, if they're possible at all. Larger type size. Type must be relatively large on screen to be readable. This eats into the available real estate and restricts design options. The failure of classic typefaces. Typefaces that appear beautifully on the printed page often break down on the screen, appearing broken and fuzzy.
So typography on the web is a severely constrained art. The fonts used on most web sites can be counted on one hand, and many of the most popular sites employ typographic "techniques" that make designers cringe. No, precision typesetting isn't the web's strength. The web offers cross-platform distribution, flexible displays, and user control all of which run quite counter to the goals of typographic artistry. So what's evolved is an aesthetic of constraint one that highlights usability and readability. choosing a typeface In the early days of HTML, type choices were massively restricted...in that you didn't have any choice at all. Users controlled the font displayed on their browsers, but most users didn't even know they controlled them. As a result, most people saw web pages written in the default font, Times New Roman, which is a sub-optimal choice, at best. Thankfully, times have changed, and HTML now allows the designer to specify the font used for any particular page or word or headline, if she so desires. But the choices are still restricted to those typefaces your users have installed on their computers. And since most users stick with the small number of system fonts that come bundled with their computers, and since different fonts come with the Mac and the PC, and since very few of those fonts are appropriate for on-screen reading, your choices are limited indeed. serif vs. sans-serif fonts |  | Serif fonts like Garamond (left), have small strokes called serifs embellishing the end of the character's major lines. | |  | Sans-serif fonts like Helvetica (left), have blunt edges, without serifs. Just so you know: Sans means "without" in French. |
|
on-screen legibility In any medium, from TV to billboards, the legibility of text (or the ease with which it can be read) is affected by many factors: the size, weight, and color of the type; the background color; the spacing between letters, words, and lines; the number of words per line; the distance of the reading material from the eye. But computer monitors introduce a few quandaries all their own: Typeface. Not many typefaces are available for web use. Of those, it's best to choose one that was designed to be read on the screen. Type size. At small point-sizes, characters (especially bold and italic) lose their shape, becoming blurry blobs that are difficult to read. So type generally needs to be larger on screen than on paper. Type color. On the screen (as on paper), you need sufficient contrast between the text and background colors for text to be readable, and dark text over a light background is preferred. Line Length. The rule of thumb in print and on screen is that a line of text should be roughly the length of two alphabets (52 characters). Too short and readers grow weary; too long, and they can't find the next line.
recommendations for on-screen legibility Typeface | Verdana, followed by Arial, Times, and Georgia. | Type color | Dark text against a light background, providing sufficient contrast. | Type size | 12-point for body text. Though older people prefer text even larger (around 14-point). | Line length | Roughly two alphabets (52 characters). |
|
To find a font that's both available to most users and acceptably readable, your options are generally limited to Verdana, Arial, Helvetica, Times, Times New Roman, and maybe Georgia. The best choice is Verdana (see Verdana: the web's first font, p. 152), which was designed from the ground-up to be read on screen. Traditional typefaces, such as Helvetica and Times, were designed for the printed page, with the screen fonts coming as an afterthought. As a result, Verdana is more readable on screen than any other font (thought usability tests show Arial and Times are also quite readable). And while there are more and more typefaces designed for the screen these days, Verdana is the most ubiquitous. Many designers who migrated to the web from print (which is to say most designers) have a hard time letting go of their favorite typefaces. And you can't blame them: Centuries of typographic design inform the elegance of  , the bold simplicity of  , the downright goofiness of, say,  . Although you can't take full advantage of the bountiful, beautiful fonts available in print, you need not abandon them entirely. There are two options for integrating non-standard typefaces: using an image of the type or downloading a font with the page. 2 ways to use non-standard fonts: Using an image of the words Downloading a font with the page
using an image of the words The simplest way to integrate non-standard fonts into your web page is to make an image of the word (displayed in the font of your choice) and integrate that image into the web page. Although this is appropriate in some cases logos, of course, and also some display copy it raises several serious problems: Problems with using images of words: Images of words aren't searchable and can't be cut-and-pasted. Images of words download much slower than the words themselves. Images of words can't be read by the screen-readers on which blind users depend. (This is particularly problematic if the image-words are part of the navigation.) The words can't be read if the image doesn't download or display.
So this approach, while tempting, should be used in moderation. My personal guideline is that nothing longer than a sentence should be placed in an image. downloading fonts This is the holy grail of web typography: the ability to download a font, along with a web page, so the page design can make use of the font. To make this dream a reality, several different techniques have been proposed over the years, but none have yet caught on. The basic problem is download time: It just takes too long to transfer and install the font. At some point, however, it will be possible most likely with stylesheets. Verdana: the web's first font Most typefaces are a holdover from the days when print ruled the roost. They looked lovely on paper, but the screen fonts were mere placeholders: fuzzy shadows indicating how the text might look, once it's printed. With the advent of the web, people are reading more and more from the screen. We need fonts that are legible, not just presentable, online. Enter Verdana! Verdana was the first typeface designed specifically for screen display. Microsoft commissioned typographer Matthew Carter to design the system font for Windows 95. So he designed Verdana from the ground up to be readable on screen, especially at small point sizes. Verdana was the first typeface designed specifically for screen display.
To accomplish this, Carter reversed the usual approach to type design. Normally, a designer draws an outline of the letters, then creates a bitmap that matches the shape. (The bitmap determines the way pixels are used to represent the letter on screen.) But Carter began with the pixels creating a bitmap that would allow exceptional legibility even in bold and italic at small point sizes (where limited pixels are available to represent the shape). He then drew an elegant outline to define the letters. Verdana's legibility comes from its bitmap-derived shape, and also its loose spacing and very bold bold. Care was taken to distinguish between similar characters like j, i, l, I and 1, and to ensure that letter combinations, such as fl, don't touch. It's lovely, legible, and actually pleasurable to read on screen. |
Buy these books!  | Typographic Design: Form and Communication Rob Carter, Ben Day, and Philip Meggs (Wiley, $55.00) Designing with Type James Craig (Watson-Guptill, $39.99) |
Typography on the web Fonts.com http://www.fonts.com Counterspace http://counterspace.motivo.com ABC Typography http://abc.planet-typography.com Adobe Type Library http://www.adobe.com/type/ MyFonts.com http://www.myfonts.com
formatting text With the advent of stylesheets, it's become possible to exert control over text on a web page in ways that were impossible just a few years ago. Stylesheets let you specify the precise size of the text (in any number of ways: pixels, point size, you name it) as well as the leading the vertical space between lines. This is a giant leap for web design, but an admittedly small step for typography. Type treatment on the web is still quite primitive. Relatively simple type treatments such as overlapping text or wrapping text around an image can only be achieved with difficulty. And the control that typographers crave setting precise line length and page depth just isn't possible. In truth, it's difficult to control anything with absolute precision online. The web just doesn't work that way. Sites must display on a wide range of platforms, browsers, screen resolutions, and browser window sizes. So the page design must adapt to fill the space available. Typographers hate this. Many designers push back against it, producing contorted web pages with restricted widths and forced line breaks that are supposed to display exactly the same way in every monitor. But alas, these overly controlled designs frequently fail. There's almost no way to reliably ensure that your text will lay out exactly the way you hoped. And the sooner you come to terms with that, the better your web designs will be. What you can control: Font size. With stylesheets, you can set the size of your text, based on point size, pixels, and other measurements. However, you should provide users a way to adjust it. Font color. Using stylesheets, the font tag, or even just the body-text color tag, you can dictate the color of text with reasonable accuracy. Link color. The color of links and followed-links can also be customized with stylesheets or the body-text tag. Otherwise the browser will default to the standard blue underlined links. Font weight. You can reliably change the weight of a given word, using tags for bold or italic text. Leading. Stylesheets allow you to set the leading, or vertical space, between lines.
is it a font or a typeface? A typeface is a design for a set of characters, usually including letters, numbers, and punctuation. (Helvetica is a typeface.) A font is a printable and displayable version of a particular typeface in a specific weight and size. (10-point Helvetica Bold is a font.) In the digital age, however, the two are used interchangeably. I wouldn't sweat the difference, unless you're in very persnickety company. |
|
