Web typography

What does it sayabout you?

B Y L E N D E G R O O T

TYPOGRAPHY

& DESIGNTTuesday, October 12, 2010

Anatomy

HlgxBASELINE

Tuesday, October 12, 2010

Anatomy

HlgxCAP HEIGHT


Hlgx

Anatomy

ASCENDER


Hlgx

Anatomy

DESCENDER


Hlgx

Anatomy

X HEIGHT


Anatomy

!"#$%&$' The upward vertical stem on some lowercase letters, such as ‘h’ and ‘b’, that extends above the x-height is the ascender.

!($')*'$The aperture is the partially enclosed, somewhat rounded negative space in some characters such as ‘n’, ‘C’, ‘S’, the lower part of ‘e’, or the upper part of a double-storey ‘a’.

!+,"An imaginary line drawn from top to bottom of a glyph bisecting the upper and lower strokes is the axis.

-!"$.,%$The imaginary line upon which the letters in a font appear to rest.

-/0. The curved part of the character that encloses the circular or curved parts (counter) of some letters such as ‘d’, ‘b’, ‘o’, ‘D’, and ‘B’ is the bowl.

-'!#1$)The bracket is a curved or wedge-like connection between the stem and serif of some fonts. Not all serifs are bracketed serifs.

!"#$ %&%!'("Quick Reference

— Basic parts of a typeface

a

Typeface Anatomy

HandgloveryBracket Crossbar

Stem Terminal

Counter

Loop/Lobe

Axis

Link/Neck

Bowl Eye

Aperture

Tail

Descender

SerifShoulder

Ascender

Ear

Overshoot

!"#-$%&'$(

)-$%&'$(

*"+%,&-%

!!!."#$%&'#(.)#* %#++ ",-- .% /// "" "#$%& 012.323.1445

CREDIT: FontShop.com


Anatomy

HlgxSERIFS


Anatomy

HlgxSANS SERIF


Anatomy

HlgxSANS (STYLIZED)


Anatomy

HlgxWEIGHT (NORMAL - 400)

p { font-weight: normal}

100, 200, 300, 400, 500, 600, 700, 800, 900


Anatomy

HlgxWEIGHT (BOLD - 700)

p { font-weight: bold}

100, 200, 300, 400, 500, 600, 700, 800, 900


Anatomy

WEIGHT (OTHER)

p {font-weight: 300;

}

p {font-weight: bolder}p {font-weight: lighter}

100 = thin200 = extra-light300 = light400 = normal, book500 = medium600 = demi-bold700 = bold800 = heavy900 = black


Anatomy

STYLE (OBLIQUE)

p {font-style: oblique}

HlgxTuesday, October 12, 2010

Anatomy

STYLE (OBLIQUE)

p {font-style: oblique}


Anatomy

HlgxSTYLE (ITALIC)

p {font-style: italic}


Hlgx

Readability

LETTER SPACING (KERINING)


OVENLETTER SPACING (KERINING)

Readability


OVENLETTER SPACING (KERINING)

Readability


HlgxLETTER SPACING (TRACKING)

Readability


ovenLETTER SPACING (TRACKING)

Readability



Readability



Readability

h1 { letter-spacing: -3px;}


Turn off the ovenWORD SPACING

Readability

p { word-spacing: 10px;}



Readability

Turn off the oven



Readability

Turn off the ovenTurn off the ovenp {word-spacing: 10px;}


Readability

Turn off the ovenLIGATURES



Readability



Readability

Turn off the oven


MONOSPACED (EM)

Readability

Courier ham


SIZE (EM)

Readability

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 */


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

VERITCAL SPACING (LEADING)

Readability




Readability

FONT: 16 PT LEADING: 16 PT



Readability





Readability





Readability



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



Readability







Readability






Readability

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


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.

VERITCAL SPACING (COLOR)

Readability




Readability




Readability




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

VERTICAL SPACING (PARAGRAPH)

Readability




VERTICAL SPACING (PARAGRAPH)

Readability

p { margin-bottom: 20px;}


VERTICAL SPACING (BASELINE GRID)

Readability


Lorem ipsum dolorLorem 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.

GOOD BAD


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.



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.

VERTICAL SPACING (BASELINE GRID)

Readability

GOOD

body{ font-size: 13px; line-height: 15px;}

p { margin-bottom: 15px;}

h3 { font-size: 15px; line-height: 20px; margin-bottom: -5px;}


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.

COLUMN WIDTH (620 px)

Readability

TOO WIDE





laborum.




laborum. Excepteur sint occaecat cupidatat.




laborum.


Readability

TOO WIDE


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.




Readability

GOOD


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


Readability

TOO NARROW



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. Excepteur sint occaecat cupidatat.

INDENTS

Readability

p { text-indent:30px;}


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. 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. Excepteur sint occaecat cupidatat.

ALIGNMENT (FLUSH LEFT)

Readability

DEFAULT


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. 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. Excepteur sint occaecat cupidatat.

ALIGNMENT (CENTERED)

Readability

p { text-align: center;}


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.

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. Excepteur sint occaecat cupidatat.

ALIGNMENT (FLUSH RIGHT)

Readability

p { text-align: right;}


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. 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. Excepteur sint occaecat cupidatat.

ALIGNMENT (JUSTIFIED)

Readability

p { text-align: justify;}


Lorem ipsum doloj sit game, consectetur

adipisicing elit, sed do eiusmod tempor

incididunt ut labore et dolore magna

aliqua. Excepteur sint occaecat cupidatat

non proident, sunt in culpa qui officia

deserunt mollit anim id est laborum.

LINKS

Readability

“Lorem ipsum doloj sit game, consectetur

adipisicing elit, sed do eiusmod tempor

incididunt ut labore et dolore magna

aliqua. Excepteur sint occaecat cupidatat

non proident, sunt in culpa qui officia

deserunt mollit anim id est laborum.”

GOOD BAD

“


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.

ALL CAPS

Readability


Requires tight leading – less than the font size

ALL CAPS

Readability

GOOD 16/12 BAD 16/16

HIRE ME

HIRE ME

WORSE 16/20

HIRE ME


It can also look good with loose tracking.

ALL CAPS

Readability

J U S T I C E

h1 { letter-spacing: 30px;}


Web fonts


FORMATS

Web fonts

.ttf .otf .svg .eot .woff


@fontface

Web fonts

.ttf .otf .svg .eot .woff


Web fonts


@fontface

Web fonts

29.95%

11.4%

5.5%

1.6%49.87%


@fontface

Web fonts

.ttf

.otf

.svg

.eot


@fontface

Web fonts

.ttf

.otf

.svg

.eot

.woff IE9 3.6 6


@fontface

Web fonts

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


TYPEKIT

Web fonts

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

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

HTML

CSS


http://use.typekit.com/qfd4pcz.js


TYPEKIT

Web fonts



HTML

CSS

IE6 3.5 4.0249.4 3.1 10.54




TYPEKIT

Web fonts



HTML

CSS

2.2 Experimental




PhotoShop

FONT

SIZEKERNING

WEIGHT

LEADINGTRACKING

COLOR


PhotoShop

ALIGNMENT

INDENT LEFT

SPACE BEFORE

INDENT RIGHT

SPACE AFTER

INDENT 1ST


Documents

Web typography