Typographie & mise en page

Nos objectifs

• Découvrir les concepts clés autour de la typographie et de la mise en page.
• Apprendre les règles d'accessibilité et l'importance de la hiérachie du contenu.
• Pratiquer la mise en page.

Nos outils

• Google Doc
• Figma

Websites are broken by default, they are functional, high-performing, and accessible, but they're also fucking ugly

Drew McConville

Propriétés

Voici quelques propriétés à retenir qui nous seront utiles :

• Police de caractères
• Graisse & style
• Taille ∴
• Hauteur de ligne ∴
• Longueur de ligne ∴

Police de caractères

Représente un ensemble des caractères avec tout les styles et graisses disponibles. Cette famille est nommé pour facilement reconnaissable.

Graisse & style

La graisse définit l'épaisseur et le style peut définir l'inclinaison (italique) de la police. Il existe plusieurs niveaux de graisses : selon la police choisie nous n'aurons pas toujours accès à toute les déclinaisons.

Les différents niveaux d'épaisseur :

1. 100 - Thin
2. 200 - Extra light
3. 300 - Light
4. 400 - Regular
5. 500 - Medium
6. 600 - Semi bold
7. 700 - Bold
8. 800 - Extra bold
9. 900 - Black

Taille

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

Hauteur de ligne

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). Une bonne pratique est de la garder entre 120 % et 180 % selon la lisibilité de la police et de son utilité (titrage vs paragraphe).

Longueur de ligne

Pour maximiser la lisibilité et l'accessibilité, une autre bonne pratique est de limité une ligne de texte entre 50 et 75 caractères. Le piège serait de combler l'espace disponible avec une phrase trop longue.

Anatomie typographique

Définition

La macrotypographie désigne l'agencement de l'espace typographique et la mise en page : le format de l'imprimé, la taille et la disposition des colonnes de texte et des illustrations, la hiérarchisation des titres et des légendes.

Dans notre google doc

Ajouter des retours à la ligne pour créer du sens et améliorer la lisibilité.

Lois de la Gestalt

une théorie psychologique et philosophique proposée au début du XXe siècle selon laquelle les processus de la perception et de la représentation mentale traitent les phénomènes comme des formes globales plutôt que comme l'addition ou la juxtaposition d'éléments simples.

Principes de regroupement

On parle ici du principe de proximité, de similitude, de clôture, de continuité, et de destin commun. Nous allons nous focaliser sur les 3 premiers :

• Proximité : si des objets ou des formes sont proches les uns des autres, cela semble former des groupes.
• Similitude : si des objets se ressemblant physiquement (couleur, forme, taille, etc.) seront alors perçus comme faisant partie d'un même objet plus grand.
• Clôture : perception de figures ou de formes complètes à partir d'une image incomplète.

Hiérarchie

C'est ce qui guide l'œil du lecteur qui parcours notre contenu. Cela lui indique ce qu'il faut regarder en premier, ce qu'il faut survoler, et ce qu'il faut retenir. Bien fait, cela fluidifie l'expérience. Mal fait, cela peut avoir l'effet inverse.

Nous pouvons jouer sur plusieurs facteurs :

• Taille du texte
• Contraste (graisse & style)
• Jouer avec des espaces neutres
• Ajouter des couleurs
• Répéter les règles, cela renforce la cohérence de la mise en page

Dans notre google doc

Hiérarchiser l'ensemble : regrouper des informations ensemble, adapter la taille des éléments comme les titres et sous-titres et ajuster les contrastes avec la graisse et/ou l'italique.

Niveaux de gris

Avant de passer sur une palette de couleurs plus vive, une bonne pratique est d'abord d'appliquer un niveau de gris dans notre composition.

Pourquoi ? Cela va nous permettre de nous focaliser sur notre objectif : celui de faciliter la lecture à nos utilisateurs.

Cohérence

L'idée est maintenant d'appliquer notre palette de manière cohérente en définissant un rôle à nos couleurs :

• #212529 : Titres principaux
• #343A40 : Titres secondaires
• #495057 : Textes / paragraphes
• #6C757D : Micro copywriting

Définition

La microtypographie désigne l'ensemble des réglages fins appliqués au texte à l'échelle du caractère et du mot.

Les espaces

Pour faire simple : un signe composé d'un double symbole est généralement précédé d'un espace.

: ; ? ! »

Tandis qu'un signe à un seul symbole est rarement précédé d'un espace.

. , ) ° ‘ } ]

Espaces fines

Il existe des espaces fines qui sont plus élégants à placer avant ou après certains signes :

• espace fine : espace normal
• espace fine ; espace normal
• espace fine ? espace normal
• espace fine ! espace normal
• espace normal « espace fine
• espace fine » espace normal
• espace fine — espace normal

Espaces insécables

Certains espaces ne peuvent pas être coupés, on dit qu'ils sont insécables.

Fonctionnalité &
esthétique

Les polices qu'on utilise ont un double rôle : elles doivent présenter le contenu et aussi incarner le projet.

Catégories

Les polices 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 empattements *
• Display *
• Scripte
• Manuscrite
• Monospaced

À empattements

ou serif

• Nostalgie / émotions
• Officile / formel
• Luxe
• Fiable / rassurant
• Papier

Sans empattement

ou sans-serif, linéale

• Simple / minimal
• Neutre
• Moderne
• Futuristique
• Technologique
• Virtuel

Display

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 de grande taille, avec souvent peu de graisse et style disponiblent.

Où lest 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.