SlideShare a Scribd company logo
1 of 124
Download to read offline
{ Many Types, Many Faces}
 W e b Ty p o g r a p h y Beyond A r i a l and T i m e s and G e o r g i a




                                                                       Jason Cranford Teague
                                                                           Bright Eye Media

                                                                             @jasonspeaking

                                                               Voices That Matter | 29 April 2009
                                                                         San Francisco, California
CSS Typography =
CSS Typography =
  Limited Font Choices
limits
design is about




limits
design is about

 overcoming

limits
“Type Design is an act of
 plagiarism in itself—you
 basically recreate the flesh
 of the same skeleton.”
                Alejandro Lo Celso Saravia
                          pampatype.com
Web Typography 2009
What if everyone looked the same?




      (and was ugly ta’ boot)
How many fonts
are there?
How many fonts
are there?

>100K Fonts
How many fonts
are there on the
Web?
How many fonts
are there on the
Web?
        9 Fonts
Arial
Helvetica
Arial
Helvetica
ABCDEFGHIJKLMNOPQRSTUVWXYZ
    abcdefghijklmnopqrstuvwxyz
           0123456789
font-family : arial;
font-family : helvetica, arial, sans-serif;
Times
Times New Roman
Times
Times New Roman
ABCDEFGHIJKLMNOPQRSTUVWXYZ
    abcdefghijklmnopqrstuvwxyz
            0123456789
font-family :
font-family : times, 'times new roman', serif;
Georgia
Georgia
ABCDEFGHIJKLMNOPQRSTUVWXYZ
    abcdefghijklmnopqrstuvwxyz
            0123456789
Verdana

Trebuchet MS
Verdana
ABCDEFGHIJKLMNOPQRSTUVWXYZ
  abcdefghijklmnopqrstuvwxyz
         0123456789

Trebuchet MS
  ABCDEFGHIJKLMNOPQRSTUVWXYZ
    abcdefghijklmnopqrstuvwxyz
            0123456789
font-family : helvetica, arial, sans-serif;
font-family : verdana, helvetica, arial, sans-serif;
Web Typography 2009
Courier New

Comic Sans MS

Impact


Core Web Fonts
Core Web Fonts
Core Web Fonts


9 Fonts
EULA
EULA
End-User License Agreement
Installed Fonts
Windows XP
Windows XP

+9 Fonts
  Franklin Gothic Medium
  Lucid Console
  Lucida Sans Unicode
  Marlett
  Microsoft Sans Serif
  Palatino Linotype
  Symbol
  Tahoma
  Wingdings
Windows Vista
Windows Vista

+7 Fonts
   Calibri
   Cambria
   Candara
   Consolas
   Constantia
   Corbel
   Segoe UI
Mac OS X
Mac OS X

   +30 Fonts
American Typewriter   Courier          Monaco
Apple Chancery        Didot            Optima
Apple Symbols         Futura           Papyrus
Baskerville           Geneva           Tahoma
Big Caslon            Gill Sans        Taipei
Brush Script          Helvetica        Times
Chalkboard            Helvetica Neue   Zapf Dingbats
Charcoal CY           Herculanum       Zapfino
Cochin                Hoefler Text
Cooper                Lucida Grande
Copperplate           Marker Felt
Apple iLife
Apple iLife

+13 Fonts
Academy Engraved        Palatino
Bank Gothic             Portago
BlairMDITC TT           Santa Fe
Bodoni SvtyTwo ITC TT   Savoye
Bradley Hand ITC TT     Snell Roundhand
Cracked                 Stone Sans
Handwriting – Dakota
Microso Office 2007
Microso Office 2007

+121 Fonts
Microso Office: Mac 2008
Microso Office: Mac 2008
   +72 Fonts
MS Office:
Mac & Windows
MS Office:
Mac & Windows

62 Fonts
Web Safe Fonts
Windows
Windows


148 Fonts
Mac
Mac


134 Fonts
Mac & Windows
Mac & Windows


73 Fonts
Web Safe Fonts List


www.speaking-in-styles.com/web-typography/Web-Safe-Fonts/
font-family : verdana, arial, helvetica, sans-serif;
font-family : corbel, verdana, arial, helvetica, sans-serif;
Web Safe Fonts
Web Safe Fonts


~180 Fonts
Linked Webfonts
Diavlo
www.josbuivenga.demon.nl
@font-face {...}
@font-face { font-family: Diavlo;
             src: url(’Diavlo_BOOK_II_37.otf’);
             }
Name you give it.


@font-face { font-family: Diavlo;
             src: url(’Diavlo_BOOK_II_37.otf’);
             }
Name you give it.


@font-face { font-family: Diavlo;
             src: url(’Diavlo_BOOK_II_37.otf’);
             }
                       Path to font file.
font-family : georgia, times, “times new roman”, serif;
Font-family name you give it.



font-family : diavlo, georgia, times, “times new roman”, serif;
Download Fonts
Download Fonts


   Unlimited Fonts
File Format
File Formats
File Formats

True Type (.ttf)
Open Type (.otf)
IP
IP
Intellectual Property
EULA
EULA
End-User License Agreement
File Formats
File Formats

Embedded
Open Type (.eot)
.ttf & .otf
.ttf & .otf


   v3.1
.ttf & .otf
.ttf & .otf


Coming Soon
.ttf & .otf
.ttf & .otf


 ??????????
Web Typography 2009
Web Typography 2009
Web Typography 2009
Web Typography 2009
So...
Web Typography 2009
Download Fonts

  Web Safe Fonts

  Core Web Fonts

Generic Font-families
h1 {
   font-family : diavlo, georgia, times, “times new roman”, serif; }




p{
     font-family : corbel, verdana, arial, helvetica, sans-serif; }
Download Fonts


h1 {
   font-family : diavlo, georgia, times, “times new roman”, serif; }




p{
     font-family : corbel, verdana, arial, helvetica, sans-serif; }
Download Fonts


h1 {
   font-family : diavlo, georgia, times, “times new roman”, serif; }


          Web Safe Fonts

p{
     font-family : corbel, verdana, arial, helvetica, sans-serif; }
Download Fonts


h1 {
   font-family : diavlo, georgia, times, “times new roman”, serif; }


          Web Safe Fonts     Core Web Fonts

