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

?