Short introduction to typography. Presentation was given to front end

1. TYPOGRAFIE
“Choosing a typeface is not typography”

2. DISCLAIMER

3. this presentation contains
statements on design

4. WAAROM TYPOGRAFIE?

5. online succes

6. usability

7. “Web Design is 95%
Typography”
– Oliver Reichenstein
informationarchitects.jp

8. ± 1455

9. Johannes Gutenberg

12. font ≠ typeface

13. FF DIN
‣ FF DIN Light
‣ FF DIN Regular
‣ FF DIN Medium
‣ FF DIN Bold
‣ …

14. fontshop.com: 7635 webfonts

15. ONTWERPEN

16. designers weten te weinig
van typografie

17. waarom nog steeds verdana?

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

23. sans-serif vs. serif
unpaganizing unpaganizing

24. print vs. web

25. waarom geen schreef?
‣ “Times New Roman is lelijk”
‣ Geen anti-aliasing
‣ Lage resolutie en DPI

26. tijden zijn veranderd

27. schreef wordt de norm

28. usability

29. dyslexie

30. DESIGNER
Y U NO USE
NORMAL TEXT SIZE?

31. 100% easy-2-read standard

32. ‣ Standard font size for long texts
‣ Active white space
‣ Reader friendly line height
‣ Clear color contrast
‣ No text in images

33. gebruik van witruimte

34. uitlijning
‣ orde scheppen
‣ organiseren van elementen op de pagina
‣ groeperen van elementen
‣ visuele connecties creëren

35. “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

36. vuistregels
‣ +/- 60 tekens per regel
‣ 10 à 15 woorden per regel
‣ 140% lijnhoogte

37. UITVOERING

38. het gaat fout

40. uitlijning
vol 20% 40%
Kortingspercentage
tarief korting korting
Enkele reis € 9,30 € 7,40 € 5,60
€ € €
Dagretour
18,60 14,80 11,20
non-breaking space

41. vol 20% 40%
Kortingspercentage tarief korting korting
Enkele reis € 9,30 € 7,40 € 5,60
Dagretour € 18,60 € 14,80 € 11,20

43. leestekens

44. gebruik
‣ ‘curly quotes’
‣ em-dashes
‣ ellipsis

45. tekstuitlijning

46. text-align
‣ left
‣ right
‣ center
‣ justify

47. justify

48. ‣ CSS3: hyphens
‣ hyphenator.js

49. “mac anti-aliasing sucks”

51. cleartype vs. quartz
‣ microsoft: leesbaarheid
‣ apple: ontwerp behouden

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

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

56. font stacks

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

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

59. unpaganizing unpaganizing

60. opbouw font stack
‣ ideaal
‣ alternatief
‣ gangbaar
‣ generiek

61. ENTER RESPONSIVE

62. garrettwinder.com

66. staffanstorp.se

70. read-tap asymmetry

71. golden grid system

75. BASELINE AND IMAGES?
FUCK THAT SHIT

77. DUS

78. typografie is belangrijk
‣ style guides zijn nodig
‣ minder buikgevoel, meer feiten
‣ we gaan het wiel niet opnieuw uitvinden

79. kennisdeling?

80. thanks for listening