p{
     font-family : corbel, verdana, arial, helvetica, sans-serif; }
Download Fonts


h1 {
   font-family : diavlo, georgia, times, “times new roman”, serif; }


          Web Safe Fonts     Core Web Fonts         Generic Font-families

p{
     font-family : corbel, verdana, arial, helvetica, sans-serif; }
h1 {
   font-family : diavlo, georgia, times, “times new roman”, serif; }

p{
     font-family : corbel, verdana, helvetica, arial, sans-serif; }




                Web Typography
                Lorem	
  ipsum	
  dolor	
  sit	
  amet,	
  consectetuer	
  adipiscing	
  
                elit.	
  Nunc	
  sed	
   ligula.	
  Pellentesque	
  non	
   felis	
  vel	
   lorem	
  
                tempor	
  ultricies.	
  Class	
  aptent	
   taciti	
   sociosqu	
   ad	
  litora	
  
                torquent	
   per	
   conubia	
   nostra,	
   per	
   inceptos	
  
                hymenaeos.	
   Vestibulum	
   ante	
   ipsum	
   primis	
   in	
  
                faucibus	
  orci	
  luctus	
   et	
   ultrices	
  posuere	
  cubilia	
   Curae;	
  
                In	
   hac	
   habitasse	
   platea	
   dictumst.	
   Aenean	
   venenatis	
  
                hendrerit	
  tellus.	
  Nunc	
  posuere,	
  nulla	
  quis	
   sollicitudin	
  
                pretium,	
  dui	
  mi	
  ultricies	
  magna,	
  id	
  placerat	
  lorem.
h1 {
   font-family : diavlo, georgia, times, “times new roman”, serif; }

p{
     font-family : corbel, verdana, helvetica, arial, sans-serif; }




                Web Typography
                Lorem	
  ipsum	
  dolor	
  sit	
  amet,	
  consectetuer	
  adipiscing	
  
                elit.	
  Nunc	
  sed	
   ligula.	
  Pellentesque	
  non	
   felis	
  vel	
   lorem	
  
                tempor	
  ultricies.	
  Class	
  aptent	
   taciti	
   sociosqu	
   ad	
  litora	
  
                torquent	
   per	
   conubia	
   nostra,	
   per	
   inceptos	
  
                hymenaeos.	
   Vestibulum	
   ante	
   ipsum	
   primis	
   in	
  
                faucibus	
  orci	
  luctus	
   et	
   ultrices	
  posuere	
  cubilia	
   Curae;	
  
                In	
   hac	
   habitasse	
   platea	
   dictumst.	
   Aenean	
   venenatis	
  
                hendrerit	
  tellus.	
  Nunc	
  posuere,	
  nulla	
  quis	
   sollicitudin	
  
                pretium,	
  dui	
  mi	
  ultricies	
  magna,	
  id	
  placerat	
  lorem.
h1 {
   font-family : diavlo, georgia, times, “times new roman”, serif; }

p{
     font-family : corbel, verdana, helvetica, arial, sans-serif; }




                Web Typography
                Lorem	
  ipsum	
  dolor	
  sit	
  amet,	
  consectetuer	
  adipiscing	
  
                elit.	
  Nunc	
  sed	
   ligula.	
  Pellentesque	
  non	
   felis	
  vel	
   lorem	
  
                tempor	
  ultricies.	
  Class	
  aptent	
   taciti	
   sociosqu	
   ad	
  litora	
  
                torquent	
   per	
   conubia	
   nostra,	
   per	
   inceptos	
  
                hymenaeos.	
   Vestibulum	
   ante	
   ipsum	
   primis	
   in	
  
                faucibus	
  orci	
  luctus	
   et	
   ultrices	
  posuere	
  cubilia	
   Curae;	
  
                In	
   hac	
   habitasse	
   platea	
   dictumst.	
   Aenean	
   venenatis	
  
                hendrerit	
  tellus.	
  Nunc	
  posuere,	
  nulla	
  quis	
   sollicitudin	
  
                pretium,	
  dui	
  mi	
  ultricies	
  magna,	
  id	
  placerat	
  lorem.
h1 {
   font-family : diavlo, georgia, times, “times new roman”, serif; }

p{
     font-family : corbel, verdana, helvetica, arial, sans-serif; }




                Web Typography
                Lorem	
  ipsum	
  dolor	
  sit	
  amet,	
  consectetuer	
  adipiscing	
  
                elit.	
  Nunc	
  sed	
   ligula.	
  Pellentesque	
  non	
   felis	
  vel	
   lorem	
  
                tempor	
  ultricies.	
  Class	
  aptent	
   taciti	
   sociosqu	
   ad	
  litora	
  
                torquent	
   per	
   conubia	
   nostra,	
   per	
   inceptos	
  
                hymenaeos.	
   Vestibulum	
   ante	
   ipsum	
   primis	
   in	
  
                faucibus	
  orci	
  luctus	
   et	
   ultrices	
  posuere	
  cubilia	
   Curae;	
  
                In	
   hac	
   habitasse	
   platea	
   dictumst.	
   Aenean	
   venenatis	
  
                hendrerit	
  tellus.	
  Nunc	
  posuere,	
  nulla	
  quis	
   sollicitudin	
  
                pretium,	
  dui	
  mi	
  ultricies	
  magna,	
  id	
  placerat	
  lorem.
h1 {
   font-family : diavlo, georgia, times, “times new roman”, serif; }

p{
     font-family : corbel, verdana, helvetica, arial, sans-serif; }




                Web Typography
                Lorem	
  ipsum	
  dolor	
  sit	
  amet,	
  consectetuer	
  adipiscing	
  
                elit.	
  Nunc	
  sed	
   ligula.	
  Pellentesque	
  non	
   felis	
  vel	
   lorem	
  
                tempor	
  ultricies.	
  Class	
  aptent	
   taciti	
   sociosqu	
   ad	
  litora	
  
                torquent	
   per	
   conubia	
   nostra,	
   per	
   inceptos	
  
                hymenaeos.	
   Vestibulum	
   ante	
   ipsum	
   primis	
   in	
  
                faucibus	
  orci	
  luctus	
   et	
   ultrices	
  posuere	
  cubilia	
   Curae;	
  
                In	
   hac	
   habitasse	
   platea	
   dictumst.	
   Aenean	
   venenatis	
  
                hendrerit	
  tellus.	
  Nunc	
  posuere,	
  nulla	
  quis	
   sollicitudin	
  
                pretium,	
  dui	
  mi	
  ultricies	
  magna,	
  id	
  placerat	
  lorem.
