Top Banner
Reading Typography Writing Typography?
66

Reading Typography—Writing Typography

Jan 13, 2015

Download

Education

What makes us read and what makes us write on screen devices?
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Reading Typography—Writing Typography

Reading TypographyWriting Typography?

Page 2: Reading Typography—Writing Typography

Typography: The writing of shapes?

Page 3: Reading Typography—Writing Typography

Typography: The shape of writing?

Page 4: Reading Typography—Writing Typography
Page 5: Reading Typography—Writing Typography

Before the Law

Page 6: Reading Typography—Writing Typography

“Before the law sits a gatekeeper. To this gatekeeper comes a man from the country who asks to gain entry into the law. But the gatekeeper says that he cannot grant him entry at the moment.”—Franz Kafka

Page 7: Reading Typography—Writing Typography

As a philosophy student I thought that “The Law” is the law of the text, in other words: “Rhetoric.”

Page 8: Reading Typography—Writing Typography

15 years later...

Page 9: Reading Typography—Writing Typography

I believe that “Rhetoric” is to speaking what“Typography” is to writing.

Page 10: Reading Typography—Writing Typography
Page 11: Reading Typography—Writing Typography

Inside The Law...

Page 12: Reading Typography—Writing Typography

“Typography has one plain duty before it and that is to convey information in writing.”—Emil Ruder, 1969

Page 13: Reading Typography—Writing Typography

The form in in-formation made conscious (and consciously made) in order to convince.

Page 14: Reading Typography—Writing Typography

Typography

Writing

Information

Reading

Page 15: Reading Typography—Writing Typography

Typography is visualizing information. Webdesign is...

Page 16: Reading Typography—Writing Typography
Page 17: Reading Typography—Writing Typography
Page 18: Reading Typography—Writing Typography
Page 19: Reading Typography—Writing Typography
Page 20: Reading Typography—Writing Typography
Page 21: Reading Typography—Writing Typography
Page 22: Reading Typography—Writing Typography
Page 23: Reading Typography—Writing Typography
Page 24: Reading Typography—Writing Typography
Page 25: Reading Typography—Writing Typography
Page 26: Reading Typography—Writing Typography

5 rules for 95% of Web Design

Page 27: Reading Typography—Writing Typography
Page 28: Reading Typography—Writing Typography
Page 29: Reading Typography—Writing Typography

1. Relative font size

Page 30: Reading Typography—Writing Typography

2. Active white space

Page 31: Reading Typography—Writing Typography

3. Screen friendly line height

Page 32: Reading Typography—Writing Typography

4. Clear color contrast

Page 33: Reading Typography—Writing Typography

5. Discern text and images

Page 34: Reading Typography—Writing Typography

What about the other 5%?

Page 35: Reading Typography—Writing Typography
Page 36: Reading Typography—Writing Typography

Web design is 95% typography and

a little bit of interface design

Page 37: Reading Typography—Writing Typography

Text

Eye

Hand

Read Think

Navigate

Page 38: Reading Typography—Writing Typography

Information Design

Interaction Design

Information Architecture

Interface Design

Typography

Chess

Philosophy

Page 39: Reading Typography—Writing Typography

“Typography has one plain duty before it and that is to convey information in writing.”—Emil Ruder, 1969

Page 40: Reading Typography—Writing Typography

How much reading is in writing?

Page 41: Reading Typography—Writing Typography

Text

Eye

Hand

Read Think

WriteNavigate

Page 42: Reading Typography—Writing Typography
Page 43: Reading Typography—Writing Typography
Page 44: Reading Typography—Writing Typography

Same Rules...

Page 45: Reading Typography—Writing Typography

1. Relative font size

Page 46: Reading Typography—Writing Typography

2. Active white space

Page 47: Reading Typography—Writing Typography

3. Screen friendly line height

Page 48: Reading Typography—Writing Typography

4. Clear color contrast

Page 49: Reading Typography—Writing Typography

5. Discern text and images

Page 50: Reading Typography—Writing Typography

What’s different?

Page 51: Reading Typography—Writing Typography

6. Monospaced (light) font

Page 52: Reading Typography—Writing Typography

Why monospaced?

Page 53: Reading Typography—Writing Typography

Why light?

Page 54: Reading Typography—Writing Typography
Page 55: Reading Typography—Writing Typography
Page 56: Reading Typography—Writing Typography

7. Soup Nazi

Page 57: Reading Typography—Writing Typography

The Soup Nazi Rules

Page 58: Reading Typography—Writing Typography

Yes?

Page 59: Reading Typography—Writing Typography

A. No Navigation!

Page 60: Reading Typography—Writing Typography

B. No Settings!

Page 61: Reading Typography—Writing Typography

C. No Noise!

Page 62: Reading Typography—Writing Typography

D. No Mouse!

Page 63: Reading Typography—Writing Typography

E. No Fumbling With Type!

Page 64: Reading Typography—Writing Typography

F. No Bread for You!

Page 65: Reading Typography—Writing Typography

Next!

Page 66: Reading Typography—Writing Typography

(Thank you)