Web Typography Fundamentals: From Gutenberg to Google v1

101
WEB TYPOGRAPHY FUNDAMENTALS From Gutenberg to Google

description

 

Transcript of Web Typography Fundamentals: From Gutenberg to Google v1

Page 1: Web Typography Fundamentals: From Gutenberg to Google  v1

WEB TYPOGRAPHY FUNDAMENTALS

From Gutenberg to Google

Page 2: Web Typography Fundamentals: From Gutenberg to Google  v1

HI THERE.

Bill C. EnglishLead Designer, Tuitive

@billcenglish

Page 3: Web Typography Fundamentals: From Gutenberg to Google  v1
Page 4: Web Typography Fundamentals: From Gutenberg to Google  v1
Page 5: Web Typography Fundamentals: From Gutenberg to Google  v1
Page 6: Web Typography Fundamentals: From Gutenberg to Google  v1
Page 7: Web Typography Fundamentals: From Gutenberg to Google  v1
Page 8: Web Typography Fundamentals: From Gutenberg to Google  v1

HISTORY

VOCABULARY

CONTRAST

TECHNOLOGY

TIPS

Page 9: Web Typography Fundamentals: From Gutenberg to Google  v1
Page 10: Web Typography Fundamentals: From Gutenberg to Google  v1
Page 11: Web Typography Fundamentals: From Gutenberg to Google  v1
Page 12: Web Typography Fundamentals: From Gutenberg to Google  v1
Page 13: Web Typography Fundamentals: From Gutenberg to Google  v1
Page 14: Web Typography Fundamentals: From Gutenberg to Google  v1
Page 15: Web Typography Fundamentals: From Gutenberg to Google  v1
Page 16: Web Typography Fundamentals: From Gutenberg to Google  v1
Page 17: Web Typography Fundamentals: From Gutenberg to Google  v1
Page 18: Web Typography Fundamentals: From Gutenberg to Google  v1
Page 19: Web Typography Fundamentals: From Gutenberg to Google  v1

WHAT IS TYPOGRAPHY?

Design or selection of letter forms to be organized into words and sentences and printed or displayed electronically

Page 20: Web Typography Fundamentals: From Gutenberg to Google  v1

WHAT IS GOOD TYPOGRAPHY?

Stresses legibility and communication

Draws attention to itself, then relinquishes the attention it has drawn

Gives letters a “living energy”

More than just picking out fonts

Page 21: Web Typography Fundamentals: From Gutenberg to Google  v1

Web design is 95% typography.

Source: http://informationarchitects.jp/the-web-is-all-about-typography-period/

Page 22: Web Typography Fundamentals: From Gutenberg to Google  v1
Page 23: Web Typography Fundamentals: From Gutenberg to Google  v1
Page 24: Web Typography Fundamentals: From Gutenberg to Google  v1
Page 25: Web Typography Fundamentals: From Gutenberg to Google  v1
Page 26: Web Typography Fundamentals: From Gutenberg to Google  v1
Page 27: Web Typography Fundamentals: From Gutenberg to Google  v1
Page 28: Web Typography Fundamentals: From Gutenberg to Google  v1

WHAT IS GOOD WEB TYPOGRAPHY?

Optimize readability, accessibility, usability, and overall graphic balance

Succeed despite limited font choices and poor screen resolution

Treats the text as a user interface, not a canvas

Page 29: Web Typography Fundamentals: From Gutenberg to Google  v1

HISTORY

VOCABULARY

CONTRAST

TECHNOLOGY

TIPS

Page 30: Web Typography Fundamentals: From Gutenberg to Google  v1

crossbar

stroke

stem

Page 31: Web Typography Fundamentals: From Gutenberg to Google  v1

arms

counter

bowl

tail

leg

Page 32: Web Typography Fundamentals: From Gutenberg to Google  v1

point

The smallest of the typographical measuring units. 1 point equals 1/72 inch. There are 12 points in a Pica.

emSquare unit of measurement equal to the point size of the current font.

enOne half of an em.

