Web Typography

427 views
384 views

Published on

The basics of type on the Web.

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
427
On SlideShare
0
From Embeds
0
Number of Embeds
57
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web Typography

  1. 1. CM475 SENIOR SEMINAR IN COMM Typography on the Web Some Basics
  2. 2. CM475 SENIOR SEMINAR IN COMM Web typography is complicated by limitations that we don’t encounter in print.
  3. 3. CM475 SENIOR SEMINAR IN COMM 1. Display of type is limited to the fonts the user has installed on her computer
  4. 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. 5. CM475 SENIOR SEMINAR IN COMM 2. Users can adjust type size in their browser, thus breaking the layout
  6. 6. CM475 SENIOR SEMINAR IN COMM For this reason, Web designers have traditionally specified type size in relative units– either ems or percentages
  7. 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. 8. CM475 SENIOR SEMINAR IN COMM 3. HTML doesn’t render typographic punctuation; entities are required.
  9. 9. CM475 SENIOR SEMINAR IN COMM To get this “ Instead of this Requires this “
  10. 10. CM475 SENIOR SEMINAR IN COMM Classes and ID’s in CSS Some Basics
  11. 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. 12. CM475 SENIOR SEMINAR IN COMM In the HTML: <div id=“content”> In the CSS: #content {color: #cccc00;} or div#content {color: #cc0;}
  13. 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. 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.

×