Je viens de lire un excellent article de Corina Ciripitca paru chez DesignModo. L’équipe de designmodo a eu la gentillesse de m’autoriser à en faire une adaptation en français, merci à eux.

15 astuces typographiques pour les créatifs web débutants.

D’après l’article original de Corina Ciripitca «5 Quick Web Typography Tips for Newbies»  :

Tout les détails sont importants quand on crée un site internet. Celui ci ne sera efficace que si tous les éléments qui le compose s’harmonisent entre eux. Les créatifs expérimentés savent que chaque détail (même les plus anodins) nécessitent une attention particulière. Parlons par exemple de la typographie. Tout le monde sait que l’on doit faire attention au choix des polices, et à leurs dimensions, c’est vrai, mais ce n’est pas tout.

Les webdesigners débutants doivent être conscient de l’importance de la typographie dans la conception, la typographie n’est pas qu’un des éléments graphiques de votre projet, c’est surtout l’outil qui permet de présenter au mieux le contenu d’un site à ses visiteurs. Si vous vous lancez dans la création web nous aimerions partager avec vous quelques conseils typographique rapide à lire avant de commencer votre projet.

1. Les polices :

Vous savez déjà que le choix d’une police de caractères est important. : Qu’importe le contenu du site, si la police utilisée est illisible. Prenez soin de choisir une police qui mette en valeur votre projet, mais aussi qui s’affiche clairement dans toutes les tailles et déclinaisons.

2. Taille de la police :

Il ne faut surtout pas que vos lecteurs se fatiguent quand ils lisent votre site ou votre blog. Le choix de la taille de police est très important. Trop grande, elle demandera au visiteur d’utiliser beaucoup les barres de défilement pour prendre connaissance de tout le texte. Trop petite, elle transformera le lecture de votre site en un test ophtalmologique.

3. Laissez le choix aux utilisateurs d’ajuster la taille des polices

Chaque utilisateur est différent en créant votre design de site vous gardez en tête qu’il doit être ergonomique, utilisez des tailles de polices de caractères relatives, de tel manière que les lecteurs puisses en adapter la taille pour faciliter leur lecture.

4. N’en faites pas trop :

Bien sur vous voulez que votre site soit unique, mais il n’est pas nécessaire de trop jouer avec les polices pour ça, choisissez un nombre de polices limité. (a moins que votre site ne soit un catalogue de police bien sur ;o) ). La diversité est un atout pour les créatif, SAUF quand il s’agit du nombre de polices utilisés dans une même page.

5. Utiliser la bonne couleur :

Choisissez bien la couleur de votre police, elle doit être très contrasté avec son fond afin d’être lisible.

6. Utilisez les bons tirets

On utilise généralement trois sorte de tiret en typographie. On y prette rrement attention mais pourtant ils ont chacun leur rôle/

• Le « tiret cadratin » (dont le code HTML est — ou — )
• il sert généralement en début de phrase (pour introduire un dialogue par exemple) .
• Le tiret « demi-cadratin » (dont le code HTML est – ou –)
• il sert pour les listes, les plages (en 1-2 mois) ou des expressions relationnelles comme (La frontière Mexique – États-Unis) .
• Le trait d’union (-)(dont le code HTML est - ) sert pour sa part pour les mots composés.

Vous me direz que ces règles ne sont pas vitales pour votre projet, ce qui m’empêche que ne pas les respecter est un erreur…

7. Les guillemets (») ne sont pas des flèches direction :

On utilise généralement guillemets pour mettre un texte «entre guillemets» n’est pas rare cependant que certains les utilises pour indique une direction, c’est souvent le cas en bas des article qui propose par exemple de : Lire la suite» » . Il pourrait être très intéressant de renoncer à cette pratique

8. les points de suspension ne sont pas trois points séparés :

Les point de suspension (…) indiquent une coupure (ou une reprise) dans un texte afin de les représente on utilise souvent 3 pont séparés. Mais il existe un caractère typographique pour ça (dont le code html est … ou … )

9. Équilibrez vos contenus :

Il faut bien structure sa page , en simplifiant la structure, vous pouvez attirer l’oeuil du visiteur plus facilement sur le contenu que vous jugez important. Utiliser des grilles de conception (ici par exemple ) peut vous aider à optimiser votre structure de site.

10. Aérez votre texte

Il n’y a rien de plus terrifiant pour le visiteur qu’une page pleine de texte il renonce souvent à la lire et passe à autre chose. Laissez « respirer » votre texte, , gardez des espaces blanc sur votre site web. Laissez un espace pour les marges de tous les côtés du texte et entre les lignes.

11. Choisissez la bonne taille

Rappelez vous que votre texte est structuré, avec des titres, des sous-titres et des paragraphe, ces considération sont à prendre en compte dans votre design, la hiérarchie des information doit se retrouver dans les tailles de polices de vos titres sous titre et textes.

12. Alignez votre texte çà gauche

Idéalement (pour le web) votre texte. serait aligné à gauche et non justifié. En effet, si vous forcez la justification d’un texte, il peut devenir difficile à lire si il y a beaucoup d’espaces entre les mots.

13 (je passe sur le point 13 ) :

 Il parle le guillemets simple ou double et s’adresse plus a nos amis anglophones que vous pourrez approfondir dans l’article original http://designmodo.com/15-quick-web-typography-tips-for-newbies/

14. Une seule police par phrase :

J’en ai parlé précédemment, moins il y a de polices, plus le texte est lisible.Alors, rappelons ce point, il est très important, SAUF si vous voulez vraiment mettre l’accent sur quelque chose et souligner l’importance de c

15. Pensez à l’interlignage

Cela signifie qu’il faut un espace entre les lignes d’un texte. Celui ci dépend de la taille de votre police et il important, car il rend le texte plus lisible. En règle générale, l’interlignage doit être d’environ 140% la taille de la police . Expérimentez et avec l’expérience, vous trouverez ce qui est le meilleur choix pour votre site web.

Source de l’image