LA TYPOGRAPHIE SUR LE WEB
POLICES PAR DÉFAUT
AVANTAGES  Aucun chargement supplémentaire nécessaire.Pas de problème de rendu de polices (en principe).                 F...
INCONVÉNIENTS             Peu de choix de polices.Moins de contrôle sur le design du côté utilisateur.
INTÉGRATIONp {font-family:"Times New Roman",Times, serif;}
RESSOURCESTester et créer ses font stacks.
TYPETESTERhttp://www.typetester.org/
FONT MATRIXhttp://media.24ways.org/2007/17/fontmatrix.html
TYPECHARThttp://www.typechart.com/
AWESOME FONTSTACKS   http://awesome-fontstacks.com/
REMPLACEMENTPAR DES IMAGES
AVANTAGESToutes les polices peuvent être affichées. Pas de problème de rendu de polices.
INCONVÉNIENTS      Pas dynamique.   Compliqué à intégrer.   Mauvais pour la SEO.  Texte pas sélectionnable.
INTÉGRATIONHTML   <h1 class="integration">         Je suis une image       </h1>CSS    h1.integration {       width: 2350p...
SIFR
AVANTAGES  Pas vraiment.
INCONVÉNIENTS          Flash.       Javascript.  Un peu long à intégrer.
CUFON
AVANTAGESFonctionnalités typographiques avancées.    Bonne compression des polices.  Plus simple à implémenter que sIFR.
INCONVÉNIENTS    Javascript.
@FONT-FACE
AVANTAGES          Accessibilité.CSS3: implémentation très simple.  Pas de javascript ou de flash.
INCONVÉNIENTS  Pas encore supporté par tous les navigateurs.Problème de copyright: la police est téléchargeable.          ...
FORMATS DE POLICES                 TrueType                OpenType       EOT (Embedded Open Type)WOFF (en cours de standa...
IMPLÉMENTATIONCharger la police sur le serveur,puis seulement deux lignes dans le CSS:@font-face{font-family: Quicksand; s...
IMPLÉMENTATION AVANCÉEPour s’assurer d’une meilleure compatibilité sur les navigateurs.@font-face {font-family: Graublauwe...
@FONT-FACE KIT GENERATOR   Sur FontSquirrel.com, générer des kits de fonts.
OPTIONS DU GÉNÉRATEUR Apply Hinting - Fix Vertical Metrics - Remove Kerning -        Fix Missing Glyphs - X-height Matchin...
TROUVER DES POLICESFont Squirrelhttp://fontsquirrel.com/The League of Movable Typehttp://theleagueofmoveabletype.com/Open ...
WEB FONTS HÉBERGÉES    Typekit et Google Web Fonts
TYPEKITSolution payante, qui utilise des fonts professionnelles offertesen partenariat avec des fondries comme Adobe, Font...
AVANTAGES    Polices professionnelles.Pas de problèmes de copyright.       Installation simple.
INCONVÉNIENTS          Paiement par abonnement.                  Javascript.Les fonts sont hébergées ailleurs, requêtes DN...
IMPLÉMENTATION     Deux lignes de code à ajouter dans le <head>,      puis choisir ses polices et les ajouter au kit.Pour ...
AUTRES SITESFontDeckhttp://fontdeck.com/FontsLive (Monotype)http://www.fontslive.com/Fonts.com webfontshttp://webfonts.fon...
GOOGLE WEB FONTSSolution gratuite, avec un catalogue de polices limité.
AVANTAGES  Pas de problèmes de copyright.      Installation (très) simple.API disponible pour les dévelopeurs.
INCONVÉNIENTS    Peu de polices (environ une centaine).                  Javascript.Les fonts sont hébergées ailleurs, req...
IMPLÉMENTATIONDans le <head><link href=http://fonts.googleapis.com/css?family=Michromarel=stylesheet type=text/css>Dans le...
DES QUESTIONS?Je mettrai toutes les sources mentionnées dans cette        présentation sur http://webmardi.ch             ...
Web typographie
Upcoming SlideShare
Loading in...5
×

Web typographie

1,108

Published on

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,108
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
21
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Web typographie

    1. 1. LA TYPOGRAPHIE SUR LE WEB
    2. 2. POLICES PAR DÉFAUT
    3. 3. AVANTAGES Aucun chargement supplémentaire nécessaire.Pas de problème de rendu de polices (en principe). Facile à intégrer.
    4. 4. INCONVÉNIENTS Peu de choix de polices.Moins de contrôle sur le design du côté utilisateur.
    5. 5. INTÉGRATIONp {font-family:"Times New Roman",Times, serif;}
    6. 6. RESSOURCESTester et créer ses font stacks.
    7. 7. TYPETESTERhttp://www.typetester.org/
    8. 8. FONT MATRIXhttp://media.24ways.org/2007/17/fontmatrix.html
    9. 9. TYPECHARThttp://www.typechart.com/
    10. 10. AWESOME FONTSTACKS http://awesome-fontstacks.com/
    11. 11. REMPLACEMENTPAR DES IMAGES
    12. 12. AVANTAGESToutes les polices peuvent être affichées. Pas de problème de rendu de polices.
    13. 13. INCONVÉNIENTS Pas dynamique. Compliqué à intégrer. Mauvais pour la SEO. Texte pas sélectionnable.
    14. 14. INTÉGRATIONHTML <h1 class="integration"> Je suis une image </h1>CSS h1.integration { width: 2350px; height: 75px; background: url("images/header-image.jpg") top right; margin: 0 0 0 -2000px;}
    15. 15. SIFR
    16. 16. AVANTAGES Pas vraiment.
    17. 17. INCONVÉNIENTS Flash. Javascript. Un peu long à intégrer.
    18. 18. CUFON
    19. 19. AVANTAGESFonctionnalités typographiques avancées. Bonne compression des polices. Plus simple à implémenter que sIFR.
    20. 20. INCONVÉNIENTS Javascript.
    21. 21. @FONT-FACE
    22. 22. AVANTAGES Accessibilité.CSS3: implémentation très simple. Pas de javascript ou de flash.
    23. 23. INCONVÉNIENTS Pas encore supporté par tous les navigateurs.Problème de copyright: la police est téléchargeable. Rendu pas toujours très bon.
    24. 24. FORMATS DE POLICES TrueType OpenType EOT (Embedded Open Type)WOFF (en cours de standardisation par le W3C) SVG
    25. 25. IMPLÉMENTATIONCharger la police sur le serveur,puis seulement deux lignes dans le CSS:@font-face{font-family: Quicksand; src: url(Quicksand.otf);}h3{font-family: "Quicksand", Gil Sans, arial, sans-serif;}
    26. 26. IMPLÉMENTATION AVANCÉEPour s’assurer d’une meilleure compatibilité sur les navigateurs.@font-face {font-family: Graublauweb;src: url(Graublauweb.eot); /* IE9 Compatibility Modes */src: url(Graublauweb.eot?) format(eot), /* IE6-IE8 */url(Graublauweb.woff) format(woff), /* Modern Browsers */url(Graublauweb.ttf) format(truetype), /* Safari, Android, iOS */url(Graublauweb.svg#svgGraublauweb) format(svg); /* Legacy iOS */}
    27. 27. @FONT-FACE KIT GENERATOR Sur FontSquirrel.com, générer des kits de fonts.
    28. 28. OPTIONS DU GÉNÉRATEUR Apply Hinting - Fix Vertical Metrics - Remove Kerning - Fix Missing Glyphs - X-height MatchingWebOnly - Subset Fonts - Style Linking - Base64 EncodeOpenType Options - Font Name Suffix - Em Square Value Adjust Spacing - Postscript Hinting
    29. 29. TROUVER DES POLICESFont Squirrelhttp://fontsquirrel.com/The League of Movable Typehttp://theleagueofmoveabletype.com/Open Font Libraryhttp://openfontlibrary.org/Exljbrishttp://exljbris.com/
    30. 30. WEB FONTS HÉBERGÉES Typekit et Google Web Fonts
    31. 31. TYPEKITSolution payante, qui utilise des fonts professionnelles offertesen partenariat avec des fondries comme Adobe, FontFont, Veerou Büro Destrukt.
    32. 32. AVANTAGES Polices professionnelles.Pas de problèmes de copyright. Installation simple.
    33. 33. INCONVÉNIENTS Paiement par abonnement. Javascript.Les fonts sont hébergées ailleurs, requêtes DNS supplémentaires.
    34. 34. IMPLÉMENTATION Deux lignes de code à ajouter dans le <head>, puis choisir ses polices et les ajouter au kit.Pour finir, ajout d’un sélecteur où on veut utiliser la police.
    35. 35. AUTRES SITESFontDeckhttp://fontdeck.com/FontsLive (Monotype)http://www.fontslive.com/Fonts.com webfontshttp://webfonts.fonts.com/WebTypehttp://www.webtype.com/
    36. 36. GOOGLE WEB FONTSSolution gratuite, avec un catalogue de polices limité.
    37. 37. AVANTAGES Pas de problèmes de copyright. Installation (très) simple.API disponible pour les dévelopeurs.
    38. 38. INCONVÉNIENTS Peu de polices (environ une centaine). Javascript.Les fonts sont hébergées ailleurs, requêtes DNS supplémentaires.
    39. 39. IMPLÉMENTATIONDans le <head><link href=http://fonts.googleapis.com/css?family=Michromarel=stylesheet type=text/css>Dans le CSSh1 { font-family: Michroma, arial, serif; }
    40. 40. DES QUESTIONS?Je mettrai toutes les sources mentionnées dans cette présentation sur http://webmardi.ch dès demain.
    1. A particular slide catching your eye?

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

    ×