Web typography

T
H Y
A P
G
What does it sayR
O
about you? P
T Y IG
N
E S
D
& BY LEN D E G RO OT

Tuesday, October 12, 2010

Anatomy

BASELINE

Hlgx

Anatomy

CAP HEIGHT

Hlgx

Anatomy

ASCENDER

Hlgx

Anatomy

DESCENDER

Hlgx

Anatomy

X HEIGHT

Hlgx

Anatomy

a
. . . .

Quick Reference
Ascender

Handglovery
Stem Terminal Ear Bowl Eye Shoulder Serif -

-

Crossbar Counter Aperture
Bracket Axis Overshoot
Link/Neck Loop/Lobe Tail
Descender

Typeface
The upward vertical stem on some An imaginary line drawn from top to The curved part of the character that
lowercase letters, such as ‘h’ and ‘b’, that bottom of a glyph bisecting the upper and encloses the circular or curved parts

Anatomy
extends above the x-height is the lower strokes is the axis. (counter) of some letters such as ‘d’ ‘b’, ‘o’,
,
ascender. ‘D’, and ‘B’ is the bowl.

The imaginary line upon which the letters
CREDIT: FontShop.com The aperture is the partially enclosed, in a font appear to rest. The bracket is a curved or wedge-like
somewhat rounded negative space in connection between the stem and serif
— Basic parts some characters such as ‘n’, ‘C’, ‘S’, the of some fonts. Not all serifs are
lower part of ‘e’, or the upper part of a bracketed serifs.
Tuesday, October 12, 2010typeface
of a double-storey ‘a’.

Anatomy

SERIFS

Hlgx

Anatomy

SANS SERIF

Hlgx

Anatomy

SANS (STYLIZED)

Hlgx

Anatomy

WEIGHT (NORMAL - 400)

Hlgx
p{
font-weight: normal 100, 200, 300, 400, 500, 600, 700, 800, 900
}


Anatomy

WEIGHT (BOLD - 700)

Hlgx
p{
font-weight: bold 100, 200, 300, 400, 500, 600, 700, 800, 900
}


Anatomy

WEIGHT (OTHER)

100 = thin p{
200 = extra-light font-weight: 300;
300 = light }
400 = normal, book
500 = medium p {font-weight: bolder}
600 = demi-bold p {font-weight: lighter}
700 = bold
800 = heavy
900 = black


Anatomy

STYLE (OBLIQUE)

Hlgx
p{
font-style: oblique
}


Anatomy

STYLE (OBLIQUE)

p{
font-style: oblique
}


Anatomy

STYLE (ITALIC)

Hlgx
p{
font-style: italic
}


Readability

LETTER SPACING (KERINING)

Hlgx

Readability

LETTER SPACING (KERINING)

OVEN

Readability

LETTER SPACING (TRACKING)

Hlgx

Readability


oven

Readability


h1 {
oven
letter-spacing: -3px;
}


Readability

WORD SPACING

Turn off the oven
p{
word-spacing: 10px;
}


Readability

WORD SPACING

Turn off the oven
Turn off the oven


Readability

WORD SPACING

Turn off the oven
Turn off the oven
Turn off the oven
p {word-spacing: 10px;}


Readability

LIGATURES

Turn off the oven


Readability

LIGATURES

Turn off the oven
Turn oﬀ the oven


Readability

MONOSPACED (EM)

Courier ham


Readability

SIZE (EM)

size size size size size size size size
.75 1.0 1.25 1.5 2.0 3.0 4.0 5.0

h1 {
font-size: 2.5 em;
} /* 40px/16=2.5em */

h2 {
font-size: 1.875 em;
} /* 30px/16=1.875em */


Readability

VERITCAL SPACING (LEADING)
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.


Readability


FONT: 16 PT LEADING: 16 PT


Readability


p{
line-height: 1.25;
} /* 1 em = 16pt so 1.25 em = 20 pt leading */

FONT: 16 PT LEADING: 20 PT

Readability


p{
font-size: 16px;
line-height: 20px;
}


Readability

VERITCAL SPACING (COLOR)
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.


Readability

VERTICAL SPACING (PARAGRAPH)
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.


Readability

VERTICAL SPACING (PARAGRAPH)

p{
margin-bottom: 20px;
}


Readability

