SlideShare a Scribd company logo
1 of 25
Download to read offline
Introducing Typography
    (not only) for the Web.

    Gerrit van Aaken, praegnanz.de
!



    Barcamp Berlin, November 3rd/4th 2007
!



    Some rights reserved:
!


    CreativeCommons BY-NC
Basics




WTF is
Typography?
Typography is like onions …


    Layer 1: Font design
!



    Layer 2: Micro Typography
!



    Layer 3: Macro Typography (Lay-Out)
!
Credo



Typography is
about readability,
not creativity.
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?
Back to readability



An old/new
approach to
web readability
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!
!
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!)
!
Foont smoothing



Sub pixel
rendering,
anyone?
Font choice and Readability



Serifs
or
No Serifs?
Classic web fonts


I’m Times New Roman
I’m Arial
I’m Verdana
I’m Georgia
I’m Lucida
I’m Trebuchet MS
Font choice for the web




Wait,
There’s more!
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.
Vista font: Corbel


  !quot;#$%"'()"$%"'*%+',%+'-.%)$/'#0.'
!

  1)0(+#,2)$'("3#+.4'5%.,'(%"'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
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
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+
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
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$$
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
Font Technology on the web




Font replacement
had its chance.
Font replacement techniques
Font Embedding
(the 2007 approach)



Outlook to
@font-face
@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.
!
That’s about it.




Thank you
very much :-)

More Related Content

Viewers also liked

Die 7 Todsünden des Blogdesign
Die 7 Todsünden des BlogdesignDie 7 Todsünden des Blogdesign
Die 7 Todsünden des Blogdesign
Gerrit van Aaken
 

Viewers also liked (9)

Die 7 Todsünden des Blogdesign
Die 7 Todsünden des BlogdesignDie 7 Todsünden des Blogdesign
Die 7 Todsünden des Blogdesign
 
Videotechnik im web
Videotechnik im webVideotechnik im web
Videotechnik im web
 
Webfonts im Jahr 2010
Webfonts im Jahr 2010Webfonts im Jahr 2010
Webfonts im Jahr 2010
 
Design im Immer- und Ueberall-Web
Design im Immer- und Ueberall-WebDesign im Immer- und Ueberall-Web
Design im Immer- und Ueberall-Web
 
Mediengerechtes Webdesign
Mediengerechtes WebdesignMediengerechtes Webdesign
Mediengerechtes Webdesign
 
Webfonts in the wild
Webfonts in the wildWebfonts in the wild
Webfonts in the wild
 
11designer
11designer11designer
11designer
 
Web-Branding in der Usability-Diktatur
Web-Branding in der Usability-DiktaturWeb-Branding in der Usability-Diktatur
Web-Branding in der Usability-Diktatur
 
32 Ways a Digital Marketing Consultant Can Help Grow Your Business
32 Ways a Digital Marketing Consultant Can Help Grow Your Business32 Ways a Digital Marketing Consultant Can Help Grow Your Business
32 Ways a Digital Marketing Consultant Can Help Grow Your Business
 

Similar to (Web ) Typography

Web Typography5 090725053013 Phpapp02
Web Typography5 090725053013 Phpapp02Web Typography5 090725053013 Phpapp02
Web Typography5 090725053013 Phpapp02
F Blanco
 
Font embedding for the web
Font embedding for the webFont embedding for the web
Font embedding for the web
Wojtek Zając
 
The New Web Typography
The New Web TypographyThe New Web Typography
The New Web Typography
Forum One
 
EPUB Boot Camp: Tips and Tweaks
EPUB Boot Camp: Tips and TweaksEPUB Boot Camp: Tips and Tweaks
EPUB Boot Camp: Tips and Tweaks
BookNet Canada
 
[WebVisions 2010] (More) Designing Our Way Through Forms
[WebVisions 2010] (More) Designing Our Way Through Forms[WebVisions 2010] (More) Designing Our Way Through Forms
[WebVisions 2010] (More) Designing Our Way Through Forms
Christopher Schmitt
 
01 Introduction To CSS
01 Introduction To CSS01 Introduction To CSS
01 Introduction To CSS
crgwbr
 
How do speed up web pages? CSS & HTML Tricks
How do speed up web pages? CSS & HTML TricksHow do speed up web pages? CSS & HTML Tricks
How do speed up web pages? CSS & HTML Tricks
Compare Infobase Limited
 
Rapid Prototyping
Rapid PrototypingRapid Prototyping
Rapid Prototyping
Even Wu
 

Similar to (Web ) Typography (20)

Web Typography Tips
Web Typography TipsWeb Typography Tips
Web Typography Tips
 
Web Typography5 090725053013 Phpapp02
Web Typography5 090725053013 Phpapp02Web Typography5 090725053013 Phpapp02
Web Typography5 090725053013 Phpapp02
 
