While typography is not specifically related to Drupal, it is a topic that is often treated stepmotherly by webdesigners. This session tries to give a basic introduction to typography in general and point out why it is important to respect some rules. It also shows you how you can achieve good typography and clear layout on web pages leveraging all kinds of technologies supported by modern browsers.

1. Typography
on
web
the
Konstantin
Käfer

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

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

4. 1. Introduction
Anatomy

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

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

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

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

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

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

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

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

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

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

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

16. 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) }

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

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

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

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

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

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

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

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

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

26. ?