SlideShare une entreprise Scribd logo
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).

                 Facile à intégrer.
INCONVÉNIENTS

             Peu de choix de polices.

Moins de contrôle sur le design du côté utilisateur.
INTÉGRATION

p {font-family:"Times New Roman",Times, serif;}
RESSOURCES

Tester et créer ses font stacks.
TYPETESTER
http://www.typetester.org/
FONT MATRIX
http://media.24ways.org/2007/17/fontmatrix.html
TYPECHART
http://www.typechart.com/
AWESOME FONTSTACKS
   http://awesome-fontstacks.com/
REMPLACEMENT
PAR DES IMAGES
AVANTAGES

Toutes 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ÉGRATION

HTML   <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;}
SIFR
AVANTAGES

  Pas vraiment.
INCONVÉNIENTS

          Flash.
       Javascript.
  Un peu long à intégrer.
CUFON
AVANTAGES

Fonctionnalité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.

           Rendu pas toujours très bon.
FORMATS DE POLICES

                 TrueType
                OpenType
       EOT (Embedded Open Type)
WOFF (en cours de standardisation par le W3C)
                    SVG
IMPLÉMENTATION

Charger 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;}
IMPLÉMENTATION AVANCÉE
Pour 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 */
}
@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 Matching
WebOnly - Subset Fonts - Style Linking - Base64 Encode
OpenType Options - Font Name Suffix - Em Square Value
          Adjust Spacing - Postscript Hinting
TROUVER DES POLICES

Font Squirrel
http://fontsquirrel.com/
The League of Movable Type
http://theleagueofmoveabletype.com/
Open Font Library
http://openfontlibrary.org/
Exljbris
http://exljbris.com/
WEB FONTS HÉBERGÉES
    Typekit et Google Web Fonts
TYPEKIT

Solution payante, qui utilise des fonts professionnelles offertes
en partenariat avec des fondries comme Adobe, FontFont, Veer
ou Büro Destrukt.
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 DNS
                supplémentaires.
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.
AUTRES SITES

FontDeck
http://fontdeck.com/
FontsLive (Monotype)
http://www.fontslive.com/
Fonts.com webfonts
http://webfonts.fonts.com/
WebType
http://www.webtype.com/
GOOGLE WEB FONTS

Solution 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, requêtes DNS
                supplémentaires.
IMPLÉMENTATION

Dans le <head>
<link href='http://fonts.googleapis.com/css?family=Michroma'
rel='stylesheet' type='text/css'>

Dans le CSS
h1 { font-family: 'Michroma', arial, serif; }
DES QUESTIONS?

Je mettrai toutes les sources mentionnées dans cette
        présentation sur http://webmardi.ch
                      dès demain.

Contenu connexe

En vedette

La Macrotypographie de la page Web
La Macrotypographie de la page WebLa Macrotypographie de la page Web
La Macrotypographie de la page Web
Fradier Anne-Sophie
 
Codes Typographiques1
Codes Typographiques1Codes Typographiques1
Codes Typographiques1
Signlighter
 
De La typographie Lisible à la Typographie Visible
De La typographie Lisible à la Typographie VisibleDe La typographie Lisible à la Typographie Visible
De La typographie Lisible à la Typographie Visible
LCxLM
 

En vedette (19)

Le web, c’est 99 % de typographie.
Le web, c’est 99 % de typographie.Le web, c’est 99 % de typographie.
Le web, c’est 99 % de typographie.
 
La Macrotypographie de la page Web
La Macrotypographie de la page WebLa Macrotypographie de la page Web
La Macrotypographie de la page Web
 
Typographie pour le Web
Typographie pour le WebTypographie pour le Web
Typographie pour le Web
 
mettre en œuvre des compositions C-L-A-I-R-E-S
mettre en œuvre des compositions C-L-A-I-R-E-Smettre en œuvre des compositions C-L-A-I-R-E-S
mettre en œuvre des compositions C-L-A-I-R-E-S
 
Techniques de web design
Techniques de web designTechniques de web design
Techniques de web design
 
L'art de la typographie, d'illustrator à InDesign
L'art de la typographie, d'illustrator à InDesignL'art de la typographie, d'illustrator à InDesign
L'art de la typographie, d'illustrator à InDesign
 
Koudetat identite - Typographie
Koudetat identite - TypographieKoudetat identite - Typographie
Koudetat identite - Typographie
 
Comment construire son univers iconographique par Julia Moroge
Comment construire son univers iconographique par Julia MorogeComment construire son univers iconographique par Julia Moroge
Comment construire son univers iconographique par Julia Moroge
 
Cours de typographie (2) - Le flux typographique dans le prépresse
Cours de typographie (2) - Le flux typographique dans le prépresseCours de typographie (2) - Le flux typographique dans le prépresse
Cours de typographie (2) - Le flux typographique dans le prépresse
 
Codes Typographiques1
Codes Typographiques1Codes Typographiques1
Codes Typographiques1
 
