Comment choisir une police d’écriture pour allier style et efficacité sur son blog ?

Très vite dans la vie de votre blog, il y a un élément du design qui va devenir très important pour vos lecteurs : la police d’écriture (ou les polices) que vous choisissez pour afficher vos articles et vos contenus.

Cette police d’écriture peut faire toute la différence entre un blog facile à lire et un autre, elle peut vous donner une image amateur (au sens péjoratif du terme !) ou au contraire une image plus soignée, elle peut avoir un impact sur le temps de chargement de votre site. Elle suffit parfois à elle seule à créer un univers visuel unique.

Dans cet article, je vous propose quelques conseils à garder en tête pour bien choisir une police d’écriture.

1. Habituez-vous très tôt à utiliser du texte sur le blog

Parfois, quand on décide de créer un blog, on commence par travailler sur le design pour poser les bases de son univers avant d’attaquer la rédaction. Dans ce cas, faites en sorte d’insérer très rapidement du texte sur votre blog pour qu’il ressemble au mieux à l’apparence qu’il aura une fois qu’il sera régulièrement alimenté.

Travailler sur un blog vide peut vous empêcher d’avoir une vision d’ensemble du futur rendu de votre design.

Vous pouvez soit utiliser un brouillon d’article que vous avez commencé à rédiger, soit insérer du faux texte. C’est ce qu’on appelle le Lorem Ipsum. C’est un texte vaguement inspiré du latin dont tous les créateurs de sites web se servent pour remplir les pages avant d’avoir le contenu du site. Vous pouvez utiliser un générateur de Lorem Ipsum pour créer facilement ce type de texte en choisissant le nombre de paragraphes ou de caractères que vous désirez.

Quand on crée un site mais que l’on n’a pas encore de contenu, ça permet de se faire une idée très précise du rendu final.

2. Créez une vraie hiérarchie grâce aux polices d’écriture

Choisir une police d’écriture doit aussi permettre à vos lecteurs de repérer instantanément les éléments clés de votre page, notamment le titre et les sous-titres. Ça permet aux gens qui n’ont pas beaucoup de temps de scanner les thématiques que vous abordez en un clin d’œil et ça oriente l’attention du lecteur en premier lieu vers ce qui est le plus important.

On peut agir sur la taille du texte mais aussi sur la police d’écriture elle-même, en choisissant deux styles différents pour le texte et pour les titres. Sans oublier de jouer avec le gras et les espaces !

3. Police serif ou sans serif, que choisir ?

On distingue souvent sur le web ces deux familles de polices dominantes :

• Les polices serif (polices à empattement) comme Georgia ou Times New Roman.
• Les polices sans serif (polices sans empattement) comme Roboto, Raleway, Tahoma ou Helvetica.

Il y a aussi toute une gamme de polices fantaisie, sans oublier les polices à chasse fixe (polices monospace) que l’on utilise en général pour afficher du code.

Il existe une légende tenace qui raconte que les polices serif sont plus faciles à lire. Pour la petite histoire, cette idée remonte à l’époque où seule la presse écrite existait et où les polices d’écriture serif offraient effectivement une meilleure lisibilité : les empattements qu’elles comportent permettent en effet à l’écrit de guider le regard d’une lettre à l’autre pour faciliter la lecture, y compris quand le texte présente des défauts d’impression.

Mais ce qui est vrai pour l’impression ne se vérifie pas sur le web : d’abord, à l’époque où les écrans étaient de mauvaise qualité, la résolution était insuffisante pour afficher correctement tous les détails d’une police serif, provoquant des soucis de lisibilité ; même aujourd’hui, alors que la qualité s’est beaucoup améliorée, le niveau de détail d’une police serif la rend encore plus difficile à lire qu’une police sans serif.

Pour cette raison, il est conseillé d’utiliser une police sans serif pour le texte de ses articles de blog. Si vous aimez malgré tout le style serif, vous pouvez tout à fait l’utiliser pour les titres. La quasi-totalité des sites de polices d’écriture, comme Dafont ou Google Fonts, permettent de filtrer les polices serif ou sans serif pour faire son choix plus facilement.

Le logo du Huffington Post allie par exemple une police serif (pour le nom du média) et une police sans serif (pour la ligne d’informations située dessous).

4. Limitez-vous à 3 polices d’écriture

Il est important de limiter le nombre de polices d’écriture que vous utilisez sur votre blog. D’abord pour des raisons esthétiques, parce qu’un excès de polices peut vite donner une impression de fouillis généralisé ! Ensuite, parce que le fait d’ajouter de nombreuses polices à son blog augmente souvent le temps de chargement des pages.

Les graphistes conseillent en général de ne pas dépasser deux ou trois familles de polices d’écriture différentes. Bien sûr, au sein d’une même famille, on peut tout à fait utiliser différentes variantes de la police : par exemple, utiliser à la fois Roboto Light et Roboto Bold.

