The basics of type on the Web.

1. CM475 SENIOR SEMINAR IN COMM
Typography on the Web
Some Basics

2. CM475 SENIOR SEMINAR IN COMM
Web typography is complicated
by limitations that we don’t
encounter in print.

3. CM475 SENIOR SEMINAR IN COMM
1. Display of type is limited to
the fonts the user has
installed on her computer

4. CM475 SENIOR SEMINAR IN COMM
For this reason, Web designers
“stack” their font preferences
in their CSS font declaration
body {font-family: Verdana,
Helvetica, Arial, sans-serif;}

5. CM475 SENIOR SEMINAR IN COMM
2. Users can adjust type size in
their browser, thus breaking
the layout

6. CM475 SENIOR SEMINAR IN COMM
For this reason, Web designers
have traditionally specified
type size in relative units–
either ems or percentages

7. CM475 SENIOR SEMINAR IN COMM
This practice is changing as we
speak. The latest browsers re-
size type specified in pixels, an
absolute unit.

8. CM475 SENIOR SEMINAR IN COMM
3. HTML doesn’t render
typographic punctuation;
entities are required.

9. CM475 SENIOR SEMINAR IN COMM
To get this “
Instead of this
Requires this “

10. CM475 SENIOR SEMINAR IN COMM
Classes and ID’s in CSS
Some Basics

11. CM475 SENIOR SEMINAR IN COMM
HTML and CSS team up to use
the HTML attributes of ID and
class to make CSS selectors
more specific.

12. CM475 SENIOR SEMINAR IN COMM
In the HTML:
<div id=“content”>
In the CSS:
#content {color: #cccc00;} or
div#content {color: #cc0;}

13. CM475 SENIOR SEMINAR IN COMM
In the HTML:
<p class=“special”>
In the CSS:
.special {font-size: 16px;} or
p.special {font-size: 16px;}

14. CM475 SENIOR SEMINAR IN COMM
What’s the difference
between a class and an ID?
An ID can be used only once
on a given page. A class can
be used as often as desired.