Typography
on
web
the
Konstantin
Käfer

Contents
1. Introduction to typography
2. Typography on the web
3. Drupal solutions

1. Introduction
Typography
‣ Art of type design
‣ Nearly as old as written text
‣ Influences the legibility and the atmosphere
of the text
‣ Very early font still used today: Garamond
(dated to 1530/31)

1. Introduction
Anatomy

1. Introduction
Various x-heights
Hamburgefonstiv Gill Sans
Hamburgefonstiv Gentium
Hamburgefonstiv Vectora
Hamburgefonstiv Palatino
Hamburgefonstiv Helvetica
Hamburgefonstiv Didot

1. Introduction
Serifs
Hamburgefonstiv
Hamburgefonstiv
‣ Serifs increase legibility
‣ Not for small font sizes/low resolutions

1. Introduction
Small font sizes
Mac OS X
Verdana Palatino
Windows XP (ClearType)
Windows XP (no antialiasing)

1. Introduction
Font styles
‣ Regular/Roman/Book Hamburgefonstiv
‣ Bold Hamburgefonstiv
Hamburgefonstiv
‣ Italic
‣ Oblique/Slanted
‣ Small Caps Hamburgefonstiv
‣ Faked bold
‣ Faked small caps HAMBURGEFONSTIV

1. Introduction
Font weights
Ultra light Hamburgefonstiv
Thin Hamburgefonstiv
Light Hamburgefonstiv
Roman Hamburgefonstiv
Medium Hamburgefonstiv
Bold Hamburgefonstiv
Heavy Hamburgefonstiv
Black Hamburgefonstiv

1. Introduction
Font widths
‣ Condensed Hamburgefonstiv
‣ Regular Hamburgefonstiv
‣ Extended Hamburgefonstiv

1. Introduction
Ligatures
‣ Merge together overlapping characters
‣ Origin: lead typesetting
Muffin Muffin
ff fi fl ffi ffl ff ffiffl

1. Introduction
Kerning
‣ Whitespace within letters
‣ Proper kerning improves legibility
War War
Text Text

2. …on the web
Tracking
‣ Tracking = Letter spacing Hamburgefonstiv
‣ Tight and wide letter spacing Hamburgefonstiv
decreases legibility Hamburgefonstiv
Hamburgefonstiv
‣ Tight spacing is cool
Hamburgefonstiv
‣ Wide spacing can put Hamburgefonstiv
emphasis on a word: Hamburgefonstiv
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do e i u s m o d 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.

2. …on the web
Multiple lines
‣ Increasing line height increases legibility
‣ Space between two lines: leading
Lorem ipsum dolor sit amet, consectetur adipisicing Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam,
dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure quis nostrud exercitation ullamco laboris nisi ut
dolor in reprehenderit in voluptate velit esse cillum
aliquip ex ea commodo consequat. Duis aute irure
dolore eu fugiat nulla pariatur. Excepteur sint
dolor in reprehenderit in voluptate velit esse cillum
occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum. dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
‣ Default leading in browsers is too small
‣ Increase to at least 1.3em

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

2. …on the web
Alignment
‣ Left, center, right, justify
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.
‣ Don’t justify on the web
‣ Especially not narrow columns
‣ Reason: no proper (cross-browser) hypenation
‣ html[lang=en] {
hyphenate-dictionary:url(hyph_en.dic) }

2. …on the web
Hyphenation
‣ ­
‣ Conditional hyphen
‣ Supported by Safari, Opera, Internet Explorer
‣ NOT supported by Mozilla

2. …on the web
Typefaces for the web
‣ sans-serif
‣ Arial/Helvetica
‣ Verdana (or Bitstream Vera Sans)
‣ Lucida (Grande/Sans/Sans Unicode)
‣ Trebuchet MS, Tahoma
‣ serif
‣ Times New Roman / Times
‣ Georgia, Garamond, Palatino (Linotype)
‣ http://media.24ways.org/2007/17/fontmatrix.html

2. …on the web
Curly quotes
‣ \"Lorem Ipsum\", 'Dolor sit amet'
‣ “This is a quote”, ‘Dolor sit amet’
‣ «Consectetur», ‹Adipiscing›
‣ »Elit«, ›Morbis‹

2. …on the web
Dashes
‣ - (dash/hyphen)
‣ – (en-dash)
‣ — (em-dash)
‣ − (minus)

2. …on the web
Other characters
‣ Apostrophe: Steven’s magic.
‣ Steven´s magic Steven's magic
‣ Times sign: 40×80, not 40x80
‣ Ellipsis: Word…, not Word...

2. …on the web
Text replacement
‣ sIFR
‣ Copyright issues
‣ Flash: not native text
‣ Slow: takes time to load and initialize
‣ Various image replacement methods
‣ Not selectable
‣ Not really scalable
‣ No reflowing of text

2. …on the web
Text replacement
‣ Use Canvas/VML to render text
‣ Cufón: http://cufon.shoqolate.com
‣ Typeface.js: http://typeface.neocracy.org
‣ Safari 3, Firefox 3.1: @font-face
‣ @font-face {
font-family: Aller;
src: url('Aller-Roman.otf');
}
font-family: Aller, sans-serif;
‣ Beware of licensing issues!

3. Drupal solutions
SmartyPants
‣ Converts ASCII punctuation into ‘real’ punctuation
‣ ``word'' → “word” \"word\" → “word”
‣ -- → – --- → — ... → …
‣ http://daringfireball.net/projects/smartypants/
‣ http://drupal.org/project/marksmarty

3. Drupal solutions
Typogriphy
‣ Collection of multiple scripts
‣ Roman/Hanging punctuation
‣ Graphical ampersands
‣ SmartyPants
‣ Widon’t
‣ Wraps quotes and all-caps words into spans
‣ http://drupal.org/project/typogrify

?