Web Typography Fundamentals: From Gutenberg to Google v1

Web Typography Fundamentals
From Gutenberg to Google

Hi There.
Bill C. EnglishLead Designer, Tuitive@billcenglish

HistoryVocabularyContrastTechnologyTips

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

crossbar
stroke
stem

arms
bowl
counter
leg
tail

point
The smallest of the typographical measuring units. 1 point equals 1/72 inch. There are 12 points in a Pica.
em
Square unit of measurement equal to the point size of the current font.
en
One half of an em.

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

kerning

tracking
letter-spacing {}

baseline

descender

x-height

cap-line
cap-height

ascender

serif
sans-serif

modern
blackletter
monospaced
slab-serif
dingbats
script

measure

leading
line-height {}

flush left, ragged right
text-align { left; }
center-justified
text-align { center; }
flush right, ragged left
text-align { right; }

flush left, flush right
text-align { justify; }
force justified

widow
rag
orphan

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 rules
By Mark McClusky,Wired
February 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

Web Safe Fonts
Arial
Arial Black
Comic Sans
Courier New
Georgia
Times New Roman
Trebuchet MS
Verdana

MAC
PC

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

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”

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

GUidelines
Read the text before designing it
Get away from “loremipsum” 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'tmttaer in wahtoredr the ltteers in a wrod are, olnytaht the frist and lsatltteres are at the rghitpcleas. Tihs is bcuseae we do not raederveylteter by ilstef, but the wrod as a wlohe.

A smidgen of type
A SMIDGEN OF TYPE

Questions?
Bill C. EnglishLead Designer, Tuitive@billcenglish

Web Typography Fundamentals: From Gutenberg to Google v1

by billcenglish on Mar 25, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 2

Statistics

Web Typography Fundamentals: From Gutenberg to Google v1 — Presentation Transcript

http://www.slideshare.net	1
http://vjanez.blogspot.com	1