Typography

&

WordPress

by C H E L S E A O TA K A N

Legibility

vs

Readability

The

of Words

The

shape

of Words

Legibility

the ability to recognize and

understand individual letters

Readability

the ease of reading and

understanding text

Readability

TrackingThe amount of universal

space between letters

CSS Property

letter-spacing

This is the normal amount of tracking for this

font. Tracking uniformly adjusts the spacing

between letters.

This is an example of positive tracking.

This is an example of negative tracking.

Kerning, unlike tracking, is the amount of

space between specific letters designed by the

type designer. Kerning attempts to distribute

whitespace evenly between letters.

Readability

LeadingThe amount of space

between lines of text

CSS Property

line-height

This is a nice spacey amount of leading. The

lines still read as the same paragraph, but do

not interfere with the shapes of the words.

Leading is set at 1.5. That’s halfway between

single and double spaced.

This is a very small amount of leading. The leading is set at 1.0, equivalent to single spaced. At this point the descenders and ascenders begin running into each other, compromising word shapes.

Readability

LeadingThe amount of space

between lines of text

CSS Property

line-height

This is a very large amount of leading. The

leading is set at 3.5, equivalent to triple

spaced. At this point the lines begin to look as

if they are separate paragraphs is more

difficult to read as a continuous block of text.

Readability

Orphanswords by themselves at

the end of a paragraph

Not only is it a wholly remarkable book, it is

also a highly successful one - more popular

than the Celestial Home Care Omnibus, better

selling than Fifty More Things to do in Zero

Gravity, and more controversial than Oolon

Colluphid's trilogy of philosophical blockbusters

Where God Went Wrong, Some More of God's

Greatest Mistakes and Who is this God Person

Anyway?

Douglas Adams

The Hitchhiker’s Guide to the Galaxy

Readability

Orphanswords by themselves at

the end of a paragraph

Not only is it a wholly remarkable book, it is

also a highly successful one - more popular

than the Celestial Home Care Omnibus, better

selling than Fifty More Things to do in Zero

Gravity, and more controversial than Oolon

Colluphid's trilogy of philosophical blockbusters

Where God Went Wrong, Some More of God's

Greatest Mistakes and Who is this God Person

Anyway?

Douglas Adams

The Hitchhiker’s Guide to the Galaxy

Typography exists to

honor content.

Robert BringhurstThe Elements of Typographic Style

Stop!

Get content first!

Read and interpret

meaning and tone.

Determine content

hierarchy and form.

1

2

3

Get content first!

Read and interpret

meaning and tone.

Determine content

hierarchy and form.

1

2

3

Get content first!

Read and interpret

meaning and tone.

Determine content

hierarchy and form.

1

2

3

Choosing

Typefaces

Handwritten

Humanist

Geometric

Transitional

Slab Serif

Sans Serif

via comicsanscriminal.com

Respect your content

DEFIBRILLATOR

DEFIBRILLATOR

Combining Typefaces

Same Family

VitesseThis is Vitesse Sans. In eu leo neque, ut porta ipsum. Integer congue nibh sed eros viverra convallis. Nam venenatis vehicula mi, ac vestibulum ipsum viverra et. Donec libero mauris, rutrum nec porttitor vitae, pretium ac magna. Vestibulum vitae leo ac eros porta porta. Vivamus dictum tellus at ante convallis id vestibulum lectus molestie. Aenean sit amet diam elementum risus adipiscing luctus. Ut scelerisque imperdiet neque ac consectetur. Vivamus hendrerit, quam faucibus porttitor accumsan, ligula metus vulputate mi.

Combining Typefaces

Same Designer

This is St TransmissionThis is St Ryde. Both these fonts were designed by

Sascha Timplan. In eu leo neque, ut porta ipsum. Integer

congue nibh sed eros viverra convallis. Nam venenatis

vehicula mi, ac vestibulum ipsum viverra et. Donec

libero mauris, rutrum nec porttitor vitae, pretium ac

magna. Vestibulum vitae leo ac eros porta porta.

Vivamus dictum tellus at ante convallis id vestibulum

lectus molestie. Aenean sit amet diam elementum risus

adipiscing luctus.

Combining Typefaces

Same Classification

This is Otari.This is PMN Caecelia. Both these typefaces are considered to be Humanist typefaces. In eu leo neque, ut porta ipsum. Integer congue nibh sed eros viverra convallis. Nam venenatis vehicula mi, ac vestibulum ipsum viverra et. Donec libero mauris, rutrum nec porttitor vitae, pretium ac magna. Vestibulum vitae leo ac eros porta porta. Vivamus dictum tellus at ante convallis id vestibulum lectus molestie. Aenean sit amet diam elementum risus adipiscing luctus.

