{ 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




                 ...
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.”
                A...
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
  ABCDEFGHIJKLMNOPQRSTUV...
font-family : helvetica, arial, sans-serif;
font-family : verdana, helvetica, arial, sans-serif;
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
  Pal...
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 S...
Apple iLife
Apple iLife

+13 Fonts
Academy Engraved        Palatino
Bank Gothic             Portago
BlairMDITC TT           Santa Fe
B...
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’);
             }
     ...
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


 ??????????
So...
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...
Download Fonts


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




p{
     font-family : corbe...
Download Fonts


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


          Web Safe Fonts

p{
...
Download Fonts


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


          Web Safe Fonts     ...
Download Fonts


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


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

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

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

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

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

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

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

p{
     font-family : corbel, verdana, helvetic...
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 {
...
If you download a font or use a Web Safe
Font, always include a Core Web Font and
generic font-family as back-ups.
       ...
If you download a font or use a Web Safe
Font, always include a Core Web Font and
generic font-family as back-ups.
       ...
If you download a font or use a Web Safe
Font, always include a Core Web Font and
generic font-family as back-ups.
       ...
If you download a font or use a Web Safe
Font, always include a Core Web Font and
generic font-family as back-ups.
       ...
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, consectetue...
For body copy select fonts with bold, italic,
and bold/italic versions.

          Lorem ipsum dolor sit amet, consectetue...
For body copy select fonts with bold, italic,
and bold/italic versions.

          Lorem ipsum dolor sit amet, consectetue...
Test the different fonts in different
combinations.

          Web Typography
          Lorem	
  ipsum	
  dolor	
  sit	
  ...
Test the different fonts in different
combinations.

          Web Typography
          Lorem ipsum dolor sit amet, consec...
www.speaking-in-styles.com/web-typography
{ 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




                 ...
Web Typography 2009
Web Typography 2009
Web Typography 2009
Web Typography 2009
Web Typography 2009
Web Typography 2009
Web Typography 2009
Web Typography 2009
Upcoming SlideShare
Loading in...5
×

Web Typography 2009

6,365

Published on

Are you tired of using the same old fonts in your Web designs? The type you use can say as much to your audience as the actual words on the page, but until now, Web designers have had an extremely limited palette of fonts from which to choose—essentially, Arial (yawn), Times (yawn), and Georgia (yawwwwwn). Design is about overcoming the limitations of a medium, and Web design is no different. In this session, Jason will show you how to use fluid typography, browser-safe fonts, and type on images to create robust scalable designs to achieve great typography without resorting to typing in images or Adobe Flash. You’ll also learn how to use CSS to download any font you want to use in your Web designs, and to use downloadable fonts, despite the limitations of some browsers.

Published in: Design, Technology, Art & Photos
1 Comment
19 Likes
Statistics
Notes
  • (05)Venham Conhecer a Nova Temporada do http://www.jogando.net/mu/ na versão Season 6 Ep3
    Super - 10.000x
    Pvp 15.000x
    Very Easy - 5.000x
    Hard 100 x
    Extreme 10x
    War 1000x
    Novo Sever: Phoenix 3.000x (32k stats) Acumulativo

    Algumas Novidades:

    -> Castle Siege, agora o GM da guild vencedora ganha SET exclusivo.
    -> Fique logado e ganhe golds, Free ganha 1 GOLD por minuto e VIP 2 GOLDs.
    -> Ganhe Chaos Castle e receba itens ancients.
    -> Novos Kits Fusion Devastator, Kit Mysthical e ItensSupremo Diamond v2 (raro) Apenas 100 será vendidos
    -> Novos Sets especial de Time de Futebol com o melhor preço
    -> 1º Super Mega Maratona Jogando.net, 33 dias com super eventos diferenciados
    Confira tambem nosso Site de Animes: http://animescloud.com/
    -> Curte Animes, então faça uma visita, cadastre-se e divulgue aos seus contatos..... !!!
    >> CADASTRE-SE E GANHE 5 DIAS DE VIP
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
6,365
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
319
Comments
1
Likes
19
Embeds 0
No embeds

No notes for slide
  • Using Flash
  • text in images
  • and HTML Text
  • Authentic
  • Good
  • But we all know that if you want to be the Favorite Web Site Award winner, you have to use flash.
  • ...

    Limited styles, limited controls, and most importantly limited font-family choices.
  • 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.
  • 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.
  • 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.
  • Twilight Zone - Eye of the Beholder
  • http://www.smartcomputing.com/editorial/article.asp?article=articles/archive/l0811/06l11web/06l11web.asp&guid=
  • http://www.smartcomputing.com/editorial/article.asp?article=articles/archive/l0811/06l11web/06l11web.asp&guid=
  • http://www.smartcomputing.com/editorial/article.asp?article=articles/archive/l0811/06l11web/06l11web.asp&guid=
  • http://www.smartcomputing.com/editorial/article.asp?article=articles/archive/l0811/06l11web/06l11web.asp&guid=
  • http://www.smartcomputing.com/editorial/article.asp?article=articles/archive/l0811/06l11web/06l11web.asp&guid=
  • 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.
  • 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.
  • http://www.truetype-typography.com/articles/times.htm
  • 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
  • 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
  • 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
  • webdings
  • 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,
  • 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.
  • 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.
  • Segoe UI, replaces Tahoma for help text.

    Similar to Frutigar
  • Segoe UI, replaces Tahoma for help text.

    Similar to Frutigar
  • 62 overlap
  • 62 overlap
  • 62 overlap
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • Does not include Web Dings and and MS Reference

    So... How do you know what fonts you can use?
  • 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.
  • 200 fonts is good, but as I mentioned earlier, there are 10's of thousands of font.

    Font foundries like Emigre
  • or chank off fonts for purchase
  • and some great fonts, like diavlo, are even free!
  • Wouldn't it be great if we could use any font in our designs just by downloading it.

    We can (sort of)
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • add font name to the font-family list.
  • add font name to the font-family list.
  • add font name to the font-family list.
  • add font name to the font-family list.
  • 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
  • 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.
    -->
  • 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.
    -->
  • 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]
  • 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.
  • 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".
  • 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?
  • 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?
  • 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?
  • We have four sources for defining fonts
  • We have four ways of adding font-families to our pages...



    Now e need a way to use these different sources together using...
  • We have four ways of adding font-families to our pages...



    Now e need a way to use these different sources together using...
  • We have four ways of adding font-families to our pages...



    Now e need a way to use these different sources together using...
  • We have four ways of adding font-families to our pages...



    Now e need a way to use these different sources together using...
  • 16 - 256 Colors
    640x480 - 800x 600 Screen sizes
  • Web Typography 2009

    1. 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
    2. 2. CSS Typography =
    3. 3. CSS Typography = Limited Font Choices
    4. 4. limits
    5. 5. design is about limits
    6. 6. design is about overcoming limits
    7. 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
    8. 8. What if everyone looked the same? (and was ugly ta’ boot)
    9. 9. How many fonts are there?
    10. 10. How many fonts are there? >100K Fonts
    11. 11. How many fonts are there on the Web?
    12. 12. How many fonts are there on the Web? 9 Fonts
    13. 13. Arial Helvetica
    14. 14. Arial Helvetica ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
    15. 15. font-family : arial;
    16. 16. font-family : helvetica, arial, sans-serif;
    17. 17. Times Times New Roman
    18. 18. Times Times New Roman ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
    19. 19. font-family :
    20. 20. font-family : times, 'times new roman', serif;
    21. 21. Georgia
    22. 22. Georgia ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
    23. 23. Verdana Trebuchet MS
    24. 24. Verdana ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 Trebuchet MS ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
    25. 25. font-family : helvetica, arial, sans-serif;
    26. 26. font-family : verdana, helvetica, arial, sans-serif;
    27. 27. Courier New Comic Sans MS Impact 
    28. 28. Core Web Fonts
    29. 29. Core Web Fonts
    30. 30. Core Web Fonts 9 Fonts
    31. 31. EULA
    32. 32. EULA End-User License Agreement
    33. 33. Installed Fonts
    34. 34. Windows XP
    35. 35. Windows XP +9 Fonts Franklin Gothic Medium Lucid Console Lucida Sans Unicode Marlett Microsoft Sans Serif Palatino Linotype Symbol Tahoma Wingdings
    36. 36. Windows Vista
    37. 37. Windows Vista +7 Fonts Calibri Cambria Candara Consolas Constantia Corbel Segoe UI
    38. 38. Mac OS X
    39. 39. 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
    40. 40. Apple iLife
    41. 41. 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
    42. 42. Microso Office 2007
    43. 43. Microso Office 2007 +121 Fonts
    44. 44. Microso Office: Mac 2008
    45. 45. Microso Office: Mac 2008 +72 Fonts
    46. 46. MS Office: Mac & Windows
    47. 47. MS Office: Mac & Windows 62 Fonts
    48. 48. Web Safe Fonts
    49. 49. Windows
    50. 50. Windows 148 Fonts
    51. 51. Mac
    52. 52. Mac 134 Fonts
    53. 53. Mac & Windows
    54. 54. Mac & Windows 73 Fonts
    55. 55. Web Safe Fonts List www.speaking-in-styles.com/web-typography/Web-Safe-Fonts/
    56. 56. font-family : verdana, arial, helvetica, sans-serif;
    57. 57. font-family : corbel, verdana, arial, helvetica, sans-serif;
    58. 58. Web Safe Fonts
    59. 59. Web Safe Fonts ~180 Fonts
    60. 60. Linked Webfonts
    61. 61. Diavlo www.josbuivenga.demon.nl
    62. 62. @font-face {...}
    63. 63. @font-face { font-family: Diavlo; src: url(’Diavlo_BOOK_II_37.otf’); }
    64. 64. Name you give it. @font-face { font-family: Diavlo; src: url(’Diavlo_BOOK_II_37.otf’); }
    65. 65. Name you give it. @font-face { font-family: Diavlo; src: url(’Diavlo_BOOK_II_37.otf’); } Path to font file.
    66. 66. font-family : georgia, times, “times new roman”, serif;
    67. 67. Font-family name you give it. font-family : diavlo, georgia, times, “times new roman”, serif;
    68. 68. Download Fonts
    69. 69. Download Fonts Unlimited Fonts
    70. 70. File Format
    71. 71. File Formats
    72. 72. File Formats True Type (.ttf) Open Type (.otf)
    73. 73. IP
    74. 74. IP Intellectual Property
    75. 75. EULA
    76. 76. EULA End-User License Agreement
    77. 77. File Formats
    78. 78. File Formats Embedded Open Type (.eot)
    79. 79. .ttf & .otf
    80. 80. .ttf & .otf v3.1
    81. 81. .ttf & .otf
    82. 82. .ttf & .otf Coming Soon
    83. 83. .ttf & .otf
    84. 84. .ttf & .otf ??????????
    85. 85. So...
    86. 86. Download Fonts Web Safe Fonts Core Web Fonts Generic Font-families
    87. 87. h1 { font-family : diavlo, georgia, times, “times new roman”, serif; } p{ font-family : corbel, verdana, arial, helvetica, sans-serif; }
    88. 88. Download Fonts h1 { font-family : diavlo, georgia, times, “times new roman”, serif; } p{ font-family : corbel, verdana, arial, helvetica, sans-serif; }
    89. 89. Download Fonts h1 { font-family : diavlo, georgia, times, “times new roman”, serif; } Web Safe Fonts p{ font-family : corbel, verdana, arial, helvetica, sans-serif; }
    90. 90. 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; }
    91. 91. 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; }
    92. 92. 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.
    93. 93. 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.
    94. 94. 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.
    95. 95. 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.
    96. 96. 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.
    97. 97. 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
    98. 98. 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.
    99. 99. design is about overcoming limits
    100. 100. Fluid Typography
    101. 101. Choosing Your Fonts
    102. 102. 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; }
    103. 103. 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; }
    104. 104. 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; }
    105. 105. 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; }
    106. 106. 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; }
    107. 107. For headline copy use fonts with similar widths and kerning. Web Typography
    108. 108. For headline copy use fonts with similar widths and kerning. Web Typography
    109. 109. For body copy select fonts with bold, italic, and bold/italic versions.
    110. 110. 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
    111. 111. 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
    112. 112. 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
    113. 113. 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.
    114. 114. 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.
    115. 115. www.speaking-in-styles.com/web-typography
    116. 116. { 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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×