| If one aspect of design has suffered most in its | | | | forget that users may not have anti-aliasing available |
| transition to the Web, it is the art of typography. For | | | | or switched on. |
| years, Web typography involved little more than | | | | Again, don't assume anything about the people who |
| choosing a typeface and font size. | | | | use your site. I would encourage any designer to at |
| Unstyled Times New Roman was the norm, and the | | | | least check a site's pages with anti-aliasing switched |
| integration of established typographical techniques | | | | off. The discovery you make may come as a shock, |
| and rules was unimagined. | | | | and in the worst case, you may even be moved to |
| But times change. Since the adoption of CSS into | | | | rethink your typographic choices. |
| mainstream Web design, we have entered a new | | | | Basic Principles of Web Typography Having seen the |
| age of Web typography. This facet of design has | | | | technological issues that are going to inform our |
| been opened up to the Web designer in a way that | | | | typographical choices, it's time for a more detailed |
| wasn't possible in the past. We now have the tools | | | | look at the principles of typography as they apply to |
| to return typography to its true role within the | | | | the Web. |
| sphere of design. | | | | Typefaces Choosing a typeface is the starting point |
| However, if we've learnt anything over the last ten | | | | of typographic design, and may even go on to |
| years, it's that the Web is not print. The basic | | | | inform the overall design or feel of a page. |
| principles of typography will cross over to any | | | | Traditionally, Web typography suffers from a lack of |
| format, but it's vital that we allow the features of | | | | options when it comes to typeface choice simply |
| the medium -- in this case, the computer screen or | | | | because fonts can be displayed only if they're |
| monitor on which our type is displayed -- to define | | | | available on users' computers. |
| the rules and techniques that we practice. | | | | The first job of the Web typographer, then, is to |
| So, how can we transfer the established and | | | | distinguish the fonts that are readily available, and to |
| time-tested principles of typography to the online | | | | understand which are best suited to his or her |
| environment? The best place to start is to look at | | | | particular tasks. |
| the differences between print and screen, and to | | | | Very generally speaking, there are two main groups |
| understand how those differences will affect our use | | | | of typefaces that are used on the Web: serif and |
| of typography in Web design. | | | | sans-serif. The difference is easily demonstrated in |
| The Technology The most obvious difference | | | | this image: Serifs are the extra lines or small |
| between the Web and its print ancestor -- a most | | | | decorations added to the ends of the main strokes |
| important point for those wanting to grasp the art of | | | | of the Georgia typeface above. |
| Web typography -- is that your type is displayed on | | | | The theory behind these serifs is that they help the |
| a computer screen or monitor. If you're reading this | | | | letters flow, and lead the eye across the text during |
| tutorial on your computer screen, you're having a | | | | reading. Serif fonts are very popular in print, and |
| very different experience than if you'd printed this | | | | although there is a certain amount of debate |
| text with a modern laser printer. | | | | regarding which family of typeface is most legible on |
| Additive and Subtractive Color Systems When you | | | | the screen, I fall firmly in to the camp that believes |
| look at a computer screen, you see colors and | | | | that sans-serif faces are a more suitable option. |
| shapes that are made up of light. Colors are built up | | | | The variable boldness and fine extra strokes of the |
| by combining red, green, and blue light together in | | | | serif fonts, particularly at smaller sizes of body text, |
| different mixtures and intensities. This is the additive | | | | often appear pixilated and untidy. This is still the case |
| color system. | | | | even with the most modern anti-aliasing techniques. |
| On the other hand, if you printed this page out, and | | | | With anti-aliasing enabled, the serif fonts look blurred |
| are reading it on paper, the colors and shapes you're | | | | (which is exactly what they are) around their curves |
| looking at are comprised of pigments in the ink. | | | | and terminals. |
| These colors are perceived by the absorption and | | | | On the other hand, the straight, low contrast, open |
| reflection of light from their surfaces. This is known | | | | strokes of a sans-serif font, such as Verdana, will |
| as the subtractive color system. | | | | always leave a good impression on-screen. |
| Why is this important? Well, let's consider the most | | | | The Common Web Fonts Most designers are |
| common color combination for text and its | | | | probably familiar with what could be considered the |
| background: black on white. In a subtractive color | | | | common Web fonts. The following CSS rule probably |
| system (i.e. print), this is a perfectly suitable practice. | | | | won't raise too many eyebrows. |
| The contrast of black on white is as stark and clear | | | | body { font-family: verdana, "trebuchet MS", |
| as possible, making for good legibility and comfortable | | | | helvetica, sans-serif; } Here, we have three classic |
| reading. However, with an additive color system (i.e. | | | | fonts that are used all over the Web. However, |
| on screen), the color white is produced by mixing | | | | instead of just copying and pasting this rule, let's look |
| red, green, and blue at full intensity. | | | | at why we have made the decision to use those |
| This is why the black on white combination can be | | | | three fonts, and what characterizes them as suitable |
| overly luminous and too harsh on the eyes to allow | | | | for our purposes. |
| extended reading on screen. There is never more | | | | Verdana is our first choice font here. |
| light radiating from a screen than when it displays | | | | This font was designed for the screen and is the |
| pure white, and this intensity can affect the clarity of | | | | most common sans-serif typeface used on the Web |
| fine detail in typefaces and other intricate patterns. | | | | today. |
| Screen Resolution If you have printed this text with | | | | Note the generous amount of space between each |
| a modern laser printer, you may be enjoying a print | | | | character, as well as the amount of whitespace |
| resolution of up to 2400 dpi (dots per inch). On | | | | within the characters (glyphs) themselves. This is |
| screen, you'll be lucky to have a resolution of 96 dpi. | | | | what makes Verdana so legible on screen, and an |
| The conclusion to this point should be fairly obvious: | | | | excellent choice for a sans-serif on the Web. |
| there's no way you're going to get the same clarity | | | | Trebuchet is another face created for the screen. |
| and detail when displaying text on screen as you can | | | | Designed in 1996 by Vincent Connare, it is probably |
| with print. It is this factor, more than any other, that | | | | the most distinctive of the common Web fonts, and |
| defines the recommendations and principles behind | | | | can convey a great deal of energy and personality. |
| good Web typography. | | | | Certain features of this typeface depart significantly |
| The Unknowns The other key issue we should think | | | | from what we would expect from a classic grotesk |
| about is what I like to call the unknowns. One of the | | | | font, for example, the uppercase M seen below. |
| biggest hurdles designers have to overcome as they | | | | Despite its distinct personality, Trebuchet's strokes |
| move from print to Web is the idea that they don't | | | | are blocky and clear. |
| have real control over their finished product. No | | | | It has a large x-height, helping to increase legibility at |
| matter how much we try to second-guess users' | | | | smaller sizes. |
| browsing habits, hardware configuration, and | | | | Finally, we've gone for Helvetica. |
| software choices, we must live with the fact that | | | | Helvetica, designed in the 1950s and hugely popular |
| we cannot control 100% how people experience our | | | | throughout the second half of the 20th Century, is a |
| Web pages. | | | | classic in its own right. That it transfers so well to |
| In terms of Web typography, this has some pretty | | | | screen is both a testament to its legibility and a |
| sobering consequences. We can spend hours | | | | blessing for Web typographers. |
| choosing the perfect combination of typefaces to | | | | Despite its compact width, Helvetica reads well on |
| complement our design or meet corporate | | | | screen due to its large x-height. It has a consistent |
| requirements, but if the user has stipulated that she | | | | and uniform feel to it, which not only makes it |
| wants all text to be displayed in 18px Comic Sans, | | | | economical with space, but also means it's easy on |
| there is absolutely nothing we can do about it. | | | | the eye. |
| The key is to think of this not as a limitation of the | | | | Finally our CSS rule declares sans-serif as a generic |
| Web, but as a strength. | | | | font family. This ensures that users' systems will at |
| Which other medium gives so much freedom to the | | | | least default to a sans-serif font if they do not have |
| end user? As designers, we merely suggest a design | | | | any of the others we have specified. |
| or layout; the final say is in the hands of the | | | | If you use the rule above, you'll be certain to provide |
| individual, and their requirements and choices trump | | | | good, legible text to the vast majority of your users. |
| ours every time. Don't inhibit this freedom by | | | | However, why not experiment a bit more? What are |
| assuming users' requirements or by attempting to | | | | some of the other good screen fonts out there that |
| force too many of your own preferences onto users. | | | | we can provide to users who have them available? |
| Another unknown that applies particularly to Web | | | | What Characterizes Good Screen Fonts? Having |
| typography is anti-aliasing. Modern operating systems | | | | looked at the properties of the above fonts in a bit |
| such as Windows XP and Mac OS 10 give users the | | | | more detail, you should have a clear idea of the |
| option to display anti-aliased text as standard. This is | | | | features that define a good screen font: Low |
| a good thing, and it makes reading and working on | | | | contrast and simple strokes with a consistent weight |
| your machine much more comfortable and pleasing to | | | | and thickness Generous x-height Generous width and |
| the eye. However, there is a danger when | | | | letter spacing Generous punch width (space within |
| experimenting with typefaces and sizes that we | | | | letters) |