Sur le blog, j’ai choisi la police Oswald pour les titres, la police Roboto pour les textes… et j’ai quelques touches d’Open Sans Condensed sur des détails du design.

5. Penchez-vous sur la magie de la micro-typographie

Quand on pense à choisir une police d’écriture, on la voit souvent comme un élément de design parmi d’autres. S’intéresser à la micro-typographie, c’est entrer dans un niveau de détail plus fin où l’on va réfléchir à l’espacement entre les caractères (« letter-spacing ») ou encore aux interlignes (« line-height »).

Sur No Tuxedo par exemple, l’interligne est plus grand qu’un interligne simple : il est égal à 1.6 fois la taille de la police d’écriture, afin que le texte soit plus aéré. De même, sur le titre des articles, j’ai espacé un peu plus les caractères que ce que prévoit la police d’écriture par défaut.

Sur cette image par exemple, la même police d’écriture (Oswald) est utilisée pour les trois éléments signalés par les flèches… mais vous voyez bien que le rendu est différent, grâce à des variations de l’espacement entre les lettres par exemple (et bien sûr aux changements de la taille de la police).

6. Choisissez votre police d’écriture en fonction de votre univers

Les graphistes vous en parleront très bien : chaque police d’écriture possède son propre univers et sa propre personnalité. Les polices serif par exemple dégagent souvent une impression de sérieux. D’autres polices peuvent refléter une image espiègle, créative, etc. Il existe même des tests pour choisir une police d’écriture en fonction de votre personnalité (en anglais).

En fonction de l’image que vous avez envie de renvoyer, la police d’écriture sera donc différente.

7. Le choix de la couleur

La couleur de votre police d’écriture doit s’adapter au reste de votre blog afin de rester bien lisible. L’usage de la couleur a aussi un sens et peut influencer le comportement de votre lecteur. Par exemple, quand je tombe sur un blog qui met certaines expressions en couleur dans le texte, j’ai tendance à vouloir cliquer dessus car traditionnellement, on utilise la couleur pour identifier les liens à l’intérieur d’un texte.

Il faut donc être prudent avec l’utilisation des couleurs. C’est un peu comme le fait de souligner un texte : historiquement sur le web, c’était le moyen d’identifier les liens.

8. Dites adieu au texte justifié

Le combat avec moi-même a été long sur ce sujet ;) J’ai toujours adoré le texte justifié pour son apparence « nette et propre ». C’est un texte bien aligné à droite et à gauche comme dans une colonne de presse écrite. Cette tradition de la justification vient de la presse, où elle facilitait la lecture en permettant d’identifier plus facilement chaque article.

Sur le web, justifier un texte fait au contraire baisser la lisibilité, comme n’a cessé de me le rappeler une amie graphiste : pour arriver à s’aligner à gauche et à droite, votre texte va jouer sur les espaces entre les mots. Ces espaces deviennent alors irréguliers ce qui peut rendre l’ensemble moins lisible.

J’ai abandonné la justification sur No Tuxedo et je n’ai vu aucun changement dans le temps passé par les lecteurs sur les pages, pas plus qu’on ne m’a fait remarquer cette modification… à part un lecteur qui s’était plaint copieusement de la justification, en notant que ça ne faisait pas professionnel.

La même règle s’applique aux textes centrés : dans nos cultures où nous lisons de gauche à droite, un texte centré est plus difficile à parcourir même s’il reste acceptable pour un titre.

9. Formez-vous au CSS

Pour définir des règles globales concernant les polices d’écriture, ça se passe dans le code CSS de votre thème. Soit il se présente sous forme d’un fichier séparé, comme le fichier style.css dans un thème WordPress, soit il apparaît directement dans le code de votre page entre deux balises <style>Le code ici</style>. Sur Blogger, on le voit souvent au niveau des balises <b:template-skin> et/ou <b:skin>. Les utilisateurs de WordPress.com en version gratuite ne peuvent pas modifier le code CSS de leur blog.

On peut définir des règles de mise en forme qui vont s’appliquer à chaque partie d’un design. Si je veux donner une certaine mise en forme à tous les paragraphes d’un blog, je vais par exemple écrire ceci :

p {
font-family:Helvetica,sans-serif; 
font-size:1em;
line-height:1.5
}

Ici, je décide que tous les paragraphes utiliseront la police Helvetica (ou à défaut une police sans serif si l’ordinateur des visiteurs n’est pas capable d’afficher Helvetica). J’indique ensuite la taille de police souhaitée (font-size) puis l’interligne (line-height).

Une fois que vous avez compris ce principe, vous pouvez personnaliser la plupart des éléments de votre blog. On trouve aujourd’hui de nombreuses polices gratuites mais aussi des polices payantes pour ceux qui désirent un univers visuel encore plus unique. C’est un élément important du design d’un blog !