Cours 3 | Typographie¶

Tutorat¶

Nom	Plage horaire	Lieu	Dates
Alexis Guilbault	Mardi 12h30 à 14h10	En personne au Centre d’aide C-1612	3 février au 27 avril inclus.
Olivier Laliberté	Mercredi 19h00 à 20h15	En ligne sur TEAMS : canal Tutorat de l'équipe TIM-Programme TIM	4 février au 29 avril inclus.
Iryna Lysenko	Dimanche 18h00 à 19h15	En ligne sur TEAMS : canal Tutorat de l'équipe TIM-Programme TIM	8 février au 3 mai inclus.

Calendrier du tutorat

Typographie¶

La typographie en design graphique sert à organiser le texte pour que le message soit lu, compris et retenu avec le moins d’effort possible.

Ce n’est pas juste « choisir une belle police ».

Fonte¶

Police de caractères (typeface) : le design des lettres.
Fonte (font) : une version précise de cette police (ex. Roboto Bold Italic 24), souvent concrètement un fichier (variable ou statique) + ses réglages.

Réglages¶

Graisse¶

La graisse (en français bold c'est graisse 😅) influence directement :

la hiérarchie (ce qui ressort)
le ton (plus sérieux, plus doux, plus imposant ...)
la lisibilité (une graisse trop fine en petit peut devenir fatigante)

Italic¶

Catégories de polices¶

Sérif¶

Lettres avec empattements : petites terminaisons aux extrémités des traits.

Connotation : classique, éditoriale, institutionnelle, sérieuse

Souvent confortable pour la lecture longue (surtout en imprimé).

Sans sérif¶

Lettres sans empattements.

Connotation : moderne, neutre, simple

Très utilisé en web/UI pour sa clarté à petite taille.

Slab¶

Empattements épais, carrés ou très présents.

Connotation : solide, robuste, parfois rétro

Très efficace en titres et en signalétique. Pas tant sur les longs textes.

Monospace¶

Chaque caractère occupe la même largeur.

Connotation : technologie, machine, cartésien

Souvent utilisé pour afficher du code et des données alignées (ex. : comptabilité).

Cursive / Script¶

Imite l’écriture manuscrite (plume, pinceau, calligraphie).

Connotation : personnalité, émotion, humain, élégant, ludique

La lisibilité est souvent moins bonne. Idéalement l'utiliser sur du text court (ex. : logo, titre).

Display¶

Une police Display est surtout une police conçue pour être utilisée en grande taille et en peu de mots.

Variantes et OpenType¶

Une même police peut avoir plusieurs variantes :

graisses (Light → Black)
styles (Regular, Italic…)
largeurs (Condensed → Expanded)
petites majuscules, chiffres elzéviriens, etc.

Ligatures¶

Les ligatures fusionnent certaines lettres (ex. : fi, fl) pour améliorer le rendu.

Les ligatures sont disponibles dans les formats dits OpenType (.otf ou .ttf).

Espacements¶

Interlignage (line-height)¶

Espace entre les lignes.

Interlettrage (tracking / letter spacing)¶

Espacement global appliqué à un mot à un texte.

Crénage (kerning)¶

Ajustement, déterminé « à l’œil » par le/la designer de la police, de certaines paires de lettres (ex. A/V, T/o) afin d’équilibrer l’espacement et éviter les “trous” visuels à la lecture.

Œil de lynx

Choix des fontes¶

Cohérence (Titre vs paragraphe)¶

Certaines polices sont super en grande taille, pour des textes courts (souvent des Display), mais bien moins performantes pour des paragraphes longs ou en petite taille, et vice versa. L’objectif est de choisir une police selon sa fonction (titre, texte, UI, légende) et son contexte d’utilisation.

Police de titre (display) : plus de caractère, plus de contraste, pensée pour attirer.
Police de texte (text) : pensée pour tenir longtemps (formes plus simples, plus régulières, plus lisibles).

Lien utile : Agencements de différentes fontes

Méthode simple pour choisir¶

Portée du projet (scope). Web, app, impression, affiche, logo, réseaux sociaux ?
Ton (mood) et message. La police porte une personnalité : sérieux, ludique, luxe, techno, institutionnel. Elle doit soutenir le message et pas le contredire.
Polyvalence, langues et caractères. Certaines polices sont magnifiques, mais peu de variations et incomplètes pour la langue française.
Combinaison. Éviter les polices trop similaires, ça amène plus de confusion qu'autre chose. Dans ce cas, vaut mieux choisir une variante de la même police.
Lisibilité. Tester en petite taille, sur fond clair/sombre, en paragraphe (pas juste un mot).

Exercice rapide

Limitations¶

Certaines polices sont gratuites, «Gratuit pour usage personnel», d’autres sont payantes
Toujours vérifier la licence (web, impression, logo, app...) !

Exemple de licence

https://www.grillitype.com/shops/gt-walsheim

Magasinage¶

Google Fonts : gratuit et libre. Polices souvent très courantes et peu identitaires.
Adobe Fonts
MyFonts
DaFont : souvent gratuit pour usage personnel
ifonts.xyz : souvent gratuit pour usage personnel

Moins connus, mais très cool

Collletttivo : polices libres.
design-research.be/by-womxn/ : collection de fontes par des femmes.
Hanken : certaines fontes gratuites
ohnotype
vj-type

Lisibilité¶

En général, on dit pour le Web de ne pas faire de paragraphes ni trop large, ni trop courts. De ne pas faire d'interligna trop grand, ni trop courts. D'avoir une taille de caractère suffisament large pour faciliter la lecture.

Ça dépend beaucoup de la fonte utilisée, mais voici une règle de pouce pour les paragraphes :

Longueur de ligne : ~45–75 caractères
Taille : > 14px
Interlignage : 1.618
Une fonte sans-serif

Type Scale

L'échelle typographique (ou type scale) est un ensemble de tailles de texte cohérentes (H1, H2, body, caption…) basé sur une logique d’écarts réguliers.

Générer un typescale.

Figma¶

Fontes

Polices de caractères
Interlignage
Alinéa (retrait de paragraphe)
Espacement entre paragraphes
Ligature avancée (ex. : Raleway, Playfair Display, Cormorant, EB Garamond, Girassol, Updock, Staatliches, Inconsolata)

Vectoriel