Web Typography Fundamentals: From Gutenberg to Google v1
-
Upload
billcenglish -
Category
Design
-
view
114 -
download
0
description
Transcript of Web Typography Fundamentals: From Gutenberg to Google v1
WEB TYPOGRAPHY FUNDAMENTALS
From Gutenberg to Google
HI THERE.
Bill C. EnglishLead Designer, Tuitive
@billcenglish
HISTORY
VOCABULARY
CONTRAST
TECHNOLOGY
TIPS
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
TIPS
crossbar
stroke
stem
arms
counter
bowl
tail
leg
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.
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
trackingletter-spacing {}
baseline
descender
x-height
cap-height
cap-line
ascender
serif
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
widow
rag
HISTORY
VOCABULARY
CONTRAST
TECHNOLOGY
TIPS
SIZE
WEIGHT
STRUCTURE
FORM
A Contrast In Form
a contrast in form
A CONTRAST IN FORM
COLOR
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. 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. 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
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
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
TIPS
WEB SAFE FONTS
Arial
Arial Black
Comic Sans
Courier New
Georgia
Times New Roman
Trebuchet MS
Verdana
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%
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; }
HISTORY
VOCABULARY
CONTRAST
TECHNOLOGY
TIPS
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