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