CoffeeCup Software Web Typography Handbook 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, we’ve 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 Typography and Renaissance-Era Eroticism ............................................. 16 Introduction........................................................................................... 16 Typeface vs. Font .................................................................................... 17 Types of Type......................................................................................... 17 Serif......................................................................................................................... 18 Sans Serif................................................................................................................. 18 Monotype................................................................................................................ 18 Cursive.................................................................................................................... 19 Fantasy.................................................................................................................... 19 Picture..................................................................................................................... 19 Play it Web-Safe ..................................................................................... 19 Getting Choosy With CSS ......................................................................... 20 Be Responsible ....................................................................................... 21 Knowing About Web-Safe Fonts........................................................... 22 What Are Web-Safe Fonts?........................................................................ 22 Who Should Use Web-Safe Fonts? ............................................................... 22 Why Use Web-Safe Fonts?......................................................................... 22 When Should I Use Web-Safe Fonts?............................................................ 23 When Are Web-Safe Fonts Applicable?......................................................... 23 How Do I Use Web-Safe Fonts, and Which Ones Are Safe? ............................... 23 Serif Web-Safe Fonts................................................................................................ 24 Sans Serif Web-Safe Fonts........................................................................................ 24 Monospace Web-Safe Fonts ..................................................................................... 24 Cursive Web-Safe Fonts........................................................................................... 25 In Some Cases, Can I Use Other Fonts? ........................................................ 25 Provide Downloads For Your Users......................................................................... 25 Use Images.............................................................................................................. 26 Image Replacement Techniques ............................................................................... 27 Use sIFR ................................................................................................................. 28 So There You Have It! .............................................................................. 28 Don’t Be Afraid of Serif Fonts.............................................................. 29 Introduction........................................................................................... 29 Things to Keep in Mind ............................................................................ 20 Benefits of Using Serif Fonts .................................................................................... 31 Things to Watch Out For When Designing With Serif Fonts..................................... 31 Keeping The “Design” in Web Design.......................................................... 32 Simple CSS: Creating More Readable Text .............................................. 33 Introduction........................................................................................... 33 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 aren’t 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 you’ll learn how to customize them with Website Font and use Direct FTP to add them to your Webpage. Convert Fonts For sIFR First, open sIFR Font Maker. You can do this normally or through Website Font