(Web ) Typography
-
Upload
gerrit-van-aaken -
Category
Technology
-
view
1.404 -
download
2
description
Transcript of (Web ) Typography
![Page 1: (Web ) Typography](https://reader033.fdocuments.in/reader033/viewer/2022052301/5597007b1a28abf3358b4586/html5/thumbnails/1.jpg)
Introducing Typography (not only) for the Web.
! Gerrit van Aaken, praegnanz.de
! Barcamp Berlin, November 3rd/4th 2007
! Some rights reserved:
CreativeCommons BY-NC
![Page 2: (Web ) Typography](https://reader033.fdocuments.in/reader033/viewer/2022052301/5597007b1a28abf3358b4586/html5/thumbnails/2.jpg)
Basics
WTF is Typography?
![Page 3: (Web ) Typography](https://reader033.fdocuments.in/reader033/viewer/2022052301/5597007b1a28abf3358b4586/html5/thumbnails/3.jpg)
Typography is like onions …
! Layer 1: Font design
! Layer 2: Micro Typography
! Layer 3: Macro Typography (Lay-Out)
![Page 4: (Web ) Typography](https://reader033.fdocuments.in/reader033/viewer/2022052301/5597007b1a28abf3358b4586/html5/thumbnails/4.jpg)
Credo
Typography is about readability, not creativity.
![Page 5: (Web ) Typography](https://reader033.fdocuments.in/reader033/viewer/2022052301/5597007b1a28abf3358b4586/html5/thumbnails/5.jpg)
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?
![Page 6: (Web ) Typography](https://reader033.fdocuments.in/reader033/viewer/2022052301/5597007b1a28abf3358b4586/html5/thumbnails/6.jpg)
Back to readability
An old/new approach to web readability
![Page 7: (Web ) Typography](https://reader033.fdocuments.in/reader033/viewer/2022052301/5597007b1a28abf3358b4586/html5/thumbnails/7.jpg)
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!
![Page 8: (Web ) Typography](https://reader033.fdocuments.in/reader033/viewer/2022052301/5597007b1a28abf3358b4586/html5/thumbnails/8.jpg)
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!)
![Page 9: (Web ) Typography](https://reader033.fdocuments.in/reader033/viewer/2022052301/5597007b1a28abf3358b4586/html5/thumbnails/9.jpg)
![Page 10: (Web ) Typography](https://reader033.fdocuments.in/reader033/viewer/2022052301/5597007b1a28abf3358b4586/html5/thumbnails/10.jpg)
Foont smoothing
Sub pixel rendering, anyone?
![Page 11: (Web ) Typography](https://reader033.fdocuments.in/reader033/viewer/2022052301/5597007b1a28abf3358b4586/html5/thumbnails/11.jpg)
Font choice and Readability
Serifsor No Serifs?
![Page 12: (Web ) Typography](https://reader033.fdocuments.in/reader033/viewer/2022052301/5597007b1a28abf3358b4586/html5/thumbnails/12.jpg)
Classic web fonts
I’m Times New Roman
I’m Arial
I’m Verdana
I’m GeorgiaI’m Lucida
I’m Trebuchet MS
![Page 13: (Web ) Typography](https://reader033.fdocuments.in/reader033/viewer/2022052301/5597007b1a28abf3358b4586/html5/thumbnails/13.jpg)
Font choice for the web
Wait, There’s more!
![Page 14: (Web ) Typography](https://reader033.fdocuments.in/reader033/viewer/2022052301/5597007b1a28abf3358b4586/html5/thumbnails/14.jpg)
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.
![Page 15: (Web ) Typography](https://reader033.fdocuments.in/reader033/viewer/2022052301/5597007b1a28abf3358b4586/html5/thumbnails/15.jpg)
Vista font: Corbel
! !"#$%&"'()&"$%&"'*%+',%+'-.%)$/'#0.'1)0(+#,2)$'(&"3#+.4'5%.,'(%&"'602'!"#"!$%&'!(')('%#',+.'7+(&"891(:;..+(<;#,+#6'+#1*%&:+$#4
! !"#$%&"'()&"$%&"'*%+',%+'-.%)$/'#0.'1)0(+#,2)$'(&"3#+.4'5%.,'(%&"'602'!"#"!$%&'!(')('%#',+.'7+(&"891(:;..+(<;#,+#6'+#1*%&:+$#4
![Page 16: (Web ) Typography](https://reader033.fdocuments.in/reader033/viewer/2022052301/5597007b1a28abf3358b4586/html5/thumbnails/16.jpg)
Vista font: Calibri
! !"#$%&'()&*+,-.&)"((/$%&0+$%1#$%2&3#"&-"(0$%1#$%","&4,#+1.&'(#5",0"11&"#(0"678+,&'()&!"#$%!&'("$&'-9"0"6762
! !"#$%&'()&*+,-.&)"((/$%&0+$%1#$%2&3#"&-"(0$%1#$%","&4,#+1.&'(#5",0"11&"#(0"678+,&'()&!"#$%!&'("$&'-9"0"6762
![Page 17: (Web ) Typography](https://reader033.fdocuments.in/reader033/viewer/2022052301/5597007b1a28abf3358b4586/html5/thumbnails/17.jpg)
Vista font: Candara
! !"#$%&#'()*"+,-.&/0("1+,#$2#&"%#(*.1#$%3&$!"#$%&'()*"+,-##"$!-&."&/0$4"&)$*#")#&$)"#$5.6"+$20(1$("+,7$08*91#(:$4;&#$08#&$<3(1+,#(1<#&7:
! !"#$%&#'()*"+,-.&/0("1+,#$2#&"%#(*.1#$%3&$!"#$%&'()*"+,-##"$!-&."&/0+
![Page 18: (Web ) Typography](https://reader033.fdocuments.in/reader033/viewer/2022052301/5597007b1a28abf3358b4586/html5/thumbnails/18.jpg)
Vista font: Constantia
! !"#$%&'()'*&%+,%-.%'!%&+,%-/"#&+,01'23"4+*%&')-.'%+-'$%-+*'#+/05&+/"#%&'36/'.+%'!"#$%$&'()%*%+,!-./'!0'0&50(.%7'%8(%66%-0'6%/93&1':+&.'/+"#'39%&'-+"#0'/5'.)&"#/%0(%-1
! !"#$%&'()'*&%+,%-.%'!%&+,%-/"#&+,01'23"4+*%&')-.'%+-'$%-+*'#+/05&+/"#%&'36/'.+%'!"#$%$&'()%*%+,!-./'!0
![Page 19: (Web ) Typography](https://reader033.fdocuments.in/reader033/viewer/2022052301/5597007b1a28abf3358b4586/html5/thumbnails/19.jpg)
Vista font: Cambria
! !"#$%#&'()#"*"%#+#$,")#&$)"-$*#+$
.#"'(-$("&-/+"&'(#0$1/-#2$3#.'(#$
4#*/'($!"#$%&'&(#'$)&#*'$50*$0"'(-$
65-(#0-"&'(7
! !"#$%#&'()#"*"%#+#$,")#&$)"-$*#+$
.#"'(-$("&-/+"&'(#0$1/-#2$3#.'(#$
4#*/'($!"#$%&'&(#'$)&#*'$50*$0"'(-$
65-(#0-"&'(7$$
![Page 20: (Web ) Typography](https://reader033.fdocuments.in/reader033/viewer/2022052301/5597007b1a28abf3358b4586/html5/thumbnails/20.jpg)
Vista font: Consolas
! !"#$%%$&'()*+$$&%$),-+$(./&/)0-*$12*3+45'(56+(-%%$(7/8$+9(!"#$%&'%"()*"#+",-()/:-+(-;5(8$<(.-*9
! !"#$%%$&'()*+$$&%$),-+$(./&/)0-*$12*3+45'(56+(-%%$(7/8$+9(!"#$%&'%"()*"#+",-()/:-+(-;5(8$<(.-*9
![Page 21: (Web ) Typography](https://reader033.fdocuments.in/reader033/viewer/2022052301/5597007b1a28abf3358b4586/html5/thumbnails/21.jpg)
Font Technology on the web
Font replacement had its chance.
![Page 22: (Web ) Typography](https://reader033.fdocuments.in/reader033/viewer/2022052301/5597007b1a28abf3358b4586/html5/thumbnails/22.jpg)
Font replacement techniques
![Page 23: (Web ) Typography](https://reader033.fdocuments.in/reader033/viewer/2022052301/5597007b1a28abf3358b4586/html5/thumbnails/23.jpg)
Font Embedding(the 2007 approach)
Outlook to @font-face
![Page 24: (Web ) Typography](https://reader033.fdocuments.in/reader033/viewer/2022052301/5597007b1a28abf3358b4586/html5/thumbnails/24.jpg)
@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.
![Page 25: (Web ) Typography](https://reader033.fdocuments.in/reader033/viewer/2022052301/5597007b1a28abf3358b4586/html5/thumbnails/25.jpg)
That’s about it.
Thank you very much :-)