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 !

Graphiste et illustratrice, Marion Bataille a exercé les deux métiers pendant longtemps. Ces créations, dans laquelle la typographie et la couleur ont beaucoup d’importance nous entraînent dans un monde imaginaire où les mots et les lettres prennent forme dans une atmosphère ludique et poétique.
Elle a également illustré de nombreux ouvrages pour enfants.

Auteur et illustratrice

* 1999 : Livre de lettres – Thierry MAGNIER
* 2005 : Bruits – Thierry MAGNIER

Illustratrice

* 2001 : La Poésie surréaliste – MANGO (Albums Dada : Il suffit de passer le pont « ), sur des textes de Breton, Soupault, Artaud, Eluard, Desnos, Aragon etc…
* 2003 : Ornifle ou le courant d’air – Texte de Jean Anouih – FLAMMARION (Folio) adultes
* 2006 : Modeste proposition :pour empêcher les enfants des pauvres d’être à la charge de leurs parents ou de leur pays et pour les rendre utiles au public. Jonathan Swift – Editions MILLE ET UNE NUITS (La petite collection) adultes

Dans son livre ABC-3D, elle nous convie à la découverte de l’alphabet de façon remarquable.

Pour en savoir plus sur l’artiste c’est ici, on attend impatiemment la sortie de ce merveilleux livre.

Merci flutiste pour cette découverte!