Web Typography Fundamentals: From Gutenberg to Google v1

transcript

WEB TYPOGRAPHY FUNDAMENTALS

From Gutenberg to Google

HI THERE.

Bill C. EnglishLead Designer, Tuitive

@billcenglish

HISTORY

VOCABULARY

CONTRAST

TECHNOLOGY

WHAT IS TYPOGRAPHY?

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

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

Web design is 95% typography.

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

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

HISTORY

VOCABULARY

CONTRAST

TECHNOLOGY

crossbar

stroke

counter

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.

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

kerning

trackingletter-spacing {}

baseline

descender

x-height

cap-height

cap-line

ascender

serif sans-serif

modern blackletter

monospaced

dingbatsscript

slab-serif

measure

leadingline-height {}

flush left, ragged righttext-align { left; }

center-justifiedtext-align { center; }

flush right, ragged lefttext-align { right; }

flush left, flush righttext-align { justify; }

force justified

orphan

HISTORY

VOCABULARY

CONTRAST

TECHNOLOGY

WEIGHT

STRUCTURE

A Contrast In Form

a contrast in form

A CONTRAST IN FORM

DIRECTION

TEXTURE

CONCORD

Removal of contrast to give elements a uniform impression

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

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

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

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

HISTORY

VOCABULARY

CONTRAST

TECHNOLOGY

WEB SAFE FONTS

Arial Black

Comic Sans

Courier New

Georgia

Times New Roman

Trebuchet MS

Verdana

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%

Lucida Sans Unicode

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

THE C FONTS

Calibri

Cambria

Candara

Consolas

Constantia

Corbel

FONT STACKS

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

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

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; }

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”

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

@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

@FONT-FACE

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

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

HISTORY

VOCABULARY

CONTRAST

TECHNOLOGY

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

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

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.

A smidgen of type

A SMIDGEN OF TYPE

QUESTIONS?

Bill C. EnglishLead Designer, Tuitive

@billcenglish