Type
Fundamentals for NonDesigners: Part
1 Part 2
Contributor:
Molly E. Holzschlag, Communications Director
World Organization of Webmasters
Type
size and proportion
Another consideration when working with typefaces
is their size and proportion to one another - and
to other elements on a page.
Type is measured in a variety of ways, including
points or pixels. Point measurement is based on
print measurement, whereas pixel measurement uses
a computer's "picture element" standard.
Web based-type has limitations on size. The differences
in screen resolutions, platforms, and browser rendering
capabilities mean that there's a lot of variation
in the way type is displayed on a screen. So while
size always matters, Web designers have their work
especially cut out for them when they try to use
markup to work with type.
The proportions of any given typeface compared to
another are important. Proportional relationships
help indicate what role each typeface plays on a
page. Larger type is used for headers, medium sizes
for body text, small sizes for notes, mailto:, and
less-emphasized information on Web pages such as
copyright and related legal notices.
Orientation
 |
The
direction in which your typeface runs significantly
impacts the way the type is perceived. Type
direction is referred to as orientation. Standard
type runs horizontally, but type can also be
vertical, reversed, upside-down, or rendered
in a shape (see the illustration on the left). |
Horizontal
type is more stable, involving little or no movement.
That's why it's used as body text. When designing
for impact, however, you should think about pursuing
other orientation options. Type orientation can
provide a sense of energy and intrigue.
Leading
Typography also concerns itself with the space between
lines, called leading (pronounced ledd-ing). In
style sheets, this is referred to as line height.
How close or how far one line is from another influences
readability tremendously.
 |
Figure
3
18-point type with 18-point leading is natural
and easy to read. 18-point type and 10-point
leading make this type impossible to read.
As a general rule, leading set close to the
type's own point size is suitable for body text.
In the middle of Figure 3, I've reduced the
leading to 10 points, but kept the type size
steady at 18 points. The text becomes impossible
to read. |
If I set the leading at too great a distance, as in
the bottom line of Figure 3, readability is also affected.
Using unusual leading for impact is effective in short
sections of text such as headers or sidebars. However,
in body text, avoid leading that's too far from the
normal range.
Kerning
and spacing
Kerning is the horizontal space between individual
letters within a font. In normal settings, you'll
notice that letters touch one another and this can
sometimes interfere with legibility. This occurs frequently
with serif fonts, although it can affect any font.
Kerning lets a typesetter adjust this space. Doing
so requires accessing information contained within
the font. This information is stored in what is referred
to as a kerning table. Kerning tables contain mathematical
information related to the units of each letterform
within the font. To access kerning tables you must
use a software program with this feature, such as
Adobe Illustrator.
Spacing is the horizontal distance between letters,
outside the font. In other words, you don't have to
access the kerning table to set a letter farther from
or closer to another. Spacing affects the entire word
or phrase you've selected, unlike kerning, which changes
only the spacing between individual characters.
The problem for Web designers is that kerning and
spacing cannot be specified with HTML. CSS2 does offer
some letter spacing control, and of course you can
always set type with an imaging program such as Adobe
Illustrator or Photoshop, which have options for letter
spacing.
Combining weight
for contrast
Here are some tricks that can enhance your pages right
away.
Let's start with combining weight to add interest
to headers. Open your favourite imaging program (as
long as it has some typographic options) and follow
along with me. I'll use Photoshop for this example.
Create a new file, giving yourself plenty of room
to work. I made my file 400 x 100 pixels, which could
conceivably work as a graphic header for a Web page.
Choose background and foreground colors
Select the type tool, and then choose a font. Be sure
to choose something that has a normal and a bold option
available. I picked Helvetica.
Type and set the word "combining" in a size
appropriate to the canvas. Set to normal weight.
Now, type and set the word "weight," this
time using the same type size and font, but set the
word to bold weight. Nudge it up alongside the first
word.
Now check your results against mine (see Figure 4).
You'll notice that the weight contrast immediately
adds interest to the type.
Figure
4
Contrasting type weight creates a captivating header.
Combining case
Another way to add interest to your type is to combine
case. Let's say you're trying to achieve a little
more impact with your header by using more than just
lower, upper, or standard title case. This time, use
your imaging program to set the type - all the same
size, weight, and face - but place part of the title
in uppercase, and part of the title in lowercase.
Figure 5 shows how I did this with the words, "Welcome
to my Site." Here, I've emphasized "Welcome,"
because it's the most important idea in that sentence.
The resultant header is much more interesting than
it would have been in standard case because it emphasizes
the contrast in the importance of the words themselves
as well as the contrast in visual impact.
Figure
5
Attract and hold a reader's interest by contrasting
case. This method also allows you to emphasize the
most important part of your message.
Go
on - type it up!
As you can see from these short exercises, when you
begin to work with the fundamental concepts in typography,
your skills can rapidly move from the simple to the
more complex. This growing complexity adds sophistication
to the look of your design work, and helps emphasize
key points in your visual and verbal communications.
I
encourage you to play with type. Open up Photoshop,
Illustrator, or your favourite graphics program and
experiment. Try to identify categories, families,
and faces. Apply a range of sizes, styles, weights,
and directions. See what's available in your drawing
program in terms of leading, kerning, and spacing.
In general, get to know type a little better.
Type
Fundamentals for NonDesigners: Part
1 Part 2
Book
Reviewed at AbleStable®
Cascading
Style Sheets: The Designer's Edge by Molly E.
Holzschlag
|
|
|
|