h1 {
   font-family : diavlo, georgia, times, “times new roman”, serif; }

p{
     font-family : corbel, verdana, helvetica, arial, sans-serif; }




                Web Typography
                Lorem ipsum dolor sit amet, consectetuer
                adipiscing elit. Nunc sed ligula.
                Pellentesque non felis vel lorem tempor
                ultricies. Class aptent taciti sociosqu ad
                litora torquent per conubia nostra, per
                inceptos hymenaeos. Vestibulum ante
                ipsum primis in faucibus orci luctus et
                ultrices posuere cubilia Curae; In hac
                habitasse platea dictumst. Aenean
                venenatis hendrerit tellus. Nunc posuere,
                nulla quis sollicitudin pretium, dui mi
h1 {
   font-family : diavlo, georgia, times, “times new roman”, serif; }

p{
     font-family : corbel, verdana, helvetica, arial, sans-serif; }




                Web Typography
                Lorem ipsum dolor sit amet, consectetuer
                adipiscing elit. Nunc sed ligula. Pellentesque non
                felis vel lorem tempor ultricies. Class aptent taciti
                sociosqu ad litora torquent per conubia nostra,
                per inceptos hymenaeos. Vestibulum ante ipsum
                primis in faucibus orci luctus et ultrices posuere
                cubilia Curae; In hac habitasse platea dictumst.
                Aenean venenatis hendrerit tellus. Nunc posuere,
                nulla quis sollicitudin pretium, dui mi ultricies
                magna, id placerat lorem.
design is about

overcoming


limits
Fluid
Typography
Choosing Your
   Fonts
If you download a font or use a Web Safe
Font, always include a Core Web Font and
generic font-family as back-ups.


h1 {
   font-family : diavlo, georgia, times, “times new roman”, serif; }




p{
     font-family : corbel, verdana, arial, helvetica, sans-serif; }
If you download a font or use a Web Safe
Font, always include a Core Web Font and
generic font-family as back-ups.
          Download Fonts


h1 {
   font-family : diavlo, georgia, times, “times new roman”, serif; }




p{
     font-family : corbel, verdana, arial, helvetica, sans-serif; }
If you download a font or use a Web Safe
Font, always include a Core Web Font and
generic font-family as back-ups.
          Download Fonts


h1 {
   font-family : diavlo, georgia, times, “times new roman”, serif; }


          Web Safe Fonts

p{
     font-family : corbel, verdana, arial, helvetica, sans-serif; }
If you download a font or use a Web Safe
Font, always include a Core Web Font and
generic font-family as back-ups.
          Download Fonts


h1 {
   font-family : diavlo, georgia, times, “times new roman”, serif; }


          Web Safe Fonts     Core Web Fonts

p{
     font-family : corbel, verdana, arial, helvetica, sans-serif; }
If you download a font or use a Web Safe
Font, always include a Core Web Font and
generic font-family as back-ups.
          Download Fonts


h1 {
   font-family : diavlo, georgia, times, “times new roman”, serif; }


          Web Safe Fonts     Core Web Fonts         Generic Font-families

p{
     font-family : corbel, verdana, arial, helvetica, sans-serif; }
For headline copy use fonts with similar
widths and kerning.



     Web Typography
For headline copy use fonts with similar
widths and kerning.



     Web Typography
For body copy select fonts with bold, italic,
and bold/italic versions.
For body copy select fonts with bold, italic,
and bold/italic versions.

          Lorem ipsum dolor sit amet, consectetuer
          adipiscing elit. Nunc sed ligula.
          Pellentesque non felis vel lorem tempor
          ultricies. Class aptent taciti sociosqu ad
          litora torquent per conubia nostra, per
          inceptos hymenaeos. Vestibulum ante
          ipsum primis in faucibus orci luctus et
          ultrices posuere cubilia Curae; In hac
          habitasse platea dictumst. Aenean
          venenatis hendrerit tellus. Nunc posuere,
          nulla quis sollicitudin pretium, dui mi
          ultricies magna, id placerat lorem.


                          Arial
For body copy select fonts with bold, italic,
and bold/italic versions.

          Lorem ipsum dolor sit amet, consectetuer
          adipiscing elit. Nunc sed ligula.
          Pellentesque non felis vel lorem tempor
          ultricies. Class aptent taciti sociosqu ad
          litora torquent per conubia nostra, per
          inceptos hymenaeos. Vestibulum ante
          ipsum primis in faucibus orci luctus et
          ultrices posuere cubilia Curae; In hac
          habitasse platea dictumst. Aenean
          venenatis hendrerit tellus. Nunc posuere,
          nulla quis sollicitudin pretium, dui mi
          ultricies magna, id placerat lorem.


                          Arial
For body copy select fonts with bold, italic,
and bold/italic versions.

          Lorem ipsum dolor sit amet, consectetuer
          adipiscing elit. Nunc sed ligula.
          Pellentesque non felis vel lorem tempor
          ultricies. Class aptent taciti sociosqu ad
          litora torquent per conubia nostra, per
          inceptos hymenaeos. Vestibulum ante
          ipsum primis in faucibus orci luctus et
          ultrices posuere cubilia Curae; In hac
          habitasse platea dictumst. Aenean
          venenatis hendrerit tellus. Nunc posuere,
          nulla quis sollicitudin pretium, dui mi
          ultricies magna, id placerat lorem.


         Microsoft Sans Serif
Test the different fonts in different
combinations.

          Web Typography
          Lorem	
  ipsum	
  dolor	
  sit	
  amet,	
  consectetuer	
  adipiscing	
  
          elit.	
  Nunc	
  sed	
   ligula.	
  Pellentesque	
  non	
   felis	
  vel	
   lorem	
  
          tempor	
  ultricies.	
  Class	
  aptent	
   taciti	
   sociosqu	
   ad	
  litora	
  
          torquent	
   per	
   conubia	
   nostra,	
   per	
   inceptos	
  
          hymenaeos.	
   Vestibulum	
   ante	
   ipsum	
   primis	
   in	
  
          faucibus	
  orci	
  luctus	
   et	
   ultrices	
  posuere	
  cubilia	
   Curae;	
  
          In	
   hac	
   habitasse	
   platea	
   dictumst.	
   Aenean	
   venenatis	
  
          hendrerit	
  tellus.	
  Nunc	
  posuere,	
  nulla	
  quis	
   sollicitudin	
  
          pretium,	
  dui	
  mi	
  ultricies	
  magna,	
  id	
  placerat	
  lorem.
