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.

1. webType

2. Readability is one of the
more important aspects
of web design usability.

3. Readability is one of the
more important aspects
of web design usability.
Bad Readability
Scares users away
Confuses content with navigation

4. Readability is one of the
more important aspects
of web design usability.
Good Readability
Allows viewer to process information
Aide in forming hierarchy
Sets the tone of your site

5. But
First,
Let’s take a step back,
and look at the
basics of web type.

6. what the #@%! are
Web -Sa fe
fonts?

7. Web-Sa fe Fonts
these are
fonts that
are common
on both
Mac and PC
computers.

8. Web-Sa fe Fonts
these are
fonts that
are common
on both
Mac and PC
computers.

9. Web-Sa fe Fonts

10. Boring!!
Can’t I just make’um
artwork?

11. No!
The majority of text
must remain ‘live’ for
a variety of reasons.

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. 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. 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. 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. Wait...
What do you
mean, make it
B i gger?!?

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. But then
I loose all sorts of
Co ntro l.

19. Welcom e to
Web Des i gn

20. BUT...
there are things
we can do to help.
ESTABLISH
HIERARCHY
It defines how to read through
content. It shows the user
where to start reading and
where to read through.

21. BUT...
there are things
we can do to help.
ESTABLISH CONTRAST
HIERARCHY Good contrasts will make
It defines how to read through text easy on the eyes, easy
content. It shows the user to scan quickly, and overall
where to start reading and more readable.
where to read through.

22. BUT...
there are things
we can do to help.
LINE HEIGHT CONTRAST
Line height that is too short Good contrasts will make
will cause users to squint text easy on the eyes, easy
while reading. If it is too to scan quickly, and overall
large, the text will seem like more readable.
separate bodies instead of
grouped together as one.

23. BUT...
there are things
we can do to help.
LINE HEIGHT LINE LENGTH
Line height that is too short A good line length is one
will cause users to squint that allows the reader’s
while reading. If it is too eyes to flow from the end
large, the text will seem like of one line to the beginning
separate bodies instead of of the next very easily and
grouped together as one. naturally.

24. B e A
TYPE HERO

25. USER FRIENDLY
HEADERS

26. SCANNABLE
TEXT

27. WHITE
SPACE

28. CONSISTENCY

29. USE
SEPARATORS

30. GRids.
Nathan Smith 960 Grid System
960.gs
USE‘EM.

31. GRids.

32. GRids.

33. Respons ive
i gn

35. Hello?
What about font services?
It’s 2011!

36. OK, ya got me.
Yes, There are
services that allow
you to expand your
web font library.

37. OK, ya got me.

38. Pros’—Cons’
• Allows for more design
flexibility
• Maintains SEO and CMS
• Easy to make content and
style edits
• CSS3 encoding on the rise

39. 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

40. Cool!

41. Bold!

42. Fresh!