Typographie

Par Xavier SENENTE

§ 1

Introduction

La typographie : un matériau

Typographie plomb

La typographie numérique

Bons ou mauvais caractères ?

Y a t'il de bons ou mauvais caractères ?

Oui, il en existe quelques mauvais…

…mais il y a surtout de mauvais usages !

Mauvais usage

Harley Davidson

Bon usage

Harley Davidson

Des usages appropriés

En réalité, il n'y a pas en soi de bons ou mauvais caractères. Il y a des caractères appropriés à des usages spécifiques.

Comic Sans MS

Au départ, Comic Sans MS était une police destinée à des applications pour enfant.

Adrian FRUTIGER

Frutiger

Adrian FRUTIGER

Frutiger
§ 2

La lettre

Composition

Capitales abcdefghijklmnopqrstuvwxyz
Minuscules abcdefghijklmnopqrstuvwxyz
Chiffres 0123456789
Accents æoeàäâùûçöôéèêëîï
æoeàäâùûçöôéèêëîï
Ponctuation .,;…: «!?»({[]})
Symboles &=+/\@§%£$*

Graisse / Styles

Regular

Bold

Italique

Bold italique

Graisse & styles | Roboto

 typecast.com/preview/google/Roboto

100 Thin

300 Light

400 Normal

500 Medium

700 Bold

900 Ultra-Bold

italique

italique

italique

italique

italique

italique

Anatomie

AnatomieAttaqueempattementPleinsDéliésContre formesAxeLigne de baseHauteur d'oeilHauteur capitalesJambages inférieursJambages supérieursCorps

Attaque

Empattement

Pleins

Déliés

Contre-formes

Axe

Ligne de base

Hauteur d'œil

Hauteur de capitale

Jambages inférieurs

Jambages supérieurs

Corps

Proportions

Proportions lettresProportions lettresProportions lettresProportions lettresProportions lettresProportions lettresProportions lettresProportions lettresProportions lettresProportions lettres

Classification

A savoir avant toute chose :

  • Aucun système de classification n'est parfait
  • La typographie est un art, pas une science !

Cependant…

Classification

classification Romaines Didones Egyptiennes Linéales

Classification

Gothiquemanuscritcalligraphiechasse-propchasse-fixedestroyhybridebitmaphistoriquewesternminvsmajetroite

Connotations

Chaque caractère d’imprimerie possède son propre passé, véhicule un bagage culturel, historique et social, et crée par sa seule présence sur une page, au-delà du sens des mots écrits, une véritable ambiance.

Connotations

Exemple de connotation typographiqueExemple de connotation typographiqueConnotations pour la famille des romainesConnotations pour la famille des didonesConnotations pour la famille des mécanesConnotations pour la famille des linéales

Combinaisons typographiques

Mélanges typographiques de même familleMélanges typographiques de familles différentesMélanges de typo à forte personnalitéMélanges de typo à forte personnalitéContrastes de graisseContrastes de graisse

Combinaisons typographiques

Exemple ITC Avant-garde / Garamond

Combinaisons typographiques

Combinaisons typographiques

Exemple Frutiger / Baskerville

Combinaisons typographiques

Combinaisons typographiques

Exemple Playfair / Open Sans

Combinaisons typographiques

Combinaisons typographiques

Exemple Londrine Solid / Helvetica

Combinaisons typographiques

§ 3

Lisibilité

Mécanisme de lecture

Mecanisme de lecture

Mécanisme de lecture

Mécanisme de lecture Mécanisme de lecture Mécanisme de lecture

Mécanisme de lecture

Mecanisme de lecture

Silhouette

Silhouette

MinusculeCapitale

Parties signifiantes

Confusion des formes

Signe pertinent

Signe pertinent

Signe pertinent

Signe pertinent

Faut-il pour autant en faire une règle absolue ?

Signe pertinent

« Nous lisons le mieux
ce que nous lisons le plus. »

Zuzana LICKO
§ 4

Texte & espace

Les espaces

Bien que le but généralement admis de la typographie soit d'améliorer la lisibilité du texte écrit, l'une des fonctions les plus prosaïques du graphisme est, en réalité, d'aider les lecteurs à ne pas tout lire.