Test the different fonts in different
combinations.

          Web Typography
          Lorem ipsum dolor sit amet, consectetuer
          adipiscing elit. Nunc sed ligula. Pellentesque non
          felis vel lorem tempor ultricies. Class aptent taciti
          sociosqu ad litora torquent per conubia nostra,
          per inceptos hymenaeos. Vestibulum ante ipsum
          primis in faucibus orci luctus et ultrices posuere
          cubilia Curae; In hac habitasse platea dictumst.
          Aenean venenatis hendrerit tellus. Nunc posuere,
          nulla quis sollicitudin pretium, dui mi ultricies
          magna, id placerat lorem.
www.speaking-in-styles.com/web-typography
Web Typography 2009
{ Many Types, Many Faces}
 W e b Ty p o g r a p h y Beyond A r i a l and T i m e s and G e o r g i a




                              Questions
      www.speaking-in-styles.com/web-typography




                                                                       @jasonspeaking
                                                               www.brighteyemedia.com

More Related Content

Similar to Web Typography 2009

รายงานมล อ้อม
รายงานมล อ้อมรายงานมล อ้อม
รายงานมล อ้อมKamonchanok082
 
Web Typography for Front End Developers
Web Typography for Front End DevelopersWeb Typography for Front End Developers
Web Typography for Front End DevelopersPascal Rettig
 
The New Web Typography
The New Web TypographyThe New Web Typography
The New Web TypographyForum One
 
The NEW Web Typography: Where the Sexy Is
The NEW Web Typography: Where the Sexy IsThe NEW Web Typography: Where the Sexy Is
The NEW Web Typography: Where the Sexy IsJason CranfordTeague
 
Web Typography, A Long Dark
Web Typography, A Long Dark Web Typography, A Long Dark
Web Typography, A Long Dark Ryan LaBouve
 
Best Practices for Incredible Web Typography
Best Practices for Incredible Web TypographyBest Practices for Incredible Web Typography
Best Practices for Incredible Web TypographyExtensis
 
Interactive Branding Web Type Tips.Key
Interactive Branding Web Type Tips.KeyInteractive Branding Web Type Tips.Key
Interactive Branding Web Type Tips.KeySara Cannon
 

Similar to Web Typography 2009 (9)

รายงานมล อ้อม
รายงานมล อ้อมรายงานมล อ้อม
รายงานมล อ้อม
 
Web Typography for Front End Developers
Web Typography for Front End DevelopersWeb Typography for Front End Developers
Web Typography for Front End Developers
 
The New Web Typography
The New Web TypographyThe New Web Typography
The New Web Typography
 
The NEW Web Typography: Where the Sexy Is
The NEW Web Typography: Where the Sexy IsThe NEW Web Typography: Where the Sexy Is
The NEW Web Typography: Where the Sexy Is
 
Web Typography, A Long Dark
Web Typography, A Long Dark Web Typography, A Long Dark
Web Typography, A Long Dark
 
Best Practices for Incredible Web Typography
Best Practices for Incredible Web TypographyBest Practices for Incredible Web Typography
Best Practices for Incredible Web Typography
 
Dominating the Web Typography
Dominating the Web TypographyDominating the Web Typography
Dominating the Web Typography
 
Web Typography
Web TypographyWeb Typography
Web Typography
 
Interactive Branding Web Type Tips.Key
Interactive Branding Web Type Tips.KeyInteractive Branding Web Type Tips.Key
Interactive Branding Web Type Tips.Key
 

More from Jason CranfordTeague

The NEW Web Typography: Where the Sexy is 2016
The NEW Web Typography: Where the Sexy is 2016The NEW Web Typography: Where the Sexy is 2016
The NEW Web Typography: Where the Sexy is 2016Jason CranfordTeague
 
Your Next UX Skill: Prototyping with HTML & CSS
Your Next UX Skill: Prototyping with HTML & CSSYour Next UX Skill: Prototyping with HTML & CSS
Your Next UX Skill: Prototyping with HTML & CSSJason CranfordTeague
 
Design Is How It Works: Prototyping the User Experience
Design Is How It Works: Prototyping the User ExperienceDesign Is How It Works: Prototyping the User Experience
Design Is How It Works: Prototyping the User ExperienceJason CranfordTeague
 
Death to Pixel Perfect Design: Prototyping for the Real World
Death to Pixel Perfect Design: Prototyping for the Real WorldDeath to Pixel Perfect Design: Prototyping for the Real World
Death to Pixel Perfect Design: Prototyping for the Real WorldJason CranfordTeague
 
Trust Me, I'm a Designer: 9 Principles for Creative Credibility
Trust Me, I'm a Designer: 9 Principles for Creative CredibilityTrust Me, I'm a Designer: 9 Principles for Creative Credibility
Trust Me, I'm a Designer: 9 Principles for Creative CredibilityJason CranfordTeague
 
Design is Trust— 9 Principles For Interactive Credibility
Design is Trust— 9 Principles For Interactive CredibilityDesign is Trust— 9 Principles For Interactive Credibility
Design is Trust— 9 Principles For Interactive CredibilityJason CranfordTeague
 

More from Jason CranfordTeague (9)

The NEW Web Typography: Where the Sexy is 2016
The NEW Web Typography: Where the Sexy is 2016The NEW Web Typography: Where the Sexy is 2016
The NEW Web Typography: Where the Sexy is 2016
 
Children of the revolution
Children of the revolutionChildren of the revolution
Children of the revolution
 
Your Next UX Skill: Prototyping with HTML & CSS
Your Next UX Skill: Prototyping with HTML & CSSYour Next UX Skill: Prototyping with HTML & CSS
Your Next UX Skill: Prototyping with HTML & CSS
 
Design Is How It Works: Prototyping the User Experience
Design Is How It Works: Prototyping the User ExperienceDesign Is How It Works: Prototyping the User Experience
Design Is How It Works: Prototyping the User Experience
 