UX methode-paris web
UX methode-paris webUX methode-paris web
UX methode-paris web
 
De La typographie Lisible à la Typographie Visible
De La typographie Lisible à la Typographie VisibleDe La typographie Lisible à la Typographie Visible
De La typographie Lisible à la Typographie Visible
 
La Typographie Web - CleverToday
La Typographie Web - CleverTodayLa Typographie Web - CleverToday
La Typographie Web - CleverToday
 
Bien composer le texte web
Bien composer le texte webBien composer le texte web
Bien composer le texte web
 
Cours de typographie (1) – La discipline visuelle
Cours de typographie (1) – La discipline visuelleCours de typographie (1) – La discipline visuelle
Cours de typographie (1) – La discipline visuelle
 
Les grilles macro typo pour le web ? facile !
Les grilles macro typo pour le web ? facile !Les grilles macro typo pour le web ? facile !
Les grilles macro typo pour le web ? facile !
 
explainMe | La typographie, quelques règles
explainMe | La typographie, quelques règlesexplainMe | La typographie, quelques règles
explainMe | La typographie, quelques règles
 
Edgar Degas
Edgar DegasEdgar Degas
Edgar Degas
 
Iab ads guidelines_2013
Iab ads guidelines_2013Iab ads guidelines_2013
Iab ads guidelines_2013
 

Similaire à Web typographie

Convention Medialibs : Raphaël Goetter (Introduction à la performance web)
Convention Medialibs : Raphaël Goetter (Introduction  à la performance web)Convention Medialibs : Raphaël Goetter (Introduction  à la performance web)
Convention Medialibs : Raphaël Goetter (Introduction à la performance web)
Medialibs
 
La plateforme Web Microsoft
La plateforme Web MicrosoftLa plateforme Web Microsoft
La plateforme Web Microsoft
Christophe Lauer
 
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
ENSIBS
 
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshopConfoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Frédéric Harper
 

Similaire à Web typographie (20)

Introduction à la performance web
Introduction à la performance webIntroduction à la performance web
Introduction à la performance web
 
Convention Medialibs : Raphaël Goetter (Introduction à la performance web)
Convention Medialibs : Raphaël Goetter (Introduction  à la performance web)Convention Medialibs : Raphaël Goetter (Introduction  à la performance web)
Convention Medialibs : Raphaël Goetter (Introduction à la performance web)
 
Webdesign
WebdesignWebdesign
Webdesign
 
Développez dans le futur, dès maintenant !
Développez dans le futur, dès maintenant !Développez dans le futur, dès maintenant !
Développez dans le futur, dès maintenant !
 
Développez dans le futur, dès maintenant !
Développez dans le futur, dès maintenant !Développez dans le futur, dès maintenant !
Développez dans le futur, dès maintenant !
 
Octo Technology - Refcard Tests Web front-end
Octo Technology - Refcard Tests Web front-endOcto Technology - Refcard Tests Web front-end
Octo Technology - Refcard Tests Web front-end
 
Octo RefCard test front-end
Octo RefCard test front-endOcto RefCard test front-end
Octo RefCard test front-end
 
20 minutes sur les typos en CSS
20 minutes sur les typos en CSS20 minutes sur les typos en CSS
20 minutes sur les typos en CSS
 
Présentation de CakePHP, 22/04/2010
Présentation de CakePHP, 22/04/2010Présentation de CakePHP, 22/04/2010
Présentation de CakePHP, 22/04/2010
 
La plateforme Web Microsoft
La plateforme Web MicrosoftLa plateforme Web Microsoft
La plateforme Web Microsoft
 
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
 
Installation et configuration d'AWSTATS "Outils d'analyse de Logs" sur Centos...
Installation et configuration d'AWSTATS "Outils d'analyse de Logs" sur Centos...Installation et configuration d'AWSTATS "Outils d'analyse de Logs" sur Centos...
Installation et configuration d'AWSTATS "Outils d'analyse de Logs" sur Centos...
 
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference EuratechnologieHTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
 
SAPIENS2009 - Module 4B
SAPIENS2009 - Module 4BSAPIENS2009 - Module 4B
SAPIENS2009 - Module 4B
 
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveauxMobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
 
initiation-dvptWEB-ericacademy.pdf
initiation-dvptWEB-ericacademy.pdfinitiation-dvptWEB-ericacademy.pdf
initiation-dvptWEB-ericacademy.pdf
 
Mon environnement de travail a-t-il encore un avenir ?
Mon environnement de travail a-t-il encore un avenir ?Mon environnement de travail a-t-il encore un avenir ?
Mon environnement de travail a-t-il encore un avenir ?
 
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
 
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshopConfoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
 
Wygday 2011 - Introduction à HTML5
Wygday 2011 - Introduction à HTML5Wygday 2011 - Introduction à HTML5
Wygday 2011 - Introduction à HTML5
 

Web typographie

Notes de l'éditeur

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. \n
  36. \n
  37. \n
  38. \n
  39. \n
  40. \n
  41. \n