Typographie

Si vous ne définissez aucun style pour votre texte, les navigateurs appliquent leurs propres styles par défaut. Il s'agit des feuilles de style user-agent et peuvent varier d'un navigateur à l'autre. Les utilisateurs peuvent également définir leurs propres préférences d'affichage de texte.

Si vous ne spécifiez pas de longueur de ligne, les navigateurs placent les lignes de texte à la ligne sur le bord de l'écran. Sur le Web, le texte est responsif par défaut : il s'adapte à la fenêtre d'affichage de l'utilisateur.

Mais ce n'est pas parce que le texte tient sur un écran qu'il est agréable à lire. Une bonne typographie consiste à présenter votre texte de manière appropriée. La typographie ne se résume pas au choix des polices appropriées. Vous devez tenir compte des préférences de l'utilisateur, de la taille du texte, de la longueur des lignes et de la distance entre les lignes de texte.

Taille du texte

Il est difficile de savoir quelle taille de texte doit avoir sur le Web.

Si une personne utilise un petit écran, il y a fort à parier que son écran sera assez proche de ses yeux, à une longueur de main.

Mais comme les écrans deviennent de plus en plus grands, il est plus difficile d'établir cette connexion. Un écran de la taille d'un ordinateur portable sera probablement assez proche du spectateur, mais un écran de bureau grand écran fait à peu près la même taille qu'un écran de télévision. Les internautes sont assis à une distance d'un bras de l'écran d'un ordinateur de bureau, mais beaucoup plus loin d'un téléviseur.

Pourtant, même si vous ne pouvez pas connaître avec certitude la distance à laquelle une personne se trouve d'un écran, vous pouvez essayer d'utiliser des tailles de texte qui, espérons-le, seront appropriées. Utilisez des tailles de texte plus petites pour les petits écrans et des tailles de texte plus grandes pour les écrans plus grands.

Vous pouvez utiliser des requêtes média pour modifier la propriété font-size lorsque la taille de l'écran augmente.

@media (min-width: 30em) {
  html {
    font-size: 125%;
  }
}

@media (min-width: 40em) {
  html {
    font-size: 150%;
  }
}

@media (min-width: 50em) {
  html {
    font-size: 175%;
  }
}

@media (min-width: 60em) {
  html {
    font-size: 200%;
  }
}

Mise à l'échelle du texte

Le passage d'une taille de texte fixe à un autre au niveau de points d'arrêt spécifiques est assez agité. Une approche plus réactive consiste à laisser la largeur de l'appareil de l'utilisateur influencer la taille du texte.

L'unité vw en CSS signifie "largeur de la fenêtre d'affichage". Si vous associez des tailles de police la largeur de la fenêtre d'affichage indique que la taille du texte augmente ou diminue proportionnellement à la largeur de la fenêtre du navigateur. Il est donc difficile de prévoir la taille du texte à une largeur spécifique, mais vous savez qu'elle sera adaptée à la largeur du navigateur de l'utilisateur.

Il est important de ne pas utiliser vw seul dans une déclaration de taille de police.

html {
  font-size: 2.5vw;
}

Sinon, l'utilisateur ne pourra pas redimensionner le texte. Le texte sera redimensionnable si vous combinez les données dans une unité relative, comme em, rem ou ch. La fonction CSS calc() est la solution idéale.

html {
  font-size: calc(0.75rem + 1.5vw);
}

Laissez le navigateur faire le calcul. Il est donc difficile de prévoir exactement la taille du texte à une largeur spécifique, mais vous savez que la taille du texte se situera dans la plage appropriée. Le navigateur de l'utilisateur se charge des calculs exacts de la taille du texte.

Il est maintenant possible que le texte devienne trop trop petit sur les écrans étroits et trop sur les grands écrans.

Limiter le texte

Vous ne voulez sans doute pas que votre texte rétrécisse ou devienne extrême. Vous pouvez contrôler le début et la fin du scaling à l'aide de la fonction CSS clamp(). Cela "restreint" la mise à l'échelle à une plage spécifique.

La fonction clamp() est semblable à la fonction calc(), mais elle accepte trois valeurs. La valeur du milieu est identique à celle que vous transmettez à calc(). La valeur d'ouverture indique la taille minimale, dans ce cas 1 rem afin de ne pas descendre en dessous de la taille de police souhaitée par l'utilisateur. La valeur de clôture indique la taille maximale.

html {
  font-size: clamp(1rem, 0.75rem + 1.5vw, 2rem);
}

La taille du texte diminue et augmente proportionnellement à l'écran de l'utilisateur, mais elle ne descendra jamais en dessous de 1rem ou au-dessus de 2rem.

Longueur des lignes

Le Web ne repose pas sur l'impression, mais nous pouvons tirer des enseignements du monde de l'impression et les appliquer sur le Web.

Dans son classique livre The Elements of Typographic Style, Robert Bringhurst disait ceci concernant la longueur des lignes (ou la mesure):

Une longueur de ligne comprise entre 45 et 75 caractères est généralement considérée comme satisfaisante pour une page à colonne unique dans une face de texte avec empattement dans une taille de texte. La ligne de 66 caractères (comprenant à la fois les lettres et les espaces) est largement considérée comme idéale. Pour un travail sur plusieurs colonnes, une meilleure moyenne est de 40 à 50 caractères.

Vous ne pouvez pas définir la longueur de la ligne directement dans CSS. Il n'existe aucune propriété line-length. Toutefois, vous pouvez empêcher le texte de devenir trop large en limitant la largeur du conteneur. La propriété max-inline-size est la solution idéale dans ce cas.

Ne définissez pas la longueur de vos lignes avec une unité fixe comme px. Les utilisateurs peuvent augmenter ou réduire la taille de leur police et vos longueurs de ligne doivent être ajustées en conséquence. Utilisez une unité relative, telle que rem ou ch.