Page 33: Web Typography Fundamentals: From Gutenberg to Google  v1

font

A complete character set of a single size of a particular typeface (ex: Arial 10pt).

type·face

One or more fonts designed with stylistic unity (ex: Arial).

Page 34: Web Typography Fundamentals: From Gutenberg to Google  v1

kerning

Page 35: Web Typography Fundamentals: From Gutenberg to Google  v1

trackingletter-spacing {}

Page 36: Web Typography Fundamentals: From Gutenberg to Google  v1

baseline

Page 37: Web Typography Fundamentals: From Gutenberg to Google  v1

descender

Page 38: Web Typography Fundamentals: From Gutenberg to Google  v1

x-height

Page 39: Web Typography Fundamentals: From Gutenberg to Google  v1

cap-height

cap-line

Page 40: Web Typography Fundamentals: From Gutenberg to Google  v1

ascender

Page 41: Web Typography Fundamentals: From Gutenberg to Google  v1

serif

Page 42: Web Typography Fundamentals: From Gutenberg to Google  v1

serif sans-serif

Page 43: Web Typography Fundamentals: From Gutenberg to Google  v1

modern blackletter

monospaced

dingbatsscript

slab-serif

Page 44: Web Typography Fundamentals: From Gutenberg to Google  v1

measure

Page 45: Web Typography Fundamentals: From Gutenberg to Google  v1

leadingline-height {}

Page 46: Web Typography Fundamentals: From Gutenberg to Google  v1

flush left, ragged righttext-align { left; }

center-justifiedtext-align { center; }

flush right, ragged lefttext-align { right; }

Page 47: Web Typography Fundamentals: From Gutenberg to Google  v1

flush left, flush righttext-align { justify; }

force justified

Page 48: Web Typography Fundamentals: From Gutenberg to Google  v1

orphan

widow

rag

Page 49: Web Typography Fundamentals: From Gutenberg to Google  v1

HISTORY

VOCABULARY

CONTRAST

TECHNOLOGY

TIPS

Page 50: Web Typography Fundamentals: From Gutenberg to Google  v1

SIZE

Page 51: Web Typography Fundamentals: From Gutenberg to Google  v1
Page 52: Web Typography Fundamentals: From Gutenberg to Google  v1
Page 53: Web Typography Fundamentals: From Gutenberg to Google  v1

WEIGHT

Page 54: Web Typography Fundamentals: From Gutenberg to Google  v1
Page 55: Web Typography Fundamentals: From Gutenberg to Google  v1
Page 56: Web Typography Fundamentals: From Gutenberg to Google  v1

STRUCTURE

Page 57: Web Typography Fundamentals: From Gutenberg to Google  v1
Page 58: Web Typography Fundamentals: From Gutenberg to Google  v1
Page 59: Web Typography Fundamentals: From Gutenberg to Google  v1
Page 60: Web Typography Fundamentals: From Gutenberg to Google  v1

FORM

Page 61: Web Typography Fundamentals: From Gutenberg to Google  v1

A Contrast In Form

a contrast in form

A CONTRAST IN FORM

Page 62: Web Typography Fundamentals: From Gutenberg to Google  v1
Page 63: Web Typography Fundamentals: From Gutenberg to Google  v1

COLOR

Page 64: Web Typography Fundamentals: From Gutenberg to Google  v1
Page 65: Web Typography Fundamentals: From Gutenberg to Google  v1
Page 66: Web Typography Fundamentals: From Gutenberg to Google  v1

DIRECTION

Page 67: Web Typography Fundamentals: From Gutenberg to Google  v1
Page 68: Web Typography Fundamentals: From Gutenberg to Google  v1
Page 69: Web Typography Fundamentals: From Gutenberg to Google  v1
Page 70: Web Typography Fundamentals: From Gutenberg to Google  v1

TEXTURE

Page 71: Web Typography Fundamentals: From Gutenberg to Google  v1
Page 72: Web Typography Fundamentals: From Gutenberg to Google  v1
Page 73: Web Typography Fundamentals: From Gutenberg to Google  v1
Page 74: Web Typography Fundamentals: From Gutenberg to Google  v1

