Typographyweb
Konstantin
Käfer
onthe
Contents1. 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 atmosphereof the text
‣ Very early font still used today: Garamond(dated to 1530/31)
1. Introduction
Anatomy
1. Introduction
Various x-heights
Hamburgefonstiv Gentium
Hamburgefonstiv Gill Sans
Hamburgefonstiv Vectora
Hamburgefonstiv Palatino
Hamburgefonstiv Helvetica
Hamburgefonstiv Didot
1. Introduction
Serifs
HamburgefonstivHamburgefonstiv
‣ Serifs increase legibility
‣ Not for small font sizes/low resolutions
1. Introduction
Small font sizesMac OS X
Windows XP (ClearType)
Windows XP (no antialiasing)
Verdana Palatino
1. Introduction
Font styles‣ Regular/Roman/Book
‣ Bold
‣ Italic
‣ Oblique/Slanted
‣ Small Caps
‣ Faked bold
‣ Faked small caps
HamburgefonstivHamburgefonstivHamburgefonstiv
Hamburgefonstiv
HAMBURGEFONSTIV
1. Introduction
Font weightsHamburgefonstivUltra light
HamburgefonstivThin
HamburgefonstivLight
HamburgefonstivRoman
HamburgefonstivMedium
HamburgefonstivBold
HamburgefonstivHeavy
HamburgefonstivBlack
1. Introduction
Font widths‣ Condensed
‣ Regular
‣ Extended
Hamburgefonstiv
Hamburgefonstiv
Hamburgefonstiv
1. Introduction
Ligatures‣ Merge together overlapping characters
‣ Origin: lead typesetting
Muf f in Muffinf f f i f l f f i f f l ff # $ ffi ffl
1. Introduction
Kerning‣ Whitespace within letters
‣ Proper kerning improves legibility
War War
Text Text
2. …on the web
Tracking‣ Tracking = Letter spacing
‣ Tight and wide letter spacing decreases legibility
‣ Tight spacing is cool
‣ Wide spacing can put emphasis on a word:
HamburgefonstivHamburgefonstivHamburgefonstivHamburgefonstiv
HamburgefonstivHamburgefonstivHamburgefonstiv
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
‣ Default leading in browsers is too small
‣ Increase to at least 1.3em
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.
2. …on the web
Widows and orphans
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.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.
WidowLorem 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.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.
Orphan
2. …on the web
Alignment‣ Left, center, right, justify
‣ 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) }
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.
2. …on the web
Hyphenation‣ ­
‣ Conditional hyphen
‣ Supported by Safari
‣ NOT supported by Mozilla
, Opera, Internet Explorer
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
?