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 capitalised ‘C’. Fonts that use these embellishments
are called serifs. Fonts that do not are called sans-serif or
without-serifs.

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
clearer.

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 characterised
  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 characterised 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
  Gothic.
• 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 manoeuvre.

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/ Italicising/ 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
family.

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
typeface.

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.