go to Reviewsgo to Servicesgo to Registered Usersgo to Resource Centrego to AbleStable: Helpgo to About Us
go to AbleStable: Home Articles
go to Search

go to Exhibitions Centre
  Technical Advice: exploring the world of creative professionals
go to Help
go to Resource Centre
go to Library
go to Articles
go to E-Books
go to Glossary
go to Reviews
go to Web Link
Library > Articles > Technical Information > 009

E-mail this web page address to a friend or colleague
Enter their email address below (no record is kept of this action)


Type Fundamentals for Non­Designers: Part 1 Part 2

Contributor: Molly E. Holzschlag, Communications Director
World Organization of Webmasters

You know all about the <font> tag. You've tried CSS on for style. And naturally, you can create a good-looking, well-optimized Web graphic. But how much do you know about the fundamentals of typography? Read on...


Good type design can breathe more life into your sites. Although many graphic artists understand the importance of type, and have studied it extensively, many technologists have never been exposed to typographic concepts.

Fully understanding typography requires careful study of terminology and techniques. In this article I'm focusing on the primary typographic concepts from a designer's perspective.

Type categories, families, and faces

There are so many different kinds of type that they've been grouped into sensible containers so that we can keep track of them. The following are the three main typographic groupings:


A type category is the master group or family. Think of this as a typeface's ethnic heritage. For example, I'm of Slavic descent, which genetically predisposes me to certain physical traits such as body type and skin color. Every typeface has a heritage, too. The master family from which a typeface descends influences its physical attributes—its shape, line, and form (see Figure 1).


Within my ethnic group, I'm identified by a specific family identifier found in my last name, Holzschlag. The name of the family to which a typeface belongs is analogous to a human family name (see Figure 2).


Carrying this metaphor into the personal realm: My face, although similar in feature to those of my ethnic background and certain members of my specific family, is also unique. A typeface is a unique font within a category and family group.

On the Web, the word "font" is often used interchangeably with "typeface," but in fact, they represent different things. A font is the technical term used to describe the physical component of type design, while typeface refers to the visual features of the type. I have a tendency to use them interchangeably when discussing Web design, but it's an important distinction that I should make more effort to observe.

Figure 1
Type categories and families.

Type categories and families

The type categories above include the following:


This is a familiar standard group identified by smaller strokes or flourishes used to embellish individual letters.


A group common to Web design is the sans serif category. "Sans" means "without" in Latin, so these families tend to be rounded and have no flourishes.


Each letter in a face occupies the same amount of space as every other. This is often called a typewriter font, because it resembles the evenly spaced type of those old-fashioned contraptions.


This category includes all families that resemble handwriting.


Sometimes referred to as Fantasy, this group has special decorative features such as dots, strokes, and other designs that are applied to the families and faces.


There's another type category worth mentioning. It's known as Symbolic or Dingbats. This category contains fonts that are either pictographic or that have special character sets, such as those used for languages other than English.

Figure 2

Figure 2 on the left lists a few well-known families and the available typefaces in each.

Many designers spend their entire lives learning how to design with and create type, illustrating type's power as a design element. Choose the right type, and your work will have the impact you're after. Choose a clashing or inappropriate typeface, and your work will be unattractive, ineffective, or worse, boring.


Very often, how light or heavy, wide or narrow, stooped or straight we are depends largely upon our heritage or the way we were raised. This finding is true of type, as well.

Typefaces have specific attributes. These attributes are referred to as form. Form specifically relates to the shape and direction in which a given typeface is presented, and includes weight, width, and posture.


Some typefaces are dark and heavy, others, light and slender. Still others are of "average" build. Type weight influences the way faces appear. Numerous weight classes exist, including the general classes with which you may already be familiar: regular, bold, and light. Regular is the average weight class, simple and unadorned. Bold is heavier and slightly wider than regular typeface and is used to emphasize text. Light typeface is slender, and as its name implies, lighter than regular typeface. It also has a subtler impact than regular or bold forms and can help achieve a minimalistic look.


Typefaces can have a variety of widths. The two most common type widths, which are somewhat self explanatory, are condensed and expanded. A condensed, or compressed, form has a tighter letterform width than the standard version, and an expanded, or extended, typeface is wider than the standard version.


My mother's voice saying, "Stand up straight, honey" still echoes in my ears. She hated the way I slouched. Of course, I thought I looked cool. Posture conveys a great deal, making a word, phrase or heading seem active or static, serious or whimsical.

Type posture refers specifically to the angle at which the type is set. Italic type, as you know, slants to the right and, like bold, emphasizes text. Oblique is a similar, but slightly more rigid, electronic type form.

Type Fundamentals for Non­Designers: Part 1 Part 2

Book Reviewed at AbleStable®

Cascading Style Sheets: The Designer's Edge by Molly E. Holzschlag

Authors background

Molly E. Holzschlag

Deemed one of the Top 25 Most Influential Women on the Web, there is little doubt that in the world of Web design and development, Molly E. Holzschlag is one of the most vibrant and influential people around. With over 25 Web development book titles to her credit, Molly currently serves as Communications Director for the World Organization of Webmasters.

As a steering committee member for the Web Standards Project (WaSP), Molly works along with a group of other dedicated Web developers and designers to promote W3C recommendations. She also teaches Webmaster courses for the University of Arizona, University of Phoenix, and Pima Community College. She wrote the very popular column, Integrated Design, for Web Techniques Magazine for the last three years of its life, and spent a year as Executive Editor of

Find Molly's Web Site at Molly Holzschlag can be contacted by emailing her at

If you observe inaccuracies or wish to contribute an article or review to be included at AbleStable® visit Feedback.

Copyright Notice
Although our contents are free to browse, copyright resides with the originators of all works accessed at AbleStable®, and unauthorised copying or publication of our site contents is strictly prohibited.

AbleStable © 2002-2007

 All Material: AbleStable © 2002-2007
go to Frequently Asked Questionsgo to Feedbackgo to Press Centrego to Privacy Statement