Typografie
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Typografie

  • 518 views
Uploaded on

Short introduction to typography. Presentation was given to front end

Short introduction to typography. Presentation was given to front end

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
518
On Slideshare
510
From Embeds
8
Number of Embeds
2

Actions

Shares
Downloads
4
Comments
0
Likes
0

Embeds 8

http://www.linkedin.com 7
https://www.linkedin.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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
  • 10. font ≠ typeface
  • 11. FF DIN‣ FF DIN Light‣ FF DIN Regular‣ FF DIN Medium‣ FF DIN Bold‣ …
  • 12. fontshop.com: 7635 webfonts
  • 13. ONTWERPEN
  • 14. designers weten te weinig van typografie
  • 15. waarom nog steeds verdana?
  • 16. p { font-size: 16px; font-size: 1.6rem;}
  • 17. sans-serif vs. serifunpaganizing unpaganizing
  • 18. print vs. web
  • 19. waarom geen schreef?‣ “Times New Roman is lelijk”‣ Geen anti-aliasing‣ Lage resolutie en DPI
  • 20. tijden zijn veranderd
  • 21. schreef wordt de norm
  • 22. usability
  • 23. dyslexie
  • 24. DESIGNER Y U NO USENORMAL TEXT SIZE?
  • 25. 100% easy-2-read standard
  • 26. ‣ Standard font size for long texts‣ Active white space‣ Reader friendly line height‣ Clear color contrast‣ No text in images
  • 27. gebruik van witruimte
  • 28. uitlijning‣ orde scheppen‣ organiseren van elementen op de pagina‣ groeperen van elementen‣ visuele connecties creëren
  • 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. vuistregels‣ +/- 60 tekens per regel‣ 10 à 15 woorden per regel‣ 140% lijnhoogte
  • 31. UITVOERING
  • 32. het gaat fout
  • 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. vol 20% 40%Kortingspercentage tarief korting kortingEnkele reis € 9,30 € 7,40 € 5,60Dagretour € 18,60 € 14,80 € 11,20
  • 35. leestekens
  • 36. gebruik‣ ‘curly quotes’‣ em-dashes‣ ellipsis
  • 37. tekstuitlijning
  • 38. text-align‣ left‣ right‣ center‣ justify
  • 39. justify
  • 40. ‣ CSS3: hyphens‣ hyphenator.js
  • 41. “mac anti-aliasing sucks”
  • 42. cleartype vs. quartz‣ microsoft: leesbaarheid‣ apple: ontwerp behouden
  • 43. body { text-shadow: #ccc 0 0 0;}
  • 44. body { -webkit-font-smoothing: antialiased;}
  • 45. font stacks
  • 46. p { font-family: Verdana, Arial,Helvetica, sans-serif;}
  • 47. p { font-family: Georgia, Times NewRoman, Times, serif;}
  • 48. unpaganizing unpaganizing
  • 49. opbouw font stack‣ ideaal‣ alternatief‣ gangbaar‣ generiek
  • 50. ENTER RESPONSIVE
  • 51. garrettwinder.com
  • 52. staffanstorp.se
  • 53. read-tap asymmetry
  • 54. golden grid system
  • 55. BASELINE AND IMAGES? FUCK THAT SHIT
  • 56. DUS
  • 57. typografie is belangrijk‣ style guides zijn nodig‣ minder buikgevoel, meer feiten‣ we gaan het wiel niet opnieuw uitvinden
  • 58. kennisdeling?
  • 59. thanks for listening