Hellen LUPTON

Les espaces

Bien que nous soyions désormais habitués à voir des espaces entre les mots, le langage parlé est perçu comme un flot continu, sans "blancs" audibles.

Ilsuffitd'essayerdelireunelignedetextedépourvued'espacespourensaisirtoutel'importance!

Interlignage

texte-interlignage-small Les lettres forment des mots, les mots se groupent en phrases. En typographie, un texte est une séquence continue de mots, distincte des éléments plus courts tels que les titres ou les légendes. Le pavé principal est souvent appelé le corps du texte parce qu’il représente la plus grande part du contenu textuel.
p {
  font-size: 16px;
  line-height: 18px;
}
texte-interlignage-normal Les lettres forment des mots, les mots se groupent en phrases. En typographie, un texte est une séquence continue de mots, distincte des éléments plus courts tels que les titres ou les légendes. Le pavé principal est souvent appelé le corps du texte parce qu’il représente la plus grande part du contenu textuel.
p {
  font-size: 16px;
  line-height: 24px;
}
texte-interlignage-large Les lettres forment des mots, les mots se groupent en phrases. En typographie, un texte est une séquence continue de mots, distincte des éléments plus courts tels que les titres ou les légendes. Le pavé principal est souvent appelé le corps du texte parce qu’il représente la plus grande part du contenu textuel.
p {
  font-size: 16px;
  line-height: 34px;
}

Interlignage

Interlignage

texte-interlignage-times Les lettres forment des mots, les mots se groupent en phrases. En typographie, un texte est une séquence continue de mots, distincte des éléments plus courts tels que les titres ou les légendes. Le pavé principal est souvent appelé le corps du texte parce qu’il représente la plus grande part du contenu textuel.
p {
  font-family: 'Times New Roman';
  font-size: 16px;
  line-height: 22px;
}
texte-interlignage-verdana-bad Les lettres forment des mots, les mots se groupent en phrases. En typographie, un texte est une séquence continue de mots, distincte des éléments plus courts tels que les titres ou les légendes. Le pavé principal est souvent appelé le corps du texte parce qu’il représente la plus grande part du contenu textuel.
p {
  font-family: Verdana;
  font-size: 16px;
  line-height: 22px;
}
texte-interlignage-verdana-good Les lettres forment des mots, les mots se groupent en phrases. En typographie, un texte est une séquence continue de mots, distincte des éléments plus courts tels que les titres ou les légendes. Le pavé principal est souvent appelé le corps du texte parce qu’il représente la plus grande part du contenu textuel.
p {
  font-family: Verdana;
  font-size: 16px;
  line-height: 24px;
}

Longueur de ligne

texte-longueur Les lettres forment des mots, les mots se groupent en phrases. En typographie, un texte est une séquence continue de mots, distincte des éléments plus courts tels que les titres ou les légendes. Le pavé principal est souvent appelé le corps du texte parce qu’il représente la plus grande part du contenu textuel. Les lettres forment des mots, les mots se groupent en phrases. En typographie, un texte est une séquence continue de mots, distincte des éléments plus courts tels que les titres ou les légendes. Le pavé principal est souvent appelé le corps du texte parce qu’il représente la plus grande part du contenu textuel. Les lettres forment des mots, les mots se groupent en phrases. En typographie, un texte est une séquence continue de mots, distincte des éléments plus courts tels que les titres ou les légendes. Le pavé principal est souvent appelé le corps du texte parce qu’il représente la plus grande part du contenu textuel. 50 signes / ligne 25 signes / ligne 100 signes / ligne

Alignements

