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.

Typographie et design : comment bien utiliser une police d'écriture ?
Typographie et design : comment bien utiliser 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).

Le logo du Huffington Post
Le logo du Huffington Post

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).

La police d'écriture Oswald en contexte
La police d’écriture Oswald en contexte

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.

Texte sans/avec justification
Texte sans/avec justification

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 !

Quelles polices d’écriture avez-vous choisies ?
Thèmes : Design 

Poster un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Lorsque vous postez un commentaire sur le blog, le nom indiqué dans la case "Prénom" ainsi que votre message apparaîtront publiquement. Votre adresse e-mail restera confidentielle.

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

  • Sarah Boots And Pepper

    Sympa ce test sur creative market ! Moi qui suis totalement indécise, je trouve ça génial qu’un robot choisisse pour moi ;-). Juste un truc étrange sur ton site ce matin, il « saute » de quelques lignes à intervalles de temps réguliers… Complexe la lecture du coup, on dirait qu’il a le hoquet :-D (image très professionnelle tu en conviendras). Je ne crois pas que cela vienne de chez moi (safari) car je suis sur le web sur d’autres sites en parallèle et pas de soucis… Bises et bonne journée.

    Répondre à Sarah
    • Marlène

      Hello, je pense que le problème vient de ma régie publicitaire, je vais les contacter à ce sujet :) En gros, quand la pub change ça recharge la page :-/ J’aimerais bien voir une version plus détaillée d’un test de police d’écriture, avec un choix de polices plus important et davantage de questions. Pour un usage « pro », ça pourrait être intéressant :)

      Répondre à Marlène
    • Sarah Boots And Pepper

      Effectivement, cela reste un test ludique ! Néanmoins, il nous invite à nous questionner et à réfléchir à ce que l’on souhaite vraiment ! Et encore merci pour la justification du texte, encore une donnée que j’apprends grâce à toi.

      Répondre à Sarah
  • Maïlys LD

    J’ai le titre de mon blog, mon menu quand on passe la souris dessus et mon pied de page du blog écrit en « Alex Brush », écriture cursive.

    Ensuite, j’ai le sous-titre du blog + mes titres d’articles + mes labels d’articles écrits en « Amatic SC », une écriture cursive également.

    Et pour mon menu j’ai l’écriture « Quicksand », une sans-sérif. Je voulais l’utiliser pour les textes de mes articles mais je n’y arrive pas, du coup j’utilise Helvetica qui -je trouve- lui ressemble un peu.

    Est-ce que la mise en forme CSS que tu as indiquée là-haut fonctionne aussi sur les polices ? Car il me semble que c’est ce que j’avais fait mais les polices déjà programmées dans la rédaction des articles Blogger prime sur celle enregistrée dans le code CSS.

    Et je justifie mon texte, je trouve cela plus esthétique et que ça s’accorde plus avec mes photos. J’aère beaucoup mon texte avec des sauts de lignes, etc pour qu’il n’y ai pas de « gros pavés indigestes à lire ». :)

    Répondre à Maïlys
    • Marlène

      Hello, j’aime bien Amatic SC, j’utilisais cette police pour mes titres dans les premiers mois de mon blog. Le code CSS que j’indique est standard, il peut donc nécessiter des personnalisations individuelles selon le thème utilisé.

      Répondre à Marlène
  • Giacometti Brin d'Os

    Bonjour Marlene,
    Si j’ai bien compris, ayant un thème gratuit, je ne peux pas changer les polices d’écriture ?
    Sais-tu par ailleurs si chaque thème comporte un seul thème woo commerce correspondant ?
    Je suis sur wordpress et j’aurais voulu changer le thème de ma boutique :)

    Répondre à Giacometti
    • Marlène

      Hello, on peut généralement changer la police d’écriture comme on le souhaite dès lors qu’on a accès au code.

      Pour WooCommerce, soit tu peux personnaliser toi-même le thème de la boutique proposé par ton thème actuel, soit tu peux choisir des thèmes différents (il existe des plugins pour utiliser des thèmes multiples sur un même WordPress mais je ne sais pas ce que ça vaut). Je pense qu’on peut tout à fait récupérer un thème WooCommerce de son choix et « l’incorporer » à son thème actuel mais ça implique de mettre les mains dans le code pour que la compatibilité soit optimale.

      Répondre à Marlène
  • Laetiboop

    Oulala vaste débat ! J’ai du passer des heures à essayer toutes les polices inimaginables pour finalement opter pour quelque chose d’assez traditionnel.
    Je pense qu’il faut se poser des limites en la matière sinon on peut bien y passer des mois et s’arracher les cheveux ! ;)

    Répondre à Laetiboop
    • Marlène

      Ah mais ça, je trouve que c’est vrai pour tout :) Relire sans fin ses articles, modifier sans fin de petits détails de son design… On peut vite y perdre un temps fou au détriment de l’écriture, des échanges, etc.

      Répondre à Marlène
  • Bernieshoot

    Bonjour Marlène,
    pour ma part j’ai reproduit, à tort peut-être, un modèle de template que j’utilisais dans ma vie professionnelle avec comme police Times New Roman, taille 12 et texte justifié.
    Pour la taille effectivement sur le web, chacun a la possibilité de l’adapter.
    J’ai du mal à considérer que l’alignement à gauche puisse être préférable à un alignement justifié, ou plus exactement, il me semble que bien d’autres critères interviennent avant pour capter le lecteur.

    Répondre à Bernieshoot
    • Marlène

      Oh je te rejoins, il y a tant de choses qui passent avant l’alignement ! C’est pour ça que la réaction du lecteur m’avait fait rire (dire à quelqu’un qu’il n’est pas crédible professionnellement parce qu’il justifie son texte témoigne d’un léger problème de sens des priorités ^^).

      Répondre à Marlène
  • Claude

    J’ai cherché sur votre site, mais sans trouver. Avez-vous déjà publié un article sur « comment ajouter une police de caractères (fonte) sur Blogger »?
    Texte justifié: oh! que ce sera difficile d’abandonner. Vingt ans à monter un journal, dont 4-5 ans avant la venue des ordinateurs, ça marque!

    Répondre à Claude
    • Marlène

      Ah je peux comprendre ! Concernant Blogger, non je n’ai jamais écrit ce type d’article. Le problème, c’est que sur Blogger on ne peut pas héberger de fichiers donc ça suppose que les fichiers de la police soient stockés ailleurs… et ce n’est pas forcément une bonne chose pour la vitesse de chargement (il faut aller récupérer les fichiers sur un site tiers, ce qui prend du temps).

      En revanche, certaines polices Google sont déjà intégrées mais pas forcément faciles à trouver au premier abord. Il faut passer par le menu Thèmes > Personnaliser puis aller dans le sous-menu « Avancé », il y a pas mal de polices à disposition.

      Répondre à Marlène
    • Claude Lamarche

      Oui, les polices dans « avancé », les ai vues.
      J’ai bien essayé d’en rajouter une de Google fonts dans le code html, avant head et en fermant bien la ligne /› +ajout d’un code dans css. Rien à faire. Me contenterai donc de celles de Blogger.
      Merci.

      Répondre à Claude
  • Suny

    J’utilise la police Arial par défaut en fait, pour ma part.

    C’est vrai que je préfère aussi voir, en tant que lecteur, un texte plus justifié qu’aligné à gauche.

    Après pour la police, je comprends que la plupart des lecteurs sont plus attirés par des polices grandes.
    Mais pour des blogueurs qui ont tendance à écrire des textes longs (comme toi Marlène), je me suis demandé si c’était pas mieux une police un peu moins grande, car on a l’impression que l’article peut-être interminable et on passe plus de temps à descendre la barre de défilement à droite.
    Enfin c’est mon ressenti qui est évidemment subjectif.

    Répondre à Suny
    • Marlène

      La notion de « grande » et « petite » est elle aussi très subjective. Il y a toujours des gens pour juger un article trop long ou trop court, quelle que soit la police employée, donc pour ma part ce n’est pas un critère de décision. Quant au manque de motivation à scroller… c’est sûrement vrai pour certaines personnes qui sont rebutées par les articles longs, dans ce cas il existe plein d’alternatives : des vidéos, des podcasts, du microblogging…

      Répondre à Marlène
Si vous aimez les articles du site, n'hésitez pas à faire vos achats sur Amazon.fr via ce lien ; il me permettra de toucher une commission grâce au programme Partenaires Amazon EU.