Death to Pixel Perfect Design: Prototyping for the Real World
Death to Pixel Perfect Design: Prototyping for the Real WorldDeath to Pixel Perfect Design: Prototyping for the Real World
Death to Pixel Perfect Design: Prototyping for the Real World
 
Trust Me, I'm a Designer: 9 Principles for Creative Credibility
Trust Me, I'm a Designer: 9 Principles for Creative CredibilityTrust Me, I'm a Designer: 9 Principles for Creative Credibility
Trust Me, I'm a Designer: 9 Principles for Creative Credibility
 
Design is Trust— 9 Principles For Interactive Credibility
Design is Trust— 9 Principles For Interactive CredibilityDesign is Trust— 9 Principles For Interactive Credibility
Design is Trust— 9 Principles For Interactive Credibility
 
Fluid Web Typography - next10
Fluid Web Typography - next10Fluid Web Typography - next10
Fluid Web Typography - next10
 
Designing For Credibility
Designing For CredibilityDesigning For Credibility
Designing For Credibility
 

Recently uploaded

UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 

Recently uploaded (19)

UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 

Web Typography 2009

  • 1. { Many Types, Many Faces} W e b Ty p o g r a p h y Beyond A r i a l and T i m e s and G e o r g i a Jason Cranford Teague Bright Eye Media @jasonspeaking Voices That Matter | 29 April 2009 San Francisco, California
  • 3. CSS Typography = Limited Font Choices
  • 6. design is about overcoming limits
  • 7. “Type Design is an act of plagiarism in itself—you basically recreate the flesh of the same skeleton.” Alejandro Lo Celso Saravia pampatype.com
  • 9. What if everyone looked the same? (and was ugly ta’ boot)
  • 11. How many fonts are there? >100K Fonts
  • 12. How many fonts are there on the Web?
  • 13. How many fonts are there on the Web? 9 Fonts
  • 15. Arial Helvetica ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
  • 17. font-family : helvetica, arial, sans-serif;
  • 19. Times Times New Roman ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
  • 21. font-family : times, 'times new roman', serif;
  • 23. Georgia ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
  • 25. Verdana ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 Trebuchet MS ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
  • 26. font-family : helvetica, arial, sans-serif;
  • 27. font-family : verdana, helvetica, arial, sans-serif;
  • 29. Courier New Comic Sans MS Impact 
  • 33. EULA
  • 37. Windows XP +9 Fonts Franklin Gothic Medium Lucid Console Lucida Sans Unicode Marlett Microsoft Sans Serif Palatino Linotype Symbol Tahoma Wingdings
  • 39. Windows Vista +7 Fonts Calibri Cambria Candara Consolas Constantia Corbel Segoe UI
  • 41. Mac OS X +30 Fonts American Typewriter Courier Monaco Apple Chancery Didot Optima Apple Symbols Futura Papyrus Baskerville Geneva Tahoma Big Caslon Gill Sans Taipei Brush Script Helvetica Times Chalkboard Helvetica Neue Zapf Dingbats Charcoal CY Herculanum Zapfino Cochin Hoefler Text Cooper Lucida Grande Copperplate Marker Felt
  • 43. Apple iLife +13 Fonts Academy Engraved Palatino Bank Gothic Portago BlairMDITC TT Santa Fe Bodoni SvtyTwo ITC TT Savoye Bradley Hand ITC TT Snell Roundhand Cracked Stone Sans Handwriting – Dakota
  • 47. Microso Office: Mac 2008 +72 Fonts
  • 48. MS Office: Mac & Windows
  • 49. MS Office: Mac & Windows 62 Fonts
  • 53. Mac
  • 57. Web Safe Fonts List www.speaking-in-styles.com/web-typography/Web-Safe-Fonts/
  • 58. font-family : verdana, arial, helvetica, sans-serif;
  • 59. font-family : corbel, verdana, arial, helvetica, sans-serif;
  • 65. @font-face { font-family: Diavlo; src: url(’Diavlo_BOOK_II_37.otf’); }
  • 66. Name you give it. @font-face { font-family: Diavlo; src: url(’Diavlo_BOOK_II_37.otf’); }
  • 67. Name you give it. @font-face { font-family: Diavlo; src: url(’Diavlo_BOOK_II_37.otf’); } Path to font file.
  • 68. font-family : georgia, times, “times new roman”, serif;
  • 69. Font-family name you give it. font-family : diavlo, georgia, times, “times new roman”, serif;
  • 71. Download Fonts Unlimited Fonts
  • 74. File Formats True Type (.ttf) Open Type (.otf)
  • 75. IP
  • 77. EULA
  • 82. .ttf & .otf v3.1
  • 86. .ttf & .otf ??????????
  • 91. So...
  • 93. Download Fonts Web Safe Fonts Core Web Fonts Generic Font-families
  • 94. h1 { font-family : diavlo, georgia, times, “times new roman”, serif; } p{ font-family : corbel, verdana, arial, helvetica, sans-serif; }
  • 95. Download Fonts h1 { font-family : diavlo, georgia, times, “times new roman”, serif; } p{ font-family : corbel, verdana, arial, helvetica, sans-serif; }
  • 96. Download Fonts h1 { font-family : diavlo, georgia, times, “times new roman”, serif; } Web Safe Fonts p{ font-family : corbel, verdana, arial, helvetica, sans-serif; }
  • 97. Download Fonts h1 { font-family : diavlo, georgia, times, “times new roman”, serif; } Web Safe Fonts Core Web Fonts p{ font-family : corbel, verdana, arial, helvetica, sans-serif; }
  • 98. Download Fonts h1 { font-family : diavlo, georgia, times, “times new roman”, serif; } Web Safe Fonts Core Web Fonts Generic Font-families p{ font-family : corbel, verdana, arial, helvetica, sans-serif; }
  • 99. h1 { font-family : diavlo, georgia, times, “times new roman”, serif; } p{ font-family : corbel, verdana, helvetica, arial, sans-serif; } Web Typography Lorem  ipsum  dolor  sit  amet,  consectetuer  adipiscing   elit.  Nunc  sed   ligula.  Pellentesque  non   felis  vel   lorem   tempor  ultricies.  Class  aptent   taciti   sociosqu   ad  litora   torquent   per   conubia   nostra,   per   inceptos   hymenaeos.   Vestibulum   ante   ipsum   primis   in   faucibus  orci  luctus   et   ultrices  posuere  cubilia   Curae;   In   hac   habitasse   platea   dictumst.   Aenean   venenatis   hendrerit  tellus.  Nunc  posuere,  nulla  quis   sollicitudin   pretium,  dui  mi  ultricies  magna,  id  placerat  lorem.
  • 100. h1 { font-family : diavlo, georgia, times, “times new roman”, serif; } p{ font-family : corbel, verdana, helvetica, arial, sans-serif; } Web Typography Lorem  ipsum  dolor  sit  amet,  consectetuer  adipiscing   elit.  Nunc  sed   ligula.  Pellentesque  non   felis  vel   lorem   tempor  ultricies.  Class  aptent   taciti   sociosqu   ad  litora   torquent   per   conubia   nostra,   per   inceptos   hymenaeos.   Vestibulum   ante   ipsum   primis   in   faucibus  orci  luctus   et   ultrices  posuere  cubilia   Curae;   In   hac   habitasse   platea   dictumst.   Aenean   venenatis   hendrerit  tellus.  Nunc  posuere,  nulla  quis   sollicitudin   pretium,  dui  mi  ultricies  magna,  id  placerat  lorem.
  • 101. h1 { font-family : diavlo, georgia, times, “times new roman”, serif; } p{ font-family : corbel, verdana, helvetica, arial, sans-serif; } Web Typography Lorem  ipsum  dolor  sit  amet,  consectetuer  adipiscing   elit.  Nunc  sed   ligula.  Pellentesque  non   felis  vel   lorem   tempor  ultricies.  Class  aptent   taciti   sociosqu   ad  litora   torquent   per   conubia   nostra,   per   inceptos   hymenaeos.   Vestibulum   ante   ipsum   primis   in   faucibus  orci  luctus   et   ultrices  posuere  cubilia   Curae;   In   hac   habitasse   platea   dictumst.   Aenean   venenatis   hendrerit  tellus.  Nunc  posuere,  nulla  quis   sollicitudin   pretium,  dui  mi  ultricies  magna,  id  placerat  lorem.
  • 102. h1 { font-family : diavlo, georgia, times, “times new roman”, serif; } p{ font-family : corbel, verdana, helvetica, arial, sans-serif; } Web Typography Lorem  ipsum  dolor  sit  amet,  consectetuer  adipiscing   elit.  Nunc  sed   ligula.  Pellentesque  non   felis  vel   lorem   tempor  ultricies.  Class  aptent   taciti   sociosqu   ad  litora   torquent   per   conubia   nostra,   per   inceptos   hymenaeos.   Vestibulum   ante   ipsum   primis   in   faucibus  orci  luctus   et   ultrices  posuere  cubilia   Curae;   In   hac   habitasse   platea   dictumst.   Aenean   venenatis   hendrerit  tellus.  Nunc  posuere,  nulla  quis   sollicitudin   pretium,  dui  mi  ultricies  magna,  id  placerat  lorem.
  • 103. h1 { font-family : diavlo, georgia, times, “times new roman”, serif; } p{ font-family : corbel, verdana, helvetica, arial, sans-serif; } Web Typography Lorem  ipsum  dolor  sit  amet,  consectetuer  adipiscing   elit.  Nunc  sed   ligula.  Pellentesque  non   felis  vel   lorem   tempor  ultricies.  Class  aptent   taciti   sociosqu   ad  litora   torquent   per   conubia   nostra,   per   inceptos   hymenaeos.   Vestibulum   ante   ipsum   primis   in   faucibus  orci  luctus   et   ultrices  posuere  cubilia   Curae;   In   hac   habitasse   platea   dictumst.   Aenean   venenatis   hendrerit  tellus.  Nunc  posuere,  nulla  quis   sollicitudin   pretium,  dui  mi  ultricies  magna,  id  placerat  lorem.
  • 104. h1 { font-family : diavlo, georgia, times, “times new roman”, serif; } p{ font-family : corbel, verdana, helvetica, arial, sans-serif; } Web Typography Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc sed ligula. Pellentesque non felis vel lorem tempor ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Aenean venenatis hendrerit tellus. Nunc posuere, nulla quis sollicitudin pretium, dui mi
  • 105. h1 { font-family : diavlo, georgia, times, “times new roman”, serif; } p{ font-family : corbel, verdana, helvetica, arial, sans-serif; } Web Typography Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc sed ligula. Pellentesque non felis vel lorem tempor ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Aenean venenatis hendrerit tellus. Nunc posuere, nulla quis sollicitudin pretium, dui mi ultricies magna, id placerat lorem.
  • 108. Choosing Your Fonts
  • 109. If you download a font or use a Web Safe Font, always include a Core Web Font and generic font-family as back-ups. h1 { font-family : diavlo, georgia, times, “times new roman”, serif; } p{ font-family : corbel, verdana, arial, helvetica, sans-serif; }
  • 110. If you download a font or use a Web Safe Font, always include a Core Web Font and generic font-family as back-ups. Download Fonts h1 { font-family : diavlo, georgia, times, “times new roman”, serif; } p{ font-family : corbel, verdana, arial, helvetica, sans-serif; }
  • 111. If you download a font or use a Web Safe Font, always include a Core Web Font and generic font-family as back-ups. Download Fonts h1 { font-family : diavlo, georgia, times, “times new roman”, serif; } Web Safe Fonts p{ font-family : corbel, verdana, arial, helvetica, sans-serif; }
  • 112. If you download a font or use a Web Safe Font, always include a Core Web Font and generic font-family as back-ups. Download Fonts h1 { font-family : diavlo, georgia, times, “times new roman”, serif; } Web Safe Fonts Core Web Fonts p{ font-family : corbel, verdana, arial, helvetica, sans-serif; }
  • 113. If you download a font or use a Web Safe Font, always include a Core Web Font and generic font-family as back-ups. Download Fonts h1 { font-family : diavlo, georgia, times, “times new roman”, serif; } Web Safe Fonts Core Web Fonts Generic Font-families p{ font-family : corbel, verdana, arial, helvetica, sans-serif; }
  • 114. For headline copy use fonts with similar widths and kerning. Web Typography
  • 115. For headline copy use fonts with similar widths and kerning. Web Typography
  • 116. For body copy select fonts with bold, italic, and bold/italic versions.
  • 117. For body copy select fonts with bold, italic, and bold/italic versions. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc sed ligula. Pellentesque non felis vel lorem tempor ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Aenean venenatis hendrerit tellus. Nunc posuere, nulla quis sollicitudin pretium, dui mi ultricies magna, id placerat lorem. Arial
  • 118. For body copy select fonts with bold, italic, and bold/italic versions. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc sed ligula. Pellentesque non felis vel lorem tempor ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Aenean venenatis hendrerit tellus. Nunc posuere, nulla quis sollicitudin pretium, dui mi ultricies magna, id placerat lorem. Arial
  • 119. For body copy select fonts with bold, italic, and bold/italic versions. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc sed ligula. Pellentesque non felis vel lorem tempor ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Aenean venenatis hendrerit tellus. Nunc posuere, nulla quis sollicitudin pretium, dui mi ultricies magna, id placerat lorem. Microsoft Sans Serif
  • 120. Test the different fonts in different combinations. Web Typography Lorem  ipsum  dolor  sit  amet,  consectetuer  adipiscing   elit.  Nunc  sed   ligula.  Pellentesque  non   felis  vel   lorem   tempor  ultricies.  Class  aptent   taciti   sociosqu   ad  litora   torquent   per   conubia   nostra,   per   inceptos   hymenaeos.   Vestibulum   ante   ipsum   primis   in   faucibus  orci  luctus   et   ultrices  posuere  cubilia   Curae;   In   hac   habitasse   platea   dictumst.   Aenean   venenatis   hendrerit  tellus.  Nunc  posuere,  nulla  quis   sollicitudin   pretium,  dui  mi  ultricies  magna,  id  placerat  lorem.
  • 121. Test the different fonts in different combinations. Web Typography Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc sed ligula. Pellentesque non felis vel lorem tempor ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Aenean venenatis hendrerit tellus. Nunc posuere, nulla quis sollicitudin pretium, dui mi ultricies magna, id placerat lorem.
  • 124. { Many Types, Many Faces} W e b Ty p o g r a p h y Beyond A r i a l and T i m e s and G e o r g i a Questions www.speaking-in-styles.com/web-typography @jasonspeaking www.brighteyemedia.com

