- Color Aesthetics
- Choosing Color Themes
- Applying Color Relationships to Web Design
- Color Gallery
- Typography Aesthetics
- Type 101
- Verdana & Georgia
- Font Size Differences Between Macs & PCs
- Fonts for Delivery as Web Graphics
- Basic Styles of Typefaces
- What Is a Font Family?
- Aliasing or Anti-Aliasing
- Body Copy
- Using Fireworks for Type Design
- HTML for Placing Text Graphics
- What About Flash?
- Aesthetics of Layout
- The Aesthetics of Animation
This chapter is from the book
This chapter is from the book
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.41 counterSPACE
(http://counterspace.
motivo.com).
)
Figure 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.43 This site has specified Verdana as the
font.
)
Figure 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.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.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.
){kind=small}
Figure 2.47 Serif ASCII text on the Web.
){kind=small}
Figure 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.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.50 The same page
(http://www.colleges.com)
shown on a Windows machine— Verdana and Arial both look fine.
){kind=small}
Figure 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.
){kind=small}
Figure 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.
){kind=small}
Figure 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.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.55 Arial always looks great on Windows.
)
Figure 2.56 Notice at the –3 size how difficult the default
font, Times Roman, is to read?
)
Figure 2.57 At the smallest size, the serifs in Georgia make it hard
to read.
)
Figure 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.