- R. Bringhurst
Your typeface sets the tone or personality of your text. Type is a part of your design that the user has no choice but to interact with directly, so its power should be taken seriously. If you were designing a site for a large bank or mortgage company, it's unlikely that you would choose to set the body text in Comic Sans. Comic Sans is a fun, cartoony, frivolous typeface that would not at all be appropriate for the corporate image required.This is a rather over-the-top example, but the principle is clear: let the nature of your content and the goals of your design lead you in your choice of typeface. This means reading the text and having an understanding of what it conveys, then choosing a typeface that best illustrates and clarifies the key concepts.
The best way to 'get into type' is to immerse yourself in what's available and understand how people are using those fonts. Visit some of the good type foundries, in particular Linotype and, for the more adventurous, Letterhead Fonts. Another resource I find invaluable in the early stages of typographic work is the fantastic tool, Typetester. Typetester allows you to easily style text with any number of CSS properties and compare them to one another on-screen. It even builds the CSS rule for you when you find a combination of styles that you like! This tool is well worth spending some time with, particularly if you're new to many of the detailed text properties in CSS. This brings us to look a little more closely at those detailed CSS properties. With so many capabilities now available to the Web designer through CSS, how should we be using these properties to deliver the best possible experience to our users?
Size
Type size is one of the easiest factors to control on-screen, and as such it is often not given the importance that it deserves in the field of Web typography. Size is an important device for giving your content a hierarchy, and the relative sizes of your headings, body text, and footers can have a big influence on the overall feel of a page. Type size is also very closely linked to other characteristics of your page, such as column width, line-height, and so on.As early as the sixteenth century, typographers had begun to use a common scale for type size, and there is no reason not to replicate this approach on the Web, particularly if you're looking for a
traditional and highly legible result. Like a musical scale, the series below has a natural elegance to it, and is considered by typographers to be a standard for relative type sizes.
The traditional type size series developed in the sixteenth century
A great example of a site that uses this type size scale on the Web is Jaredigital.com[http://www.jaredigital.com] It's clear that traditional and stylish typography was required for this site, and a little discreet poking around in the CSS finds the rules that make it all possible:
h3 {
font-size:16px;
}
h4 {
font-size:12px;
}
p {
font-size:11px;
}
A good rule of thumb is that the closer to one another are the font sizes of the various levels, the more elegant the overall impression will be.If you're after a disjointed or modern feel, try using font sizes that are further apart on the scale. A good example of this can be seen at Coudal.com. The large headers used here are fairly unusual, and in my opinion, give a much more modern, less traditional feel to the design. Note, however, that the headings are displayed in a much lighter color than the main body text. Another good rule of thumb states that, if you want to use larger sizes for headings, use a lighter color to keep the overall feel of the page balanced. It's also worth pointing out those headings as a particularly successful use of a serif font (in this case, Times) on the screen.
Emphasis
Emphasizing text is a relatively simple way to bring your words to life on the Web. There is a great fashion at the moment -- particularly in online promotional or advertising text -- to scatter bold font weights liberally around the page. Although traditional typographic convention would warn against the over-use of related faces such as bold or italics, on the Web, this technique can be used to encourage the eye through the text when there are so many other distractions on screen. There are various ways we can introduce emphasis into text: Bold: On the Web, the most common and effective method is the use of a bold face from the current font family. Of course, as with all these techniques, ensure that you do not over-use the bold face. The key is to use bold faces sparingly, or not at all. Italics: Italic text can suffer on low-resolution monitors because of the slanted and more curved shapes of italicized letters. These are likely to look too pixilated when aliased, and too blurred when anti-aliased, and will spoil legibility when used in lengthy body text. However, this should not stop you from using an italic face when convention approves it, for example, quoting foreign words and phrases, or listing books and periodical titles. Underlining: It's commonly understood that underlining text on the Web is not a good idea. Web conventions tell us that any underlined text is a link, and can be clicked on. It's a pretty fair bet that if you go around underlining text that's not clickable, you're going to confuse users.
Color: Using color for emphasis is also a rather tricky business. Like underlined words, colored words could be mistaken for a link within body text. In the past it was common to use a distinct background color to give emphasis to a passage of text, but even this has now become a convention for identifying links. Furthermore, there are the accessibility issues assocaited with using color to display important meaning on the Web, which further add to the conclusion that using color for emphasis is not an ideal method. Capital Letters: Never set passages of text in full or small caps. Not only is doing this considered rather rude and inelegant, but typographically, it is a very poor choice. CONSIDER THE LEGIBILITY OF THIS SENTENCE COMPARED TO THE ONES THAT PRECEDE AND FOLLOW IT. There is no doubt that, without the distinct shape of the words created by the lower case letters, readability is severely inhibited. The example below highlights this clearly. There is no doubt that it is easier to make out the words in the upper half of the sentence due to the more obvious shape of the words.
Note how the upper half of the sentence is easier to read than he lower
However, nice touches can be achieved using full or small caps in the right situation. Try using small caps for abbreviations and acronyms within text, and of course, full caps for acronyms that stand for personal names or place names. This is a detail that is rarely considered on the Web, but that should be simple to achieve with site-wide CSS files.
Line Spacing
A crucial detail when setting type on the Web is the issue of line spacing, or leading. The vertical distance between lines of body text can make a huge difference to the legibility and overall style of your message. A comparison of the two blocks of text below should demonstrate the point clearly. A general rule of thumb when selecting a line-height value is that the longer the line length (measure) of your text, the more leading is required for legibility.
Notice the clarity that the increased line height brings to the text
The default line-height for most browsers is around 1.2 (where 1 is where the tops of one row of characters would touch the base of the row above). This is not sufficient for text on screen; I'd recommend increasing your line-height value to between 1.4 and 1.6.
Letter Spacing and Kerning
In my opinion, letter spacing (or tracking) as controlled by the letter-spacing property in CSS should never be used for body text. It's not very cross-browser friendly, and what you may see in Firefox may be drastically different in Internet Explorer or Safari. Furthermore, it seems wrong to mess about with the tracking that each font has built into it. The type designer carefully calculates these spaces, and most of the time, they're going to provide good results without any extra tampering.However, letter spacing can be a very effective tool in short headings.
A classic example of this can be seen at Zeldman.com. The large letter spacing of the titles in the right hand column allows for a bolder, uppercase typeface, but ensures that the overall balance of the page is consistent.
Letter spacing of titles at Zeldman.com
Kerning refers to improving the appearance of a word by adjusting spacing between certain pairs of letters. On the Web, it's not realistic to attempt this with body text. However, if you're creating headers or logos in graphics software, a little kerning can make a dramatic difference to the overall result. Look at the two examples below. The first shows the default kerning of the Verdana font; the second has been tweaked in Fireworks with the goal of creating a more balanced and well-proportioned word shape.
Word Spacing
As with letter spacing, word spacing should be considered carefully before it's applied to the screen. I am of the belief that if you think
your text needs spacing and tracking manually, then you have probably chosen the wrong typeface for the job. As with all the text properties that CSS allows us to control, consistency is the key. Keep readers focused on the text, and make it easy for their eyes to flow through
the words. If you're breaking up the letters and words, you'll only serve to distract them, and disrupt the flow of the text.
Alignment
Margins can have a surprisingly large influence on the look and feel of your pages. They help keep your text apart from other elements of your site, and from the edges of the browser window. Larger margins produce an open, free feeling, while smaller, tighter margins give a constricted and more intimate aesthetic. Assuming your content is in a language that flows left-to-right (ltr), you should nearly always left-align your text on the Web. Right-aligning should only be used for very specific purposes, and certainly not for long passages of text. The ragged left edge of right-aligned text makes it very difficult for the eye to move from one line to the next and reduces legibility considerably. Text that is set flush with both left and right margins is known as justified text. Justification is extremely popular in books and newspapers, and gives a uniform and controlled feel to a page. Justification on the Web would be far more popular if it weren't for the fact that no browser or operating system has a hyphenation dictionary built in. This means that the only way the browser has to justify text is to space out and/or squash up words to fit into the specific line length. This is fine to an extent, but there comes a point -- particularly with shorter line lengths -- when a bit more flexibility is required. The designer Todd Dominey provides an option on his site to justify all text, and the two screen shots below shows the good and bad results of doing that.
Good justified text at Whatdoiknow.org
Bad justified text at Whatdoiknow.org
The text in the wider column looks great, and the browser has dealt well with the justification. However, in the smaller left-hand column you can see that the word spacing is very mixed and inconsistent, and this drastically affects the legibility of the text.
Extending Web Typography
While a lot can be achieved with CSS in the ways described above, designers must still endure a number of limitations when it comes to Web typography. We are still stuck with a limited number of good screen fonts, but even if more were available, we'd still be relying on users having them available on their machines. With this system, designers are never going to have the true control of type that they desire. It is frustrating that in the ten years since designers came to the Web, this problem has not been solved.
Replacing Text
One way in which designers work around the limitations today is to use image and Flash text replacement techniques to display headers or navigation. This kind of text is often an integral part of a site's design or brand, and designers are keen to get as much control over these elements as possible. The rules for using images or Flash to replace text are no different from those we use to choose body text typefaces. Legibility should always be your prime concern, followed by suitability for the task at hand. However, you do have a little more flexibility, mainly because you are more likely to be working with large font sizes and thus many legibility issues are already solved. This situation may then be a suitable case for experimentation, and for basing a typeface choice solely on the character, or personality that you're trying to convey in your design. One Flash replacement method that has caused a lot of buzz over the last year or so is sIFR (pronounced siffer). SIFR is touted as an accessible, scalable method of embedding custom typefaces in Web pages, and as such has generated a great deal of excitement among designers.
Tidak ada komentar:
Posting Komentar