Web Design

Web Design

Typographie

2025 - 2026

Avant propros

Modes de lecture

On ne parcours pas du contenu sur le web comme dans un livre. Nous avons appris à optimiser notre approche de la lecture pour gagner en temps et en efficacité à la recherche d'informations. Il en ressort 2 modes de lectures:

  • En F
  • En Z

Définition

La typographie est un des points clés du Web Design. Ce terme réprésente à la fois l'ensemble des glyphes d'une police d'écriture avec ses graisses et styles, et en même temps l'art de disposer nos textes pour accroître la lisibilité tout en renforçant l'identité visuelle et l'expérience utilisateur.

Propriétés

  • Police d'écriture
  • Fonte de caractères
  • Graisse
  • Taille de caractère
  • Hauteur de ligne
  • Couleur
  • etc.
Il existe d'autres propriétés importantes, mais qui ne nous seront pas essentielles.
What is typography ?

Police d'écriture

ou typeface, font family

Représente un ensemble des caractères avec tout les styles et graisses disponibles. Ce dernier porte un nom qui lui est propre.

Ex: Arial, Satoshi, etc.

Fonte de caractères

ou font

À ne pas confondre avec police de caractère, la fonte de caractères représente les caractères qui partagent les mêmes propriétés (style, graisse, taille, etc.)

Ex: Satoshi bold, en taille 40px

Graisse

ou font weight

Définit l'épaisseur et/ou l'inclinaison (italic) de la police. Il existe plusieurs niveaux de graisses: selon la police choisie vous n'aurez pas toujours accès à toute les possibilités.

Depuis quelques années on peut trouver des typos dites variables paramètrables de manière précise.

Les différents niveaux du plus ou plus épais (italic ou non):

  • 100 - Thin
  • 200 - Extra Light
  • 300 - Light
  • 400 - Regular
  • 500 - Medium
  • 600 - Semi Bold
  • 700 - Bold
  • 800 - Extra Bold
  • 900 - Black

Taille de caractère

ou font size

La taille de caractères, souvent exprimé en point pour le print et en pixel pour le web.

Taille des textes

Voici une liste de tailles de textes communéments utlisées:

  • 12px
  • 13px
  • 14px
  • 15px
  • 16px
  • 18px
  • 21px
En dessous de 12px l'accessibilité ne pourra plus être optimale, au delà de 24px on commence à confondre texte et titre.

Taille des titres

Voici une liste de tailles de titres communéments utlisées:

  • 24px
  • 32px
  • 40px
  • 48px
  • 56px
  • + un multiple de 8
Il n'y a pas vraiment de limite de taille de titre, sauf quand on ne sait plus lire…

Hauteur de ligne

ou interlignage, line height

L'espacement entre 2 lignes d'un même texte, exprimé en point/pixel ou en pourcentage (100% = 100% de la taille de caractère). Elle doit s'adapter en fonction de la typographie et de sa taille. Voici les bonnes pratiques:

  • Titre: entre 100% et 120%
  • Texte: entre 120% et 150%

Densité des textes

Il est souvent plus facile de gérer le flux du texte sur des écrans réduits comme ceux des smartphones. Cela se complique pour les grands écrans: il est tentant de combler le vide par un texte occupant tout l'espace. Un texte doit se situer entre 50 et 75 caractères par ligne pour optimiser la lisibilité.

Soit on modifie la longueur que notre texte prend dans notre composition, soit on peut ajuster la taille de caractère, voir combiner les deux.

Bonnes pratiques

  • Maximum 2 police de caractères par projet
  • Avoir au moins 4 graisses pour vos textes ( 2 épaisseurs + leurs versions italiques)
  • Respecter les tailles de textes et titres.
  • Respecter la densité de texte

Où & comment
choisir ?

Il existe une infinité de typographies différentes, alors où chercher et comment choisir ? Commençons par voir les différentes catégories:

Catégories

Les typographies sont triées en différentes catégories, et même en sous-catégories selon certains aspects graphiques. Voici les plus communes:

  • À empattements *
  • Sans empattement *
  • Scripte
  • Manuscrite
  • Display
