Web typographie

1,232
-1

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,232
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
23
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.

    ×