Typography on the Web

31
Typography on the Web

Transcript of Typography on the Web

Page 1: Typography on the Web

Typographyon the Web•

Page 2: Typography on the Web

old hidden art

Page 3: Typography on the Web

Trajan column

Page 4: Typography on the Web

2000

Page 5: Typography on the Web

One of the most annoying things

is ,of course , punctuation errors !

Punctuation

Page 6: Typography on the Web

Punctuation

One of the most annoying things

is ,of course , punctuation errors !

Page 7: Typography on the Web

“ ” ≠ " "‘ ’ ≠ ' '

Quotes

Page 8: Typography on the Web

An author, instructor, and Web designer, Molly E. Holzschlag has authored over 30 books related to

“Web design and development”. She’s been coined one of the greatest

“digerati” and deemed one of “the Top 25 Most Influential

An author, instructor, and Web designer, Molly E. Holzschlag has authored over 30 books related to “Web design and development”. She’s been coined one of the greatest “digerati” and deemed one of “the Top 25 Most

Hanging Punctuation

Page 9: Typography on the Web

An author, instructor, and Web designer, Molly E. Holzschlag has authored over 30 books related to

“Web design and development”. She’s been coined one of the greatest

“digerati” and deemed one of “the Top 25 Most Influential

An author, instructor, and Web designer, Molly E. Holzschlag has authored over 30 books related to “Web design and development”. She’s been coined one of the greatest “digerati” and deemed one of “the Top 25 Most

Hanging Punctuation

Page 10: Typography on the Web

– hyphen– en dash– em dash

-–—Dashes

[-][–][—]

Page 11: Typography on the Web

· • … æ ¿ ¢ € ¥ £ ™ ® © ÷ × ± ≈ ∞ ≠ ≤ ≥ ½ § † α π ç д ´ ˝ °

Other Symbols

Page 12: Typography on the Web

· • … æ ¿ ¢ € ¥ £ ™ ® © ÷ × ± ≈ ∞ ≠ ≤ ≥ ½ § † α π ç д ´ ˝ °

Other Symbols

Page 13: Typography on the Web

· • … æ ¿ ¢ € ¥ £ ™ ® © ÷ × ± ≈ ∞ ≠ ≤ ≥ ½ § † α π ç д ´ ˝ °

Other Symbols

Page 14: Typography on the Web

Other Symbols

· • … æ ¿ ¢ € ¥ £ ™ ® © ÷ × ± ≈ ∞ ≠ ≤ ≥ ½ § † α π ç д ´ ˝ °

Page 15: Typography on the Web

• Times New Roman

• Georgia

• Book Antiqua

• Arial

• Verdana• Trebuchet MS

Fonts

Page 16: Typography on the Web

• Times New Roman

• Georgia

• Book Antiqua• Palatino• Hoefler Text• Cochin

• Arial

• Verdana• Trebuchet MS• Futura• Lucida Grande• Gill Sans

Fonts

Page 17: Typography on the Web

Leading

Microformats are a fast growing technology! In the first year of microformats, there were many more instances of microformatted data than RSS had in its first year, and the adoption rate is climbing. It’s possible to create thousands, even millions, of microformat instances with simple tweaks to CMS templates. Sites, such as Flickr, have applied the hCard microformat to profile pages

Page 18: Typography on the Web

Leading

Microformats are a fast growing technology! In the first year of microformats, there were many more instances of microformatted data than RSS had in its first year, and the adoption rate is climbing. It’s possible to create thousands, even millions, of microformat instances with simple tweaks to CMS templates. Sites, such as Flickr, have applied the hCard microformat to profile pages

Microformats are a fast growing technology! In the first year of microformats, there were many more instances of microformatted data than RSS had in its first year, and the adoption rate is climbing. It’s possible to create thousands, even millions, of microformat instances

Page 19: Typography on the Web

Leading

Microformats are a fast growing technology! In the first year of microformats, there were many more instances of microformatted data than RSS had in its first year, and the adoption rate is climbing. It’s possible to create thousands, even millions, of microformat instances with simple tweaks to CMS templates. Sites, such as Flickr, have applied the hCard microformat to profile pages

Microformats are a fast growing technology! In the first year of microformats, there were many more instances of microformatted data than RSS had in its first year, and the adoption rate is climbing. It’s possible to create thousands, even millions, of microformat instances

Microformats are a fast growing technology! In the first year of microformats, there were many more instances of microformatted data than RSS had in its first year, and the adoption rate is climbing. It’s possible to create thousands, even millions, of microformat instances with simple tweaks to CMS templates. Sites, such as Flickr,

Page 20: Typography on the Web

Leading

Microformats are a fast growing technology! In the first year of microformats, there were many more instances of microformatted data than RSS had in its first year, and the adoption rate is climbing. It’s possible to create thousands, even millions, of microformat instances with simple tweaks to CMS templates. Sites, such as Flickr, have applied the hCard microformat to profile pages

Microformats are a fast growing technology! In the first year of microformats, there were many more instances of microformatted data than RSS had in its first year, and the adoption rate is climbing. It’s possible to create thousands, even millions, of

Microformats are a fast growing technology! In the first year of microformats, there were many more instances of microformatted data than RSS had in its first year, and the adoption rate is climbing. It’s possible to create thousands, even millions, of microformat instances with simple tweaks to CMS templates.

Page 21: Typography on the Web

Negative Leading

Page 22: Typography on the Web

Kerning

Walker’s avenue

Page 23: Typography on the Web

Walker’s avenueWalker’s avenue

Kerning

Page 24: Typography on the Web

Kerning

Walker’s avenueWalker’s avenue

Page 25: Typography on the Web

JavascriptJavascript

J a v a s c r i p tJ a v a s c r i p t

Tracking

Page 26: Typography on the Web

0401234567

Legibility

0401234567

Page 27: Typography on the Web

0401234567

$126.99

Legibility

0401234567

$126.99

Page 28: Typography on the Web

0401234567

$126.99

RSS from XHTML

Legibility

0401234567

$126.99

RSS from XHTML

Page 29: Typography on the Web

Who cares?

Page 30: Typography on the Web

Thank you