Ce guide pour bien comprendre la typographie web et print vous aidera à connaître les bases pour votre travail en design web ou print.

Ce guide pour bien comprendre la typographie web et print vous aidera à connaître les bases pour votre travail en design. Osez avec la créativité et la qualité !
Ce guide pour bien comprendre la typographie web et print vous aidera à connaître les bases pour votre travail en design. Osez avec la créativité et la qualité !

Vocabulaire basique sur typographie

L’évolution constante et de plus en plus rapide des technologies dans le XXe siècle a révolutionné la typographie. Avec l’avancement des technologies et la démocratisation de la typographie, on fait rarement la distinction entre certains termes qui ont toujours un sens, bien qu’ils soient souvent confondus.

Pour bien démarrer il faut faire la distinction entre typographie, police d’écriture ou de caractère (en anglais « typeface ») et fonte de caractères (en anglais « font »).

Typographie, police d'écriture et fonte de caractères - Guide pour bien comprendre la typographie web et print

La typographie est l’art et la technique de composition et d’impression des caractères et des formes en relief (comme le braille) dont le but est de rendre lisible et esthétique le langage écrit.

La police d’écriture ou de caractère (en anglais « typeface ») est l’ensemble de fontes qui partagent une esthétique visuelle.

La fonte de caractères (en anglais « font ») est un glyphe avec une taille, poids et style particuliers d’une police d’écriture.

 

Quelle est la différence entre police d’écriture et fonte ?

Exemple :

Dans l’art et la technique de la typographie, Garamond est une police d’écriture, Garamond 10 points est une fonte, et Garamond 24 italique et encore une autre fonte.

La police d’écriture décrit le design de la collection, c’est-à-dire, l’esthétique, ce que l’on voit. La fonte est la représentation physique d’une lettre, numéro, etc, ce que l’on utilise.

Comme Norbert Florendo résume brièvement :

Fonte est ce que l’on utilise, police d’écriture est ce que l’on voit.

Je m’inspire de l’exemple de Stephen Coles pour dire :

La typographie est la musique, la police d’écriture sont les chansons, et la fonte est le fichier qui délivre chaque chanson.

La confusion est arrivée avec le développement de l’informatique. En pratique, sauf probablement pour les anciennes générations ou les puristes, on ne fait pas tellement la distinction entre police d’écriture et fonte. Le contexte permet de comprendre à quoi on fait référence et il n’est pas nécessaire de rentrer dans ce degré de distinction parfaite. À mon avis, le plus important est de connaître la norme, et après, on décide si on l’applique ou pas.

Les fontes TrueType (TTF) et Opent Type (OTF)

Si vous avez déjà installé une police d’écriture, que vous soyez sur Apple ou Microsoft, vous avez sûrement déjà eu 2 types de fichiers dans l’installation : OTF et TTF. Les formats de fichiers TrueType et Open Type possèdent les mêmes caractéristiques :

  • Les dimensions des fontes peuvent être changées avec un rendu de qualité.
  • Les fontes sont lisibles dans toutes les tailles.
  • Elles peuvent être imprimées.

Alors, quelles sont les différences entre TTF et OTF ?

Le fichier TTF est une version réduite du fichier OTF de la même police d’écriture. Pour la plupart des utilisations, le TTF suffit. L’avantage du format OTF est qu’il permet de stocker plus d’espace : jusqu’à 65 000 caractères. Pour un designer qui souhaite travailler à un niveau plus avancé, l’OTF est utile. Cette vaste offre de glyphes dans l’OTF possède des extras comme les ligatures du style Œ, les petites capitales (« small caps » en anglais) ou des glyphes particuliers comme Ç, Ñ, Û, Ä.

Cela ne veut pas dire que des glyphes comme Œ ou Ç ne seront pas dans un fichier TTF. C’est juste que l’OTF a de la place pour garder beaucoup plus de glyphes que le TTF. Aussi, installer un OTF n’est pas forcément une garantie sur la richesse des glyphes contenus dans le fichier, notamment si vous téléchargez une fonte gratuite. Cela dépend de l’auteur de la police d’écriture et de ce qu’il décide d’inclure dans le fichier, qu’il soit TTF ou OTF.

Comme il est expliqué dans l’aide de Fonts.com, le format TrueType permet aussi de rendre plus lisible les fontes sur un affichage écran :

Exemple d'optimisation de rendu ou hinting de typographie sous TrueType
Exemple d’optimisation de rendu ou hinting dans la 2e et 4e ligne. Source: Wikipedia, CC BY-SA 3.0,

Un autre format de fonte est le PostScript (formats .pfb, .pfm) ou « Type 1 ». Il est utilisé pour impression professionnelle, spécialement dans les magazines et livres.

Licence de typographie gratuite ou payante

Lorsqu’on va réaliser notre graphisme, comme un logotype ou une infographie, nous allons faire une recherche de polices qui correspondent à nos envies et besoins.

