Post on 23-Dec-2014
description
transcript
A Touch
of Typography
a story about responsive typography
A Touch of Typography by mark de jong
Responsive Typography
What is
A Touch by
What is
It's a piece of the large Responsive Web Design puzzle
What is
A Touch by
What is
A Touch by
Layout flow
What is
A Touch by
Layout flow
Responsive images
What is
A Touch by
Layout flow
Responsive images
Device orientation
What is
A Touch by
Layout flow
Responsive images
Device orientation
Responsive Content
What is
A Touch by
CSS Media queries
A Touch by
What is
But what does the term actually mean?
A Touch by
Responsive Typography | rɪˈspɒnsɪv tʌɪˈpɒgrəfi | technical term
1. is the use of fonts adapting to different environments while maintaining legibility with the overall layout still intact.
What is
A Touch by
What is
It’s not about pixel-perfection anymore
A Touch by
What is
A Touch by
What is
Keeping content legible across devices
A Touch by
What is
Keeping content legible across devices
A Touch by
What is
Keeping content legible across devices
A Touch of Typography by mark de jong
The Current Situation
What is
A Touch by
Ever-increasing number of devices
What is
A Touch by
What is
A Touch by
What is
A Touch by
What is
A Touch by
What is
A Touch by
What is
A Touch by
What is
A Touch by
What is
A Touch by
Different reading distances
What is
A Touch by
What is
half arm-length
A Touch by
What is
arm-length
A Touch by
What is
1½ arm-length
A Touch by
Doesn’t stop at current popular devices
What is
A Touch by
What is
A Touch by
What is
A Touch by
What is
A Touch by
What is
A Touch by
Perceived size matters
What is
A Touch by
What is
A Touch by
What is
A Touch by
What is
A Touch by
What is
A Touch by
Wrong examples
What is
A Touch by
What is
A Touch by
What is
Navigation too tiny
A Touch by
What is
Navigation too tiny
Redirect to mobile site
A Touch by
What is
Navigation too tiny
Redirect to mobile site
Wrong spacing
A Touch of Typography by mark de jong
A Viable Solution
Coming up with
A Touch by
Set a benchmark for size
Coming up with
A Touch by
Don’t go below a 12 pixel font size
Coming up with
A Touch by
It’s not only about font-size
aaaComing up with
A Touch by
Take things in perspective
Coming up with
A Touch by
A good foundation is half the business
Coming up with
A Touch by
Coming up with
Decide on your font
A Touch by
Coming up with
Decide on your font
A Touch by
Good Examples
Coming up with
A Touch by
Coming up with
A Touch by
Coming up with
+ Good first impression
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
+ Good first impression
+ Very clear form styles
+ Nice listing of speakers
– Too long page to read
A Touch by
Coming up with
A Touch by
Coming up with
+ Pleasant to the eye
A Touch by
Coming up with
+ Pleasant to the eye
+ Nice letter spacing/margin
A Touch by
Coming up with
+ Pleasant to the eye
+ Nice letter spacing/margin
– Some headers too small
A Touch by
Coming up with
A Touch by
Coming up with
+ Good reading content
+ Clear font size
A Touch by
Coming up with
+ Good reading content
+ Clear font size
+ Nice white-spacing
A Touch by
Coming up with
+ Good reading content
+ Clear font size
+ Nice white-spacing
– Order image/title
A Touch of Typography by mark de jong
That We Can Do
What is it
A Touch by
Design or develop responsively and responsibly
Coming up with
A Touch by
Widgets are hitchhiking on global or page styling
Coming up with
A Touch by
Be aware of content styling and spacing
Coming up with
Thank you
A Touch by
Thank you
A Touch by
http://moteam.co/master-of-moustache
Master of Moustache