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