Ne prenez pas celles qui sont par défaut dans votre ordinateur. Vous tomberez sur une fonte pas forcément belle, ni professionnelle, ou encore moins classe… une fonte système (Times New Roman, Arial, etc.) ! Elles sont démodées. Il faut chercher l’originalité et la créativité !

Quand vous faites votre recherche Google, vous trouverez facilement des polices gratuites. Mais attention à respecter leur licence de distribution. Elles sont souvent gratuites mais pas forcément pour un usage commercial, et dans ce cas vous devez payer l’auteur. Vous êtes souvent avertis au préalable de la licence pour utiliser la police. Quand vous téléchargerez le fichier, vous trouverez un fichier joint (comme par exemple « readme.txt ») avec les références. Certaines polices sont gratuites mais certains glyphes n’y sont pas, le but étant de vous faire payer pour la version Premium et donc complète.

Trouver une police gratuite de qualité

Dafont

Dafont. Voici un exemple issu de Dafont, un des répertoires de polices à télécharger le plus populaire sur Internet :

Exemple de fontes gratuites et payantes
Bebas Neue et Caviar Dreams sont gratuites, même pour un usage commercial. Vous pouvez si vous le souhaitez faire un don à l’auteur. Par contre Deutshchlander est gratuite pour un usage personnel. Si vous voulez vous en servir dans un cadre commercial, consultez le fichier joint à la fonte pour connaître le prix et les conditions de la licence commerciale.

Le problème avec Dafont est que les polices de bonne qualité sont noyées parmi les autres et il faut en quelque sorte avoir l‘œil pour distinguer les meilleures. Quand la police inclut les glyphes français comme Ç, Â, É, c’est un signe de qualité. Le nombre de téléchargements est une indication également. Les autres indices sont plus subtils : la régularité des traits, l’espacement des glyphes, etc. C’est quelque chose qui s’apprend, mais qui vient surtout avec l’expérience.

Google Fonts

Google Fonts. Avec Google Fonts, non seulement on a accès à un répertoire grandissant de polices de qualité, gratuites à 100%, et open source. Mais en plus Google apporte de quoi intégrer facilement leurs polices dans votre site internet. Ils ont ainsi contribué largement à une nouvelle esthétique dans la typographie web, en enlevant des barrières techniques grâce à leur puissance d’hébergement. Google Fonts a été une mini-révolution dans la typographie web et il est hautement conseillé.

Par contre, à moins que vous cherchiez une typographie neutre et minimaliste, il vaut mieux ne s’en servir que pour des textes destinés à être dans un corps de texte web ou print, pas pour un logo ou un sous-titre récurrent. Pourquoi ? Car il faut être original, et avec une police Google Fonts vous ne serez pas très original.

Typographie Lobster de Google Fonts
La typographie Lobster de Google Fonts est très à la mode. Je vous déconseille de l’utiliser.

L’année dernière j’ai cédé à la tentation d’utiliser la police Lobster pour mon client Expogrow. Depuis, la police Lobster, je la vois partout ! Ma fierté de designer m’a fait bannir cette police pour l’éternité.

Fontsquirrel

Fontsquirrel. Il s’agit d’un site qui arrive à trouver le bon compromis entre polices de qualité, gratuites et open source. Souvent, elles ont une licence gratuite mais limitée, ce qui est normal car les designers cherchent à rentabiliser leur travail tout en gagnant de la visibilité.

Il existe de nombreuses ressources alternatives pour trouver des polices de qualité qui vont aussi vous servir d’inspiration. Le réflexe du bon designer consiste à trouver les meilleures références :

Pourquoi choisir une police payante ?

Vous l’avez bien vu, on peut trouver une police de qualité, gratuite et open source. Mais pourquoi se limiter aux polices gratuites ? En effet il y a le choix, mais pas autant que parmi les licences payantes.

Une police avec licence payante est probablement une police de qualité, belle, et complète (avec tous les glyphes dont vous aurez besoin). En achetant la licence dans un site professionnel, vous aurez aussi le choix de l’intégrer en mode web font dans votre site mais avec leur serveur (un peu comme Google Fonts). Il aura d’autant plus une esthétique originale, unique et élégante. Vous serez aussi en train de soutenir le travail du créateur et du site qui fournit des polices de qualité. Vous serez vous même en train de réaliser un travail de qualité.

Le prix le moins cher pour une police est souvent de 50 $ pour chaque série de fontes du type « Regular », « Italic », etc.

Si vous ne voulez pas payer, un petit saut sur Fonts.com peut au moins vous aider à trouver de l’inspiration et à voir les tendances en typographie professionnelle depuis la section « Best Selling ».

Conseils en typographie web et print