article {
  max-inline-size: 700px;
}

article {
  max-inline-size: 66ch;
}

Si vous utilisez des unités ch pour la largeur, les nouvelles lignes renverront à la ligne au 66e caractère dans cette taille de police.

Hauteur des lignes

Bien qu'il n'y ait pas de propriété line-length en CSS, il existe une propriété line-height.

Les lignes de texte plus courtes peuvent avoir des valeurs line-height plus élevées. Toutefois, si vous utilisez de grandes valeurs line-height pour de longues lignes de texte, il sera difficile pour l'œil du lecteur de passer de la fin d'une ligne au début de la ligne suivante.

article {
  max-inline-size: 66ch;
  line-height: 1.65;
}
blockquote {
  max-inline-size: 45ch;
  line-height: 2;
}

Utilisez des valeurs sans unité pour vos déclarations line-height. Cela garantit que la hauteur de la ligne est relative à font-size.

line-height: 24px;

line-height: 1.5;

Combinaisons et échelle

N'oubliez pas de hiérarchiser la hiérarchie lorsque vous créez vos interfaces utilisateur pour plus de clarté et pour améliorer le flux des pages. Un excellent moyen de le faire est d'utiliser une échelle de typographie intégrée à votre système de conception.

Polices Web

Une police de caractères est comme une voix pour vos mots. Pendant la plus longue période sur le Web, les options de police étaient très rares. Les polices système étaient les seules options disponibles. Désormais, vous pouvez choisir une police Web qui correspond au style de votre contenu.

Utilisez @font-face pour indiquer aux navigateurs où trouver vos fichiers de polices Web. Utilisez woff2 comme format de police Web. Il est bien pris en charge et offre les meilleurs gains de performances.

@font-face {
  font-family: Roboto;
  src: url('/fonts/roboto-regular.woff2') format('woff2');
}
body {
  font-family: Roboto, sans-serif;
}

Cependant, chaque fichier de police Web que vous ajoutez peut nuire à l'expérience utilisateur, car cela augmente le temps de chargement des pages. N'oubliez pas que la conception ne concerne pas seulement l'apparence des pixels finaux. La vitesse à laquelle ces pixels sont peints est un aspect essentiel de l'expérience utilisateur. Une expérience qui semble rapide est une bonne expérience utilisateur.

Chargement des polices

Vous pouvez demander aux navigateurs de commencer à télécharger un fichier de police dès que possible. Ajoutez un élément link à la section head de votre document qui fait référence à votre fichier de polices Web. Un attribut rel avec la valeur preload indique au navigateur de donner la priorité à ce fichier. Un attribut as avec la valeur font indique au navigateur de quel type de fichier il s'agit. L'attribut type vous permet d'être encore plus précis.

<link href="/fonts/roboto-regular.woff2" type="font/woff2" 
  rel="preload" as="font" crossorigin>

Vous devez inclure l'attribut crossorigin même si vous hébergez vous-même les fichiers de police.

Utilisez la propriété CSS font-display pour indiquer au navigateur comment gérer la commutation d'une police système à une police Web. Vous pouvez choisir de n'afficher aucun texte tant que la police Web n'est pas chargée. Vous pouvez choisir d'afficher immédiatement la police système, puis de basculer vers la police Web une fois qu'elle est chargée. Les deux stratégies ont leurs inconvénients. Si vous attendez que la police Web soit téléchargée avant d'afficher du texte, les utilisateurs peuvent se retrouver à regarder une page vierge pendant un long moment frustrant. Si vous affichez d'abord le texte dans une police système, puis que vous basculez ensuite vers la police Web, les utilisateurs peuvent constater un décalage bouleversé du contenu de la page.

Un bon compromis consiste à attendre un court instant avant d'afficher du texte. Si la police Web se charge avant la fin du délai, le texte s'affiche avec cette police Web sans décalage. Si la police Web n'est toujours pas chargée une fois le délai écoulé, le texte est affiché dans la police système afin au moins que l'utilisateur puisse lire le contenu.

Définissez la valeur font-display sur swap si vous souhaitez toujours que la police Web remplace la police système lors de son chargement final.

body {
  font-family: Roboto, sans-serif;
  font-display: swap;
}

Utilisez une valeur font-display de fallback si vous souhaitez conserver la police système une fois le texte affiché.

body {
  font-family: Roboto, sans-serif;
  font-display: fallback;
}

Polices variables

Si vous utilisez beaucoup d’épaisseurs différentes ou de styles de la même police de caractères, vous pouvez vous retrouver à utiliser de nombreux fichiers de police distincts, un fichier de police distinct pour chaque épaisseur ou chaque style.

Les polices variables permettent de résoudre ce problème en utilisant un seul fichier. Au lieu d'avoir des fichiers distincts pour les styles standard, gras, très gras, etc., un fichier de police variable est responsif. Elle contient toutes les informations nécessaires pour afficher un spectre de poids ou de styles.

Cela signifie qu'un fichier de police à variable unique est plus volumineux qu'un fichier de police standard unique, mais qu'un fichier de police à variable unique sera probablement plus petit que plusieurs fichiers de police standards. Si vous utilisez de nombreuses épaisseurs de police différentes, une police variable pourrait améliorer considérablement les performances.

Une bonne typographie sur le Web ne concerne pas seulement les choix de types que vous faites en tant que concepteur. La typographie responsive consiste également à respecter l'appareil et la connexion réseau de l'utilisateur. Le résultat final est une conception qui convient, quelle que soit la façon dont elle est vue.

Maintenant que vous maîtrisez le texte responsif, il est temps de découvrir les images responsives.

Testez vos connaissances

Tester vos connaissances en typographie