Cet article est un complément d’information sur l’utilisation du contraste en design graphique.
Pour créer des tensions visuelles dans une composition et pour favoriser la lecture du message à transmettre, le designer graphique utilise plusieurs types de contraste. Concernant la structuration, la stylisation et la composition des textes, plusieurs contrastes peuvent être mis en œuvre. Ils s’appliquent généralement à la différenciation entre :
- les titres (lecture de repérage – textes courts) et les paragraphes (lecture suivie – textes longs).
- les textes normaux et les textes mis en évidence (textes importants ou emphatiques) ou mis en retrait (mentions obligatoires, conditions de ventes, etc.)
Inventaire de contrastes typographiques
Les contrastes d’écriture
Les contrastes d’écriture ont été utilisés très tôt dans l’histoire de l’écriture, pour distinguer le début des chapitres (lettrine ou incipit) et le texte lui même. Cette distinction par un changement d’écriture s’est étendue à l’inscription des titres.
Les contrastes d’écriture sont une forme particulière des contrastes de forme et de structure.
- romain (humanistique) / italique (chancelière)
- romain (humanistique) / anglaise (cooperplate)
- onciale (celtique) / romain (humanistique)
- onciale (celtique) / italique (chancelière)
- autres contrastes d’écriture
Les contrastes de famille typographique
Les contrastes de famille typographique sont une forme particulière des contrastes de forme ou de structure et une généralisation des contrastes d’écriture.
- serif (sérieuses) / sans serif (neutres)
- display (expressives) / sans serif (neutres)
- handwriting (scriptes et cursives manuscrites – amicales) / sans serif (neutres)
- handwriting (scriptes et cursives manuscrites – amicales) / serif (sérieuses)
- lettres toscanes (tuscan letters) / lettres
- autres contrastes de familles de polices
Les contrastes de forme ou de structure
Les contrastes de forme ou de structure précisent les différences identifiables entre plusieurs types d’écritures ou de lettrages.
Notez que le terme “lettre contrastée” désigne un type de lettres
présentant une différence de graisse entre ses parties (https://fonts.google.com/knowledge/glossary/contrast).
On parle de pleins et de déliés pour les lettres calligraphiques.
- contrasté (différence entre pleins et déliés) / uniforme (traits de lettre de même épaisseur)
- haut de casse (capitales ou majuscules) / bas de casse (minuscules)
- avec empattements rectangulaires / sans empattement
- avec empattements filiformes / sans empattement
- avec empattements triangulaires / sans empattement
- avec empattements fourchus / sans empattement
- scripte (détaché) / cursive (attaché)
- droit (vertical) / incliné (penché)
- élargi (étendu) / étroitisé (condensé)
- grand ou très grand / petit ou très petit
- gras / maigre
- rectiligne / curviligne
- rectangulaire / circulaire
- géométrique / organique
- avec bordure ou contour / sans bordure ou contour
- avec motif ou texture / sans motif ou texture
- avec relief / sans relief
- autres contrastes de forme ou de structure
Les contrastes de couleur
Les contrastes de couleur concernent la couleur des textes et la couleur du fond sur lequel le texte est présenté.
Notez que l’expression “couleur typographique” ou “gris typographique”
désigne l’intensité du gris produit par le mélange optique du texte
sur la couleur du papier.
- couleur / noir et blanc
- couleur foncée / couleur claire
- couleur chaude / couleur froide
- couleur vive (saturée) / couleur terne (désaturée)
- autres contrastes de couleur
Les contrastes de composition typographique
Les contrastes de composition typographique concernent des moyens déployés pour différencier deux textes par leur positionnement dans la page. Il n’est plus question de formes ou de dessin des lettres, mais plutôt de mise en page des lettres, des mots, les lignes, des colonnes et des textes.
- ligne de texte horizontale / ligne de texte verticale
- ligne de texte horizontale / ligne de texte inclinée
- lettres disposées horizontalement / lettres disposées verticalement
- lettres normales ou espacées / lettres serrées
- lettres normales ou serrées / lignes espacées
- autres contrastes de composition typographique
Contrastes et combinaisons typographiques
Les combinaisons typographiques proposent d’associer 2 polices de caractères de manière harmonieuse. À vrai dire, l’esthétique n’est pas le seul critère d’association. la combinaison des polices de caractères doit aussi répondre à un besoin fonctionnel.
Pour associer 2 polices de caractères, il convient de définir quel est le type de lecture des textes utilisant l’une et l’autre des fontes sélectionnées. Une lecture suivie de texte courant de petite taille n’exige pas les mêmes caractères typographique qu’une lecture de repérage de titres courts présentés dans un corps important.
Si vous recherchez une police de caractères pour les textes de titrage et une police de caractères pour les textes de labeur, éliminez d’emblée les propositions associant deux polices expressives ou amicales décoratives. En effet aucune d’entre elles ne pourra être utilisée pour la lecture suivie.
En savoir plus
Voir des illustrations sur le sujet
- https://www.pinterest.fr/dendrographe/typographie-contraste/
- https://www.pinterest.fr/dendrographe/typographie-combinaisons/
Articles traitant du contraste et des combinaisons typographiques
- https://www.ux-republic.com/la-typographie-digitale-ou-lart-du-design-insaisissable/
- http://graphizm.fr/typographie/combos-typos/
- http://graphizm.fr/typographie/combos-typos-google/
- Combiner des fontes (voir aussi les autres onglets du site)
Articles en anglais sur le même sujet
- https://app.uxcel.com/courses/typography-basics/repetition–contrast-609 (les illustrations du cours sont regroupées et téléchargeables sur graphizm.fr)
- https://marketing.illinois.edu/blog/pairing-our-brand-fonts-to-create-contrast-and-emphasis
- https://designshack.net/articles/typography/tips-for-using-contrast-to-enhance-readability/
- https://creativepro.com/dot-font-seven-principles-of-typographic-contrast/