Expand Your Web Design Font Choices, Part 2

Dave Sawyer McFarland

Return to page 1
4. Choose a base font format. TrueType or OpenType both work, though TrueType is more commonly used.
5. Choose alternate font formats. The @font-face generator, by default, creates EOT and TrueType fonts only. However, if you want to support the iPhone, you should also check the SVG option. For now, WOFF support is limited to just Firefox 3.6 (which still supports TrueType fonts), so don’t check this box.
6. Select options. The @font-face generator offers three options that can decrease file size and improve the look of the fonts:
a. Hinting. Font hinting is a way of adjusting the display of fonts so they look better on screen. Some fonts include font hinting and some don’t. The Mac will ignore font hinting, but it can help Windows display fonts better. In general, leave this option set to “Use Existing Hints.” But if the font doesn’t look good in Windows, re-generate the font and select “Make New Hints.” This may improve the look of the font on Windows.
b. Simplify Outlines. This is only necessary on fonts with lots of details like decorative grunge fonts or “organic” fonts. Selecting this option decreases file size but also removes some of the font data (meaning the font may not look exactly the same.)
c. Remove Kerning. This option removes any kerning data (information about how much space to put between certain letter pairings in a font). This option will also reduce file size.
7. Create a subset. This optional step is another way to reduce your Web fonts’ file size. In Web terms, most fonts are fairly large files: 100K or 200K are common, and some fonts are over a megabyte. Downloading large font files can wear out your visitors’ patience.
When you create a subset, you specify which characters you want to include. For example, if you want a headline font and you never use punctuation, currency symbols, Greek symbols, or math symbols, you can greatly reduce the size of your font files by checking the Subset Fonts box. If your pages are in English or any other language that uses the basic Latin characters, the safest bet is to choose the Basic Latin option (under the Subset to Unicode Tables section, which you can see if you refer back to Figure 7). However, to be precise, you can chose other options to include different sets of characters, such as lowercase, uppercase, numbers and so on.
8. Click the Download Kit button. This downloads the files to your computer. Basically you end up with one of the @font-face kits described above. Follow the directions above to use these files in your Web pages.
The Drawbacks of @font-face
While it’s exciting to be at the beginning of a new Web font revolution, there are some things you should keep in mind when using the @font-face rule:
* Not all fonts look good onscreen. Many fonts were created for print design or the high-resolution of laser printers, not for the sparse DPI of the screen. The font you use for your business cards and letterhead may lose its definition at the coarse resolution of a monitor. In general, fine details in serifs will be lost or become distorted at smaller sizes, and many fonts look fuzzy on the Web at smaller sizes. However, for headlines and larger type, most fonts will look good. The general rule of thumb is to test it at different sizes, in different browsers, and different operating systems.
* Rendering problems between operating systems. In general, Macs display Web fonts better than Windows. A lot depends on the font. For example, fonts with code hints built in fare better on Windows (see 6a above), but when a Windows browser cuts off font descenders, code hinting won’t help. Again, test, test, test.
* Momentarily unstyled text. It takes time to download Web fonts. One unfortunate side effect is that, in some browsers, you’ll see text rendering in the default font before the Web font downloads, and then, pop, the text changes to the new fonts. This only happens the first time the Web fonts are downloaded, but it’s still distracting. Safari doesn’t seem to suffer from this problem as much as Internet Explorer and Firefox.
* Slower download speeds. Fonts can take a while to download. This will make the momentarily unstyled text just mentioned more obvious, and it can slow the overall download speed of your site. Make sure you don’t choose 2MB fonts, or 30 different 80K fonts. Use just a handful of fonts, and, if you really want small file sizes, use Font Squirrel’s @font-face Generator to create a subset of characters.
However, even with these downsides, Web fonts are here, they’re fun, and they greatly expand the typographic options for Web designers.
 

Previous 1 2