1. ATLAS WEB
Web Typography

2. How We Read
Our eyes move across a line of text and move information to our brains
Filter words into context
Depending on where you read it, experience is different

3. How We Read Just because its legible doesn’t mean it’s readable TL;DR
Length isn’t the only detractor
Sure, you can read it, but do you want to?

4. How We Read
THE QUICK BROWN FOX JUMPED OVER THE LAZY DOG AND GRUMPY WIZARDS MAKE TOXIC BREW FOR THE EVIL QUEEN AND JACK. The quick brown fox jumped over the lazy dog and grumpy wizards make toxic brew for the evil queen and jack.

5. Readability
THE QUICK BROWN FOX JUMPED OVER THE LAZY DOG AND GRUMPY WIZARDS MAKE TOXIC BREW FOR THE EVIL QUEEN AND JACK. The quick brown fox jumped over the lazy dog and grumpy wizards make toxic brew for the evil queen and jack.

6. Shape Recognition
Simplicity SIMPLICITY

7. Typography in Our Lives
The are no rules for typography
Type is everywhere: Our phones, New papers, books, magazines, billboards, ads, fliers, stickers, computers, games, television, etc.
Good typography is still rare, why?
Too many options?

8. The Unseen
Good typography shouldn’t be noticed

9. Typeface vs. Font?
Helvetica Helvetica.ttf

10. For the Web System Fonts (Web Safe Fonts) Sans-serif
Arial, Calibri, Helvetica, Verdana
Serif
Times New Roman, Georgia, Lucida, Cambria
Monospace
Courier New, Lucida Sans Typewriter
Fantasy
Impact, Copper Plate, Papyrus (Don’t use unless your building a website for a Yoga Studio)
Cursive
Brush Script Std, Comic Sans (Don’t use unless you want to fail the class)

11. Serif
Times New Roman

12. Sans-Serif
Arial Typeface

13. Monospace
Courier New

14. Fantasy
Impact Papyrus

15. Brush Script Comic Sans (Seriously… don’t use this font…)
Cursive
Brush Script Comic Sans (Seriously… don’t use this font…)

16. Font-Family body{ font-family: helvetica, arial, sans-serif; } Pros:
No licensing
Easy to use
Cons:
Limited choices
Fonts must be installed on users computer
User control over your design

17. Helvetica Bodoni Contrast
Higher contrast fonts tend to be better suited for short lengths of text because they can be burdensome to read in longer spans…

18. Weight

19. Weight body{ font-family:helvetica, arial, sans-serif;
font-weight:800; }
Not all typefaces have every weight option available

20. Variant Styles
Bodoni Condensed
Bodoni Black

21. Variant Styles
Bodoni Condensed
Bodoni Black

22. Font Size
Point 8 9 10 11 12 14 18 24 36 48 60 72

23. Font Size
1 point = 1/72in. Default Browser Font Size: 16px Pixel sizes? Slight differences vs. pt Pixel values don’t scale well

24. EMs
.75em = 75% = figcaption 1em = Default browser font size = p, body 1.5em = 150% = h2 2em = 200% = h1

25. @Font-Face
@font-face { font-family: myUniqueFont; src: url(fonts/myFontFile.ttf); } body{

26. @Font-Face Pros: Unique fonts in normal text state
Easy to set up at a base level
No JavaScript needed
Cons:
Different browsers only support certain font types
Potential copyright implications

27. @Font-Face
Font-Squirrel:

28. Font Services & Subscriptions
Google Fonts Adobe Typekit

29. Font Services & Subscriptions
Pros:
Unique fonts in normal text state
Easy to set up
No risk of copyright infringement
Cons:
If the service goes down, fonts will not work
$$$

30. Font Pairing
Text for a moment Text for awhile

31. Attendance Question: Week 4
Compare two real-world examples of products, services, brands, entertainment media, etc. that compete within the same market yet one uses typography successfully while the other does not. Does this stronger use of typography benefit the executor over their competition? How so? Provide URL examples if you can.
Post your question to Edmodo under “Lecture Attendance Question Week 4” Your answer should be approximately one paragraph in length.