Type on the web: What exactly does this mean?
Most traditional definitions of typography refer to
the style, arrangement and appearance of type on
the printed page. But more modern definitions have
been expanded to include other uses of typography.
One of the most widespread uses is type in electronic
media—namely the web. We all know that type on
the web is different from printed matter, but how
and why it differs, and how this affects the ways in
which a website is designed—as well as viewed—is
somewhat mysterious and often misunderstood. It is
actually not as complex as it might seem, once one
understands the basic principles.
CHARACTERISTICS OF WEB TYPOGRAPHY
Although the basic principles of good typography
in print also apply to the web, these principles often
have to be reinterpreted due to the ways in which
type on the web varies from how type appears in
print. Type on the web differs in appearance, behavior and application, all of which must be understood
in order to create good web typography, and thus, a
strong and effective website.
The primary difference between the two mediums
is that the appearance of type on the web is not
fixed, predictable and controllable, as it is in print;
to the contrary, the appearance and characteristics of
type on the web vary from user to user based on the
viewer’s operating system, browser, installed fonts and
screen resolution. These are the primary factors that
vary and need to be taken into consideration when
designing a website:
Font style
Think you have total control over what font viewers
see when they look at a site? Think again! In order
for the fonts used on a website to be viewed by every
visitor, they have to be installed on the viewer’s computer;
if they aren’t, the font will default to something
else on the user’s system—which can have unexpected
and often undesirable results. For this reason, it is best to stick to web-safe fonts in order to maintain better
control over what your viewers see. These are fonts
that are found on most computers. Some have been
designed specifically for the screen.
Type size
Although the designer can choose a fixed point
size when designing for the web, what the viewer
actually sees varies from computer to computer
depending on the following elements: platform and
subsequent operating system (Mac or Windows),
browser (Safari, Explorer, Firefox, etc.) and resolution.
Default screen resolutions and browser point
sizes vary from user to user: Although the viewer
can change these defaults, the web designer has no
control over these settings, making the selection of
type size somewhat of a guessing game.
Another factor to take into consideration is that
Mac and Windows operating systems can display
type differently. In general, type displayed at a given
point size on Windows browsers can look 10 to 20
percent larger than on Macs, especially on some older
browsers. This is an important consideration when
designing for the web, as this difference can have a
big impact on your page layout.
Column width/line length
When designing a website, column width can be a
fixed width in pixels or a variable width in percentage.
In either case, a very wide text-column width,
especially one that extends across the screen, reduces
readability greatly. It’s common for designers to control
the line length of text by creating HTML tables
that are specified in pixels, although purists would
argue that you should use CSS (Cascading Style
Sheets) to fix line lengths. And though the actual
character count of a line can vary on the web, keep
the length in the range of 60 to 70 characters per
line (or 350 to 500 pixels) for maximum readability,
and avoid type that goes across the total width of
the page.
Line breaks
Unlike in print, there is no control over where a line
will break on the web, due again to the font size and
style variances from user to user. Another contributing factor is that current browsers don’t support
hyphenation. Because of this, the line breaks and
resulting column rag are at best unpredictable.
Tip: When designing a website, do not make
manual breaks with soft returns as one does in print
to control the rags, or some users will wind up with
very short lines.
Column depth
Column depths vary on the web, unlike in print
where you have total control over type style and size,
column width and line breaks. Because of this, it can
be difficult in some layouts to align text to related
images in adjacent running columns unless they
appear at the top of a column and/or the beginning
of the text.
If you are willing to live with possible gaps
within the text and between paragraphs above, it is
possible to force an alignment in adjacent columns
by placing the text and image in neighboring cells in
a table. A possible solution is to place images within
the flow of the text as in-line elements so the text
wraps around them; they can then hold their vertical
position in relation to the paragraph.
Color
While you might think color is one element you
have control over, this is not completely true. Color
varies from computer to computer, depending on
the viewer’s browser, brand and type of monitor,
how the monitor is calibrated, and the color profi
le selected. While you can adjust some of these
options on your monitor, you still can’t control what
others see. And while you are no longer limited
to web-safe colors as with older computers, try to
aim for enough contrast between the type and its
background color to allow for color variations from
viewer to viewer that might reduce readability. This
is especially true with longer passages of text at
small sizes.
Web-safe fonts
The primary limitation of web typography—and
probably the most frustrating one—is related to font
usage. As noted earlier, if the fonts used on a website
are not installed on the viewer’s computer, the site
will default to another font on the user’s system.
And after all, you wouldn’t want a random font
substituted for your chosen font on a printed piece,
would you? That is the reason why it is best to stick
to web-safe fonts in order to maintain better control
over what your viewers see.
The following is a list of reliable, web-safe fonts
common to most Mac and PC browsers:
Sans serifs
Verdana: Considered the most legible of the five
choices, this sans serif was created by Matthew
Carter for Microsoft. Carter specifically designed
Verdana with a tall x-height, comfortable width
and rather open letterspacing to be readable at
small sizes onscreen.
Trebuchet MS: This sans serif retains clarity and
readability at small sizes on the web. It’s slightly
narrower than Verdana, allowing more copy to fit
in the same space. Its curved-stroke endings and
unusual lowercase g give it a bit more personality
than Verdana.
Arial: Although not specifically designed for the
web, Arial is a fairly readable sans which works
in print and on the web. It’s similar to Helvetica
in both width and spacing, but with slight character
modification.
Serifs
Georgia: Matthew Carter designed this Times alternative
for the web. With its open letterforms and
spacing, Georgia is crisp, clean and easy to read on
the web, especially at smaller sizes.
Times New Roman: Designed for print, this commonly
used typeface is hard to read on the web,
especially at smaller sizes. If you like Times, try
Georgia instead.
Symbol fonts
Although not considered 100-percent web-safe, these
symbol fonts are found in most systems, although
occasionally with a different name. When a font
menu listing in an application is displayed in the
actual font, these font names show up as symbols.
Webdings: This symbol font was developed by
Microsoft in 1997 and contains 230 symbols, icons
and pictograms.
Wingdings: 255 more symbols from Microsoft,
released in 1990.
SMART PUNCTUATION ON THE WEB
In print, the use of typographically correct punctuation,
including “smart” quotes and apostrophes (also
known as curly or typographer’s quotes), as well as en
and em dashes, is the accepted practice in professional
typography. In web design, these practices are
often absent, or just tossed by the wayside—either
by web developers with little typographic knowledge or designers who aren’t aware these practices can
be incorporated into websites. Not only can they
be used on the web, they should be, especially for
design-related sites, which should strive for the highest
typographic standards possible.
The first step to achieving this goal is to make
sure your original copy contains typographically correct
punctuation. Unlike many page-layout applications
that have features to correct ‘dumb’ typography,
web-development tools are not typically type-savvy
and need to be fed typographically correct copy to
accurately code these Special Characters (as they are
known in HTML). When copy is hand-coded, this is
even more important and should probably be called
out in advance to the webmaster (if it isn’t you).
CASCADING STYLE SHEETS
The Cascading Style Sheets (CSS) language is
used to define specific characteristics of web documents—including elements such as font style, size,
spacing, alignment, emphasis and color. Much like
style sheets in page layout software, CSS is a timesaving
feature that allows the designer to have more
control over the stylistic preferences and appearance
of web documents.
With CSS, it is possible to create a set of type
specifications and apply them to a block of text or
a whole site, and to alter those elements on a global
basis. It is a way to keep content and type markup
separate, as well as a way to have control over type
that hasn’t been provided for in basic HTML. CSS
was a huge breakthrough in web design when it first
appeared, and still is a great, time-saving feature
worth learning and using if you are designing a site.
FONT EMBEDDING
If you’ve heard mention of font embedding on the
web, you’re probably intrigued about what it is and how it is used. Font embedding is a technology
most commonly associated with Adobe Flash, a
web development tool used for making interactive
type and animation. Flash allows you to control
many elements, including font, color, size, placement,
etc. The fonts used are embedded within
that file, eliminating the necessity of using only
web-safe fonts. Flash is fairly complicated to learn,
and Flash animations take longer to load, so unless
you are designing a website where this type of
technology is desired, stick with web-safe fonts for
best results.
TYPE AS GRAPHIC
If you want complete freedom to select the fonts you
want for a typographic logo, heading or subhead,
navigation bar or other font-specific images, the
type can be converted into a graphic in the form
of a .gif, .jpg or .png file. This gives you unlimited
creativity and flexibility, allowing you to combine
text with images, textures, patterns and numerous
special effects that can be achieved with your software.
Most websites have graphics as well as straight
text to establish a specific look and identity, and to
distinguish them from thousands of other websites.
If graphics are so great, then why not create an
entire website from graphic images? Unfortunately,
some websites do just that, but there are many reasons
why this is not a good idea:
- Graphics are slow to load; the larger the files
and the more there are, the longer it will take
for the site to load. And don’t forget: The
slower the user’s internet connection, the longer
it will take to load.
- Search engines won’t recognize a graphic (or
Flash) as content with keywords as they do
text, so an all-image site won’t register any
content or be as searchable for viewers looking
for the site.
- Graphics aren’t easily editable, so making corrections
or updating a site is time-consuming.
While all this geek talk and technical information
might seem a bit overwhelming to the novice web
designer or the graphic designer whose foundation is
in print, don’t despair. It might seem like an ocean
of unconquerable elements, but don’t be afraid to
stick your toe in. Proceed at your own pace, and
before you know it, you’ll be swimming with the
sharks and having fun doing it.
