Selecting Typefaces

Selecting a typeface to complement your logo, to use on your website,
or to print company materials is not as easy as it used to be. Today’s
marketer has a wide array of choices when it comes to fonts. While there
are script fonts that simulate handwriting, display fonts to evoke
certain time periods and symbol fonts that feature no letters at sifall,
serif and sans-serif remain the two most common typefaces when
readability is key.

The Big Dogs: Serif and Sans-Serif

A serif is the small stroke or embellishment added to the end or
within a portion of a letter. They appear as the feet on a letter ‘A’,
or the head on a capitalized ‘C’. Fonts that use these embellishments
are called serifs. Fonts that do not are called sans-serif or

Serif and sans-serif fonts are the two most commonly used typefaces,
both on the Web and in print. Serif typefaces were developed in the
ancient Roman times, while sans-serif fonts are fairly new to the game.
Each is suited for its own unique purpose and comes with its own set of
advantages and disadvantages. You will want to determine your specific
company goals before selecting what kind of typeface is best for you.

Designers should keep a close eye on those tiny embellishments
because most users have strong opinions on which they find easier to
read. Some users find serif typefaces easier to read in long passages
because they believe the serif makes letters easier to distinguish.
Others believe sans-serifs are easier to read because many sans-serif
fonts have very rounded geometric-looking shapes, making them appear

Serif Fonts

Serif fonts are standard for companies looking for a more ‘official’
looking font. Printed materials like newspapers and magazines tend to
favor the serif fonts; as a result, users are more accustomed to them
and often find them easier to read.

Serif fonts can be classified into four subgroups:


  • Old Style — Old Style serif fonts are characterized
    by their excellent readability and their subtle differences between
    thick and thin lines. Visually, they resemble calligraphy writing.
    Examples of old style typefaces include Garamond, Jenson, Goudy Old
    Style and Palatino.
  • Modern — Modern serif typefaces typically have
    extreme contrasts between thick and thin lines and are often less
    readable than other types of serif fonts. They tend to have thin
    lettering and stress vertical lines. Examples of modern style typefaces
    include Bodoni and Century Schoolbook.
  • Transitional — Transitional serif fonts are the
    most commonly used serif fonts. They are called ‘transitional’ fonts
    because they combine the Old Style serif font with its Modern
    counterpart. Differences between thick and thin lines are more
    pronounced than they are in Old Style, but they are still less dramatic
    than they are in Modern serif fonts. Because they are so widely used,
    they are considered the most ‘neutral’ serif font. The most common
    Transitional serif font is Times New Roman.
  • Slab Serif — Slab serif fonts are characterized by
    thick, full lines and have a bold, rectangular appearance. They usually
    have fixed widths, which means that each character takes up the same
    amount of space – like an old-fashioned typewriter. Examples of slab
    serif fonts are Clarendon, Rockwell and Courier.


Sans-serif Fonts

In print, sans-serif fonts are typically, but not exclusively, used
in signs, headings, and other situations where continuous reading is not
required. However, on the Web, sans-serif fonts are considered the king
of text because serifs often make small letters less readable on a
computer monitor.

Sans-serif typefaces are classified into four subgroups:


  • Grotesques — Grotesque typefaces, sometimes
    referred to as ‘Gothic’, were named for their ugly appearance. They are
    similar to Geometric typefaces, where their rounded strokes (like on
    ‘o’, ‘b’ or ‘d’) appear as perfect circles, with all strokes being a
    constant width. Examples of Grotesque fonts include Grotesque or Royal
  • Neo-grotesques — Neo-grotesque fonts are a refined
    version of their Grotesque cousins. They are considerably more elegant
    and are designed with varying styles and widths. They have virtually no
    distinguishable features at all. Examples of the Non-grotesque fonts
    include Standard, Helvetica, Arial, and Universe.
  • Humanist — Humanist typefaces are the most
    calligraphic looking of the sans-serif typefaces, and are considered
    some of the most readable.
  • Geometric — As their name would suggest, geometric
    typefaces are based on geometric shapes and have a more modern look.
    They are known for their perfectly round circle lettering. Examples of
    Geometric typefaces are Futura and Spartan.


Those Other Fonts