VERTICAL SPACING (BASELINE GRID)
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum. culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit.
reprehenderit in voluptate velit.

GOOD BAD


Readability

VERTICAL SPACING (BASELINE GRID)
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do body{
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut font-size: 13px;
aliquip ex ea commodo consequat. Duis aute irure dolor in line-height: 15px;
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in }

p{
Lorem ipsum dolor
margin-bottom: 15px;
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim }
reprehenderit in voluptate velit. h3 {
font-size: 15px;
line-height: 20px;
GOOD margin-bottom: -5px;
}


Readability

COLUMN WIDTH (620 px)
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
laborum. Excepteur sint occaecat cupidatat.
laborum.

TOO WIDE


Readability

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat.

GOOD


Readability

Lorem ipsum dolor sit
amet, consectetur
adipisicing elit, sed do
eiusmod tempor
incididunt ut labore et
dolore magna aliqua. Ut
enim ad minim veniam,
quis nostrud exercitation
ullamco laboris nisi ut
aliquip ex ea commodo
consequat. Duis aute irure
dolor in reprehenderit in

TOO NARROW


Readability

INDENTS
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.

anim id est laborum. Excepteur sint occaecat cupidatat.

p{
text-indent:30px;
}


Readability

ALIGNMENT (FLUSH LEFT)

DEFAULT


Readability

ALIGNMENT (CENTERED)

p{
text-align: center;
}


Readability

ALIGNMENT (FLUSH RIGHT)

p{
text-align: right;
}


Readability

ALIGNMENT (JUSTIFIED)

p{
text-align: justify;
}


Readability

LINKS
“ Lorem ipsum doloj sit game, consectetur “Lorem ipsum doloj sit game, consectetur
adipisicing elit, sed do eiusmod tempor adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna incididunt ut labore et dolore magna
aliqua. Excepteur sint occaecat cupidatat aliqua. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum. deserunt mollit anim id est laborum.”

GOOD BAD


Readability

ALL CAPS
ALL CAPS TYPE CAN ADD EMPHASIS. BUT TOO
MUCH TYPE IN ALL CAPS IS VERY HARD TO READ.
IT WILL HURT PEOPLE IN THE BRAIN AND MAY
RESULT IN SEIZURES. MAKE SURE THAT YOU USE
SIMPLE PHRASES OR SINGLE WORDS.


Readability

ALL CAPS
Requires tight leading – less than the font size

HIRE HIRE HIRE
ME ME ME
GOOD 16/12 BAD 16/16 WORSE 16/20


Readability

ALL CAPS
It can also look good with loose tracking.

JU STIC E

h1 {
letter-spacing: 30px;
}


Web fonts


Web fonts

FORMATS

.ttf .otf .svg .eot .woff


Web fonts

@fontface

.ttf .otf .svg .eot .woff


Web fonts

@fontface
29.95%

11.4%

5.5%
49.87%
1.6%


Web fonts

@fontface

.ttf
.otf
.svg
.eot


Web fonts

@fontface

.ttf
.otf
.svg
.eot
.woff IE9 3.6 6


Web fonts

@fontface
@font-face {
font-family: "Anivers";
src: url("Anivers.eot");
}
@font-face {
font-family: "Anivers";
src: url("Anivers.otf");
}
body {
font-family: Anivers, "Helvetica Neue", Helvetica, Arial, sans-serif;
}


Web fonts

TYPEKIT
HTML
<head>
<script type="text/javascript" src="http://use.typekit.com/qfd4pcz.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</head>

CSS
h1 {
font-family: "ff-din-web", Helvetica, sans-serif;
}


Web fonts

TYPEKIT IE6 3.5 4.0249.4 3.1 10.54

HTML
<head>
</head>

CSS
h1 {
}


Web fonts

TYPEKIT 2.2 Experimental

HTML
<head>
</head>

CSS
h1 {
}


PhotoShop

FONT WEIGHT
SIZE LEADING
KERNING TRACKING

COLOR


PhotoShop

ALIGNMENT
INDENT LEFT INDENT RIGHT
INDENT 1ST
SPACE SPACE
BEFORE AFTER


Web typography

Recommandé

Recommandé

Contenu connexe

Plus de kdmcBerkeley at UC Berkeley

Plus de kdmcBerkeley at UC Berkeley (8)

Web typography