Combining Typefaces

Same Typeface

THIS IS ARCHER SEMIBOLDThis is Archer Book. The Archer typeface has several

variations: book, light, thin, hairline, bold, semibold,

medium, and italic styles. In eu leo neque, ut porta ipsum.

Integer congue nibh sed eros viverra convallis. Nam

venenatis vehicula mi, ac vestibulum ipsum viverra et.

Donec libero mauris, rutrum nec porttitor vitae, pretium

ac magna. Vestibulum vitae leo ac eros porta porta.

Vivamus dictum tellus at ante convallis id vestibulum

lectus molestie.

Combining Typefaces

Too similar

This is Times New RomanThis is Century Schoolbook. In eu leo neque, ut porta

ipsum. Integer congue nibh sed eros viverra

convallis. Nam venenatis vehicula mi, ac vestibulum

ipsum viverra et. Donec libero mauris, rutrum nec

porttitor vitae, pretium ac magna. Vestibulum vitae

leo ac eros porta porta. Vivamus dictum tellus at ante

convallis id vestibulum lectus molestie. Aenean sit

amet diam elementum risus adipiscing luctus.

Dynamic Type

on the Web

Embedding Fonts

@font-faceUses CSS to load font

files for display in the

end-user’s browser

Compatibility

IE4+ Firefox 3.5+ Safari 3.1+

Opera 10+ Chrome 4.0+

Bulletproof Syntax

@font-face {

font-family: 'StRyde';

src: url('fonts/stryde-webfont.eot');

src: local('?'), url('fonts/stryde-webfont.woff') format('woff'), url('fonts/stryde-webfont.ttf') format('truetype'), url('fonts/stryde-webfont.svg#webfontFGe3Ckun') format('svg');

font-weight: normal;

font-style: normal;

}

Embedding Fonts

@font-faceUses CSS to load font

files for display in the

end-user’s browser

Compatibility

IE4+ Firefox 3.5+ Safari 3.1+

Opera 10+ Chrome 4.0+

FontSquirrel @font-face generator

fontsquirrel.com/fontface/generator

FontSquirrel @font-face Kits

fontsquirrel.com/fontface

Embedding Fonts

Hosted Services

Uses CSS or JavaScript

to load font files hosted

by a service

Compatibility

IE6+ Firefox 3.5+ Safari 3.1+

Opera 10+ Chrome 4.0+

Google Font Directory

code.google.com/webfonts

TypeKit

typekit.com

Fonts.com

fonts.com

Embedding Fonts

cufónUses JavaScript to replace text with canvas or vml

rendering of a font

github.com/sorccu/cufon/wiki/about

Compatibility

IE6+ Firefox 1.5+ Safari 3+ Opera 9.5+ Chrome 1.0+

FOUT

flash of unstyled text

when the browser

shows the web-safe font

for a split second before

loading the external

font file

Google WebFont Loader

google.com/apis/webfonts/docs/webfont_loader.html

Adds javascript events and CSS classes for

different stages in the loading process.

Font Hinting

Font Hinting

Old Windows

Windows 98

ClearType

DirectWrite

More on font hinting

damieng.com/blog/2007/06/13/font-rendering-philosophies-of-windows-and-mac-os-x

Bring on Retina Displays!

Displays that have more pixels per inch than the human

eye can perceive will make font-hinting obselete

Useful WP Stuff

<?php

wp_register_script(‘cufon’, bloginfo(‘template_directory’) . ‘/scripts/cufon.js’);

wp_enqueue_script(‘cufon’);

wp_enqueue_script(‘jquery’);

?>

wp_enqueue_script

via codex.wordpress.org/Function_Reference/wp_enqueue_script

<?php

wp_register_style(‘mycss’, bloginfo(‘template_directory’) . ‘/styles/mycss.css’);

wp_enqueue_style(‘mycss’);

?>

wp_enqueue_style

via codex.wordpress.org/Function_Reference/wp_enqueue_script

adds CSS classes to &,

uppercase words, numbers,

and quotations

smart replacement for marks,

quotes, dashes, elipses,

fractions, ordinal suffixes,

mathetmatical symbols etc.

protects against orphans

forces wrapping of long,

unbroken lines of text

supports over 40 languages

wp-typography

wordpress.org/extend/plugins/wp-typography

WP Google Fonts

wordpress.org/extend/plugins/wp-google-fonts

TypeKit Fonts for WordPress

wordpress.org/extend/plugins/typekit-fonts-for-wordpress

DON’TPANIC

@chexee

chelsea@livelylabs.com