webType
Readability is one of themore important aspectsof web design usability.
Readability is one of themore important aspectsof web design usability. Bad Readability Scares users away Confuses content...
Readability is one of themore important aspectsof web design usability.Good ReadabilityAllows viewer to process informatio...
But     First,Let’s take a step back,   and look at the  basics of web type.
what the #@%! areWeb -Sa fe               fonts?
Web-Sa fe Fontsthese arefonts thatare commonon bothMac and PCcomputers.
Web-Sa fe Fontsthese arefonts thatare commonon bothMac and PCcomputers.
Web-Sa fe Fonts
Boring!!Can’t I just make’umartwork?
No!      The majority of text      must remain ‘live’ for      a variety of reasons.
No!            The majority of text            must remain ‘live’ for            a variety of reasons.SEO      A picture m...
No!             The majority of text             must remain ‘live’ for             a variety of reasons. SEO       A pict...
No!              The majority of text              must remain ‘live’ for              a variety of reasons.  SEO        A...
No!              The majority of text              must remain ‘live’ for              a variety of reasons.  SEO        A...
Wait...What do you mean, make itB i gger?!?
Bigger? Web type must remain scalable.  • For rendering in different browsers    and screen resolutions  • For the hard of...
But thenI loose all sorts ofCo ntro l.
Welcom e to  Web Des i gn
BUT...                          there are things                         we can do to help.ESTABLISHHIERARCHYIt defines ho...
BUT...                          there are things                         we can do to help.ESTABLISH                      ...
BUT...                               there are things                              we can do to help.LINE HEIGHT          ...
BUT...                               there are things                              we can do to help.LINE HEIGHT          ...
B e ATYPE    HERO
USER FRIENDLYHEADERS
SCANNABLETEXT
WHITESPACE
CONSISTENCY
USESEPARATORS
GRids.   Nathan Smith 960 Grid System                 960.gs           USE‘EM.
GRids.
GRids.
Respons  ive      i gn
Hello?What about font services?  It’s 2011!
OK, ya got me.  Yes, There are  services that allow  you to expand your  web font library.
OK, ya got me.
Pros’—Cons’• Allows for more design  flexibility• Maintains SEO and CMS• Easy to make content and  style edits• CSS3 encod...
Pros’—Cons’• Allows for more design      • Increases loading time  flexibility                              • Some cost mo...
Cool!
Bold!
Fresh!
Web typography
Upcoming SlideShare
Loading in …5
×

Web typography

488 views

Published on

This is an internal company presentation given at web design training seminar. It was about web typography and understanding the way type works within the web world.

Published in: Design, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
488
On SlideShare
0
From Embeds
0
Number of Embeds
51
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web typography

  1. 1. webType
  2. 2. Readability is one of themore important aspectsof web design usability.
  3. 3. Readability is one of themore important aspectsof web design usability. Bad Readability Scares users away Confuses content with navigation
  4. 4. Readability is one of themore important aspectsof web design usability.Good ReadabilityAllows viewer to process informationAide in forming hierarchySets the tone of your site
  5. 5. But First,Let’s take a step back, and look at the basics of web type.
  6. 6. what the #@%! areWeb -Sa fe fonts?
  7. 7. Web-Sa fe Fontsthese arefonts thatare commonon bothMac and PCcomputers.
  8. 8. Web-Sa fe Fontsthese arefonts thatare commonon bothMac and PCcomputers.
  9. 9. Web-Sa fe Fonts
  10. 10. Boring!!Can’t I just make’umartwork?
  11. 11. No! The majority of text must remain ‘live’ for a variety of reasons.
  12. 12. No! The majority of text must remain ‘live’ for a variety of reasons.SEO A picture may be worth 1,000 words....but not to Google.
  13. 13. No! The majority of text must remain ‘live’ for a variety of reasons. SEO A picture may be worth 1,000 words....but not to Google.CMS Content needs to stay fresh, and we don’t want our clients anywhere near photoshop!
  14. 14. No! The majority of text must remain ‘live’ for a variety of reasons. SEO A picture may be worth 1,000 words....but not to Google. CMS Content needs to stay fresh, and we don’t want our clients anywhere near photoshop!Scale What? You can’t read it? Well just make it bigger.
  15. 15. No! The majority of text must remain ‘live’ for a variety of reasons. SEO A picture may be worth 1,000 words....but not to Google. CMS Content needs to stay fresh, and we don’t want our clients anywhere near photoshop!Scale What? You can’t read it? Well just make it bigger. Size Because my Aunt Gertrude in Nebraska still has a 56k modem.
  16. 16. Wait...What do you mean, make itB i gger?!?
  17. 17. Bigger? Web type must remain scalable. • For rendering in different browsers and screen resolutions • For the hard of sight • And, for the really hard of sight • Screen Readers
  18. 18. But thenI loose all sorts ofCo ntro l.
  19. 19. Welcom e to Web Des i gn
  20. 20. BUT... there are things we can do to help.ESTABLISHHIERARCHYIt defines how to read throughcontent. It shows the userwhere to start reading andwhere to read through.
  21. 21. BUT... there are things we can do to help.ESTABLISH CONTRASTHIERARCHY Good contrasts will makeIt defines how to read through text easy on the eyes, easycontent. It shows the user to scan quickly, and overallwhere to start reading and more readable.where to read through.
  22. 22. BUT... there are things we can do to help.LINE HEIGHT CONTRASTLine height that is too short Good contrasts will makewill cause users to squint text easy on the eyes, easywhile reading. If it is too to scan quickly, and overalllarge, the text will seem like more readable.separate bodies instead ofgrouped together as one.
  23. 23. BUT... there are things we can do to help.LINE HEIGHT LINE LENGTHLine height that is too short A good line length is onewill cause users to squint that allows the reader’swhile reading. If it is too eyes to flow from the endlarge, the text will seem like of one line to the beginningseparate bodies instead of of the next very easily andgrouped together as one. naturally.
  24. 24. B e ATYPE HERO
  25. 25. USER FRIENDLYHEADERS
  26. 26. SCANNABLETEXT
  27. 27. WHITESPACE
  28. 28. CONSISTENCY
  29. 29. USESEPARATORS
  30. 30. GRids. Nathan Smith 960 Grid System 960.gs USE‘EM.
  31. 31. GRids.
  32. 32. GRids.
  33. 33. Respons ive i gn
  34. 34. Hello?What about font services? It’s 2011!
  35. 35. OK, ya got me. Yes, There are services that allow you to expand your web font library.
  36. 36. OK, ya got me.
  37. 37. Pros’—Cons’• Allows for more design flexibility• Maintains SEO and CMS• Easy to make content and style edits• CSS3 encoding on the rise
  38. 38. Pros’—Cons’• Allows for more design • Increases loading time flexibility • Some cost money or have• Maintains SEO and CMS licensing requirements• Easy to make content and • Relying on a 3rd party service style edits • Potential render issues or delay• CSS3 encoding on the rise • Adds development time
  39. 39. Cool!
  40. 40. Bold!
  41. 41. Fresh!

×