Web typography

transcript

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

Anatomy

ASCENDER

Anatomy

DESCENDER

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

Typeface Anatomy

HandgloveryBracket Crossbar

Stem Terminal

Counter

Loop/Lobe

Link/Neck

Bowl Eye

Aperture

Descender

SerifShoulder

Ascender

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}

Readability

LETTER SPACING (KERINING)

OVENLETTER SPACING (KERINING)

Readability

OVENLETTER SPACING (KERINING)

Readability

HlgxLETTER SPACING (TRACKING)

Readability

ovenLETTER SPACING (TRACKING)

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

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

FONT: 16 PT LEADING: 16 PT

Readability

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

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

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

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

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.

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

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%

1.6%49.87%

@fontface

Web fonts

@fontface

Web fonts

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

TYPEKIT

Web fonts

IE6 3.5 4.0249.4 3.1 10.54

TYPEKIT

Web fonts

2.2 Experimental

PhotoShop

SIZEKERNING

WEIGHT

LEADINGTRACKING

PhotoShop

ALIGNMENT

INDENT LEFT

SPACE BEFORE

INDENT RIGHT

SPACE AFTER

INDENT 1ST

Web typography

Documents