texte-alignements-left Les lettres forment des mots, les mots se groupent en phrases. En typographie, un texte est une séquence continue de mots, distincte des éléments plus courts tels que les titres ou les légendes. Le pavé principal est souvent appelé le corps du texte parce qu’il représente la plus grande part du contenu textuel. FER À GAUCHE
text-align: left;
texte-alignements-center Les lettres forment des mots, les mots se groupent en phrases. En typographie, un texte est une séquence continue de mots, distincte des éléments plus courts tels que les titres ou les légendes. Le pavé principal est souvent appelé le corps du texte parce qu’il représente la plus grande part du contenu textuel. CENTRÉ
text-align: center;
texte-alignements-right Les lettres forment des mots, les mots se groupent en phrases. En typographie, un texte est une séquence continue de mots, distincte des éléments plus courts tels que les titres ou les légendes. Le pavé principal est souvent appelé le corps du texte parce qu’il représente la plus grande part du contenu textuel. FER À DROITE
text-align: right;

Justification & césure

Plan de travail 1 copie 7 Les lettres forment des mots, les mots se groupent en phrases. En typographie, un texte est une séquence continue de mots, distincte des éléments plus courts tels que les titres ou les légendes. Les lettres forment des mots, les mots se groupent en phrases. En typographie, un texte est une séquence continue de mots, distincte des éléments plus courts tels que les titres ou les légendes. Le s lettre s formen t de s mots , le s mot s s e groupen t e n phrases . E n typogra - phie , u n text e es t un e séquenc e conti - nu e d e mots , distinct e de s élément s plu s court s tel s qu e le s titre s o u le s légendes .

Césure en css3

Césure en css3

Marquer les paragraphes

Alinéas

Alinéa français

Plan de travail 1 copie Les lettres forment des mots, les mots se groupent en phrases. En typographie, un texte est une séquence continue de mots, distincte des éléments plus courts tels que les titres ou les légendes. Le pavé principal est souvent appelé le corps du texte parce qu’il représente la plus grande part du contenu textuel. Également dénommé “texte courant”, il peut en effet courrir d’une page, d’une colonne ou d’une section à une autre.
p {
  text-indent: 30px;
}

Alinéa anglais

Plan de travail 1 copie 4 Les lettres forment des mots, les mots se groupent en phrases. En typographie, un texte est une séquence continue de mots, distincte des éléments plus courts tels que les titres ou les légendes. Le pavé principal est souvent appelé le corps du texte parce qu’il représente la plus grande part du contenu textuel. Également dénommé “texte courant”, il peut en effet courrir d’une page, d’une colonne ou d’une section à une autre.
p {
  text-indent: -30px;
  padding-left: 30px;
}

Espaces

Plan de travail 1 copie 6 Les lettres forment des mots, les mots se groupent en phrases. En typographie, un texte est une séquence continue de mots, distincte des éléments plus courts tels que les titres ou les légendes. Le pavé principal est souvent appelé le corps du texte parce qu’il représente la plus grande part du contenu textuel. Également dénommé “texte courant”, il peut en effet courrir d’une page, d’une colonne ou d’une section à une autre.
p {
  padding-bottom: 20px;
}
Plan de travail 1 copie 5 Les lettres forment des mots, les mots se groupent en phrases. En typographie, un texte est une séquence continue de mots, distincte des éléments plus courts tels que les titres ou les légendes. Le pavé principal est souvent appelé le corps du texte parce qu’il représente la plus grande part du contenu textuel. Également dénommé “texte courant”, il peut en effet courrir d’une page, d’une colonne ou d’une section à une autre.

À éviter !

p {
  padding-bottom: 20px;
  text-indent: 30px;
}
§ 5

Polices de caractère pour le web

Contenu du fichier

Un fichier de police typographique contient toutes les informations requises pour qu’un ordinateur puisse afficher les caractères correspondant.

  • Ensemble des tracés vectoriels de chacun des caractères
  • Meta-données diverses et variées
  • Informations pour gérer le lissage de la police à l’écran (Hinting)
  • Informations pour gérer le crénage des caractères (Kerning)

Hinting

pixel-bitmappixel-hintingpixel-cleartype

Les formats

TrueType

Ces formats ne sont pas (ou peu) compressés et contiennent généralement des jeux de caractères complets.

Leur poids, souvent conséquent, convient peu au web.

  • Format le plus ancien utilisé sur le Web
  • Apparition du hinting
  • Surcouche au format TrueType
  • Normalise l’encodage des caractères en se reposant sur unicode

TrueType, opentype