CONCORD

Removal of contrast to give elements a uniform impression

Type blocks are designed to achieve an equal level of lightness and darkness

Page 75: Web Typography Fundamentals: From Gutenberg to Google  v1
Page 76: Web Typography Fundamentals: From Gutenberg to Google  v1

VISUAL HIERARCHY

Divide up the screen and tell users what is most important

Create typographic “anchors” to move the users eye across and down the screen

Page 77: Web Typography Fundamentals: From Gutenberg to Google  v1

Athletes confused by Olympic social media rulesBy Mark McClusky, WiredFebruary 5, 2010 4:57 p.m. ESTAmerican skier Lindsey Vonn, one of the potential stars of the 2010 Winter Olympics, told her nearly 35,000 Twitter followers that she would not be posting to the social network until after the Games were over, perhaps based on a faulty understanding of the International Olympic Committee's rules on blogging and social networking. Read more

Page 78: Web Typography Fundamentals: From Gutenberg to Google  v1

Athletes confused by Olympic social media rulesBy Mark McClusky, WiredFebruary 5, 2010 4:57 p.m. ESTAmerican skier Lindsey Vonn, one of the potential stars of the 2010 Winter Olympics, told her nearly 35,000 Twitter followers that she would not be posting to the social network until after the Games were over, perhaps based on a faulty understanding of the International Olympic Committee's rules on blogging and social networking. Read more

Page 79: Web Typography Fundamentals: From Gutenberg to Google  v1

Athletes confused by Olympic social media rulesBy Mark McClusky, WiredFebruary 5, 2010 4:57 p.m. ESTAmerican skier Lindsey Vonn, one of the potential stars of the 2010 Winter Olympics, told her nearly 35,000 Twitter followers that she would not be posting to the social network until after the Games were over, perhaps based on a faulty understanding of the International Olympic Committee's rules on blogging and social networking. Read more

Page 80: Web Typography Fundamentals: From Gutenberg to Google  v1

Athletes confused by Olympic social media rulesBy Mark McClusky, WiredFebruary 5, 2010 4:57 p.m. EST

American skier Lindsey Vonn, one of the potential stars of the 2010 Winter Olympics, told her nearly 35,000 Twitter followers that she would not be posting to the social network until after the Games were over, perhaps based on a faulty understanding of the International Olympic Committee's rules on blogging and social networking. Read more

Page 81: Web Typography Fundamentals: From Gutenberg to Google  v1

Athletes confused by Olympic social media rulesBy Mark McClusky, WiredFebruary 5, 2010 4:57 p.m. EST

American skier Lindsey Vonn, one of the potential stars of the 2010 Winter Olympics, told her nearly 35,000 Twitter followers that she would not be posting to the social network until after the Games were over, perhaps based on a faulty understanding of the International Olympic Committee's rules on blogging and social networking. Read more

Page 82: Web Typography Fundamentals: From Gutenberg to Google  v1

Athletes confused by Olympic social media rulesBy Mark McClusky, WiredFebruary 5, 2010 4:57 p.m. EST

American skier Lindsey Vonn, one of the potential stars of the 2010 Winter Olympics, told her nearly 35,000 Twitter followers that she would not be posting to the social network until after the Games were over, perhaps based on a faulty understanding of the International Olympic Committee's rules on blogging and social networking. Read more

Page 83: Web Typography Fundamentals: From Gutenberg to Google  v1
Page 84: Web Typography Fundamentals: From Gutenberg to Google  v1

HISTORY

VOCABULARY

CONTRAST

TECHNOLOGY

TIPS

Page 85: Web Typography Fundamentals: From Gutenberg to Google  v1

WEB SAFE FONTS

Arial

Arial Black

Comic Sans

Courier New

Georgia

Times New Roman

Trebuchet MS

Verdana

Page 86: Web Typography Fundamentals: From Gutenberg to Google  v1

MAC

Helvetica 99.7%

