Type
Fundamentals for NonDesigners: 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...
Introduction
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:
Category
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).
Family
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).
Face
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.
The type categories above include the following:
Serif
This is a familiar standard group identified by smaller
strokes or flourishes used to embellish individual
letters.
Sans-Serif
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.
Monospaced
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.
Script
This category includes all families that resemble
handwriting.
Decorative
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.
Symbolic/Dingbats
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. |
Form
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.
Weight
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.
Width
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.
Posture
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 NonDesigners: Part 1 Part
2
Book
Reviewed at AbleStable®
Cascading
Style Sheets: The Designer's Edge by Molly E.
Holzschlag
|
|
|
|
