Sponsors - Spoono Host

All Fonts Are Not Created Equal
When choosing a typeface that will serve as the main body text for a web page or document, there are but two major styles to choose from: serif and sans-serif. Serif fonts contain small little stems on the edges of letters aptly called serifs. These little stems make text easier to read when reading a long article and also add a certain elegance to type. Do to these reasons, serif fonts are used almost exclusively in newspapers, books, and magazines. For most print work, it is usually better to use serif fonts. Web design is different, however. Computer monitors do not provide the same level of resolution as paper, and sometimes serif fonts end up not looking so hot on-screen (especially at small sizes). A few websites such as New York Times use serif fonts, but these sites are quickly becoming rare.

Today, most websites are choosing to use typography that is clear, simplistic, and modern. In this case, it makes the most sense to use sans-serif (without serif) fonts. These fonts contain no frills or distinguishing extremities. Sans-serif fonts are best for working with documents that contain many numbers, small passages of text, and those meant to be viewed on screen. As you can see, we use sans-serif fonts on Spoono. The following are 14 popular typefaces in use today. The free fonts are probably already installed on your computer, the rest may be purchased from Adobe.

Using Style Sheets for the Web
If you want to have the utmost control over the typography on a web page, you must use style sheets. Style sheets were a godsend when they were first released, allowing web designers to finally define numerous text styles to be used throughout a website. For information about the basics of CSS usage, please see our Intro to CSS tutorial. Here, we'll focus on the CSS attributes that affect text. Let's start with a quick example style.

.mystyle { font: 13px verdana, arial, sans-serif; color: #006600; }

This defines that the class "mystyle" will produce 13 pixel high Verdana text. If for some reason a computer does not have the Verdana font installed, the text will appear in the Arial, and if it does not have Arial, the computer's default sans-serif font will display. Note that the size of the font is defined in pixels as opposed to points (as you would in a word processor). Using pixel increments is more precise and generally better way to go on the web. (The only downside to using pixels is that they don't scale when the text size is increased or decreased in Internet Explorer/Windows). The color attribute is pretty self-explanatory. If you were to then enclose text in a <p class="mystyle"> tag, it would appear like this:

The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.

Leading: The Secret to Stellar Typography
During the days of printing presses with hand-arranged type, small strips of lead used to be inserted between lines. This process coined the term "leading" which refers to the line spacing of text. This sometimes overlooked aspect of typography greatly influences the appearance and readability of text. Using the style created above, a 20 pixel leading can be added like so:

.mystyle2 { font: 13px/20px verdana, arial, sans-serif; color: #006600; }

This will produce the following text:

The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.

Another way to define leading in a style is to use regular numbers to define the amount of spacing between lines. For instance, font: 13px/2; would signify a double spaced 13 pixel font. You can also define it using the long-hand method and use the line-height attribute with the same code you used after the / in the last example. The following are few trendy styles used by some very typographically keen web sites:

Typography for Graphics and Print
When adding typography to an image or in title areas of print documents, you have much more freedom than you do when choosing body text. You can use any type of font including, script, calligraphy, pixel fonts, and grunge fonts. Programs such as Adobe Photoshop, Adobe Indesign, and Quark Xpress provide tools to customize every aspect of text imaginable. In addition to the aspects already discussed, you can modify the letter spacing of text. (Note that this can also be done in some web standards browsers using the letter-spacing and word-spacing css attributes) to make text look like either of the following:

It varies from font to font, but I find title text usually looks better with a little extra spacing between letters. The last important aspect of typography deals only with raster-based images. It is the choice of whether to use aliased or anti-aliased text. Anti-aliasing softens the edges of text with lighter shades of color in order to make the text appear less blocky and create an illusion of higher resolution.

Pixel fonts are the main exception where aliased text looks better. For instance, the following demonstrates both forms of a 500% zoomed in version of the Spoono logo text and two normal-sized views of a small pixel font:

As you can see, pixel fonts such as these are made to be used in aliased mode. They always turn out sharper that way. You just have to make sure you are using a pt setting native to the font so the text does not become distorted. (Nor instance, 04b_09, the Spoono font, is native to 6pt increments.

That's about it. I hope you have found our journey into the realms of typography to helpful.