This document compares typography for print versus web. It discusses the physical aspects of each, noting that print is held in the hand while web content can be accessed on computers and devices. Both print and web should have well-designed, readable form and content that communicates the intended message. Main concerns for print include having a wide choice of fonts, while web is limited to common installed fonts. Web typography also has less control over formatting and faces browser variability, though text can be resized unlike print. Proper planning and rules are needed for effective typography in both media.
2. The physical aspects
Print Web
ď§Hold content in your hand
ď§See on a billboard or poster
ď§Access content on computers
and other devices.
3. What do print type and web
type have in common?
ďŽ Both have form and content
ďŽ Both should be well designed
ďŽ Both should communicate the intended message
ďŽ Both should utilize rules of readability:
ďŽ Avoid wide columns of text
ďŽ Avoid all caps for body copy
ďŽ Avoid Widows, Orphans, Ladders and Rivers
ďŽ Watch background and text combinations
ďŽ Carefully plan and limit typefaces (2-3)
4. Main typography concerns
Print
ď§ Print can use any fonts
you own! No problems
except so many to choose
from! Just package your
InDesign or Quark file and
fonts are gathered for you to
supply for the printer.
ď§ For both print and web
limit fonts to 2 or 3
Web
ď§ Font choices are limited.
ď§ Only 7 or 8 are installed
on all platforms. (Only fonts
installed on user devices will
appear on web pages).
ď§ Many experiments. None
are perfect solutions.
ď§ Browser appearance
varies
5. ď§Pages use web safe Verdana.
ď§Same computer, different browsers, no resizing of text.
9. Experiments with web type
Grey area: highlighted
text
Above: tested on all browsers.
Note: unlike print, cannot
create type at any angle.
JonTangerine.co
m
10. Controlling Widows, Orphans,
Ladders and Rivers
Print
ďŽ Adobe InDesign and
QuarkXPress have elaborate
panels for controlling type.
ďŽ Can use
kerning, tracking, leading, auto
hyphenation, full
justification, right align, left
align and even top and bottom
justification.
ďŽ Can use manual or automatic
text flow.
Web
ďŽ Adobe Dreamweaver (and hand
coding with CSS and HTML) has
minimal control options.
ďŽ Can use tracking, line height
(called leading in print), left align,
right align, and center spacing.
Justified text creates ârivers.â
ďŽ NO auto hyphenation to control
âladdersâ (3 or more hyphens in
a row).
ďŽ NO kerning (between the letters)
ďŽ NO text flowing
11. Print canât be resized. Some
web pages give readers a
choice
Liquid layout, narrow Liquid layout, wide
Learn more about setting type on the web at A List
Apart.com
12. Using wrong em or en not as
noticeable in print
Wrong em applied
(Mac)
Reads fine on Windows
Peter K Sheerin states that most em and en dash HTML references are wrong.
The entire range from  to 159 should not be used.
13. Print canât be resized. Web
browsers give readers a
choice
Print
ďŽ Once an item is printed, users
canât change or control size of
text except by using a
magnifying glass.
ďŽ Some printers publish large
print versions for visually
challenged. Voluntary.
Web
ďŽ Viewers can resize web pages
to see text better.
ďŽ Visually challenged can use
screen readers to view web
pages.
ďŽ Itâs up to the web
designer/programmer to provide
proper alt tags. Section 508
14. Closing thoughts
Print
ďŽ Canât be changed once printed.
ďŽ Costly to redo a botched job.
ďŽ Canât be altered or fixed by
users (exception is graffiti ;-)
ďŽ Catalogued by librarians
ďŽ Has to be scanned to archive
Web
ďŽ Can be changed in an instant if
you use web text and not
image maps.
ďŽ Searchable and available to all
ďŽ Anyone can have a Blog
ďŽ Social bookmarking sites like
Digg and del.ico.us
Important to learn the important details of both
media.