Web Open Font Format

  • Format de référence pour les polices typographiques sur le web
  • Système de compression zlib (permet un gain de poids de plus de 40%)
  • Évolution du format Woff
  • Système de compression brotli (permet un gain de poids de 30% à 50% par rapport à zlib)

Web Open Font Format

Google fonts

google fonts google fonts google fonts

Google fonts

google fonts google fonts

Google fonts

google fonts
/* latin-ext */
@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 400;
  src: local('Libre Baskerville'), local('LibreBaskerville-Regular'), url(https://fonts.gstatic.com/[…].woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 400;
  src: local('Libre Baskerville'), local('LibreBaskerville-Regular'), url(https://fonts.gstatic.com/[…].woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

Web font generator

 Web font generator

Quelques free fonts

§ 6

Fontes variables

Principe

Auparavant, une police de caractères était représentée par différents fichiers pour les différentes fontes.

Avec une police variable, toutes ces combinaisons de style et de graisse sont contenues dans un seul fichier.

Principe

Implémentation

Windows 10

Photoshop

Implémentation

google fonts

Implémentation CSS

La propriété CSS font-variation-settings permet de contrôler les caractéristiques typographiques de bas niveau pour les polices OpenType ou TrueType en utilisant les quatres lettres représentant les axes des caractéristiques qu'on souhaite faire varier, ainsi que les valeurs pour les variations associées.

font-variant-settings: 'WGHT' 100;
font-variant-settings: 'WGHT' 400, 'WDTH' 100, 'OPSZ' 14, 'GRAD' 88;

Compatibilité CSS actuelle

Bahnschrift

Design : Microsoft
Éditeur : Microsoft
Infos : developer.microsoft.com

Bahnschrift
h1 {
  font-family: 'Bahnschrift';
  font-variation-settings: 'wght' 400, 'wdth' 100;
}

Renner

Design : Owen Earl
Éditeur : indestructible type*
Infos : indestructibletype.com

Renner
h1 {
  font-family: 'Renner';
  font-variation-settings: 'wght' 100, 'ital' 0;
}

Adobe VF

Design : Frank Grießhammer
Éditeur : Adobe Systems Inc.
Infos : github.com

Adobe VF
h1 {
  font-family: 'AdobeVF';
  font-variation-settings: 'wght' 400, 'CNTR' 0;
}

Wind VF

Design : Hansje van Halem
Éditeur : Typotheque
Infos : typotheque.com

Wind VF
h1 {
  font-family: 'Wind VF';
  font-variation-settings: 'WIND' 0;
}

Minérale

Design : Thomas Huot-Marchand
Éditeur : 205TF
Infos : 205.tf

Minérale
h1 {
  font-family: 'Minerale';
  font-variation-settings: 'wght' 0;
}

Hela

Design : Jan Charvát
Éditeur : RenegadeFonts
Infos : renegadefonts.com

Hela
h1 {
  font-family: 'Hela';
  font-variation-settings: 'wght' 100;
}

Amstelvar

Design : David Berlow
Éditeur : Font Bureau
Infos : github.com

Amstelvar
h1 {
  font-family: 'Amstelvar';
  font-variation-settings: 'wght' 400, 'wdth' 100, 'opsz' 14, 'XOPQ' 88, 'XTRA' 402, 'YOPQ' 50, 'YTSE' 18, 'GRAD' 88, 'YTAS' 750, 'YTDE' 250, 'YTUC' 750, 'YTRA' 1000;
}
§ 7

Typographie expressive

Les graphiquants

Affiche

Les graphiquants

Les graphiquants

Affiche

Les graphiquants

Les graphiquants

Affiche

Les graphiquants

Studio apeloig

Affiche

Studio apeloig

Studio apeloig

Affiche

Studio apeloig

Studio apeloig

Affiche

Studio apeloig

Rose des vents

Affiche

Rose des vents

Thomas Huot-Marchand

Affiche

THM THM
THM THM

Thomas Huot-Marchand

Affiche

THM THM

Thomas Huot-Marchand

Affiche

THM

Thomas Huot-Marchand

Affiche

THM