TYPOGRAFIE“Choosing a typeface is not typography”

DISCLAIMER

this presentation contains statements on design

WAAROM TYPOGRAFIE?

online succes

usability

“Web Design is 95% Typography”

informationarchitects.jp– Oliver Reichenstein

± 1455

Johannes Gutenberg

font ≠ typeface

FF DIN

‣ FF DIN Light

‣ FF DIN Regular

‣ FF DIN Medium

‣ FF DIN Bold

‣ …

fontshop.com: 7635 webfonts

ONTWERPEN

designers weten te weinigvan typografie

waarom nog steeds verdana?

p { font-size: 16px; font-size: 1.6rem;}

sans-serif vs. serif

unpaganizing unpaganizing

print vs. web

waarom geen schreef?

‣ “Times New Roman is lelijk”

‣ Geen anti-aliasing

‣ Lage resolutie en DPI

tijden zijn veranderd

schreef wordt de norm

usability

dyslexie

DESIGNER

Y U NO USENORMAL TEXT SIZE?

100% easy-2-read standard

‣ Standard font size for long texts

‣ Active white space

‣ Reader friendly line height

‣ Clear color contrast

‣ No text in images

gebruik van witruimte

uitlijning

‣ orde scheppen

‣ organiseren van elementen op de pagina

‣ groeperen van elementen

‣ visuele connecties creëren

“The question of the column width is not merely one of design or format; the question of legibility is of equal importance.”

– Josef Muller-Brockmann, Grid Systems

vuistregels

‣ +/- 60 tekens per regel

‣ 10 à 15 woorden per regel

‣ 140% lijnhoogte

UITVOERING

het gaat fout

Kortingspercentage voltarief

20% korting

40%korting

Enkele reis € 9,30 € 7,40 € 5,60

Dagretour €18,60

€14,80

€11,20

uitlijning

non-breaking space

Kortingspercentagevoltarief

20% korting

40%korting

Enkele reis € 9,30 € 7,40 € 5,60

Dagretour € 18,60 € 14,80 € 11,20

leestekens

gebruik

‣ ‘curly quotes’

‣ em-dashes

‣ ellipsis

tekstuitlijning

‣ left

‣ right

‣ center

‣ justify

text-align

justify

‣ CSS3: hyphens

‣ hyphenator.js

“mac anti-aliasing sucks”

cleartype vs. quartz

‣ microsoft: leesbaarheid

‣ apple: ontwerp behouden

body { text-shadow: #ccc 0 0 0;}

body { -webkit-font-smoothing: antialiased;}

font stacks

p { font-family: Verdana, Arial, Helvetica, sans-serif;}

p { font-family: Georgia, Times New Roman, Times, serif;}

unpaganizing unpaganizing

‣ ideaal

‣ alternatief

‣ gangbaar

‣ generiek

opbouw font stack

ENTER RESPONSIVE

garrettwinder.com

staffanstorp.se

read-tap asymmetry

golden grid system

BASELINE AND IMAGES?

FUCK THAT SHIT

DUS

typografie is belangrijk

‣ style guides zijn nodig

‣ minder buikgevoel, meer feiten

‣ we gaan het wiel niet opnieuw uitvinden

kennisdeling?

thanks for listening