Typography on the Web, part 1

Definition of Typography

Typography is defined as 'the design, or selection of letter forms to be organized into words and sentences, to be disposed in blocks of type as printing upon a page'. The two primary functions of typography are the presentation of text in a manner that is not only easy to read but also visually engaging.

The latter function of typography may be expressed in two ways: through color and the atmosphere or feel of the printed material. The font options, resources, skills and textual works that are associated with publishing, including "online publishing", ie the creation of web pages.

You use fonts all day every day, and you might be surprised to learn some pretty interesting facts about them. In this article I'll go over some basics, from defining some font terms to how to use them on web pages.

The word "font" is one of the most common search terms on search engines. That's not surprising, since fonts have become an indispensable part of our lives. They're with us when we're creating a Web site, using a spreadsheet, or sending email.

In this article, I'll give you some basic font facts.

In the next two articles, I'll advise you how to use various types of fonts on webpages and what not to do.

If there is something I'm missing, or you are not sure about in these articles, let me know about it in our forum and I'll try to answer your questions.

What is a font?

Traditionally, the terms "typeface" and "font" were used separately, and were not synonymous.

It used to be that typeface was made out of metal, and each font had to be cut from a piece of metal separately. The "typeface" was the designed look of the characters, while the "font" was one typeface in one size, one style, and one weight (Arial Bold 10 point is one font and Arial Bold Italic 10 point is another font).

Most people today use the word font when they really mean typeface (this is one of my pet peeves, so don't do it!)

What is a font family?

A collection of all the styles and sizes of a set of fonts all with the same typeface, but with different sizes, weights (such as bold), and slants (such as italic). "Arial" is a font family.

There are also generic terms for a font family.
These are Serif, SanSerif, Cursive, and Symbol.

• Serif - has a small decorative embellishment added to the design that causes the letters to flow from one letter or word to the next making it easier to read. The most common typeface known as Serif is Times or Times Roman.
• SansSerif - literally meaning "without serif". The most common typeface is Helvetica or Arial.
• Cursive - typeface designed to look similar to handwritten words. The individual letters may each have an embellishment added that connects each letter together. An example would be Zapf Chancery.
• Symbol - non-alphabetical characters. Entire character sets made up of mini-illustrations. The most common example would be Wingdings, Webdings, or Dingbats.

Note: there are symbol characters included in almost all typeface character sets such as the copyright symbol.

What is font style?

Italic, narrow, outline, small-caps, oblique, etc are used to denote style. The normal style of a typeface is called regular, book, or roman.

Some other terms that come from the publishing world.

In addition to lines, words, and characters on a page, there is space. And those spaces have names.

"Kerning" adjusts the spaces between letters so that the spacing appears to be visually consistent.

Certain letter combinations such as Ta have too much space between them. With kerning, you can adjust the spacing to be closer together (or farther apart) making the letters within the word flow together more smoothly.

"Leading" (rhymes with "bedding"), is also called "line spacing". Leading originally referred to bits of lead that typesetters placed between lines of type in order to space them out. When you're reading something, the spaces between the line you're reading and the lines above and below that line are supposed to guide your eyes from one line to the next. If that space isn't considered carefully, it's hard to keep track of where you are. That's where leading comes in. You can adjust one sentence at a time but it's more common to adjust the leading of an entire paragraph so that it's uniform.

You can adjust the leading and kerning to make your document or whatever you are working on look any way you want and perhaps more importantly, flow well.

Do you know which typefaces you already have installed on your computer?

The easiest way is to open the Fonts folder. You might be surprised to see the actual number of typefaces you have installed on your system. When you install most new graphic or publishing type programs (e.g. MS Word, Corel Draw, Photoshop) that program usually comes with its own set of typefaces that are automatically installed when you install the software.

What if you want more?

Type the word "font" into any Internet search engine and you will find thousands of sites willing to sell (or sometimes even give) you their fonts.

Know that you know what a "Font" is and what you have installed on your computer, your ready to set the world afire with your fantastic looking web sites and all these typefaces you have, right?

Nope, doesn't work that way. The web is still in its infancy when it comes to typography. The basic problem is you may have all these wonderful typefaces and the web site you created looks fantastic with the typefaces you are using, but only you can see it! Visitors browsing your web site must also have the exact same typeface installed on their computer or they are going to see something entirely different than you planned!

Great! So now what do you do?

Continued in Part 2 of Typography on the Web

Comment/Discuss this article in the forums