0
TYPOGRAFIE“Choosing a typeface is not typography”
DISCLAIMER
this presentation contains  statements on design
WAAROM TYPOGRAFIE?
online succes
usability
“Web Design is 95%Typography”              – Oliver Reichenstein              informationarchitects.jp
± 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 weinig      van typografie
waarom nog steeds verdana?
p {	 font-size: 16px;	 font-size: 1.6rem;}
sans-serif vs. serifunpaganizing          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 ima...
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 isnot merely one of design or format;the question of legibility is of equalimportance.” ...
vuistregels‣ +/- 60 tekens per regel‣ 10 à 15 woorden per regel‣ 140% lijnhoogte
UITVOERING
het gaat fout
uitlijning                   vol       20%     40%Kortingspercentage                   tarief    korting kortingEnkele rei...
vol      20%     40%Kortingspercentage tarief   korting kortingEnkele reis        € 9,30   € 7,40   € 5,60Dagretour       ...
leestekens
gebruik‣ ‘curly quotes’‣ em-dashes‣ ellipsis
tekstuitlijning
text-align‣ left‣ right‣ center‣ justify
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 NewRoman, Times, serif;}
unpaganizing unpaganizing
opbouw font stack‣ ideaal‣ alternatief‣ gangbaar‣ generiek
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
Typografie
Typografie
Typografie
Typografie
Typografie
Typografie
Typografie
Typografie
Typografie
Typografie
Typografie
Typografie
Typografie
Typografie
Typografie
Typografie
Typografie
Typografie
Typografie
Typografie
Typografie
Upcoming SlideShare
Loading in...5
×

Typografie

351

Published on

Short introduction to typography. Presentation was given to front end

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
351
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Typografie"

  1. 1. TYPOGRAFIE“Choosing a typeface is not typography”
  2. 2. DISCLAIMER
  3. 3. this presentation contains statements on design
  4. 4. WAAROM TYPOGRAFIE?
  5. 5. online succes
  6. 6. usability
  7. 7. “Web Design is 95%Typography” – Oliver Reichenstein informationarchitects.jp
  8. 8. ± 1455
  9. 9. Johannes Gutenberg
  10. 10. font ≠ typeface
  11. 11. FF DIN‣ FF DIN Light‣ FF DIN Regular‣ FF DIN Medium‣ FF DIN Bold‣ …
  12. 12. fontshop.com: 7635 webfonts
  13. 13. ONTWERPEN
  14. 14. designers weten te weinig van typografie
  15. 15. waarom nog steeds verdana?
  16. 16. p { font-size: 16px; font-size: 1.6rem;}
  17. 17. sans-serif vs. serifunpaganizing unpaganizing
  18. 18. print vs. web
  19. 19. waarom geen schreef?‣ “Times New Roman is lelijk”‣ Geen anti-aliasing‣ Lage resolutie en DPI
  20. 20. tijden zijn veranderd
  21. 21. schreef wordt de norm
  22. 22. usability
  23. 23. dyslexie
  24. 24. DESIGNER Y U NO USENORMAL TEXT SIZE?
  25. 25. 100% easy-2-read standard
  26. 26. ‣ Standard font size for long texts‣ Active white space‣ Reader friendly line height‣ Clear color contrast‣ No text in images
  27. 27. gebruik van witruimte
  28. 28. uitlijning‣ orde scheppen‣ organiseren van elementen op de pagina‣ groeperen van elementen‣ visuele connecties creëren
  29. 29. “The question of the column width isnot merely one of design or format;the question of legibility is of equalimportance.” – Josef Muller-Brockmann, Grid Systems
  30. 30. vuistregels‣ +/- 60 tekens per regel‣ 10 à 15 woorden per regel‣ 140% lijnhoogte
  31. 31. UITVOERING
  32. 32. het gaat fout
  33. 33. uitlijning vol 20% 40%Kortingspercentage tarief korting kortingEnkele reis € 9,30 € 7,40 € 5,60 € € €Dagretour 18,60 14,80 11,20 non-breaking space
  34. 34. vol 20% 40%Kortingspercentage tarief korting kortingEnkele reis € 9,30 € 7,40 € 5,60Dagretour € 18,60 € 14,80 € 11,20
  35. 35. leestekens
  36. 36. gebruik‣ ‘curly quotes’‣ em-dashes‣ ellipsis
  37. 37. tekstuitlijning
  38. 38. text-align‣ left‣ right‣ center‣ justify
  39. 39. justify
  40. 40. ‣ CSS3: hyphens‣ hyphenator.js
  41. 41. “mac anti-aliasing sucks”
  42. 42. cleartype vs. quartz‣ microsoft: leesbaarheid‣ apple: ontwerp behouden
  43. 43. body { text-shadow: #ccc 0 0 0;}
  44. 44. body { -webkit-font-smoothing: antialiased;}
  45. 45. font stacks
  46. 46. p { font-family: Verdana, Arial,Helvetica, sans-serif;}
  47. 47. p { font-family: Georgia, Times NewRoman, Times, serif;}
  48. 48. unpaganizing unpaganizing
  49. 49. opbouw font stack‣ ideaal‣ alternatief‣ gangbaar‣ generiek
  50. 50. ENTER RESPONSIVE
  51. 51. garrettwinder.com
  52. 52. staffanstorp.se
  53. 53. read-tap asymmetry
  54. 54. golden grid system
  55. 55. BASELINE AND IMAGES? FUCK THAT SHIT
  56. 56. DUS
  57. 57. typografie is belangrijk‣ style guides zijn nodig‣ minder buikgevoel, meer feiten‣ we gaan het wiel niet opnieuw uitvinden
  58. 58. kennisdeling?
  59. 59. thanks for listening
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×