Editor's Notes

  1. Using Flash
  2. text in images
  3. and HTML Text
  4. Authentic
  5. Good
  6. But we all know that if you want to be the Favorite Web Site Award winner, you have to use flash.
  7. ... Limited styles, limited controls, and most importantly limited font-family choices.
  8. Limits That's what design is about Design is about overcoming the limits of the medium. I am here today with no less of a task than to change the way you view the limitation of Typography using CSS in regards to the limited font-family choices we seem to have.
  9. Limits That's what design is about Design is about overcoming the limits of the medium. I am here today with no less of a task than to change the way you view the limitation of Typography using CSS in regards to the limited font-family choices we seem to have.
  10. Step Inside Design May/June 2008 When you choose your font, you do not change the meaning of the letter.. a T is still a T, but by changing it's skin, you change what it is saying, adding another level of communication.
  11. Twilight Zone - Eye of the Beholder
  12. http://www.smartcomputing.com/editorial/article.asp?article=articles/archive/l0811/06l11web/06l11web.asp&guid=
  13. http://www.smartcomputing.com/editorial/article.asp?article=articles/archive/l0811/06l11web/06l11web.asp&guid=
  14. http://www.smartcomputing.com/editorial/article.asp?article=articles/archive/l0811/06l11web/06l11web.asp&guid=
  15. http://www.smartcomputing.com/editorial/article.asp?article=articles/archive/l0811/06l11web/06l11web.asp&guid=
  16. http://www.smartcomputing.com/editorial/article.asp?article=articles/archive/l0811/06l11web/06l11web.asp&guid=
  17. with CSS, we can not only declare a single font, but back-up fonts and generic font families. If the browser does not have helvetica, it will use arial, if no arial it will use the default sans-serif font.
  18. with CSS, we can not only declare a single font, but back-up fonts and generic font families. If the browser does not have helvetica, it will use arial, if no arial it will use the default sans-serif font.
  19. http://www.truetype-typography.com/articles/times.htm
  20. Georgia is a transitional serif typeface designed in 1993[1] by Matthew Carter and hinted by Tom Rickner for the Microsoft Corporation, as the serif companion to the first Microsoft sans serif screen font, Verdana. The initial version of the font was released on November 1, 1996 as part of the Core fonts for the Web collection. Later, it was bundled with Internet Explorer 4.0 supplemental font pack. http://en.wikipedia.org/wiki/Georgia_%28typeface%29
  21. Verdana is a humanist sans-serif typeface designed by Matthew Carter for Microsoft Corporation, with hand-hinting done by Tom Rickner, then at Monotype. Demand for such a typeface was recognized by Virginia Howlett of Microsoft's typography group. The name “Verdana” is based on a mix of verdant (something green, as in the Seattle area and the Evergreen state, Washington), and Ana (the name of Howlett's eldest daughter). http://en.wikipedia.org/wiki/Verdana
  22. Verdana is a humanist sans-serif typeface designed by Matthew Carter for Microsoft Corporation, with hand-hinting done by Tom Rickner, then at Monotype. Demand for such a typeface was recognized by Virginia Howlett of Microsoft's typography group. The name “Verdana” is based on a mix of verdant (something green, as in the Seattle area and the Evergreen state, Washington), and Ana (the name of Howlett's eldest daughter). http://en.wikipedia.org/wiki/Verdana
  23. webdings
  24. Core fonts for the Web was a project begun by Microsoft in 1996 to make a standard pack of fonts for the Internet.
  25. The project was terminated in August 2002,
  26. The project was terminated in August 2002, allegedly due to frequent EULA violations.[1] However, that same EULA allows redistribution if the packages are kept in their original format and filenames and not used to add value to commercial products.
  27. We use these because they are almost certain to be installed on all computers in use today. BUT there are other fonts that we can rely on to be installed depending on the operating system.
  28. Segoe UI, replaces Tahoma for help text. Similar to Frutigar
  29. Segoe UI, replaces Tahoma for help text. Similar to Frutigar
  30. 62 overlap
  31. 62 overlap
  32. 62 overlap
  33. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  34. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  35. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  36. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  37. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  38. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  39. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  40. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  41. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  42. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  43. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  44. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  45. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  46. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  47. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  48. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  49. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  50. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  51. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  52. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  53. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  54. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  55. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  56. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  57. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  58. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  59. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  60. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  61. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  62. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  63. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  64. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  65. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  66. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  67. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  68. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  69. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  70. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  71. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  72. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  73. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  74. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  75. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  76. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  77. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  78. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  79. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  80. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  81. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  82. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  83. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  84. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  85. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  86. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  87. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  88. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  89. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  90. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  91. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  92. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  93. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  94. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  95. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  96. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  97. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  98. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  99. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  100. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  101. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  102. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  103. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  104. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  105. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  106. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  107. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  108. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  109. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  110. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  111. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  112. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  113. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  114. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  115. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  116. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  117. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  118. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  119. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  120. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  121. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  122. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  123. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  124. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  125. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  126. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  127. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  128. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  129. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  130. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  131. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  132. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  133. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  134. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  135. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  136. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  137. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  138. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  139. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  140. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  141. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  142. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  143. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  144. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  145. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  146. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  147. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  148. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  149. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  150. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  151. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  152. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  153. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  154. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  155. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  156. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  157. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  158. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  159. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  160. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  161. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  162. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  163. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  164. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  165. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  166. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  167. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  168. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  169. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  170. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  171. Does not include Web Dings and and MS Reference So... How do you know what fonts you can use?
  172. Core fonts for the Web was a project begun by Microsoft in 1996 to make a standard pack of fonts for the Internet. The project was terminated in August 2002, allegedly due to frequent EULA violations.[1] However, that same EULA allows redistribution if the packages are kept in their original format and filenames and not used to add value to commercial products. As a result, they are still available for download on third-party websites.
  173. 200 fonts is good, but as I mentioned earlier, there are 10's of thousands of font. Font foundries like Emigre
  174. or chank off fonts for purchase
  175. and some great fonts, like diavlo, are even free!
  176. Wouldn't it be great if we could use any font in our designs just by downloading it. We can (sort of)
  177. The syntax for downloading fonts for use by CSS has been around for years. I can place this file on my server, and use @font-face in my CSS to downlaod it
  178. The syntax for downloading fonts for use by CSS has been around for years. I can place this file on my server, and use @font-face in my CSS to downlaod it
  179. The syntax for downloading fonts for use by CSS has been around for years. I can place this file on my server, and use @font-face in my CSS to downlaod it
  180. The syntax for downloading fonts for use by CSS has been around for years. I can place this file on my server, and use @font-face in my CSS to downlaod it
  181. The syntax for downloading fonts for use by CSS has been around for years. I can place this file on my server, and use @font-face in my CSS to downlaod it
  182. The syntax for downloading fonts for use by CSS has been around for years. I can place this file on my server, and use @font-face in my CSS to downlaod it
  183. add font name to the font-family list.
  184. add font name to the font-family list.
  185. add font name to the font-family list.
  186. add font name to the font-family list.
  187. It's a question of file formats. Think of images. We download images because they all support the same basic image format types, GIF, JPEG, PNG
  188. TrueType is an outline font standard originally developed by Apple Computer in the late 1980s as a competitor to Adobe's Type 1 fonts used in PostScript. OpenType is a scalable format for computer fonts (also sometimes known interchangeably as "typefaces"), initially developed by Microsoft, later joined by Adobe Systems. BUT THEY LACK Digital Rights Management. so anyone can use and take them even if they didn't purchase them. -->
  189. TrueType is an outline font standard originally developed by Apple Computer in the late 1980s as a competitor to Adobe's Type 1 fonts used in PostScript. OpenType is a scalable format for computer fonts (also sometimes known interchangeably as "typefaces"), initially developed by Microsoft, later joined by Adobe Systems. BUT THEY LACK Digital Rights Management. so anyone can use and take them even if they didn't purchase them. -->
  190. But, until recently these font types not avaiable to browsers because of concerns over possible IP violations. --> Intellectual property rights are a bundle of exclusive rights over creations of the mind, both artistic and commercial. The former is covered by copyright laws, which protect creative works such as books, movies, music, paintings, photographs, and software and gives the copyright holder exclusive right to control reproduction or adaptation of such works for a certain period of time.[1]
  191. Remember EULA. Most fonts EULAs do not explicitly permit for use as downloaded fonts on Web pages. --> Some end-user license agreements (EULAs) accompany shrink wrapped software that is presented to a user sometimes on paper or more usually electronically, during the installation procedure. The user has the choice of accepting or rejecting the agreement, without reading it first. The installation of the software is conditional to the user accepting the agreement and thereby agreeing to abide by its terms. Once the user has installed the software, then he/she has the opportunity to read the license agreement in detail.
  192. MS developed the .eot format. Proprietary. recently tried to make it an open standard. resistance from the rest of the browsers. Barrier to entry Embedded OpenType (EOT) fonts are a compact form of OpenType fonts designed by Microsoft for use as embedded fonts on web pages. These files usually use the extension ".eot".
  193. One noticeable draw back, first time it loads, there is a few seconds pause where the font is not readt for use, and then the text will blink in. SO WHY DON'T WE SEE DOWNLOADED FONTS USED EVERYWHERE?
  194. One noticeable draw back, first time it loads, there is a few seconds pause where the font is not readt for use, and then the text will blink in. SO WHY DON'T WE SEE DOWNLOADED FONTS USED EVERYWHERE?
  195. One noticeable draw back, first time it loads, there is a few seconds pause where the font is not readt for use, and then the text will blink in. SO WHY DON'T WE SEE DOWNLOADED FONTS USED EVERYWHERE?
  196. We have four sources for defining fonts
  197. We have four ways of adding font-families to our pages... Now e need a way to use these different sources together using...
  198. We have four ways of adding font-families to our pages... Now e need a way to use these different sources together using...
  199. We have four ways of adding font-families to our pages... Now e need a way to use these different sources together using...
  200. We have four ways of adding font-families to our pages... Now e need a way to use these different sources together using...
  201. 16 - 256 Colors 640x480 - 800x 600 Screen sizes