Typography
on the Web
copyright Penny McIntire, 2009
Why is Type Important?
• The following is excerpted from
Choosing & Using Type, by Daniel WillHarris, (awesome site!) …
– www.will-harris.com/use-type.htm
2
copyright Penny McIntire, 2009
Why is Type Important?
• Type attracts attention, sets the style
and tone of a document, colors how
readers interpret the words, and defines
the feeling of the page – usually
without the reader recognizing a
particular typeface.
3
copyright Penny McIntire, 2009
Why is Type Important?
• Type is your personality on paper, your
image.
– Change your typeface and you go from
casual to formal, silly to serious, staid to
stylish, old fashioned to modern.
– If you use a typeface consistently enough,
people will start to associate it with
you/your company (think Harry Potter or
Coca-Cola).
4
copyright Penny McIntire, 2009
Why is Type Important?
• Type is emotional on a subliminal level
because of its connotations.
– Example:
• Helvetica is used on IRS forms.
• Now, how do you think you're going to feel
when you read something set in Helvetica?
• You probably won’t consciously realize that it's
the same typeface the IRS uses, but it could
still color your emotional reaction.
5
copyright Penny McIntire, 2009
Why is Type Important?
• Type should be appropriate.
– Don't choose a whimsical typeface such as
Curly for a banking site, or you'll lose
credibility.
– If you have a fun business, such as a party
service, don't use a serious typeface such
as Helvetica or you'll come across as
boring.
6
copyright Penny McIntire, 2009
Typography Terminology
• Body copy or body text: the main
content.
– Primary focus is readability.
• Display type, display text, or headline
text: text used for structure and/or
decoration, such as titles and headings.
– Primary focus to embellish and draw
attention.
– Short phrases, larger text sizes,
decorative fonts.
7
copyright Penny McIntire, 2009
Typography Terminology
• Typeface: a particular design for
characters, like Courier, Times New
Roman, Ariel.
8
copyright Penny McIntire, 2009
Typography Terminology
• Font: a particular typeface at a
particular size in a particular style (bold,
italic, etc).
– E.g., “Arial, 16 px, bold” is a different font
than “Arial, 12 px, bold.”
– Thanks to Microsoft and Windows,
the term “font” is commonly used to
refer to what should really be called a
“typeface.”
9
copyright Penny McIntire, 2009
Typography Terminology
• Proportionally spaced typeface: Each
character takes up only as much space
as it needs.
– E.g., Tahoma (the typeface I’m now
using): “I” is skinny, “M” is fat.
• Monospaced typeface: The same
amount of space is assigned to each
character.
– E.g., Courier’s “I” equals “M”
10
copyright Penny McIntire, 2009
Typography Terminology
• Font family: variations on a particular
typeface, like bold, light, italic,
condensed, etc.
– “font-family” in CSS means something
different; i.e., a list of alternate fonts.
11
copyright Penny McIntire, 2009
Typography Terminology
• Font categories
– Serif: has a slab at the beginning and
ending of main strokes, like Times New
Roman or Georgia.
• Supposedly more legible in print.
– San-serif: no slab, like Tahoma or
Verdana.
• Supposedly more legible on the screen,
especially at small sizes.
• Not necessarily true?
12
copyright Penny McIntire, 2009
Typography Terminology
– Decorative typefaces, with curlycues or all
kinds of other stuff…
13
copyright Penny McIntire, 2009
Typography Terminology
14
copyright Penny McIntire, 2009
Typography Terminology
– Dingbat typefaces…
15
copyright Penny McIntire, 2009
Typography Terminology
• Leading (pronounced “ledding”): the
space between lines of text.
– Default leading is one line.
– Print experts often recommend an extra 1020% leading.
– Looser leading is often preferred for
readability, especially for longer lines of
text.
– Looser leading gives a lighter (less black)
look to the page.
16
copyright Penny McIntire, 2009
Typography Terminology
• To control leading:
– Use CSS.
tallLine {line-height: 1.1}
tallLine {line-height: 110%}
tallLine {line-height: 1.1em}
– <p> and <br> tags provide spacing
between lines as well.
17
copyright Penny McIntire, 2009
Typography Terminology
• Letter spacing/tracking: putting more or
less space between letters within
words.
Essentially
150%
– Use CSS:
widetext {letter-spacing: 1.5em}
tighttext {letter-spacing: -0.1em}
18
copyright Penny McIntire, 2009
Typography Design
• Some typefaces tall and skinny, some
short and fat– use these characteristics
to choose faces for challenging spaces.
• Don’t mix and match font attributes like
different typefaces, different sizes, and
different colors willy-nilly.
– You will end up with a visually confusing
page – the “ransom note” effect.
– Use all of these attributes sparingly, with
meaning attached.
19
copyright Penny McIntire, 2009
Typography Design:
Contrast
• Use such contrast in typography to give
emphasis (color, bold, italics, larger
size, fancier type, alignment, etc.) to
draw attention to the structure of your
page and to what you consider to be
most important.
20
copyright Penny McIntire, 2009
Typography Design:
Contrast
• For example, larger font sizes and
perhaps even a different typeface
would be okay for headers, because
they show that the element is indeed a
header.
• Or, in this presentation, color and italics
are used for vocabulary terms that you
need to know for exams.
21
copyright Penny McIntire, 2009
Typography Design:
Contrast
• Types of contrast in typography…
– Typeface/structure: Serif versus san-serif,
one typeface versus another.
– Size:
big versus
small
– Weight:
bold versus not bold
– Color:
You get the idea.
22
copyright Penny McIntire, 2009
Typography Design:
Contrast
– Form:
Italic or ALL CAPS or SMALL CAPS versus not
italic or not caps
– Texture:
How a block of type arranges itself into a
shape, either heavy or lighter in feel.
23
copyright Penny McIntire, 2009
Typography Design:
Contrast
–Direction:
Whether the type is
Or a
very
tall
skinny
block
of text
Or a very very very very very
wide but short block of text.
24
copyright Penny McIntire, 2009
Typography Design:
Contrast
–Interrupted rhythm/spacing:
Characters that are s p a c e d differently,
Or
isolated…
–Embellishment:
Drop shadow or
embossed
or
, etc.
25
copyright Penny McIntire, 2009
Typography Design:
Contrast
–Justification/alignment:
Align left align
left align left
align left align
left align left
align left
Align center align
center align center
align center align
center align center
align center
fully justified
justified
justified
justified
justified
Align right align
right align right
align right align
right align right
align right
fully
fully
fully
fully
26
copyright Penny McIntire, 2009
Typography Design:
Contrast
• Any one (or more) of these typography
characteristics can be used to
emphasize whatever you want to
emphasize.
27
copyright Penny McIntire, 2009
Typography Design:
Contrast
• Nonetheless, as we have discussed
multiple times, use contrast but don’t
get carried away.
– If you contrast color and weight and size,
don’t contrast all of the other elements,
too.
– Just because you own 816 typefaces
doesn’t mean you have to use all of them
on one site.
• Limit yourself to just a couple on each page.
28
copyright Penny McIntire, 2009
HTML Text versus Graphic Text
• Two types of text on a web page:
– HTML text: ASCII text embedded in
standard HTML tags.
– Graphic text: Text created in an imaging
program and saved as an image, then
embedded in the HTML using <img> tags.
• Used to guarantee a particular typeface or
graphic effect.
29
copyright Penny McIntire, 2009
HTML Text:
Fonts
• HTML text: ASCII text embedded in
standard HTML tags.
• Fonts are not typically downloaded with
the page; a font used in HTML displays
on the visitor’s screen only if that font
file is available on the viewer’s
computer.
30
copyright Penny McIntire, 2009
HTML Text:
Fonts
• Newer browsers can support fonts that
download with the page.
– Obviously, this increases download time (a
decorative font might need 100K or more).
– Just say no.
31
copyright Penny McIntire, 2009
HTML Text:
Fonts
• If you want to use an uncommon typeface for
HTML text, use that font as your first choice in
HTML but specify common backup fonts so that
it degrades gracefully if the visitor doesn’t have
the first choice font…
.myFont
{
font-family: Arial, Helvetica, sans-serif;
}
32
copyright Penny McIntire, 2009
HTML Text:
Fonts
– Sans serif fonts
• Verdana (Verdana, Arial, Helvetica, sans-serif)
• Arial and Helvetica do not read well on Macs,
especially small – letters touch.
– Serif fonts
• Georgia (Georgia, Times New Roman, Times,
serif)
– Monospaced fonts
• Courier (Courier New, mono)
33
copyright Penny McIntire, 2009
HTML Text:
Fonts
• Georgia and Verdana specifically
designed for the screen (Matthew Carter,
hired by Microsoft, took two years), with
better hinting; that is, larger and more
uniform spacing between letters.
34
copyright Penny McIntire, 2009
HTML Text:
Fonts
• If you use the typefaces from the list
back a couple of slides, you will be safe,
because one of the fonts in each
category is always present on
Windows/Macs.
35
copyright Penny McIntire, 2009
HTML Text:
Fonts
• Font sizes
– Body text for the general population
shouldn’t go below 11-12 pixels?
– Subheads at 14-18 pixels?
– Headings at 24-72 pixels?
– In some of the browser versions, a
particular font size looks 25% larger on a
PC than it will on a Mac.
36
copyright Penny McIntire, 2009
HTML Text:
Fonts
– For consistency, you could use pixels for
type measurement in CSS.
– However, for accessibility reasons, use em
(the width of the uppercase M) so that you
don’t override the user’s font size setting.
• Example: 1.5em would be 1.5 times as high as
the width of an M in the user’s default setting.
37
copyright Penny McIntire, 2009
HTML Text:
Layout
• Don’t completely fill a page with line
after line of text, stretching from page
border to page border.
– Too much text is boring.
– Long lines of text are hard to read.
• Limit line length 350-600 pixels, tops (one of
the more common student errors).
38
copyright Penny McIntire, 2009
HTML Text:
Layout
• Do “chunk” the content; that is, put it
into small sections/chunks with a
header to title the chunk.
– Web readers skim, rather than reading
carefully.
39
copyright Penny McIntire, 2009
HTML Text:
Layout
• OK to use various alignment options (left,
right, center) for headers and such.
• Use only “justify left, ragged right” for
paragraphs.
– Centered body text is annoying, ugly, and hard to
read.
– Don’t center blocks of text or (horrors!) bulleted
lists.
– Justification on both sides cannot be done subtly
in a pixel-based environment.
40
copyright Penny McIntire, 2009
HTML Text:
Layout
• Don’t both indent the first line of a
paragraph and double space between
paragraphs.
Bad
Four score and
seven years ago, our
fathers brought forth.
Four score and
seven years ago, our
fathers brought forth.
Good
Four score and
seven years ago, our
fathers brought forth.
Four score and
seven years ago, our
fathers brought forth.
Good (default)
Four score and seven
years ago, our fathers
brought forth.
Four score and seven
years ago, our fathers
brought forth.
41
copyright Penny McIntire, 2009
HTML Text:
Layout
• Leave extra space before headings and
subheadings (the default with <h> tags).
• Avoid indenting or leaving a blank line for
the first paragraph after a header.
– Will have to use CSS to specify single spacing
in this case.
42
copyright Penny McIntire, 2009
HTML Text:
Layout
• Use pull quotes (a quote pulled off to
the side or inserted in the middle, in
emphasized type) to give readers and
idea of what it in the content.
43
copyright Penny McIntire, 2009
HTML Text:
Content
• For emphasizing words, use either bold
or italic.
• Several books say that bold shows up
better on monitors than italic, but it
often depends on the typeface.
44
copyright Penny McIntire, 2009
HTML Text:
Content
• Use underlining only for links.
– Underlining for emphasis is an amateurish
throwback to the days of typewriters, when
that was one of our few alternatives for
emphasizing text.
• Don’t use strikethrough unless you are
attempting to display edited versions of
documents such as legal contracts.
• Don’t use blinking text – another mark
of an amateur.
45
copyright Penny McIntire, 2009
HTML Text:
Content
• Avoid using ALL CAPS in body text,
although it can be acceptable in
headings.
– Fewer caps are easier to read.
– Another amateurish throwback to the days
of typewriters.
• Do use CSS to set special characteristics
for the first letter or first line (drop cap,
all small caps, italics, etc.)
46
copyright Penny McIntire, 2009
HTML Text:
Content
• Spell chek!!!
• Eliminate tpyos!!!
• Don’t use a bazillion exclamation points
in text! (Just look at this page!!!)
– It’s distracting and the equivalent of yelling
“wolf” over and over!!!
• Use only one space, not two, at the end
of sentences (newer standard), which
HTML is going to enforce anyway.
47
copyright Penny McIntire, 2009
HTML Text:
Content
• Use en dashes (a hyphen the width of
the letter N, like this -) to separate
joined words, and em dashes (longer,
the width of the letter M, like this – ) to
separate sentence clauses.
– E-mail–like snail mail–gets the job done.
En dash
Em dashes
48
copyright Penny McIntire, 2009
HTML Text:
Content
– Escape sequences:
• En dash: &ndash; or &#8211;
• Em dash: &mdash; or &#8212;
• Use “proper” quotes:
– “ … ” versus " … "
– Escape sequences:
• Curly
• Curly
• Curly
• Curly
left double quote: &ldquo; or &#8220;
right double quote: &rdquo; or &#8221;
left single quote: &lsquo; or &#8216;
right single quote: &rsquo; or &#8217; 49
copyright Penny McIntire, 2009
HTML Text:
Content
• Other special characters:
– True ellipse … &hellip; or &#8230;
• Tables of special characters:
– http://www.meadhra.com/cnet/040901/table1.html
– http://www.meadhra.com/cnet/040901/table2.html
50
copyright Penny McIntire, 2009
HTML Text:
Content
• “Upper case numerals” (all the same size) versus
“lower case numerals” (uses ascenders and
descenders):
UPPER-CASE 123456789 LETTERS & NUMBERS (good)
Lower-case 123456789 letters & numbers (good)
MIXED-CASE 123456789 LETTERS & NUMBERS (bad).
Mixed-case 123456789 letters & numbers (bad).
– Most typefaces have only one version, so you usually
have to change fonts to fix.
51
copyright Penny McIntire, 2009
HTML Text:
Printing
• If your visitors might want to print the
page, you will need to test it on both a
color printer and black and white.
• For instance, light text on a dark page
background might not print, depending
upon the visitor’s browser and the way
it is configured.
52
copyright Penny McIntire, 2009
HTML Text:
Printing
• Alternatives
– Link to a second, printable version of the
page: black text, white background, no tables
or frames, simple layout.
• But maintaining two versions of each page is an
error-prone pain.
53
copyright Penny McIntire, 2009
HTML Text:
Printing
– Better: Use different CSS rules for different
media. Examples:
<link rel=stylesheet type=“text/css”
href=“myPrint.css” media=“print” />
<link rel=stylesheet type=“text/css”
href=“myDisplay.css” media=“screen” />
54
copyright Penny McIntire, 2009
HTML Text:
Printing
– Set up the page as a .pdf file, for a print
version.
• Must have a .pdf authoring program installed
(cutePDF is a free download), then you print a
document to the pdf option on the print menu.
– Page as .doc file, dependent upon user
having Microsoft Word.
55
copyright Penny McIntire, 2009
Graphic Text
• Graphic text: Text created in an
imaging program and saved as an
image, then embedded using <img>
tags.
– Should never be used for body copy – a
huge download hit and the mark of an
amateur.
56
copyright Penny McIntire, 2009
Graphic Text
• Disadvantages:
– Worth repeating: download hit!
– Not searchable and it’s invisible to screen
readers (both partially offset by appropriate
use of the alt attribute).
– Unavailable if visitor or visitor’s system can’t
see graphics for some reason.
– Hard to update.
57
copyright Penny McIntire, 2009
Graphic Text
• Fonts for graphic text:
• A vast selection of text fonts in various
categories, such as script, display, oldEnglish, experimental, decorative, etc.
• Also special character fonts, such as
dingbats, arrows, architectural symbols,
web icons, geometric shapes, etc.
58
copyright Penny McIntire, 2009
Graphic Text
• Can use very tiny face, like
Silkscreen (8 pixels) and
Sevenet (7 pixels high), both
free.
– Bitmapped to a particular size – will not
expand well, don’t anti-alias.
– Use only on graphic text, not for HTML text
because, once again, the user probably
won’t have these fonts.
59
copyright Penny McIntire, 2009
Graphic Text
• Anti-aliasing text
– Don’t anti-alias extremely small-sized fonts;
they get mushy and hard to read.
– Several Adobe settings:
• None – no anti-aliasing is done.
• Crisp – Type appears sharp, uses less
bandwidth than other settings because the antialiasing margin is small. Usually the default.
• Strong – Type appears heavier. Can get mushy.
• Smooth – As it sounds. Can get mushy.
60
copyright Penny McIntire, 2009
Graphic Text
– A trick to improve legibility on very thin,
anti-aliased type:
• Place a second copy of the anti-aliased type
directly on top of the first copy.
• Makes the type stronger.
• Careful, though – may have to space the letters
further apart to keep them from running
together.
61
copyright Penny McIntire, 2009
Graphic Text
• Kerning: adjusting the space between
adjacent letters that can nestle closer
together.
WAVE
versus
WAV E
• Some of this is built into fonts, but real
typographers would want to do it
manually on larger type like logos.
62
copyright Penny McIntire, 2009
Graphic Text
• Text effects:
• Can apply the same effects that you can
apply to graphics, like drop shadow, blur,
glow, outline, radial fill, etc.
63
copyright Penny McIntire, 2009
Resources
• http://kottke.org/plus/type/silkscreen/in
dex.html -- Silkscreen font
• http://cooltext.com/Download-FontSevenet+7 – Sevenet 7 font
• http://www.dsg4.com/04/extra/bitmap/i
ndex.html
• www.adobe.com/type/
• www.fonthead.com
64
copyright Penny McIntire, 2009
Resources
•
•
•
•
•
http://www.dafont.com, mostly free!
www.itcfonts.com
www.chank.com
www.fontsquirrel.com
www.typ.com both free and for a fee. Also a
blog about fonts at http://blog.typ.com .
• www.will-harris.com/use-type.htm awesome
site with advice about using typography.
• http://www.lipsum.com Lorem Ipsum
generator
65
copyright Penny McIntire, 2009
Resources
•
•
•
•
http://www.dafont.com (mostly free!)
www.itcfonts.com
www.chank.com
www.will-harris.com/use-type.htm (awesome
site!)
• http://www.lipsum.com Lorem Ipsum
generator
• Do be careful with downloaded fonts – in
theory, they can contain viruses.
66
copyright Penny McIntire, 2009