Vous êtes sur Barbablog et tu kiffes jeune. Cherche sur ce blog...

Typo web

Nous, pauvres designers web, sommes bien malheureux. Je pense m’exprimer au nom de tous mes confrères lorsque je dis : les polices sur le web, c’est la misère.

Pourtant, le texte est un élément majeur du design d’une page web. Problème : sur le web le nombre de polices est limité. Là où un graphiste papier a à sa disposition un nombre quasi infini de polices, le designer web lui, en a 7 : arial, verdana, helvetica, georgia, times, trebuchet et courrier. Ca limite les effets de styles.

Historiquement, ceci s’explique par le fait qu’une page web n’encapsule pas les polices, contrairement à un fichier flash par exemple. Lors du rendu d’une page sur un écran, le navigateur se sert des polices présentes sur le poste client pour la mise en forme du texte. Si l’une des polices déclarée dans votre page n’est pas présente sur le poste client, le navigateur ne pourra pas l’afficher. On se limite donc aux polices les plus largement diffusées sur les différents OS. D’où le nombre réduit de polices.

Heureusement, les css sont là pour nous aider et nous faire passer de l’état pauvre designers bien malheureux, voire quasi frustés, à celui de riches designers heureux et épanouis [1]. Les CSS et leurs propriétés de texte permettent au final de s’en sortir pas trop mal. Petit inventaire quasi exhaustif.

Avant tout

La propriété font-family permet de choisir sa police. En général on renseigne plusieurs valeurs (helvetica, verdana, sans-serif) en mettant en première position sa police d prédilection. Ainsi si le visiteur n’a pas la première police sur son poste, la deuxième prendra le relais puis la troisième. En général, on achève cette liste avec une de ces 2 valeurs génériques : serif ou sans-serif, qui ne sont pas des noms de polices à proprement parler mais plutôt des familles génériques qui correspondent grosso modo à times ou arial, ou tout autre type de police serif (avec déco) ou sans-serif (sans deco) mais là, on est hors sujet.

Les basiques

Les propriétés font-size, font-weight et font-style nous permettent de changer la taille, la graisse et le style des polices. La base quoi.
Un peu plus exotique, la propriété text-transform permet de jouer avec la casse, très utilisé pour la titraille (h1, h2, h3…).

Téléchargez l’exemple

L’indispensable line-height

line-height permet de modifier la taille des interlignes. Carrément indispensable. Je ne fais pas une seule maquette sans changer le line-height standard (par défaut à 100%) pour le fixer à 150%. Ca fait respirer la page.

Téléchargez l’exemple

Plus avancé

word-spacing gère l’espace entre les mots tandis que letter-spacing gère l’espace entre les lettres. Cela permet d’étirer ou de contracter un texte. Ces 2 propriétés sont généralement utilisées ensemble : quand on modifie le word spacing, on équilibre visuellement le letter spacing. Ces 2 propriétés sont susceptibles de changer totalement l’esprit d’une police. A utiliser avec modération, plutôt dans les titres que dans les paragraphes. Mais en même temps, vous faites bien ce que vous voulez !

Téléchargez l’exemple

Les exotiques

font-variant transforme votre texte en petites capitales. Attention, ce n’est pas le même effet que text-transform. Sympa comme effet.
Le pseudo éléments :first-letter vous autorise à appliquer un style particulier à la première lettre de l’élément ciblé. Idéal pour créer un effet lettrine. Combiné à un float, c’est du plus bel effet (le texte flotte autour de la première lettre).

Téléchargez l’exemple

Moins utilisées

text-indent comme son nom l’indique indente votre texte. C’est-à-dire qu’il décale de x pixel le début de votre paragraphe. text-align permet de ferre son texte à gauche, à droite ou même de le justifier. Ces 2 propriétés sont peu utilisées en web : le texte est très souvent ferré à gauche, rarement à droite et quasiment jamais justifié (pour éviter les effets cheminées dans les paragraphes).

Téléchargez l’exemple

Pour plus d’infos sur toutes ces propriétés, je vous invite à consulter le site du W3schools sur les propriétés font et texte.

Bien sûr, il existe d’autres méthodes plus sophistiquées permettant de surmonter les limites des navigateurs web, en appelant un fichier flash dynamiquement par exemple (IFR) ou en utilisant des images et du javascript, le tout restant très accessible donc ne pénalisant pas le référencement, mais là on se lance tout de suite dans l’usine à gaz. D’ailleurs, je ne connais pas de gros sites utilisant ce genre de méthode pour la typo.

Et aujourd’hui avec du texte basique, on est plus très loin d’un rendu image. sur mac les polices sont anti aliasées (c-à-d que le navigateur lisse les polices) et on peut espérer qu’avec la sortie de Vista, Microsoft va s’aligner. L’utilisation des CSS, même si les effets restent limités, me paraît être une bonne piste.

  1. quoique, riche, ça se discute

