La typographie a toujours été le grand oublié du design web, pourtant le texte occupe bien souvent la plus majeur partie de l’espace alloué au design. Beaucoup d’articles existent déjà sur le sujet, je ne fais donc qu’apporter ma modeste pierre française à l’édifice principalement anglo-saxons.
Les typos web
En tout et pour tout, un designer web ne peut utiliser qu’une douzaine de typo pour les corps de textes et les titres importants si il veut garantir un bon référencement et un confort de lecture au visiteur.
Douze typos c’est très peu, surtout quand on compte parmi elles la Comic Sans Ms!
Vous pouvez les tester ici : Typetester.org.
Pour info, voici les familles de typo proposées par Dreamweaver par défaut :
- Arial, Helvetica, sans-serif
- Courier New, Courier, monospace
- Times New Roman, Times, serif
- Georgia, Times New Roman, Times, serif
- Verdana, Arial, Helvetica, sans-serif
- Geneva, Arial, Helvetica, sans-serif
On peut aussi ajouter la typographie Lucida qui est de plus en plus présente sur Internet (c’est la typographie par défaut du site d’Apple) et dont la famille s’écrit de cette manière :
- « Lucida Grande », »Lucida Sans Unicode », Arial, Verdana, sans-serif
Il est nécessaire de préciser ces deux variantes car la Lucida Grande n’est pas présentes par défaut sur PC.
En jouant sur divers paramètres comme font-weight, font-size, letter-spacing (interlettrage) ou line-height (interlignage) on peut réussir à produire des miracles, même du graphisme en pure css comme ce logo, cet homer simpsons en css ou cette illustration.
La solution :
Plusieurs solutions existent pour étoffer cette offre.
1. siFr : Les titres de ce blog sont générés grâce au siFr que l’on peut télécharger ici. C’est une astuce très répandue qui consiste à remplacer à la volé le texte html ciblé en javascript par des fichiers flashs.
Avantages : le texte est sélectionnable, copiable et référençé (puisque le texte initial reste dans le DOM html), marche aussi pour des liens.
Inconvénients : la limitation des styles applicables au texte et surtout le poids des flashs (sur la homepage, on atteint la limite sur ce blog).
2. Typeface : typeface permet aussi d’afficher un très grand nombre de typo sans charger de swf, grâce au canevas et au VML, deux éléments html permettant le dessin. Typeface est téléchargeable ici.
Avantages : Plus léger que siFr, beaucoup de styles applicables, texte référençé.
Inconvénients : Texte difficilement sélectionnable, la typo doit être en .ttf pour être convertie (et l’utilisateur doit posséder les droits de diffusion), ne fonctionne pas pour les liens.
Bonne pratiques de la typo sur internet :
Quelques idées lues sur divers blog pour permettre au lecteur de bénéficier de meilleurs conditions de lectures.
1. Evitez d’avoir des lignes trop longues qui fatiguent la lecture.
2. Laissez votre texte respirer. C’est-à-dire, ségmentez votre texte en paragraphes pas trop longs, utilisez les blockquotes.
Eh oui! Je suis un blockquote. Je suis une manière simple et efficace de différencier du texte. Particuliérement utilisée pour les citations, je crée une rupture dans le paragraphe.
3. Créez des niveaux de lectures bien identifiables : titres, sous-titres, corps de texte.
Il faut créer des contrastes typographiques jouant sur la taille, la graisse et les familles de caractère.
Plus les contrastes sont forts entre deux styles de contenus plus le cerveau aura de facilité à se dire : « Sur ce site, le titres sont comme ça, les liens sont bleu et soulignés etc… ».
4. Bleu et souligné! Des études ont révélées que du texte bleu souligné était immédiatement reconnu comme un lien. C’est pourquoi des nombreux sites gardent le bleu comme couleur de lien : Google, Amazon, Facebook, Apple, Ebay, Microsoft, Yahoo, Wordpress…
Sans suivre cette règle à la lettre, n’oubliez pas de donner à vos liens une couleur et un style particulier qui démarque cette fonction des autres.
5. Gérez les contrastes dans les couleurs de texte.
Par exemple : éviter d’avoir du texte noir 100% sur un fond blanc 100% et vice versa. Eviter aussi d’avoir des fonds qui nuise à la lecture : motifs trop présents ou couleurs qui luttent entre elles (genre fond rouge et texte bleu).
6. Jouez avec l’interlignage. Souvent, en augmentant légèrement ce paramètre, on obtient un meilleur gris typographique et un texte plus aéré.
7. N’ayez pas peur du scroll vertical! C’est une pratique habituelle sur les systèmes d’exploitation.
Pour des textes longs n’hésitez pas à déborder verticalement plutôt que d’augmenter le nombre de mots par ligne.
La liste est non exhaustive bien sûr. Pour d’autres règles et dans un propos plus extrémiste encore, vous pouvez consulter le papy des ergonomes, Mr Jakob Nielsen qui met réguliérement à jour son site d’articles sur ce sujet : useit.com
A lire :
- Les meilleurs typos de 2008 pour FontShop
- Les meilleurs typos de 2008 pour ilovetypography
- Les articles de Smashing magazine sur le sujet
Du neuf sur le blog :
Pour rester un peu sur le même sujet, certains ont pu remarquer que le site avait changé avec un header made in processing et des ajustements graphiques et dans le css au niveau des textes et des niveaux de lecture.
Pour le header, le choix est assez risqué niveau compatibilité, puisque le plugin java n’est pas installé sur toutes les machines (même si google dit que 93% des lecteurs du blog sont équipés). Peu être d’autres modifs à venir pour cette année !
8 Commentaires
Article très intéressant
Il y a toutefois un oubli de taille a mon avis dans les solutions permettant d’utiliser d’autres typo que les typos web.
Cette solution c’est tout simplement la solution des standards, et la propriété CSS font-face.
Cette propriété permet en effet d’intégrer n’importe qu’elle typo à votre site.
Puisqu’évidement, rien n’est parfait, son usage n’est pas aussi aisé qu’il ne devrait l’être.
En effet, la propriété n’est qu’en partie supportée par IE (depuis sa version 4) dans la mesure ou seul le format de typo propriétaire EOF de Microsoft est accepté.
Sur les autre navigateurs (les bons), la propriété est supportée dans toutes les dernières versions (Firefox 3.1, derniers Webkit donc Safari, Opera10…)
Cette solution permet d’écrire quelque chose comme
@font-face {
font-family: Cosmetica;
src: url(‘./MgOpenCosmeticaRegular.ttf’);
}
body{
font-family : Cosmetica, Arial, Verdana, sans-serif
}
La police Cosmetica sera alors utilisé par les navigateurs supporté tandis que les autre afficheront la typo web habituelle (ici Arial).
Les autres solutions se dégrade s’il on pas Javascript activé, ou de support de Canvas, VML, celle ci se dégrade si le navigateur n’est pas suffisamment récent.
Cela ne me semble pas plus gênant
Alors allons, il est temps d’utiliser toutes les possibilité du web et d’inciter les utilisateurs à aller vers des navigateurs respectueux des standards.
J’arrête ici ce commentaire fleuve
Et voilà, mal relu, le format propriétaire de IE, c’est EOT pas EOF.
Merci pour l’ajout, par ce que je connaissais pas du tout cette propriété!
Mais le problème de cette solution est de convertir sa typo en EOT. Et ensuite, il faut faire des commentaires conditionnelles avec les deux fichiers différents liés en css.
Pour le siFr et Typeface, si la personne n’a pas activé Javascript (ce qui est très rare), la typo n’est simplement pas remplacé comme pour la solution avec le l’attribut font-face.
De toute façon, j’ai décidé d’arrêter de tester mes sites sur IE (nan je déconne) !
C’est un problème seulement si tu tiens a avoir la typo sur IE aussi.
Mais la typo non-web, ca reste de « l’enhancement », ca fonctionne sans.
Pour moi ca rentre donc dans le cadre des techniques de progressive enhancement (http://www.alistapart.com/articles/understandingprogressiveenhancement).
Rapporté a la TV cela donnerait quelquechose comme :
Si votre TV supporte la HD, on vous fourni la HD, si vous en êtes resté au SD sur un viel écran a tube, c’est celui ci qui est affiché.
Chouette article
.
Va falloir que je regarde en détail les « 50 Useful Design Tools For Beautiful Web Typography » de Smashing magazine.
C’est peut-être pas une découverte mais il y a pas mal de sites qui utilisent la typographie de manière originale sur : http://typesites.com/
@ woumpah : Ouais smashing magazine est juste est une mine d’or!
Chouette article, ne pas oublier aussi les nouvelles fontes de Vista qui sont vraiment très belles. Par exemple ça coute rien de rajouter une petite Corbel/Calibri en face de la traditionnelle famille « Verdana, Arial, sans ».
Quand a l’EOT, c’est même pas la peine d’y penser. L’utilitaire de conversion est affreux et ne fonctionne que si la licence de la fonte autorise la distribution, ce qui n’est à peu près jamais le cas.
Mais je pense que ça vaut le coup de faire une petite detection de browser pour n’utiliser « uniquement » siFR (beurk) que pour IE, Firefox<3, Safari<4 et le reste. D’ailleurs si quelqu’un a une façon élégante de faire ça en en JS je suis preneur.
Sinon toujours au rayon typographie, la propriété -moz-column-count est à essayer également… (encore buggé dans webkit malheureusement)
Deux autres technos pour la typo:
-cufon, inspiré de typeface.js
-les solution server-side comme flir (php) ou les fonctions de certains CMS