(Web ) Typography

1,589 views
1,492 views

Published on

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

Published in: Technology, Art & Photos
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,589
On SlideShare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
36
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

(Web ) Typography

  1. 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. 2. Basics WTF is Typography?
  3. 3. Typography is like onions … Layer 1: Font design ! Layer 2: Micro Typography ! Layer 3: Macro Typography (Lay-Out) !
  4. 4. Credo Typography is about readability, not creativity.
  5. 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. 6. Back to readability An old/new approach to web readability
  7. 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 40–80 characters ! at least 1.4em line-height for body copy! ! max. 1.3em line-height for headlines! !
  8. 8. Improving Readability II (Dos and Don’ts) 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. 9. Foont smoothing Sub pixel rendering, anyone?
  10. 10. Font choice and Readability Serifs or No Serifs?
  11. 11. Classic web fonts I’m Times New Roman I’m Arial I’m Verdana I’m Georgia I’m Lucida I’m Trebuchet MS
  12. 12. Font choice for the web Wait, There’s more!
  13. 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. 14. Vista font: Corbel !quot;#$%&quot;'()&quot;$%&quot;'*%+',%+'-.%)$/'#0.' ! 1)0(+#,2)$'(&quot;3#+.4'5%.,'(%&quot;'602' !quot;#quot;!$%&'!(')('%#',+.' 7+(&quot;891(:;..+(<;#,+#6'+#1*%&:+$#4 ! !quot;#$%&quot;'()&quot;$%&quot;'*%+',%+'-.%)$/'#0.' 1)0(+#,2)$'(&quot;3#+.4'5%.,'(%&quot;'602' !quot;#quot;!$%&'!(')('%#',+.' 7+(&quot;891(:;..+(<;#,+#6' +#1*%&:+$#4
  15. 15. Vista font: Calibri !quot;#$%&'()&*+,-.&)quot;((/$%&0+$%1#$%2& ! 3#quot;&-quot;(0$%1#$%quot;,quot;&4,#+1.&'(#5quot;,0quot;11& quot;#(0quot;678+,&'()&!quot;#$%!&'(quot;$& '-9quot;0quot;6762 ! !quot;#$%&'()&*+,-.&)quot;((/$%&0+$%1#$%2& 3#quot;&-quot;(0$%1#$%quot;,quot;&4,#+1.&'(#5quot;,0quot;11& quot;#(0quot;678+,&'()&!quot;#$%!&'(quot;$& '-9quot;0quot;6762
  16. 16. Vista font: Candara !quot;#$%&#'()*quot;+,-.&/0(quot;1+,#$ ! 2#&quot;%#(*.1#$%3&$!quot;#$%&'()*quot;+ ,-##quot;$!-&.quot;&/0$4quot;&)$*#quot;)#&$)quot;#$ 5.6quot;+$20(1$(quot;+,7$08*91#(:$4;&#$ 08#&$<3(1+,#(1<#&7: ! !quot;#$%&#'()*quot;+,-.&/0(quot;1+,#$ 2#&quot;%#(*.1#$%3&$!quot;#$%&'()*quot;+ ,-##quot;$!-&.quot;&/0+
  17. 17. Vista font: Constantia !quot;#$%&'()'*&%+,%-.%'!%&+,%-/quot;#&+,01' ! 23quot;4+*%&')-.'%+-'$%-+*'#+/05&+/quot;#%&' 36/'.+%'!quot;#$%$&'()%*%+,!-./'!0' 0&50(.%7'%8(%66%-0'6%/93&1':+&.'/+quot;#' 39%&'-+quot;#0'/5'.)&quot;#/%0(%-1 ! !quot;#$%&'()'*&%+,%-.%'!%&+,%-/quot;#&+,01' 23quot;4+*%&')-.'%+-'$%-+*' #+/05&+/quot;#%&'36/'.+%'!quot;#$%$&'()%*%+ ,!-./'!0
  18. 18. Vista font: Cambria !quot;#$%#&'()#quot;*quot;%#+#$,quot;)#&$)quot;-$*#+$ ! .#quot;'(-$(quot;&-/+quot;&'(#0$1/-#2$3#.'(#$ 4#*/'($!quot;#$%&'&(#'$)&#*'$50*$0quot;'(-$ 65-(#0-quot;&'(7 !quot;#$%#&'()#quot;*quot;%#+#$,quot;)#&$)quot;-$*#+$ ! .#quot;'(-$(quot;&-/+quot;&'(#0$1/-#2$3#.'(#$ 4#*/'($!quot;#$%&'&(#'$)&#*'$50*$0quot;'(-$ 65-(#0-quot;&'(7$$
  19. 19. Vista font: Consolas !quot;#$%%$&'()*+$$&%$),-+$( ! ./&/)0-*$12*3+45'(56+(-%%$( 7/8$+9(!quot;#$%&'%quot;()*quot;#+quot;,-()/:-+( -;5(8$<(.-*9 !quot;#$%%$&'()*+$$&%$),-+$( ! ./&/)0-*$12*3+45'(56+(-%%$( 7/8$+9(!quot;#$%&'%quot;()*quot;#+quot;,-()/:-+( -;5(8$<(.-*9
  20. 20. Font Technology on the web Font replacement had its chance.
  21. 21. Font replacement techniques
  22. 22. Font Embedding (the 2007 approach) Outlook to @font-face
  23. 23. @font-face Has been around since 1998 (yes, really!) ! Now Webkit does it with TrueType fonts. ! Great font piracy possibilities. ! Possible solution from Ralf Hermann. ! Expect this feature to be used and misused. !
  24. 24. That’s about it. Thank you very much :-)

×