Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Prepare to make ugly Website text a thing of the past with these simple, step-by-step directions on how to spice up your Web typography with the help of CoffeeCup sIFR Font Maker, Website Font, and Direct FTP. As an added bonus, weve included several helpful Web Page Design For Designers (http://www.wpdfd.com) articles covering everything from choosing Web-safe typefaces to using CSS to improve text readability to utilizing minifonts.
165 Courtland St. Suite A, Box 312 Atlanta, GA 30303 (678) 495-3480 www.coffeecup.com
Table of Contents
How To ........................................................................................ 4
Introduction.............................................................................................4 Convert Fonts For sIFR ..............................................................................4 Modify sIFR Formatted Fonts ......................................................................6 Add sIFR to Your Website......................................................................... 11 Become a Web Typography Expert............................................................... 15
165 Courtland St. Suite A, Box 312 Atlanta, GA 30303 (678) 495-3480 www.coffeecup.com
A Sample Page........................................................................................ 33 Choosing Your Fonts ............................................................................... 35 line-height Be Good to Your Visitors!.................................................. 39 Adjusting Letter Spacing ........................................................................... 41 Expanding on This CSS ............................................................................ 42
Everything You Wanted to Know About Web Type But Were Afraid to Ask .... 43
Introduction........................................................................................... 43 Serif......................................................................................................................... 43 Sans Serif................................................................................................................. 43 Monospace (Typewriter Style).................................................................................. 43 Cursive (Scripts and Informal).................................................................................. 43 Fantasy (Far Out or Fanciful Designs) ...................................................................... 43 CSS and Fonts ........................................................................................ 44 Safe Choices .......................................................................................... 44 MSIE Core Fonts .................................................................................... 45 The Best Fonts to Use............................................................................... 46 Serif Fonts ............................................................................................................... 46 Sans Serif Fonts ....................................................................................................... 47 Monospace Fonts .................................................................................................... 48 Cursive Fonts .......................................................................................................... 49 Size Matters........................................................................................... 50 Very Small Fonts..................................................................................... 51
Minifonts ........................................................................................ 52 Specifying Small Type Sizes ................................................................. 53 CoffeeCup Software Web Typography Handbook...................................... 55
Introduction........................................................................................... 55 Trademarks............................................................................................ 55 Warning And Disclaimer........................................................................... 55 Published By .......................................................................................... 55
165 Courtland St. Suite A, Box 312 Atlanta, GA 30303 (678) 495-3480 www.coffeecup.com
How To
A great way to make your Website stand out is to use creative fonts in your headings and accents. In fact, the right font can say almost as much about your content as the text itself. However, Web designers tend to run into trouble when they try to use fonts on their Websites that arent installed on their users computers. When this happens, the text defaults to a Web-safe font, which has unpredictable and often ugly results. With CoffeeCup sIFR Font Maker and Website Font, you can bypass these snafus through the magic of scalable Inman Flash! Replacement (sIFR). Converting your heading and accent text for sIFR means it will display correctly every time. This guide will start by showing you how to convert fonts on your computer for sIFR using CoffeeCup sIFR Font Maker. Then youll learn how to customize them with Website Font and use Direct FTP to add them to your Webpage.
Once sIFR Font Maker is open, click the Browse button next to the Regular Font field and browse your computer for the font you wish to convert. You can repeat this process with the italic and bold versions of the font if youd like to be able to apply these styles when using the font on your Website.
165 Courtland St. Suite A, Box 312 Atlanta, GA 30303 (678) 495-3480 www.coffeecup.com
The next step is to select the glyphs (characters) youd like to include in the conversion. Your options are All, Basic (a set that includes all upper- and lowercase letters, the numbers 0-9, and six commonly used punctuation marks), or User Defined. Once youve configured these settings, the sIFR Font Maker workspace will look like this:
165 Courtland St. Suite A, Box 312 Atlanta, GA 30303 (678) 495-3480 www.coffeecup.com
Youre given two options for saving your converted font. Save as saves your font to a location of your choice, whereas Export to Website Font saves the font within Website Font, which allows you to modify its color, size, and effect set. For this walkthrough, well be using the Export to Website Font option. Once a font has been successfully converted, this dialog box will appear:
After you have exported your font to Website Font, it will appear in the My Fonts section of the Font pane.
This list is not automatically refreshed, so if Website Font is already open, you will have to use the keyboard shortcut Ctrl+R or navigate to Font Menu > Update font list in order to access your new font.
165 Courtland St. Suite A, Box 312 Atlanta, GA 30303 (678) 495-3480 www.coffeecup.com
Once you have successfully imported your font, you can use Website Fonts editing tools to create exciting text effects. First, select the HTML tag youd like to modify. The H1 tag is automatically present in the Tag pane, but you can add more tags to the list by clicking the Add Tag icon beneath the Tag pane or the Add Tag button in the Toolbar, navigating to Tags menu > Add Tag, or using the keyboard shortcut Alt+Shift+A.
These options open the Add a new tag dialog box, which includes a drop-down list containing the HTML tags H1-H9. You also have the option of manually entering any valid HTML tag. For this example, were going to use the H2 tag.
Once youve selected a tag, you can begin editing it. The Font pane contains options for changing the size, color, style, and background color of your text and links. The Hover option allows you to modify how a link will look when a visitor holds their mouse over it. For this example, well change the size to 50, the style to italic, and the color of regular text to a pretty purple.
165 Courtland St. Suite A, Box 312 Atlanta, GA 30303 (678) 495-3480 www.coffeecup.com
Meanwhile, the Effects pane gives you the option to apply more sophisticated styles to your text, including shadow, bevel, and glow effects. You can choose from a number of stylish predefined effects, or experiment with the tools to create a unique design. For this example, were going to use the predefined Smoke Room effect. This adds a drop shadow and bevel effect.
165 Courtland St. Suite A, Box 312 Atlanta, GA 30303 (678) 495-3480 www.coffeecup.com
You can keep an eye on how your changes look using the Preview pane. Just type text in the Enter Text field, and it will appear in the Preview field complete with the changes youve made applied. The example weve been working on looks like this:
If youd like to see how the text looks in a Webpage, either click the Preview button in the Toolbar, use the keyboard shortcut Ctrl+Shift+P, or navigate to My Webpage > Preview all the tags.
The preview option opens a browser window containing your modified fonts.
165 Courtland St. Suite A, Box 312 Atlanta, GA 30303 (678) 495-3480 www.coffeecup.com
When youre satisfied with how your font looks, save it. Then, click the Get Code button on the Toolbar or navigate to My Webpage > Get Code.
A window will appear giving you instructions for uploading your fonts. This involves uploading the websitefontdata folder associated with your font and adding the provided code to the <head> section of every Webpage where you want your fonts to appear. If you are unsure of where your websitefontdata folder is stored, this window provides a link to its location.
165 Courtland St. Suite A, Box 312 Atlanta, GA 30303 (678) 495-3480 www.coffeecup.com
165 Courtland St. Suite A, Box 312 Atlanta, GA 30303 (678) 495-3480 www.coffeecup.com
Once youre connected to your server, you can upload your websitefontdata folder by clicking the Upload button on the Toolbar, dragging the folder from its local location to the My Server pane, using the keyboard shortcut Ctrl+U, or navigating to Actions > Upload to Server.
You can track your uploads using the FTP Activity pane. A red X will appear next to the progress bar when the transfer has been completed. When your folder is uploaded, your workspace should look like this:
The next step is to paste the code from the Get Code window in Website Font into the head section of your Webpage. You can do this within your preferred Web design program, such as CoffeeCup HTML Editor or CoffeeCup Visual Site
165 Courtland St. Suite A, Box 312 Atlanta, GA 30303 (678) 495-3480 www.coffeecup.com
Designer, or you can use the File Editor pane in Direct FTP. To open a file for editing, you can navigate to File menu > Open File (in Editor) or use the My Computer pane to navigate to the desired file, and then drag and drop it into the File Editor pane.
Once you have opened the file you wish to edit, you can simply paste the code provided by Website Font just before the </head> tag.
Once youve finished inserting the code and making any other last-minute changes, save your code. You can do this by navigating to File menu > Save as Local File, using the Save icon and selecting Save Local, or with the keyboard shortcut Ctrl+S.
When youre done saving, simply upload the modified page using any of the uploading options outlined above. You also have the option of editing a Webpage thats already on your server. Just use the My Server pane to find the page you wish to modify, and then drag it to the File Editor pane. Paste the code provided by Website Font just before the
165 Courtland St. Suite A, Box 312 Atlanta, GA 30303 (678) 495-3480 www.coffeecup.com
</head> tag. When youre done editing your code, save the file remotely. You can do this by navigating to File menu > Save to Website, using the Save icon and selecting Save Remote, or with the keyboard shortcut Ctrl+Alt+S,
When you save, a window will appear asking whether you wish to overwrite the existing files. Select Overwrite.
And thats it! Now you can open up your favorite Web browser and check out how your new fonts look!
165 Courtland St. Suite A, Box 312 Atlanta, GA 30303 (678) 495-3480 www.coffeecup.com
165 Courtland St. Suite A, Box 312 Atlanta, GA 30303 (678) 495-3480 www.coffeecup.com
165 Courtland St. Suite A, Box 312 Atlanta, GA 30303 (678) 495-3480 www.coffeecup.com
Replace all the S's in that third line with long S's, and you'll get this:
That's right. And just in case you're wondering, yeah, John Donne knew exactly what he was doing. There's a reason why he's still remembered today he was witty, unafraid of ribaldry, and a literary master beyond compare. Now let's fast-forward to the present day. There's actually a lot Webmasters can learn about the importance of Web typography from this little exercise in Renaissance-era eroticism. The way you present your text can and does have an effect on its meaning even if you aren't using typography that transforms a relatively innocuous word into the F-bomb.
Types of Type
When you're deciding what typeface to use, you should first figure out which type family best fits your textual intentions. Like John Donne, you should know how your text is going to look when rendered in a specific typeface, and what layers of meaning the typeface is going to add to what you're saying.
165 Courtland St. Suite A, Box 312 Atlanta, GA 30303 (678) 495-3480 www.coffeecup.com
Typefaces come in many shapes and sizes, but they can all be categorized into six type families: serif, sans serif, monospace, cursive, fantasy, and picture.
Serif typefaces got their name because they have serifs those little decorations on the end of strokes within each character. Serifs are useful because they provide a horizontal groove that serves as a visual cue for the reader's eyes to lock into. This makes them easier to read, particularly at small sizes, which is why they're so widely used in the text of newspapers. They tend to be proportionally spaced, which means that different characters have different widths. They're great if you're trying to convey an authoritative, professional feel, but you should avoid them if you want your text to seem more personal and friendly. This isn't a hardand-fast rule, though; for more information about using serif types, check out David Rodriguez's fabulous article on the subject, Dont Be Afraid of Serif Fonts. A few serif typefaces you may have seen are Times New Roman and Georgia.
Sans serif typefaces are proportionately spaced and, as you may have guessed, don't have serifs. This means they're harder to read at smaller sizes; however, they work well as headings or large text. They also seem a lot friendlier and more approachable than their serif counterparts. Popular sans serif typefaces include Arial, Helvetica, and Verdana.
Monospace typefaces may or may not contain serifs. What sets them apart is that they aren't proportionately spaced that is, each character takes up the same amount of horizontal space. Monospace isn't the best choice for most text, but if you're looking to set certain text apart, or if you want to create a mechanical or typewriter-esque feel, typefaces like Courier and Lucida Console will work just fine.
165 Courtland St. Suite A, Box 312 Atlanta, GA 30303 (678) 495-3480 www.coffeecup.com
Cursive typefaces such as Comic Sans are curvy and stylistic, and are meant to look like handwriting. As you might guess, these can be kind of cheesy and difficult to read, and as you might not have guessed, they sometimes inspire hatred. This means it's best to limit your use of them to accent text; for instance, if youre going for a really personal look in a heading, a cursive typeface could be just what you're looking for.
Fantasy typefaces are decorative and artistic think Impact which means that, like cursive typefaces, they can be difficult to read. In addition, these typefaces can come with unique limitations, such as a lack of lowercase letters. These typefaces are best used as accents, not your main text.
The picture type family consists of those crazy typefaces that replace characters with symbols and illustrations, like astrological signs, shapes, and the like. I'm sure at some point you've had fun checking out what your name looks like in Wingdings or Zaph Dingbats, but it's best to avoid these typefaces altogether when designing your Website. The reason for this besides the fact that theyre completely nonsensical is that there are no browser defaults for picture typefaces, because they don't correspond to an actual language. An A is an A no matter whether you're using Arial, Comic Sans, or Times New Roman, but if you're using a picture typeface, it could show up as anything from a flower to a pair of scissors to a Kronecker delta.
Play it Web-Safe
So, now that you know the different type families you can choose from, it's time to go wild and pick out all your favorite typefaces for your Website, right? Unfortunately, no. Web browsers are finicky beings, and they usually don't get along very well with creative-looking typefaces. If a browser encounters a typeface that isn't installed on its computer, it will default to another typeface,
165 Courtland St. Suite A, Box 312 Atlanta, GA 30303 (678) 495-3480 www.coffeecup.com
which can seriously mess up your design, let alone the meaning you had in mind for your text. Your best bet is to stick to Web-safe typefaces, which are generally rendered the same in all browsers, for your main body text. This isn't necessarily a bad thing there are enough of these typefaces to ensure that you'll be able to find something to fit the mood of your text and your Website. Here are the most common Web-safe typefaces: Arial Arial Black Courier New Times New Roman Impact Comic Sans MS Georgia Trebuchet MS Verdana Meanwhile, you should play up the power of creative typefaces by exclusively using them as headers and text accents. In order to do this without the browser defaulting to another, safer typeface, you can create an image of text or use a program like CoffeeCup sIFR Font Maker to create Flash text. You can go further with Flash by adding colors and effects to your typefaces using a program like CoffeeCup Website Font. I'd go into more detail about these processes here, but David Rodriguez has already written an excellent article on this topic, Knowing About Web-Safe Fonts.
165 Courtland St. Suite A, Box 312 Atlanta, GA 30303 (678) 495-3480 www.coffeecup.com
its default serif typeface in case it doesnt recognize the other typeface(s). The rule would look like this: font-family: Baskerville, Georgia, serif; You can learn more about this technique in yet another article by the illustrious David Rodriguez, Simple CSS: Creating More Readable Text.
Be Responsible
Webmasters are presented with a ton of freedom when it comes to typography. Novelists, journalists, academics, Renaissance poets, and other purveyors of the written word are pretty much limited to strict typeface conventions, but the Internet plays by a different set of rules. Big text, small text, colorful text, text that glows and explodes and reassembles pretty much anything is possible with the powerful tools available to Web designers. But just because youve got a lot of freedom doesn't mean you should abuse it. The suck pun only appears in The Flea twice John Donne knew that if he overused it, it would lose its power and cleverness. In the same way, you should preserve the power and cleverness of your Web typography by using tasteful text and saving the creative, exciting typefaces for special occasions. Otherwise, your Website could suck. The Flea screenshot taken from http://digitaldonne.tamu.edu/.
165 Courtland St. Suite A, Box 312 Atlanta, GA 30303 (678) 495-3480 www.coffeecup.com
165 Courtland St. Suite A, Box 312 Atlanta, GA 30303 (678) 495-3480 www.coffeecup.com
the text on your site is ugly and someone decides to trudge through it for your content, it will still look displeasing, and you will retain fewer readers. A Website with no readers is a waste. Using Web-safe fonts is just one part of a larger set of design practices that keep your site user friendly. Don't strain a reader's eyes, don't make information difficult to find, and make sure they can progress through your site and content without having to think about it. If at any point someone looks at your site and takes even a millisecond to think, "Ugh, that's some ugly text," you've jarred the experience. Ideally, the entire encounter with your site should be smooth as silk, and using a Web-safe font is a big part of attaining that goal.
165 Courtland St. Suite A, Box 312 Atlanta, GA 30303 (678) 495-3480 www.coffeecup.com
a browser cannot find the first font listed, it looks for the next fonts in order. In this case, Helvetica will be used when Arial is not installed. And in extremely rare cases, some computers may not have Arial or Helvetica installed. In this case, "sans serif" is used. This is a fallback, default font a Web browser will use if it cannot find any of the previously listed fonts. There are four types (or families) of Web-safe fonts: serif, sans serif, cursive, and monospace. Each of these has its own fallback font (like sans serif above). The fallbacks for each family, respectively, are: serif, sans serif, cursive, and monospace. You will find that font rules almost always include one of these fallbacks, and always last. Serif Web-Safe Fonts The art of Web design has many general guidelines that have taken hold as the Web has become more firmly rooted in the Web 2.0 setting. We have other articles that discuss when to use serif and sans serif fonts, so all I will say here is that, in general, serifs have generally been used mainly for headings. Below are the Web-safe fonts that you can use for your serifs: Bookman Old Style Garamond Georgia Palatino Linotype, Book Antiqua Times New Roman, Times Sans Serif Web-Safe Fonts Sans serifs are typically used for the bulk of the content on a Website. Arial, Helvetica Arial Black Impact MS Sans Serif, Geneva, Verdana Trebuchet MS, Helvetica Lucida Sans Unicode, Lucida Grande Tahoma, Geneva Monospace Web-Safe Fonts Monospace fonts are useful when you want to make sure characters all line up with exactly the same width. Displaying code or tabular data without using a table are good uses for monospace fonts.
165 Courtland St. Suite A, Box 312 Atlanta, GA 30303 (678) 495-3480 www.coffeecup.com
Courier New, Courier Lucida Console, Monaco Cursive Web-Safe Fonts Currently, there aren't many Web-safe cursive fonts. There is a cursive fallback, like sans serif, serif, and monospace, but for the most part it is highly unused. There's some debate whether Comic Sans MS is a compatible match with the cursive fallback font. Some think Comic Sans MS belongs with sans serif fonts, and others say it's the closest font to a normal cursive-like feel that you can currently get in a Web-safe font. In any case, cursive and Comic Sans MS are typically avoided. Personally, my opinion is that you should avoid both of these altogether. Comic Sans MS
165 Courtland St. Suite A, Box 312 Atlanta, GA 30303 (678) 495-3480 www.coffeecup.com
downloading and installing a font just to view your site is a great way to lose visitors. Odds are, most of your visitors won't even know where to begin installing the font, anyway. There are also some potential legal issues if you take this route. If you are not the person who created the font, then most likely you do not have the legal rights to distribute it. Because of these major flaws, this method is widely avoided. Use Images When you use an image editor like Photoshop, The GIMP, or even MS Paint, you can create images that use any font you like. Put the image on your page, and it will look the same on a visitor's computer as it does on yours. Below is an image that uses three non-Web-safe fonts that came pre-installed on my Macbook.
Whether you, as this site's visitor, are on a Mac, a Windows PC, in your favorite flavor of Linux, or even surfing on something else like a PDA or iPhone, the fonts above show up properly. This is true even if your PC doesn't have these fonts installed. This is a great way to display any font you like for your logo, advertisements, or some of your headers. However, for a number of reasons, you cannot rely on images for actual content. First, a visitor cannot highlight text with the mouse, which means if they want to copy and paste your text somewhere (say, to send your business name to a friend), they can't do it. Also, text in images cannot be read by screen readers, which some handicapped people use to browse the Web. Any text you have in your images will not be accessible to these people. Plus, some people browse with images turned off or have their images blocked by a third party, like in some corporate offices that use a proxy server. Finally, search engines cannot properly read and catalogue text within images. All in all, any text you use in your images should primarily serve as purposeful decoration. There is an alternative though: using an image replacement technique.
165 Courtland St. Suite A, Box 312 Atlanta, GA 30303 (678) 495-3480 www.coffeecup.com
Image Replacement Techniques There are techniques you can use in your CSS and (X)HTML that will let you use images in place of regular text while maintaining your site's accessibility and search engine friendliness. Notice that the header above that reads "Image Replacement Techniques" is an image. It uses a font called Rockwell (which also came installed on my Macbook), and the font is green rather than the typical black we've been using. This header utilizes an image replacement technique called Single Pixel <img> Replacement. It uses CSS and (X)HTML to display the image, but if someone has CSS turned off, the image will not appear. To solve this problem, there is a hidden span element that will still neatly display the text "Image Replacement Techniques" for this header. As for screen readers and other situations where images might not be accessible, there is a 1-pixel image with alt text that reads "Image Replacement Techniques." This way, we aren't harming accessibility, and screen readers will still pick up the text as we intend it. One of the only disadvantages to using this technique is that it adds some extraneous elements to your (X)HTML. They don't harm anything, but they do add more bulk to your work and to the file size of your document. It also makes it more difficult to follow when reading your site's code. Even still, it's a fantastic way to add rich typography to your site. If you want to try out this image replacement technique on your site, let me provide you with the code you need. First, create two images, a spacer GIF and the header image. (Yes, I know the general feelings about spacer.gif. Lets keep it between us, just this once.) Next, add this code to your CSS file. #header { width: 250px; height: 30px; } #header span { display: none; } Finally, implement the image replacement with this in your (X)HTML: <h3 id="header"> <img src="spacer.gif" alt="Image Replacement Techniques" /> <span>Image Replacement Techniques</span>
165 Courtland St. Suite A, Box 312 Atlanta, GA 30303 (678) 495-3480 www.coffeecup.com
</h3> View it in a browser, and you should see the effect at work. You can find a list of image replacement techniques over at mezzoblue (http://mezzoblue.com), which is where I was introduced to this particular image replacement technique. Use sIFR sIFR (Scalable Inman Flash! Replacement) is perhaps the most popular way of using rich, beautiful fonts on your page. Indeed, you can see an example of it at the top of every WPDFD article. Titles on this Website are written in Interstate, which is not typically a Web-safe font. This used to be a somewhat involved process that could take a long time to do, even for experienced Web designers. However, with the advent of tools like CoffeeCup sIFR Font Maker, the technique is now almost instantaneous. You learned earlier in this PDF how to use CoffeeCup sIFR Font Maker, Website Font, and Direct FTP to create and upload Flash! fonts to your Website.
165 Courtland St. Suite A, Box 312 Atlanta, GA 30303 (678) 495-3480 www.coffeecup.com
In a nutshell, here are some of the key points to remember when using sans serif fonts: Sans serif fonts look good at most sizes. They tend to have a more contemporary or business feel. Most operating systems render them neatly. Serif fonts tend to lose readability at smaller sizes. Serif fonts, when viewed on a Windows computer, may look terrible. Even though Windows has a ClearType ability that smoothes the edges of screen fonts, thus improving the readability of serif types, most computers don't have this option turned on by default. Sans serif fonts, on the other hand, can look good with or without Windows ClearType turned on.
Overall, designing with sans serif fonts for your main content is a good general typography rule for your design. Many popular sites use sans serif fonts for viewing on the Web, and it certainly works well for them. Google is an obvious example, and Microsoft and Yahoo! also follow this convention. Prominent sites in our own field, such as A List Apart and our very own WPDFD, use it to very good effect.
165 Courtland St. Suite A, Box 312 Atlanta, GA 30303 (678) 495-3480 www.coffeecup.com
But. (You knew that was coming, didn't you?) I fired up my RSS reader recently and came across a fairly attractive page with an entry about designing with type characters: http://cameronmoll.com/archives/2008/04/designing_with_type_characters/. This particular page doesn't touch directly on using serifs in Web design, but I found it easy to read. It was also fairly refreshing. Seeing so many sans serif fonts used in only so many ways on the Web isn't exactly tiresome, but it certainly does lend a certain charm to serif fonts when you seem them executed well in Web design. That same page above also has links to a few other pages that use serif fonts well. For your convenience, I'll link them here, too, and include my thoughts: Twisted Intellect (http://twistedintellect.com/) I like this page. It reads well, and it's a very elegant design. The typography here is very nice. The 3rd SEED Conference (http://seedconference.com/) Whereas Twisted Intellect uses serif fonts, it doesn't use them for lots of content. The 3rd SEED Conference does exactly the opposite: The entire design is serif fonts; no images. It's just layout, placement, and typography. This is executed beautifully, and I really like what's been done here.
There are some other sites I've come across while just browsing leisurely that also caught my eye with their use of serifs: Jens Meiert: Why Reset Style Sheets are Bad (http://meiert.com/en/blog/20080419/reset-style-sheets-are-bad/) This is a good-looking, minimalistic blog that uses serif fonts to good effect. And hey, the page even touches on an interesting topic. Fun With Fonts (http://www.funwithfonts.com/G.html) This is not only a cute short story about a robot; it's also a good use of typography. The serif font here accomplishes its job very well.
The examples of good-looking pages above were all delightful to look at and to read. As opposed to sans serif fonts, it seems that serif fonts do take a bit more skill for a Web designer to wield effectively, but the payoffs can be quite impressive.
165 Courtland St. Suite A, Box 312 Atlanta, GA 30303 (678) 495-3480 www.coffeecup.com
Benefits of Using a Serif Font Thanks to the vast majority of Websites using sans serif fonts, a serif font can lend your page a refreshing, personal, warmer, and more visually attractive appeal. Any or all of these effects can be accomplished with the right styling. A page using serif fonts is different and can help you stand out. Serif fonts tend to give a Web designer more to work with. Their shapes can range from rigid and stoic to elegant and understated. I think serif fonts benefit more from color and experimenting with color, though this is just my personal opinion.
Things to Watch Out For When Designing With Serif Fonts This is one of the biggest points against using a serif font, so pay close attention: Serif fonts, especially when italicized, usually look terrible in Windows! The ClearType preference must be turned on for the fonts to look nice, and many Windows users do not know where to turn ClearType on or even what it is. Serif fonts lose readability at smaller font sizes. A medium-to-large font size works best. This Webpage provides an example of how serifs can break down at too small a size and make the eye struggle: http://www.webdesignref.com/examples/textex.htm. Serif fonts tend not to have a business feel about them, so it's probably still best to avoid them when designing a commercial site. They lend themselves better to personal or informative content.
When you really look at the points against serif fonts, though, you can see that generally they break down into two main problems: readability in Windows and text size concerns. Both of these problems aren't as bad as you might think. For one, Internet Explorer 7, while not the best browser around, uses its own ClearType rendering, regardless of whether ClearType is turned on in a user's Windows settings. Most Windows users still use Internet Explorer to browse, so serifs for these users will seamlessly look as you, the designer, intend them. The widespread use of Internet Explorer 7 alone significantly reduces the concern for how serif fonts will look in Windows. Secondly, if a user does use Firefox or another browser in Windows, your concern for how your serifs will look can drop a bit more. It's safe to think that most (or at least some) users who have another browser installed also have enough knowledge of Windows preferences that they'll have ClearType turned on, or at least know how to do so.
165 Courtland St. Suite A, Box 312 Atlanta, GA 30303 (678) 495-3480 www.coffeecup.com
As far as text size is concerned, that's totally up to you. This leads to a third point against serifs that is focused more on you than on technicality: Serifs are a bit tougher to use in Web design than sans serifs. That's not a terribly large issue, though, because it's one that you can get around with your design. In fact, as is the case with the sites I've listed above, it may not even be something to "get around," but instead an intentional tool to work with in your design.
165 Courtland St. Suite A, Box 312 Atlanta, GA 30303 (678) 495-3480 www.coffeecup.com
A Sample Page
Let's begin with a small sample Webpage.
This page uses a small, pretty standard design with some low-key colors to help emphasize the content. This is a good use of design and color if your site fits in the "content is king" category (and most sites do), especially if your content consists of articles or other long blocks of text, like a blog. The thing to notice here is that the text does its job: It communicates a message, and the user can walk away having consumed your content. But the text is the same across the whole page, with the exception of a color change in the small subheading below the header text and the positioning of it. Here's the CSS used in the sample page.
165 Courtland St. Suite A, Box 312 Atlanta, GA 30303 (678) 495-3480 www.coffeecup.com
body { text-align: center; margin: 0; padding: 0; background-color: #363942; color: #382513; } #container { margin: 15px auto; text-align: left; background-color: #D8CAA8; border: 1px solid #4B1E18; padding: 0px; width: 850px; } #header { height: 80px; border-bottom: 1px solid #284907; margin-bottom: 15px; padding: 15px; } #header h1 { position: relative; vertical-align: center; color: #382513; margin-bottom: -10px; } .subheading { color: #284907; } #sidebar { border-left: 1px solid #8FB65F; margin: 0 0 15px 15px; padding: 0px 15px 15px 15px; float: right; width: 175px; } #content { padding: 0 15px; }
165 Courtland St. Suite A, Box 312 Atlanta, GA 30303 (678) 495-3480 www.coffeecup.com
#footer { clear: both; border-top: 1px solid #284907; padding: 15px; margin-top: 15px; }
165 Courtland St. Suite A, Box 312 Atlanta, GA 30303 (678) 495-3480 www.coffeecup.com
The slight change is good, but the entire font is still the same family, and this creates a bad sort of uniformity. We want some distinction going on here, so let's set our headings and subheading apart from the rest of the content. We'll ignore the h1 at the very top for a bit, since we'll want to do something a little different with that in a second. For the subheading and the heading in the content, I'll be using a serif font. Just like above, this next line is probably one of my favorites: font-family: Georgia, "Times New Roman", Times, serif; Again, these are some of the safest fonts you can use in Web design, even if it's just for a starting point and you plan to expand your typography a bit later. Reserve this line for headers and other places where it would look good in small doses; the eye has a tougher time reading serif fonts on a screen than non-serif fonts, so whole blocks of serif text can be jarring. So now our subheading class looks like this: .subheading { color: #284907; font-family: Georgia, "Times New Roman", Times, serif; } And we need to create a new rule for h2 tags in the content section. We do so like this:
165 Courtland St. Suite A, Box 312 Atlanta, GA 30303 (678) 495-3480 www.coffeecup.com
#content h2 { font-family: Georgia, "Times New Roman", Times, serif; } All right, now the header information is more separated from the content, which is good. Take a look here.
Now, what about that h1 header at the top of the page? We're going to make it larger and give it less contrast to its background. This will ensure that users know what site they're on without being distracted by the header. We'll do this with the following code: color: #6B5846; font-size: 48px; So now the full header h1 rule reads: #header h1 { position: relative; vertical-align: center; color: #6B5846; margin-bottom: -10px; font-size: 48px; }
165 Courtland St. Suite A, Box 312 Atlanta, GA 30303 (678) 495-3480 www.coffeecup.com
Now well turn our attention toward the sidebar and footer. The text in these places is the same as the body text in main content area. The sidebar and footer typically play secondary roles, so we'll give them smaller text and a different font family with a single font rule: font: 12px Verdana; Now, our sidebar and footer divs have the following CSS: #footer { clear: both; border-top: 1px solid #284907; padding: 15px; font: 12px Verdana; margin-top: 15px; } #sidebar { border-left: 1px solid #8FB65F; margin: 0 0 15px 15px; padding: 0px 15px 15px 15px; float: right; width: 175px;
165 Courtland St. Suite A, Box 312 Atlanta, GA 30303 (678) 495-3480 www.coffeecup.com
font: 12px Verdana; color: #5A4735; } Right now, the content text feels a bit overwhelming. We'll reduce its size with this: font-size: 15px; And we'll put it in the content rule, so now it reads: #content { padding: 0 15px; font-size: 15px; } And now we have our fifth iteration of the CMRT page.
We've taken some good steps in making sure the different sections of our site each have their own look and feel while still feeling unified. Now, we can take it a step further with the line-height property.
165 Courtland St. Suite A, Box 312 Atlanta, GA 30303 (678) 495-3480 www.coffeecup.com
text more readable. Adding more line height to your text increases the amount of space between each line, and it helps the eye make that jump as it moves down your content. We'll give the content div a line height of 160%, which basically gives it 60% more line height than it normally has, based on font size. This is a decent amount of line height and gives the text some room to breathe. For the sidebar, since the text is smaller, we'll only give it a line height of 140%. So, now our content and sidebar CSS are as follows: #content { padding: 0 15px; font-size: 15px; line-height: 160%; } #sidebar { border-left: 1px solid #8FB65F; margin: 0 0 15px 15px; padding: 0px 15px 15px 15px; float: right; width: 175px; font: 12px Verdana; line-height: 140%; color: #5A4735; } And with this, the text takes on a much more pleasant look:
165 Courtland St. Suite A, Box 312 Atlanta, GA 30303 (678) 495-3480 www.coffeecup.com
The eyes don't have to work as hard to read the text now, so it's easier for your visitors to consume your content.
165 Courtland St. Suite A, Box 312 Atlanta, GA 30303 (678) 495-3480 www.coffeecup.com
165 Courtland St. Suite A, Box 312 Atlanta, GA 30303 (678) 495-3480 www.coffeecup.com
Everything You Wanted to Know About Web Type But Were Afraid to Ask
By Joe Gillespie July 1, 2004 We all get fed up seeing the same old fonts on Webpages, but is there anything we can do about it? It all comes down to the fact that some fonts come preinstalled by Windows and Mac OS by default. Of course, it depends on which version of Windows and Mac OS we are talking about, because font sets change over time, and there are still a lot of legacy systems in use out there. The font base also depends on what browsers and programs are also installed, because Microsoft Internet Explorer and some applications install fonts that won't be there if the reader doesn't have those programs. Yes, there are a lot of ifs and maybes. The fact is that you can't assume that any particular font is available for your Webpages other than a few general styles serif, sans serif, monospace, cursive, and fantasy. Although some of these are pretty obvious, others are not, so I'll give you some examples. Serif Times New Roman, Georgia, Palatino, Trebuchet MS Sans Serif Arial, Helvetica, Verdana, Geneva Monospace (Typewriter Style) Courier New, Lucida Console, Monaco, Andale Mono Cursive (Scripts and Informal) Comic Sans, Brush Script, Zapfino, Marker Felt Fantasy (Far Out or Fanciful Designs) It's really potluck with this one in fact, there might not be one at all!
165 Courtland St. Suite A, Box 312 Atlanta, GA 30303 (678) 495-3480 www.coffeecup.com
Safe Choices
Having established these principles, there is nothing to stop you putting whatever fonts you like at the front of the list. Sure, they won't always be available, but if your Webpages are targeted at a particular audience, the chances of them having the desired font installed are better. To help you decide what you can use, I've compiled some lists of fonts that are installed by default on the various systems. Further down the page, I have links to visual references of all these fonts so that you can see what they look like.
165 Courtland St. Suite A, Box 312 Atlanta, GA 30303 (678) 495-3480 www.coffeecup.com
The following fonts are installed on both Windows XP and Mac OS X Panther by default: Arial Arial Italic Arial Bold Arial Bold Italic Arial Black Comic Sans MS Comic Sans MS Bold Courier New Courier New Italic Courier New Bold Courier New Bold Italic Georgia Georgia Italic Georgia Bold Georgia Bold Italic Times New Roman Times New Roman Italic Times New Roman Bold Times New Roman Bold Italic Trebuchet MS Trebuchet MS Italic Trebuchet MS Bold Trebuchet MS Bold Italic Verdana Verdana Italic Verdana Bold Verdana Bold Italic Webdings
165 Courtland St. Suite A, Box 312 Atlanta, GA 30303 (678) 495-3480 www.coffeecup.com
Courier New (regular, italic, bold, bold italic) Georgia (regular, italic, bold, bold italic) Impact Times New Roman (regular, italic, bold, bold italic) Trebuchet MS (regular, italic, bold, bold italic) Verdana (regular, italic, bold, bold italic) Webdings
Designed by Matthew Carter for Microsoft in 1996, Georgia was created to provide optimal readability onscreen. Since its designed specifically for screen display, Georgia is a better font choice than the ubiquitous Times Roman, which was designed for newspaper use, so: font-family: Georgia, "Times New Roman", Times, serif; Georgia is the first choice. If its not available, Times New Roman will be used. Times is the Mac (previous to OSX) name for Times New Roman, and serif is the catchall for everything else.
165 Courtland St. Suite A, Box 312 Atlanta, GA 30303 (678) 495-3480 www.coffeecup.com
This isnt really considered a screen font, but Hermann Zapf's Palatino (designed in 1948) works remarkably well for a print font. Palatino is available on XP and on Macs that have Mac OS Classic installed, but the name is slightly different. On Windows it's called Palatino Linotype, and on Mac, just Palatino. On older versions of Windows, it is called Book Antiqua. Even though it is a printer font, because of its squarish, pixel-friendly shape, Palatino renders quite well onscreen better than Times so it make a useful alternative serif font: font-family: "Palatino Linotype", Book Antiqua, Palatino, Times New Roman, Times, serif; Sans Serif Fonts
Also designed by Matthew Carter (1994), Verdana always appears larger and slightly more open than other fonts of the same pixel or point size. For sans serif fonts, Verdana is also designed especially for screen display and should be used in preference to Arial or Helvetica: font-family: Verdana, Arial, Helvetica, sans serif; If you are feeling adventurous, you can include a few other options: font-family: "Franklin Gothic", Futura, Verdana, Arial, Helvetica, sans serif;
Matthew Carter again. Tahoma is similar in feel to Verdana, but where Verdana is open in character, Tahoma is more condensed and tight. Think of it as Verdana Condensed, although it's not exactly that. Tahoma shares Verdana's large X height, so it will look bigger than most other fonts of the same font-size. Use it when you want to get more words into a given area without having to go down a size.
165 Courtland St. Suite A, Box 312 Atlanta, GA 30303 (678) 495-3480 www.coffeecup.com
Designer: Vincent Connare (1996) Trebuchet is also designed for screen use. Whereas print fonts are usually originally designed at a fairly large size, typically about six inches high, Trebuchet was first designed as a bitmap at a smaller size. At small sizes, there are fewer opportunities to make a typeface really unique, because you have to forgo the subtleties. Nevertheless, Trebuchet manages to get a lot of character into a very small space. font-family: "Trebuchet MS", "Lucida Sans", Arial, sans serif
Hermann Zapf (1958) designed this one. There are fonts that fall somewhere in between serif and sans serif, but there isn't a specific category for them. Optima and Albertus have very subtle curves that end in vestigial serifs. Even at the relatively large size of this sample, the serifs are just smudgy edges. Such fonts don't work at small sizes. I've included them here purely to demonstrate that a good choice for a printed page can be a bad choice for the Web. font-family: Optima, Albertus, Verdana, Arial, sans serif; Monospace Fonts
There are many variations of this classic typewriter font originally designed for IBM by Howard Kettler in 1955. Occasionally, you will want to use a monospace font for citations or code snippets. With monospace fonts, like those on typewriters, every character is the
165 Courtland St. Suite A, Box 312 Atlanta, GA 30303 (678) 495-3480 www.coffeecup.com
same width, so they line up vertically as well as horizontally. If you want to try your hand at ASCII art, you need the even spacing that monospace fonts provide. Courier New is the most common monospace font but it is a bit light (when antialiased in its regular form, anyway) to use at smaller sizes. Alternatives are Lucida Console (Windows), American Typewriter (OSX), and Monaco (Mac). font-family: "Lucida Console", "American Typewriter", "Courier New", Courier, monospace; Cursive Fonts
Designer: Hermann Zapf (1998). Cursive fonts range from informal handwriting fonts to fancy scripts. The most common one is Comic Sans, which, as the name suggests, is like the handwriting you see in cartoon speech bubbles. Windows is a bit short of classy scripts, but have a look at Palatino Linotype Italic and its bolder counterpart. Theyre not strictly cursive, but give the required result. On Mac OSX, there is a better selection of scripts Apple Chancery, Brush Script, Chalkboard, Cochin Italic, Marker Felt, Papyrus, and the very extravagant Zapfino. The problem with specifying cursive is that the feel of a free handwriting font and that of a classy script are diametrically opposed. If you want to say high class, and the reader sees Comic Sans, you could have problems! Be careful with this one.
165 Courtland St. Suite A, Box 312 Atlanta, GA 30303 (678) 495-3480 www.coffeecup.com
If you want to make sure that surfers see exactly the font you have used to conform with a corporate image for instance you will have to rasterize the type into a GIF or PNG file, or you could make it into a static .SWF (Flash!) setting, provided you don't need a transparent background. When you do use images of fonts, you should make sure that you provide an alt attribute to the image tag so that the words appear in text form, too. This helps with accessibility and searching.
Size Matters
Included with Mac OS X, Papyrus (Chris Costello, 1983) manages to be both informal and classy, but needs to be large.
An Adobe font designed by Carol Twombly, this one really has to be a GIF or PNG. The fonts I've mentioned so far are for body text general reading matter. When you want a bit more punch for a headline or banner ad, you can use what typographers call display or headline fonts. Display faces are intended to be used in small amounts to give strength and contrast to a setting. Setting the body text of a page in Impact or Futura Extra Bold Condensed would be very tiring to the eyes. For really "sock it to 'em" headlines, consider Arial Black, Impact, or Tahoma Bold on Windows and Arial Black, Gill Sans Bold, Helvetica Neue Condensed Black, Optima Extra Black, or Futura Extra Bold Condensed for Mac OSX. As display faces are always used at larger sizes than body text, they can afford to be a bit more elaborate and full of character. They can be very bold or very thin. In fact, it's probably not a good idea to use regular weights. What you want is something that contrasts with the body type, and the further away you get from that normal weight, the better.
165 Courtland St. Suite A, Box 312 Atlanta, GA 30303 (678) 495-3480 www.coffeecup.com
These are two of my own pixel fonts from the MiniFonts (http://www.minifonts.com/index.html) range. For best results at small type sizes, you should use fonts that are designed especially for that purpose. These pixel fonts won't be installed on the user's machine, so you have to make them into small GIF or PNG images, but if they are used sparingly and the images saved at low bit depths, their byte size will be very small. Pixel fonts do not use anti-aliasing, so they remain sharp and crisp at tiny sizes. However, they are not scalable, so they can only be used at their optimal designed size.
165 Courtland St. Suite A, Box 312 Atlanta, GA 30303 (678) 495-3480 www.coffeecup.com
Minifonts
by Joe Gillespie February 1, 2004 This is a set of free sample MiniFonts (http://www.minifonts.com/samples.html) for Mac or Windows featured in the February issue of How Magazine that you can download and try for yourself. They are complete, usable fonts, not disabled in any way.
165 Courtland St. Suite A, Box 312 Atlanta, GA 30303 (678) 495-3480 www.coffeecup.com
165 Courtland St. Suite A, Box 312 Atlanta, GA 30303 (678) 495-3480 www.coffeecup.com
If a designer specifies a small font size like, say, .6 em, and that resolves to less than 9 pixels in a reader's browser, then the type will be totally unreadable. Even changing the resolution or using a magnifying glass won't help. The moral is, if you do prefer to use ems to specify your type sizes, when you want small type and get below about 0.8 ems, switch to pixels to be sure that your type doesn't go below the critical 9px threshold.
165 Courtland St. Suite A, Box 312 Atlanta, GA 30303 (678) 495-3480 www.coffeecup.com
Trademarks
Trademarked names may appear in this handbook. Rather than using a trademark symbol with every occurrence of a trademarked name, we use the names only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. All terms mentioned in this book that are known to be trademarks or service marks have been appropriately capitalized. The Publisher and Author cannot attest to the accuracy of this information. Use of a term in this handbook should not be regarded as affecting the validity of any trademark or service mark.
Published By
CoffeeCup Software, Inc. 165 Courtland St. Suite A, Box 312 Atlanta, GA 30303 Tel: +1 (678) 495-3480 Fax: +1 (678) 495-3481 Web: http://www.coffeecup.com
165 Courtland St. Suite A, Box 312 Atlanta, GA 30303 (678) 495-3480 www.coffeecup.com