15 réponses à “Typo web”

  1. Xu dit :

    Concernant Sifr, Newsvine s’en servait pour les titres d’articles (logique de la part de Mike !) mais j’ai l’impression que cela a été remplacé par des images pour les titres de rubriques et du texte aliasé pour les articles.

    Et oui IE 7 (XP ou Vista) propose bien en standard le lissage des polices.

  2. fredmac dit :

    Et encore… et encore, il n’est qu’a voir le rendu des « polices systeme » sur mac et pc pour se rendre encore plus triste… Essayez un georgia en bold italic sur mac et pc. C’est le jour et la nuit.

    C’est vraiment la dèche. Et se ne sont pas quelques attributs CSS qui y changeront grand chose.

    Enfin, pour finir je ne vois pas pourquoi les concepteurs d’OS n’implémentent pas de nouvelles typos. Où serait le problème ? Eclairez moi… C’est tout de même pas une simple question de sous ?

  3. Xu dit :

    Fred : tu crois franchement qu’Apple et MS vont se mettre d’accord sur de nouvelles typos (et leur affichage respectif) ? 😉 Sans parler des distrib Linux qui n’auront accès qu’à des polices libres de droit (ça + un plugin flash foireux m’ont fait désinstaller ma partition ubuntu…)

  4. Gregoire dit :

    Ne désespère pas Fred, je t’assure qu’avec les css et un peu d’inspiration on peut faire de beaux sites. Jette un coup d’oeil ici : http://www.cssbeauty.com/

  5. fredmac dit :

    Je n’en doute pas une seule seconde… mais concernant cssbeauty il est à noter que la plupart des sites présentés font appel à des images pour les titres, les menus…

    Je vais devoir m’y ressoudre et passer mes menu supérieur et inférieur en image, alors même qu’il s’agit d’une typo systeme.

  6. Fred2501 dit :

    Peut-être qu’un jour on pourra inclure du texte HTML faisant référence à une police installée sur un serveur de la même manière qu’un site peut changer de forme en se référant à un fichier CSS externe.

  7. Merci pour cet excellent article ! Je me permettrai, demain, d’en poster la référence sur mon site dédié au contenu internet et par la même occasion, je me permettrai également de vous soumettre une question qu’une lectrice m’a laissée sur mon site :

    A propos d’îcone (ou plutôt de logo), comment est-il possible de crée un image nouvelle tout en restant intelligible à tous sans utiliser de légende? Doit-on se référer à des symbôles culturellement connus ? Comment peut-on approcher “le travail graphique” sans tomber dans les piège du cliché ou dans l’abstraction?

    Je vous laisse le lien également concernant ce commentaire et le billet auquel il se rapporte :

    http://ecrirepourleweb.wordpress.com/2007/01/16/les-icones-le-poids-des-images/#comments

    Merci et à bientôt !

    Muriel

  8. bloodrath dit :

    Bel article, même si je ne suis pas tout à fait d’accord sur tout, notamment l’utilité du text-indent et text-align dont j’use et abuse personnellement.

    Pour en revenir aux typo un excellent article sur l’ergonomie, concluait que les plus lisibles restaient les standards : arial, times et consorts.

    Dès que je remet la main dessus je te l’envoie.

  9. Message à Bloodrath, lorsque tu auras remis la main sur cet article, tu peux me l’envoyer également ? lexis (ad) skynet.be.
    Merci ! Muriel

  10. […] Muriel me pose une question intéressante : A propos d’îcone (ou plutôt de logo), comment est-il possible de créer un image nouvelle tout en restant intelligible à tous sans utiliser de légende? Doit-on se référer à des symboles culturellement connus ? Comment peut-on approcher “le travail graphique” sans tomber dans les piège du cliché ou dans l’abstraction? […]

  11. Le magicien dit :

    Fred2501 a dit :

    Peut-être qu’un jour on pourra inclure du texte HTML faisant référence à une police installée sur un serveur de la même manière qu’un site peut changer de forme en se référant à un fichier CSS externe.

    En faite il existe la « police dynamique » qui permet d’utiliser des polices qui ne sont donc pas présentes sur l’ordinateur de vos visiteurs.
    C’est par l’intermediaire du logiciel Weft de chez Microsoft que vous allez créer vos fichiers « font objects » (.eot) et la feuille de ce style qui appellera ceux-ci.

    Sinon bon article.

  12. Gregoire dit :

    Fred2501 >> Pour la police appelée dynamiquement, il semble que certains réfléchissent sérieusement à une solution pour intégrer dynamiquement des polices true type dans les pages web.

  13. yin-yin dit :

    Article très intéressant. Je ferai un trackback lorsque j’aurai fini mon article sur les polices du thème que j’utilise.

    J’ai vu une photo de Saint-Quay Portrieux (Plage du Casino) dans ton Moblogging. Je suis de là bas 🙂

  14. Tableau dit :

    Excellent article, merci beaucoup! Je le garde en favoris pour mon futur site sur l’optimisation de site web.

    Bonne journée à tous les dingues de code!

  15. Heureusement que les propriétés CSS sont là pour enrichir le peu de choix que nous avons…

Laisser un commentaire