+ All Categories
Home > Business > A touch of typography responsive typography

A touch of typography responsive typography

Date post: 23-Dec-2014
Category:
Upload: mark-jong
View: 1,118 times
Download: 4 times
Share this document with a friend
Description:
 
Popular Tags:
133
A Touch of Typography a story about responsive tography
Transcript
Page 1: A touch of typography  responsive typography

A Touch

of Typography

a story about responsive typography

Page 2: A touch of typography  responsive typography

A Touch of Typography by mark de jong

Responsive Typography

What is

Page 3: A touch of typography  responsive typography

A Touch by

What is

It's a piece of the large Responsive Web Design puzzle

Page 4: A touch of typography  responsive typography

What is

A Touch by

Page 5: A touch of typography  responsive typography

What is

A Touch by

Layout flow

Page 6: A touch of typography  responsive typography

What is

A Touch by

Layout flow

Responsive images

Page 7: A touch of typography  responsive typography

What is

A Touch by

Layout flow

Responsive images

Device orientation

Page 8: A touch of typography  responsive typography

What is

A Touch by

Layout flow

Responsive images

Device orientation

Responsive Content

Page 9: A touch of typography  responsive typography

What is

A Touch by

CSS Media queries

Page 10: A touch of typography  responsive typography

A Touch by

What is

But what does the term actually mean?

Page 11: A touch of typography  responsive typography

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

Page 12: A touch of typography  responsive typography

A Touch by

What is

It’s not about pixel-perfection anymore

Page 13: A touch of typography  responsive typography

A Touch by

What is

Page 14: A touch of typography  responsive typography

A Touch by

What is

Keeping content legible across devices

Page 15: A touch of typography  responsive typography

A Touch by

What is

Keeping content legible across devices

Page 16: A touch of typography  responsive typography

A Touch by

What is

Keeping content legible across devices

Page 17: A touch of typography  responsive typography

A Touch of Typography by mark de jong

The Current Situation

What is

Page 18: A touch of typography  responsive typography

A Touch by

Ever-increasing number of devices

What is

Page 19: A touch of typography  responsive typography

A Touch by

What is

Page 20: A touch of typography  responsive typography

A Touch by

What is

Page 21: A touch of typography  responsive typography

A Touch by

What is

Page 22: A touch of typography  responsive typography

A Touch by

What is

Page 23: A touch of typography  responsive typography

A Touch by

What is

Page 24: A touch of typography  responsive typography

A Touch by

What is

Page 25: A touch of typography  responsive typography

A Touch by

What is

Page 26: A touch of typography  responsive typography

A Touch by

Different reading distances

What is

Page 27: A touch of typography  responsive typography

A Touch by

What is

half arm-length

Page 28: A touch of typography  responsive typography

A Touch by

What is

arm-length

Page 29: A touch of typography  responsive typography

A Touch by

What is

1½ arm-length

Page 30: A touch of typography  responsive typography

A Touch by

Doesn’t stop at current popular devices

What is

Page 31: A touch of typography  responsive typography

A Touch by

What is

Page 32: A touch of typography  responsive typography

A Touch by

What is

Page 33: A touch of typography  responsive typography

A Touch by

What is

Page 34: A touch of typography  responsive typography

A Touch by

What is

Page 35: A touch of typography  responsive typography

A Touch by

Perceived size matters

What is

Page 36: A touch of typography  responsive typography

A Touch by

What is

Page 37: A touch of typography  responsive typography

A Touch by

What is

Page 38: A touch of typography  responsive typography

A Touch by

What is

Page 39: A touch of typography  responsive typography

A Touch by

What is

Page 40: A touch of typography  responsive typography

A Touch by

Wrong examples

What is

Page 41: A touch of typography  responsive typography

A Touch by

What is

Page 42: A touch of typography  responsive typography

A Touch by

What is

Navigation too tiny

Page 43: A touch of typography  responsive typography

A Touch by

What is

Navigation too tiny

Redirect to mobile site

Page 44: A touch of typography  responsive typography

A Touch by

What is

Navigation too tiny

Redirect to mobile site

Wrong spacing

Page 45: A touch of typography  responsive typography

A Touch of Typography by mark de jong

A Viable Solution

Coming up with

Page 46: A touch of typography  responsive typography

A Touch by

Set a benchmark for size

Coming up with

Page 47: A touch of typography  responsive typography

A Touch by

Don’t go below a 12 pixel font size

Coming up with

Page 48: A touch of typography  responsive typography

A Touch by

It’s not only about font-size

aaaComing up with

Page 49: A touch of typography  responsive typography

A Touch by

Take things in perspective

Coming up with

Page 50: A touch of typography  responsive typography

A Touch by

A good foundation is half the business

Coming up with

Page 51: A touch of typography  responsive typography

A Touch by

Coming up with

Decide on your font

Page 52: A touch of typography  responsive typography

A Touch by

Coming up with

Decide on your font

Page 53: A touch of typography  responsive typography

A Touch by

Good Examples

Coming up with

Page 54: A touch of typography  responsive typography

A Touch by

Coming up with

Page 55: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

Page 56: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

Page 57: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

Page 58: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 59: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 60: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 61: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 62: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 63: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 64: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 65: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 66: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 67: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 68: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 69: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 70: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 71: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 72: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 73: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 74: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 75: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 76: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 77: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 78: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 79: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 80: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 81: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 82: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 83: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 84: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 85: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 86: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 87: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 88: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 89: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 90: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 91: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 92: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 93: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 94: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 95: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 96: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 97: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 98: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 99: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 100: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 101: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 102: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 103: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 104: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 105: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 106: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 107: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 108: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 109: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 110: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 111: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 112: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 113: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 114: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 115: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 116: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 117: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 118: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 119: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good first impression

+ Very clear form styles

+ Nice listing of speakers

– Too long page to read

Page 120: A touch of typography  responsive typography

A Touch by

Coming up with

Page 121: A touch of typography  responsive typography

A Touch by

Coming up with

+ Pleasant to the eye

Page 122: A touch of typography  responsive typography

A Touch by

Coming up with

+ Pleasant to the eye

+ Nice letter spacing/margin

Page 123: A touch of typography  responsive typography

A Touch by

Coming up with

+ Pleasant to the eye

+ Nice letter spacing/margin

– Some headers too small

Page 124: A touch of typography  responsive typography

A Touch by

Coming up with

Page 125: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good reading content

+ Clear font size

Page 126: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good reading content

+ Clear font size

+ Nice white-spacing

Page 127: A touch of typography  responsive typography

A Touch by

Coming up with

+ Good reading content

+ Clear font size

+ Nice white-spacing

– Order image/title

Page 128: A touch of typography  responsive typography

A Touch of Typography by mark de jong

That We Can Do

What is it

Page 129: A touch of typography  responsive typography

A Touch by

Design or develop responsively and responsibly

Coming up with

Page 130: A touch of typography  responsive typography

A Touch by

Widgets are hitchhiking on global or page styling

Coming up with

Page 131: A touch of typography  responsive typography

A Touch by

Be aware of content styling and spacing

Coming up with

Page 132: A touch of typography  responsive typography

Thank you

A Touch by

Page 133: A touch of typography  responsive typography

Thank you

A Touch by

http://moteam.co/master-of-moustache

Master of Moustache


Recommended