(Web ) Typography

Click here to load reader

  • date post

  • Category


  • view

  • download


Embed Size (px)


Presentation on Barcamp Berlin 2 on November 4th, 2007 by Gerrit van Aaken

Transcript of (Web ) Typography

  • 1. Introducing Typography (not only) for the Web.Gerrit van Aaken, praegnanz.de !Barcamp Berlin, November 3rd/4th 2007 !Some rights reserved: ! CreativeCommons BY-NC

2. Basics WTF is Typography? 3. Typography is like onions Layer 1: Font design !Layer 2: Micro Typography !Layer 3: Macro Typography (Lay-Out) ! 4. CredoTypography is about readability, not creativity. 5. Readability vs. Creativity Display fonts are easy and fun, almost everone ! can do it. Good readable body copy is the interesting thing! !What can I do to improve the readability of my ! web site? 6. Back to readabilityAn old/new approach to web readability 7. Improving Readability I Higher resolutions require bigger type !at least 12px is required for sans-serif fonts !at least 14px is required for serif fonts !Line length of 4080 characters !at least 1.4em line-height for body copy! !max. 1.3em line-height for headlines! ! 8. Improving Readability II (Dos and Donts)Use high contrast! !Avoid #000000 on #ffffff ! !Avoid light text on dark backgrund! !Add lots of whitespace! !Add even more whitespace! !Use only left-aligned paragraphs (please!) ! 9. Foont smoothingSub pixel rendering, anyone? 10. Font choice and ReadabilitySerifs or No Serifs? 11. Classic web fonts Im Times New Roman Im Arial Im Verdana Im Georgia Im Lucida Im Trebuchet MS 12. Font choice for the web Wait, Theres more! 13. Vista font: Segoe UI Rip-Off der weltbekannten Frutiger ! (bzw. deren NEXT-Variante). Geniale Schrift, wird hoffentlich zum zweiten Standard in der Korrespondenz. Rip-Off der weltbekannten Frutiger. ! Geniale Schrift, wird hoffentlich zum zweiten Standard in der Korrespondenz. 14. Vista font: Corbel !quot;#$%"'()"$%"'*%+',%+'-.%)$/'#0.' !1)0(+#,2)$'("3#+.4'5%.,'(%"'602' !quot;#quot;!$%&'!(')('%#',+.' 7+("891(:;..+(