alainericgauthier.com

construire une présence sur le web

7 ressources gratuites pour concevoir la typographie de votre site web

Par Bleiletter.svg, Dontpanic derivative work: Habib M'henni (d) (Bleiletter.svg) [Public domain], via Wikimedia Commons Créer un site web

Quand je fais du design pour un site web, comme c'est le cas pour mon thème Drupal (minimi.alainericgauthier.com), je préfère commencer par la typographie et me préoccuper de la dispostion (layout) beaucoup plus tard.

Choisir la police

Tout d'abord, si je suis pressé et que je veux une police passe-partout, j'utilise une liste de polices qui se trouvent sur la majorités des appareils qui naviguent sur le web. La liste que j'utilise présentement, créée par Iggy Ko, contient 16 polices :

http://www.webdesigndev.com/web-development/16-gorgeous-web-safe-fonts-to-use-with-css

Mais, si vous voulez y mettre un peu plus de temps, vous n'êtes pas obligé de vous limiter à ce choix. Google offre plus de 600 polices différentes, toutes hébergées sur leurs propres serveurs. De plus, les instructions pour intégrer ces polices à votre site web sont très simples.

En perspective, des heures et des heures à scruter et chercher la police idéale pour votre prochain site web ;-)

https://www.google.com/fonts

L'échelle

Ensuite, ce n'est pas tout d'avoir une belle police, il faut aussi que les différents éléments de vos textes (titres, sous-titres, texte principal, texte secondaire) aient des proportions différentes mais plaisante à l’œil pour en faciliter la lecture. Pour trouver cet équilibre idéal, j'utilise un outil simple mais efficace, le Golden Ratio Typography Calculator conçu par Chris Pearson.

http://www.pearsonified.com/typography/ 

Dans le même ordre d'idée, un article (et un outil de calcul) de Tim Brown offre une échelle modulaire. La sienne comprend beaucoup plus de pallier que la calculatrice de Pearson.

http://alistapart.com/article/more-meaningful-typography

http://modularscale.com/

Pour en savoir plus

Si vous voulez en apprendre plus sur la typographie, je vous suggère deux bonnes références disponibles sur le web.

Le livre de Mark Boulton (complètement gratuit et en ligne) est une vraie mine d'or d'information.

http://www.designingfortheweb.co.uk/part3/part3_chapter13.php

L'excellent site A List Apart, offre toute une section (pas loin de 20 articles) sur la typographie et les "web-fonts".

http://alistapart.com/topic/typography-web-fonts

Et vous, quels outils utilisez-vous pour concevoir votre typographie?

Ajouter un commentaire

Plain text

  • Les lignes et les paragraphes vont à la ligne automatiquement.
Actualiser Type the characters you see in this picture. Type the characters you see in the picture; if you can't read them, submit the form and a new image will be generated. Not case sensitive.  Switch to audio verification.