Typographie web. Si vous allez utiliser une nouvelle police pour les textes de votre site internet, vous avez plusieurs choix. Bien entendu, quand vous téléchargez le fichier de la police cela ne suffit pas pour que vos utilisateurs puissent la voir sur votre site :

  1. La manière la plus simple est Google Fonts. Vous choisissez, vous rajoutez les séries de fontes dont vous avez besoin et vous copiez-collez le bout de code à insérer dans le head de votre site.
  2. Vous pouvez héberger vous même la police dans votre serveur et la charger avec votre feuille de style CSS3 (anglais). La norme @font-face est là pour ça et le « safe-font » est du passé.
  3. De nombreux gabarits ou templates WordPress, Joomla, Drupal intègrent Google Fonts pour que vous n’ayez pas besoin de penser au code. Vous aurez juste à choisir et valider dans le backoffice.
  4. Des plans spécifiques sont proposés souvent par des sites professionnels comme Fonts.com où vous achetez la licence web. Vous n’aurez pas grande chose à faire, ça sera un peu comme avec Google Fonts.

Dans le web il existe plusieurs unités de mesure de taille de la police. Plusieurs écoles convergent, plus les vieilles habitudes, etc. Des articles entiers se penchent sur la question et ils ne sont pas forcément d’accord entre eux. La recommandation officielle de W3 est d’utiliser l’unité relative EM. En général l’idée est de la faire dépendre d’une base fixée dans le BODY. La formule la plus populaire est :

body {
    font-size: 100%;
}

h1 {
    font-size: 2.5em;
}

h2 {
    font-size: 1.875em;
}

p {
    font-size: 0.875em;
}

 

Typographie print. C’est plus simple que dans le web. Vous installez la fonte, puis vous n’avez qu’à travailler dessus. Au moment de l’impression vous devez faire attention. Si vous imprimez chez un professionnel, suivez ses recommandations :

  • En général le fichier que vous envoyez à imprimer devra contenir la police rasterisée (c’est-à-dire, transformée en vecteur ou bitmap et ne plus être une police).
  • L’autre possibilité est d’exporter le fichier PDF avec la fonte intégrée (embed font en anglais), par exemple avec le standard PDF/X-1a:2001. Cela garantit que le fichier sera affiché partout comme vous l’avez créé, tout en gardant les polices du fichier. Il faut bien entendu que le fichier de la police supporte l’intégration en PDF, cela dépend de la licence.

En ce qui concerne la taille, l’unité de mesure standard est le point. Il s’agit presque d’une unité absolue, ce qui simplifie les choses parce que chaque valeur correspond à une taille fixe dans le monde physique. Cela ne veut pas dire que toutes les fontes à 12 points font la même taille, le piège ! Alors le mieux est de tester en imprimant un brouillon et de faire confiance à vos yeux. En général pour un corps de texte standard la taille conseillée est de 10 – 11.5 points. Le plus petit conseillé, pour que ça reste lisible, est de 8 points.

Faites attention au formats « Light ». Ils sont à la mode sur le web, mais en print les traits excessivement fins vous feront regretter votre choix.

S’exprimer avec la typographie

La partie la plus fun ! Exprimez-vous, faites rêver votre audience :

Butler - Typographie gratuite par Fabien De Smet
Rétro, élégant et présenté avec une police sans serif. Un font-pairing délicieux !
Arkhip - Typographie gratuite par Klimov Studio
Exploration, sérénité, confiance. On ne le quitte pas des yeux.
Arabella - Typographie gratuite par MySunday Type Foundry
Féminité, élégance, délicatesse. Un délice !
Liquide - Typographie gratuite par Philip Fisser
Un esprit zen, flexible et nature. On rêve !

 

Aller plus loin

Je vous ai montré quelques tuyaux par rapport à l’immensité de l’univers de la typographie. Je vous invite à vous former d’avantage et à faire des expériences :

Conclusion sur ce guide pour bien comprendre la typographie web et print

Guide pour bien comprendre la typographie

Dans ce guide pour bien comprendre la typographie web et print vous avez les bases pour réaliser un travail professionnel en design web ou print.

La typographie va au delà de la transmission d’un message. Elle relève de l’émotion, des sentiments. Elle contient une charge très forte d’idées pré-conçues. Elle transmet de la confiance, de l’humeur. Elle est un message en soi ! Faites des associations de polices. Soyez original, créatif, élégant, intrigant.

Toutes les cartes sont là, à vous de jouer !

Avez-vous aimé cet article?

Je suis disponible pour missions freelance, à distance ou dans vos locaux.

Engagez-moi

Article rédigé par Mag Alés

En 1999 j'ai commencé dans le web design et depuis on ne s'est jamais quitté. Je suis designer web & mobile et j’aide les entrepreneurs à communiquer sur le web de manière créative et efficace. Amie des gens et des pixels, graphiste, photographe, web-marketeuse. Actuellement je suis freelance et je dream à mon Agence DREAM à Bordeaux.

Commentaires (1)

  1. Mel

    12 mai 2016 à 10 h 41 min

    Très sympa et instructif, merci 🙂

Poster un commentaire

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.