Typographie

Si vous ne spécifiez aucun style pour votre texte, les navigateurs appliquent leurs propres styles par défaut. Il s'agit de 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 du texte.

Si vous ne spécifiez pas de longueur de ligne, les navigateurs appliquent un retour automatique à la ligne au bord de l'écran. Ainsi, le texte des pages Web est responsif par défaut : il s'adapte à la fenêtre d'affichage de l'utilisateur.

Toutefois, ce n'est pas parce qu'un texte tient sur un écran qu'il est confortable à lire. Une bonne typographie consiste à présenter votre texte de manière appropriée. La typographie ne se résume pas à choisir des polices appropriées à 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 connaître la taille du texte à afficher sur le Web.

Si une personne utilise un petit écran, il y a de fortes chances que son écran soit assez proche de ses yeux, à une distance d'une main.

Mais à mesure que les écrans deviennent plus grands, il est plus difficile d'établir cette connexion. Un écran d'ordinateur portable sera probablement assez proche du spectateur, mais un écran d'ordinateur de bureau grand écran fait à peu près la même taille qu'un écran de télévision. Des personnes sont assises à une longueur de bras à l'écart d'un écran d'ordinateur, mais beaucoup plus loin d'une télévision.

Pourtant, bien que vous ne puissiez pas savoir 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 écrans plus petits 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 incohérent. Une approche plus réactive consiste à laisser la largeur de l'appareil de l'utilisateur influencer la taille du texte.

Dans CSS, l'unité vw signifie "largeur de la fenêtre d'affichage". En associant les tailles de police à la largeur de la fenêtre d'affichage, le texte s'agrandit ou se rétrécit en fonction de la largeur du navigateur. Il est donc difficile de prévoir la taille du texte pour une largeur spécifique, mais vous savez que la taille du texte 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. Vous pouvez redimensionner le texte si vous mélangez une unité relative telle que 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 donc difficile de prévoir exactement quelle sera la taille du texte pour une largeur spécifique, mais vous savez que la taille du texte sera dans la bonne plage. Le navigateur de l'utilisateur se charge ensuite d'effectuer le calcul exact de la taille du texte.

Cependant, il est désormais possible que le texte devienne trop petit sur les écrans étroits et trop grand sur les écrans larges.

Texte de fixation

Vous ne souhaitez probablement pas que votre texte se rétrécit et devienne extrême. Vous pouvez contrôler où l'ajustement commence et se termine à l'aide de la fonction CSS clamp(). Cela permet de "limiter" 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 spécifie la taille minimale, dans ce cas 1rem 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);
}

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

Longueur des lignes

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

Dans son ouvrage The Items of Typography Style (Les éléments du style typographique), Robert Bringhurst précise la longueur des lignes (ou la mesure):

Les caractères compris entre 45 et 75 caractères sont généralement considérés comme une longueur de ligne satisfaisante pour une page à colonne unique dans une face de texte avec empattement et une taille de texte. La ligne de 66 caractères (qui compte à la fois des lettres et des espaces) est 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 des lignes directement dans CSS. Aucune propriété line-length. Toutefois, vous pouvez éviter que le texte ne soit trop large en limitant la largeur du conteneur. La propriété max-inline-size est la solution idéale.

Ne définissez pas la longueur des lignes avec une unité fixe telle que px. Les utilisateurs peuvent ajuster la taille de leur police à la hausse ou à la baisse, et la longueur de vos lignes doit s'ajuster 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 s'encapsulent au niveau du 66e caractère à cette taille de police.

Hauteur des lignes

Bien qu'il n'y ait pas de propriété line-length dans 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 permet de s'assurer 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 une meilleure clarté et un meilleur flux de page. Un excellent moyen d'y parvenir 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 très longue période sur le Web, il existait très peu d'options de police. Les polices système étaient les seules options disponibles. Mais désormais, vous pouvez choisir une police Web qui reprend le style de votre contenu.

Utilisez @font-face pour indiquer aux navigateurs l'emplacement de vos fichiers de police Web. Utilisez woff2 comme format de police Web. Cette solution est bien prise 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 en raison de l'augmentation du 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 élément essentiel de l'expérience utilisateur. Une expérience qui se sent rapide est une bonne expérience utilisateur.

Chargement de la police

Vous pouvez demander aux navigateurs de commencer à télécharger un fichier de police dès que possible. Ajoutez un élément link au 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 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. Ces deux stratégies présentent des inconvénients. Si vous attendez le téléchargement de la police Web avant d'afficher du texte, les utilisateurs risquent de rester frustrants pour rester sur une page vierge. Si vous affichez d'abord le texte dans une police système, puis passez à la police Web, les utilisateurs risquent de constater un décalage brusque du contenu de la page.

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

Définissez une valeur font-display de swap si vous souhaitez toujours que la police Web remplace la police système chaque fois qu'elle se charge finalement.

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

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

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

Polices variables

Si vous utilisez de nombreux épaisseurs 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 épaisseur ou style.

Les polices variables permettent de résoudre ce problème en utilisant un seul fichier. Au lieu d'avoir des fichiers séparés pour les polices normales, gras, très gras, etc., un fichier de police variable est responsif. Il contient toutes les informations à afficher pour un large éventail de pondérations ou de styles.

Cela signifie qu'un seul fichier de police à variable est plus volumineux qu'un fichier de polices standard, mais qu'un seul fichier de police à variable sera probablement plus petit que plusieurs fichiers de polices standards. Si vous utilisez de nombreuses épaisseurs de police différentes, vous pouvez améliorer considérablement vos 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 un design qui se sent bien quelle que soit la façon dont il est vu.

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