Lucida Grande 99.1%

Geneva 98.8%

Hoefler Text 88.7%

Baskerville 88.6%

Didot 87.7%

Big Caslon 85.1%

Palatino 79.7%

PC

Lucida Sans Unicode

98.3%

Palatino Linotype 98%

Franklin Gothic 97.9%

Book Antiqua 86.1%

Garamond 86.2%

Gill Sans MT 51.7%

Goudy Old Style 51.3%

Baskerville Old Face

49.1%

Page 87: Web Typography Fundamentals: From Gutenberg to Google  v1

THE C FONTS

Calibri

Cambria

Candara

Consolas

Constantia

Corbel

Page 88: Web Typography Fundamentals: From Gutenberg to Google  v1

FONT STACKS

p { font-family: Arial, Helvetica, sans-serif; }

p.serif { font-family: Georgia, "Times New Roman", Times, serif; }

Page 89: Web Typography Fundamentals: From Gutenberg to Google  v1

FONT STACKS

p { font-family: Arial, Helvetica, sans-serif; }

p.serif { font-family: Georgia, "Times New Roman", Times, serif; }

p { font-family: Geneva, “Lucida Sans”, “Lucida Grande”, “Lucida Sans Unicode”, Verdana, sans-serif; }

p.serif { font-family: Palatino, “Palatino Linotype”, Georgia, Times, “Times New Roman”, serif; }

Page 90: Web Typography Fundamentals: From Gutenberg to Google  v1

sIFR

Combination of Flash, CSS, and JavaScript

Checks if Flash is installed and replaces text

Selectable, customizable, degrades gracefully

Steep learning curve, cumbersome scripting

Makes page load feel “clunky”

Page 91: Web Typography Fundamentals: From Gutenberg to Google  v1

CUFÓN

JavaScript only

Uses VML (Vector Markup Language) for Internet Explorer and HTML5 Canvas for advanced browsers

Fast loading

Violates EULA agreements for some font files, text not selectable, no hover states

Page 92: Web Typography Fundamentals: From Gutenberg to Google  v1

@FONT-FACE

CSS3 declaration

Standards-compliant, fast loading, easy to use

Not all fonts designed for screen usage, especially at small sizes

Maybe a little too easy to use

Page 93: Web Typography Fundamentals: From Gutenberg to Google  v1

@FONT-FACE

@font-face {font-family: Delicious;src: url('Delicious-Roman.otf');

}

h3 { font-family: Delicious, sans-serif; }

Page 94: Web Typography Fundamentals: From Gutenberg to Google  v1
Page 95: Web Typography Fundamentals: From Gutenberg to Google  v1

HISTORY

VOCABULARY

CONTRAST

TECHNOLOGY

TIPS

Page 96: Web Typography Fundamentals: From Gutenberg to Google  v1

GUIDELINES

Read the text before designing it

Get away from “lorem ipsum” or dummy text as soon as possible

Don’t use a font you don’t need

Consolidate similar sizes and treatments

Don’t stretch or squeeze

Page 97: Web Typography Fundamentals: From Gutenberg to Google  v1

LEGIBILITY & READABILITY

Optimal measure is 45-75 characters

Use italic and bold for emphasis but avoid using for large blocks of text

Beware of too much or too little contrast with background color

All caps fine for titles and headlines, not recommended for sentences or long blocks of type

Page 98: Web Typography Fundamentals: From Gutenberg to Google  v1

It deosn't mttaer in waht oredr the ltteers in a wrod are, olny taht the frist and lsat ltteres are at the rghit pcleas. Tihs is bcuseae we do not raed ervey lteter by ilstef, but the wrod as a wlohe.

Page 99: Web Typography Fundamentals: From Gutenberg to Google  v1

A smidgen of type

A SMIDGEN OF TYPE

Page 100: Web Typography Fundamentals: From Gutenberg to Google  v1
Page 101: Web Typography Fundamentals: From Gutenberg to Google  v1

QUESTIONS?

Bill C. EnglishLead Designer, Tuitive

@billcenglish