* Ces 2 catégories sont à préviligées pour débuter.

À empattements

ou serif

Associations

  • Nostalgie / émotions
  • Officiel / formel
  • Luxe
  • Fiable / rassurant
  • Papier
⚠️ Attention à l'accesibilité en petite taille

Sans empattement

ou sans-serif, linéale

Associations

  • Simple / minimal
  • Neutre
  • Moderne
  • Futuristique
  • Technologique
  • Virtuel
Optimal pour les écrans, à privilégier en petite taille

Scripte

ou cursive

Associations

  • Personnel / informel
  • Distinctif
  • Nostalgie / élégance
À utiliser de manière subtile, il est difficile d'utiliser cette catégorie sans tombé dans un stéréotype.

Manuscrite

ou handwritten

Associations

  • Personnel / informel
  • humain
  • social
  • artisana
  • joie
Tout comme les scriptes, à utiliser de manière subtile, il est difficile d'utiliser cette catégorie sans tombé dans un stéréotype.

Display

Associations

Plutôt une sous-catégorie, ce qui veut dire que son aspect graphique peut varier grandement. Elle est prévue pour faire uniquement du titrage ou des textes très court, avec souvent peu de graisse et style disponiblent.

Où en trouver ?

Voici une liste de fonderies / site web où se trouvent des typographies libres de droits (usage personnel et commercial). Attention, d'autres sources existes mais avec des droits ne permettant pas toujours l'usage commercial.

Google fonts ⭐ Font share Tunera Uncut Velvetyne Open Foundry
Presque tout le catalogue de Google fonts est disponible par défaut dans Figma

Font manager

Installer des typographies peut s'avérer compliqué, encore plus quand il s'agit gérer une énorme liste. Heureusement il existe des font managers qui nous facilitent la tâche. Je conseille FontBase, gratuit, moderne et accessible sur toute les plateformes.

Font Base Font Base Learn

Checkpoint

Votre charte graphique

⭐

Pour votre projet, je vous demande de créer une charte graphique. Dans un premier temps voici ce que je vous demande de préparer pour le prochain cours:

  1. Avoir une liste de 3 sujets potentiels (produit ou service)
  2. Décider d'un jeu typographique * pour chacun des sujets en respectant les notions vues dans ce cours.
  3. Uniquement serif ou sans-serif
* une ou 2 police(s) de caractères. Soit une seule pour titres & textes, soit une combinaison de 2 polices.

Figma

L'outil texte

Il permet de rajouter du contenu textuel dans notre design.

Raccourci  T 

Paramètres

Une fois un texte rajouté et selectionné, la section typography deviendra disponible dans le panneau des propriétés.

Changer la police

Le premier select box indique le nom de la police de caractères du texte selectionné. Par défaut, Figma utilise de l'Inter qui est une Google fonts.

Changer la graisse

Le second select box sur la gauche gère la graisse de votre texte.

Changer la taille

À droite du champ graisse se trouve celui qui gère la taille des caractères.

Changer l'interlignage

En dessous du champ graisse se trouve celui qui s'occupe de la hauteur de ligne. Ne mettez pas de valeur en pixel, mais en pourcentage.

Par défaut Figma mettra auto comme valeur, il faudra la modifier si vous avez plusieurs lignes.

C'est non

Pour les exercices du cours et pour l'examen:

  • On ne modifie pas l'interlettrage d'un paragraphe ou d'un titre. (espacement entre les lettres)
  • On ne justifie jamais les textes/titres sur le web
  • On évite de centrer des longs textes sans raison
  • On n'utilise pas de scriptes ou de manuscrites

Time to ride

Premier vrai
exercice

Reproduire le design suivant le plus fidèlement possible et respecter les bonnes pratiques de typographie et à terminer pour le prochain cours.

  • Dans une frame phone > iphone 13 & 14
  • Inter comme police de caractère
Le contenu textuel peut être modifier à condition de respecter la même densité et composé de mots intelligibles (pas de zuifhsiduuf zehfizehf)

1/8

1/1