Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Voices That Matter

  • Print
  • + Share This
This chapter is from the book

Type 101

Does type design fascinate you, but you really don't know much about it? It is a fascinating subject indeed and a rather complex science. I've selected some excellent resources for you to use to train yourself in type terms and issues.There are a number of interactive, type education-based sites on the Web. Here are two of my favorites.

Figure 2.41Figure 2.41 counterSPACE (http://counterspace.
motivo.com
).

Figure 2.42Figure 2.42 typoGRAPHIC (http://www.rsub.com/typographic).

LEARN MORE ABOUT TYPOGRAPHY

Microsoft Typography
An excellent essay on hinting. Read all about it here!
http://www.microsoft.com/typography/hinting/hinting.htm

The Microsoft Typography Glossary
A disagreeably facetious type glossary, which includes the low-down on all the type jargon you can possibly absorb.
http://www.microsoft.com/typography/glossary/content.htm

Daniel Will-Harris
Choosing and using type and prolific verbiage.
http://www.will-harris.com/use-type.htm

webreview.com
Search the following site for "will-harris."
http://webreview.com/archives.shtml

CounterSPACE
A beautifully executed interactive study in type created in Macromedia Flash.
http://counterspace.motivo.com

typoGRAPHIC
A thorough (beautifully designed) look into the world of typography.
http://www.rsub.com/typographic

Fonts for the Web

There are two distinct ways to publish text to the Web: with ASCII text (created by coding HTML or CSS) or with pictures of text in the form of web graphics such as GIF, JPEG, or SWF (Flash).

Below is an example of two pages that use HTML-generated text. The one to the left has specified Verdana as the font, while the one to the right shows the default typeface of the Web: Times Roman. In order for visitors to see this content, they must have these fonts pre-installed on their systems. That's why your choices for HTML-generated fonts are more limited than your choices for type that you publish as a graphic.

Figure 2.43Figure 2.43 This site has specified Verdana as the font.

Figure 2.44Figure 2.44 This example uses the pre-installed default typeface Times Roman.

When you publish HTML-generated text, it's necessary that the visitors to your page have pre-installed whatever font you specified. This limits the kinds of typefaces that you can use. You will learn how to specify different fonts for HTML-generated text in Chapter 20, "HTML Type."

Figure 2.45Figure 2.45 Although the list might change with newer operating systems, this is a valuable list of fonts that come pre-installed on Windows and Macintosh machines. When working with the FONT tag and CSS (which you'll learn how to do in Chapters 20 and 23), this is a good list to refer to when choosing fonts for HTML-generated text delivery.

Figure 2.46Figure 2.46 This screen shot from http://www.alistapart.com combines HTML-generated text (using CSS for leading, indents, and position, which you'll learn about in Chapter 23, "Cascading Style Sheets"). The text that is set as a graphic is circled. It's possible not only to use different fonts than what you can with HTML-generated delivery, but you can add effects to the type, such as outline colors, glows, and extra graphic elements.

PROS & CONS OF HTML-GENERATED & IMAGES OF TEXT

If you care about creating beautiful typography, you might think to yourself that you're never going to use HTML-generated text because it is so restrictive. CSS now offers a lot of flexibility and control, so this is no longer true. This is not to suggest that you favor one text delivery method over another—it's just to educate you regarding the trade-offs of your choices. Here are some important things to consider:

  • CSS-generated type is searchable, accessible, can be translated to other languages, and is small in file size.

  • Pictures of text afford more design freedom. You can use any font and style and the end user does not have to own the font to view the picture.

Legibility Issues

The issue of color readability was already addressed, but typography on the Web (and off) has many legibility issues of its own. One of these issues is whether to use serif or sans-serif type. In the olden days of type education, it was widely believed that serif typefaces were easier to read as body text and sans-serif fonts were easier to read as headlines.

Figure 2.47Figure 2.47 Serif ASCII text on the Web.

Figure 2.48Figure 2.48 Sans-serif ASCII text on the Web.

With ASCII text, sans-serif typefaces are much easier to read than serif. This type could be created using the FONT FACE element in HTML (see Chapter 20, "HTML Type") or with style sheets (see Chapter 23, "Cascading Style Sheets").

Font Differences Across Platforms

You would think that an ASCII typeface would look the same between Mac and Windows platforms. Sadly, this is not the case. Have you ever gone to a site that was beautifully designed, but you couldn't read the text? It could be a cross-platform problem with the font that was chosen for the page.

Figure 2.49Figure 2.49 At Colleges.com the HTML was written to contain two ASCII fonts: Verdana (left) and Arial (right). While Verdana reads beautifully on Mac or Windows, Arial does not. If you think you'll have a Macintosh audience, don't use Arial.

Figure 2.50Figure 2.50 The same page (http://www.colleges.com) shown on a Windows machine— Verdana and Arial both look fine.

Figure 2.51Figure 2.51 The default font for the Web: Times Roman. My opinion? There are better fonts to use for readability. How-ever, this font choice (or lack of choice, in this example) works between the platforms.

Figure 2.52Figure 2.52 Georgia works on either platform, although it's still not as legible as a sans-serif font in my opinion. It is better than the default serif font, however, because it's slightly more legible.

Figure 2.53Figure 2.53 Helvetica looks lousy on the Mac, even at a big size. It's very hard to read... Don't you agree? Helvetica doesn't render well on a Mac at any size. Notice how the letters touch each other, making readability difficult?

Figure 2.54Figure 2.54 Arial works fine on a Mac as long as it isn't published at a size smaller than 12 points. Once it gets smaller, it's impossible to read on a Mac.

Figure 2.55Figure 2.55 Arial always looks great on Windows.

Figure 2.56Figure 2.56 Notice at the –3 size how difficult the default font, Times Roman, is to read?

Figure 2.57Figure 2.57 At the smallest size, the serifs in Georgia make it hard to read.

Figure 2.58Figure 2.58 Even at the smallest size, you can still read the sans-serif font. I do have a strong bias toward Verdana as the best cross-platform font for the Web.

  • + Share This
  • 🔖 Save To Your Account