When it comes to fonts, serif and sans serif aren’t your only options
but they are your only options if you want your text to be readable.
While the fonts below may be used as accents or for banners, they are
not recommended for lengthy body text.


  • Script fonts — Script fonts simulate handwriting
    and are much harder to read than most serif and sans-serif fonts. If you
    have to use them, we advise using them for logos or invitations only.
    Examples include Coronet and Zapfino.
  • Blackletter fonts — Blackletter fonts were created
    with the invention of the printing press. They received their name based
    on their strong resemblance to blackletter calligraphy. Examples
    include Textualis, Rotunda, Schwabacher, and Fraktur.
  • Display fonts — Display fonts are used exclusively
    for decorative purposes, and are not suitable for body text. They have
    the most distinctive designs of all fonts, and may even incorporate
    pictures of objects or animals into their characters. They are usually
    used to depict a certain time period (holidays, historic eras, etc.) and
    therefore have a limited use.
  • Monospace fonts — Monospace fonts were originally
    developed for typewriters, and as a result use a fixed width style where
    every character takes up the same amount of space. These typefaces are
    excellent for using columned text. Examples of Monospace typefaces are
    Courier, Prestige Elite, and Monaco.
  • Symbol fonts — Symbol fonts contain no letters at
    all. Instead, they consist of symbols (faces, boats, clocks, railroad
    symbols, street signs, etc.). Examples include Zapf Dingbats, Sonata,
    and Wingdings.


Specifying typefaces

Today’s site designers have an enormous advantage over the designers
that came before them. They are able to specify typefaces online and
control the visual aspect of their site. This was not always the case.
Designers were once solely at the mercy of the default fonts
incorporated into a user’s browser. Luckily, as people became more web
savvy, page tags were created with the sole purpose of specifying
typefaces for Web documents. Although the tags enabled designers to
create professional-looking pages, they also created cumbersome HTML
code that was often difficult to maintain and maneuver.

That’s where Cascading Style Sheets (CSS) come in. Style sheets are
an alternative to page tags and are found in most desktop publishing
programs, like Quark, PageMaker or Adobe InDesign. They enable sites to
maintain consistency, making sure that common elements remain the same
from page to page. They also help save valuable time by allowing
designers to control the design of a page with a single edit.

Style sheets can format your text in the following areas:


  • Boldfacing/ Italicizing/ Underlining
  • Type size
  • Font
  • Leading
  • Kerning
  • Tracking
  • Color
  • Alignment


It’s important to note that even if you specify what typeface you
want to appear, the font will not show up if the user does not have that
typeface installed on their computer. For this reason, it is wise to
specify multiple fonts or to end your font command with a generic
command, such as ‘serif’. This way, if a user’s browser cannot find the
exact font you called for, it will at least select a font in the same

Web vs. Print

Some typefaces are more legible on screen than others. While Times
Roman may be considered one of the most legible on paper, when you put
it on screen, it often appears too small or too irregular looking.
Screen legibility is greatly influenced by what designers call
‘x-height’ (the height of a lowercase “x”) and the overall size of the

Most readers prefer long blocks of text to use a serif font. You may
use either a variation of the serif font or a contrasting sans serif
face for the display type. We suggest using a single typographic family
and varying size for headlines or bylines because it produces a more
consistent line of text. If you do mix serif and sans serif faces, make
sure to select compatible fonts and try not to use more than one serif
and one sans serif (two fonts total) on a page. In our experience,
Verdana, Georgia and Comic Sans are the easiest fonts to read on a
computer screen. Their exaggerated x-heights offer excellent legibility
for long text meant to be read via a computer.

Proportional vs. Non-Proportional

Is your text going to be placed in columns? Is it important for you
to have all of your text line up evenly? If so, you’ll need to pay
special attention to proportionality when selecting a typeface. The
proportionality of your font will greatly affect how it appears on your
site. There are two kinds of fonts: proportional and non-proportional. A
font that uses varying widths is a proportional font, while those that
use fixed widths are known as non-proportional fonts.

Proportional fonts are considered more professional-looking
and are easier to read, however, non-proportional fonts allow their
characters to line up in nice, neat columns. The layout of your site
will help you determine which is best for you.

Serving North America based in the Los Angeles Metropolitan Area
Bruce Clay, Inc. | PO Box 1338 | Moorpark CA, 93020
Voice: 1-805-517-1900 | Toll Free: 1-866-517-1900 | Fax: 1-805-517-1919