Typographie

Si vous ne spécifiez aucun style pour votre texte, les navigateurs appliqueront leurs propres styles par défaut. Ceux-ci sont appelés feuilles de style de l'agent utilisateur et peuvent varier d'un navigateur à l'autre. Les utilisateurs peuvent également définir leurs propres préférences d'affichage du texte.

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

Cependant, ce n'est pas parce que le texte s'affiche 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 limite pas au choix des polices à utiliser. 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 utiliser sur le Web.

Si une personne utilise un petit écran, il est probable qu'il soit assez près de ses yeux, à une longueur de main.

Mais à mesure que 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 moniteur de bureau grand écran a à peu près la même taille qu'un écran de télévision. Les personnes s'assoient à une longueur de bras d'un écran de bureau, mais beaucoup plus loin d'une télévision.

Toutefois, même si vous ne pouvez pas savoir avec certitude à quelle distance 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 grands écrans.

Vous pouvez utiliser des requêtes média pour modifier la propriété font-size à mesure que 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 à une autre à des points d'arrêt spécifiques est assez saccadé. 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 les tailles de police à la largeur de la fenêtre d'affichage, le texte s'agrandit et se réduit proportionnellement à la largeur du navigateur. Il est alors difficile de prédire la taille du texte pour une largeur spécifique, mais vous savez que la taille du texte sera appropriée pour 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;
}

Si vous le faites, l'utilisateur ne pourra pas redimensionner le texte. Le texte sera redimensionnable si vous mélangez une unité relative, comme em, rem ou ch. La fonction CSS calc() est idéale pour cela.

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

Laissez le navigateur faire le calcul. Il est alors difficile de prédire la taille exacte du texte pour une largeur spécifique, mais vous savez que la taille du texte se situera dans la bonne plage. Le navigateur de l'utilisateur se charge de calculer la taille exacte du texte.

Mais il est possible que le texte devienne trop petit sur les écrans étroits et trop grand sur les écrans larges.

Écrêtage du texte

Vous ne voulez probablement pas que votre texte se réduise et s'agrandisse à l'extrême. Vous pouvez contrôler le début et la fin de la mise à l'échelle à l'aide de la fonction CSS clamp(). Cela "écrête" la mise à l'échelle à une plage spécifique.

La fonction clamp() est semblable à la fonction calc(), mais elle prend trois valeurs. La valeur du milieu est la même que celle que vous transmettez à calc(). La valeur d'ouverture spécifie la taille minimale, dans ce cas 1 rem, afin de ne pas descendre en dessous de la taille de police préférée de l'utilisateur. La valeur de fermeture spécifie la taille maximale.

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

La taille du texte se réduit et s'agrandit désormais proportionnellement à l'écran de l'utilisateur, mais elle ne sera jamais inférieure à 1rem ni supérieure à 2rem.

Longueur de ligne

Le Web n'est pas un support imprimé, mais nous pouvons tirer des leçons du monde de l'impression et les appliquer sur le Web.

Dans son livre classique The Elements of Typographic Style (Les éléments du style typographique), Robert Bringhurst a déclaré ce qui suit sur la longueur de ligne (ou mesure) :

Une longueur de ligne de 45 à 75 caractères est généralement considérée comme satisfaisante pour une page à une seule colonne définie dans une police avec empattement d'une taille de texte. La ligne de 66 caractères (comptant les lettres et les espaces) est généralement 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 directement une longueur de ligne en CSS. Il n'existe pas de 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 idéale pour cela.

Ne définissez pas la longueur de vos lignes avec une unité fixe comme px. Les utilisateurs peuvent augmenter et diminuer la taille de leur police, et la longueur de vos lignes doit s'ajuster en conséquence. Utilisez une unité relative comme rem ou ch.

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

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

L'utilisation d'unités ch pour la largeur entraîne un retour à la ligne au 66e caractère de cette taille de police.

Hauteur des lignes

Bien qu'il n'existe 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 des valeurs line-height élevées pour les longues lignes de texte, il est 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 ligne est relative à la font-size.

line-height: 24px;

line-height: 1.5;

Combinaisons et échelle

N'oubliez pas de hiérarchiser les éléments lorsque vous créez vos interfaces utilisateur pour plus de clarté et de fluidité. Pour ce faire, vous pouvez utiliser une échelle typographique intégrée à votre système de conception.

Polices Web

Une police de caractères est comme une voix pour vos mots. Pendant très longtemps sur le Web, il y avait très peu d'options de police. Les polices système étaient les seules options. Mais vous pouvez désormais choisir une police Web qui correspond à l'ambiance de votre contenu.

Utilisez @font-face pour indiquer aux navigateurs où trouver vos fichiers de police Web. Utilisez woff2 comme format de police Web. Il est bien compatible et offre les meilleures performances.

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

Toutefois, chaque fichier de police Web que vous ajoutez peut potentiellement dégrader l'expérience utilisateur, car il augmente le temps de chargement de la page. N'oubliez pas que la conception ne se limite pas à l'apparence des pixels finaux. La vitesse à laquelle ces pixels sont peints est un élément essentiel de l'expérience utilisateur. Une expérience 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 à l'élément head de votre document qui référence votre fichier de police 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 le type de fichier. 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 le passage 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 passer à 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 risquent de se retrouver devant une page vide pendant une durée frustrante. Si vous affichez d'abord le texte dans une police système, puis que vous passez à la police Web, les utilisateurs peuvent constater un décalage brutal du contenu sur la page.

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

Utilisez une valeur font-display de swap si vous souhaitez toujours que la police Web remplace la police système une fois qu'elle est chargée.

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 de nombreux poids ou styles différents de la même police de caractères, vous risquez d'utiliser de nombreux fichiers de police distincts, un fichier de police distinct pour chaque poids ou style.

Les polices variables résolvent ce problème en utilisant un seul fichier. Au lieu d'avoir des fichiers distincts pour les variantes normale, en gras, en gras supplémentaire et autres, un fichier de police variable est responsif. Il contient toutes les informations nécessaires pour être affiché sur un spectre de poids ou de styles.

Cela signifie qu'un seul fichier de police variable est plus volumineux qu'un seul fichier de police normale, mais qu'il sera probablement plus petit que plusieurs fichiers de police normale. Si vous utilisez de nombreux poids différents, une police variable peut vous offrir un gain de performances important.

Une bonne typographie sur le Web ne se limite pas aux choix de type 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 semble correcte, quelle que soit la façon dont elle est affichée.

Maintenant que vous maîtrisez le texte responsif, il est temps de vous intéresser aux images responsives.

Vérifiez vos connaissances

Testez vos connaissances en typographie