Beautiful Web Typography (#5)
Beautiful Web Typography (#5)Beautiful Web Typography (#5)
Beautiful Web Typography (#5)
 
Web Form Elements
Web Form ElementsWeb Form Elements
Web Form Elements
 
Web Form Design (Web Visions 2009)
Web Form Design (Web Visions 2009)Web Form Design (Web Visions 2009)
Web Form Design (Web Visions 2009)
 
Font embedding for the web
Font embedding for the webFont embedding for the web
Font embedding for the web
 
The New Web Typography
The New Web TypographyThe New Web Typography
The New Web Typography
 
Responsive Web Design & Typography
Responsive Web Design & TypographyResponsive Web Design & Typography
Responsive Web Design & Typography
 
To Hell with Web Safe Fonts
To Hell with Web Safe FontsTo Hell with Web Safe Fonts
To Hell with Web Safe Fonts
 
EPUB Boot Camp: Tips and Tweaks
EPUB Boot Camp: Tips and TweaksEPUB Boot Camp: Tips and Tweaks
EPUB Boot Camp: Tips and Tweaks
 
Css3 101
Css3 101Css3 101
Css3 101
 
[WebVisions 2010] (More) Designing Our Way Through Forms
[WebVisions 2010] (More) Designing Our Way Through Forms[WebVisions 2010] (More) Designing Our Way Through Forms
[WebVisions 2010] (More) Designing Our Way Through Forms
 
The CSS Summit: CSS & Form Elements
The CSS Summit: CSS & Form ElementsThe CSS Summit: CSS & Form Elements
The CSS Summit: CSS & Form Elements
 
With Great Power, a lecture on web typography
With Great Power, a lecture on web typographyWith Great Power, a lecture on web typography
With Great Power, a lecture on web typography
 
01 Introduction To CSS
01 Introduction To CSS01 Introduction To CSS
01 Introduction To CSS
 
AWS Elastic Beanstalk
AWS Elastic BeanstalkAWS Elastic Beanstalk
AWS Elastic Beanstalk
 
Efficient JavaScript Development
Efficient JavaScript DevelopmentEfficient JavaScript Development
Efficient JavaScript Development
 
TypeScript Go(es) Embedded
TypeScript Go(es) EmbeddedTypeScript Go(es) Embedded
TypeScript Go(es) Embedded
 
How do speed up web pages? CSS & HTML Tricks
How do speed up web pages? CSS & HTML TricksHow do speed up web pages? CSS & HTML Tricks
How do speed up web pages? CSS & HTML Tricks
 
Rapid Prototyping
Rapid PrototypingRapid Prototyping
Rapid Prototyping
 

Recently uploaded

Breaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdfBreaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdf
UK Journal
 
Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
UXDXConf
 

Recently uploaded (20)

ERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage Intacct
 
Microsoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireMicrosoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - Questionnaire
 
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdfHow Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
 
AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101
 
Breaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdfBreaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdf
 
ECS 2024 Teams Premium - Pretty Secure
ECS 2024   Teams Premium - Pretty SecureECS 2024   Teams Premium - Pretty Secure
ECS 2024 Teams Premium - Pretty Secure
 
Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
 
WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe
 
TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024
 
Overview of Hyperledger Foundation
Overview of Hyperledger FoundationOverview of Hyperledger Foundation
Overview of Hyperledger Foundation
 
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfLinux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
 
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
 
Google I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGoogle I/O Extended 2024 Warsaw
Google I/O Extended 2024 Warsaw
 
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdfThe Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
 
Easier, Faster, and More Powerful – Notes Document Properties Reimagined
Easier, Faster, and More Powerful – Notes Document Properties ReimaginedEasier, Faster, and More Powerful – Notes Document Properties Reimagined
Easier, Faster, and More Powerful – Notes Document Properties Reimagined
 
Working together SRE & Platform Engineering
Working together SRE & Platform EngineeringWorking together SRE & Platform Engineering
Working together SRE & Platform Engineering
 
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
 
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
 
Oauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoftOauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoft
 

(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
  • 3. Typography is like onions … Layer 1: Font design ! Layer 2: Micro Typography ! Layer 3: Macro Typography (Lay-Out) !
  • 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 readability An 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 40–80 characters ! at least 1.4em line-height for body copy! ! max. 1.3em line-height for headlines! !
  • 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.
  • 11. Font choice and Readability Serifs or No Serifs?
  • 12. Classic web fonts I’m Times New Roman I’m Arial I’m Verdana I’m Georgia I’m Lucida I’m Trebuchet MS
  • 13. Font choice for the web Wait, There’s more!
  • 14. 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.
  • 15. 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
  • 16. 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
  • 17. 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+
  • 18. 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
  • 19. 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$$
  • 20. 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
  • 21. Font Technology on the web Font replacement had its chance.
  • 23. Font Embedding (the 2007 approach) Outlook to @font-face
  • 24. @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. !
  • 25. That’s about it. Thank you very much :-)