Comment créer une ty­po­gra­phie res­pon­sive avec CSS ?

Les polices res­pon­sives ga­ran­tis­sent une li­si­bi­lité optimale des textes sur tous les appareils. Le terme « res­pon­sive » désigne ici la capacité de la ty­po­gra­phie à s’adapter au­to­ma­ti­que­ment aux dif­fé­rentes tailles d’écran. On parle aussi de ty­po­gra­phie réactive pour décrire ce com­por­te­ment dynamique, ou de ty­po­gra­phie adap­ta­tive lorsque l’accent est mis sur l’ajus­te­ment continu aux con­traintes d’affichage. Plutôt que de recourir à des valeurs fixes en pixels, la ty­po­gra­phie s’adapte de manière fluide à la largeur de l’écran. En CSS, cette adap­ta­bi­lité peut être mise en œuvre sim­ple­ment à l’aide d’unités flexibles ou de fonctions modernes.

Quelle police convient au CSS res­pon­sive Webdesign ?

Dans le cadre du Webdesign, l’objectif est de garantir une pré­sen­ta­tion claire, cohérente et ac­ces­sible des contenus sur tous les types d’écrans. Pour que le texte de votre site Web s’affiche de manière optimale sur tous les écrans, il est re­com­mandé d’utiliser des polices de ca­rac­tères vec­to­rielles adaptées à l’affichage Web. Vous pouvez par exemple recourir à des polices conçues spé­ci­fi­que­ment pour une uti­li­sa­tion sur le Web (Webfonts). Lors du choix de la ty­po­gra­phie, veillez à ce que la police soit lisible et cohérente avec votre intention de com­mu­ni­ca­tion. Pour les titres, une ty­po­gra­phie plus ex­pres­sive peut convenir, mais elle doit être évitée dans le corps du texte, car elle complique inu­ti­le­ment la lecture sur la durée.

La couleur de la police doit offrir un contraste approprié en com­bi­nai­son avec l’arrière-plan du site Web. Une teinte trop claire nuit également à la li­si­bi­lité. En cas de doute sur le contraste, des outils comme le Colour Contrast Check ou le Contrast Checker de WebAIM per­met­tent de vi­sua­li­ser l’in­te­rac­tion entre la couleur du texte et celle de l’arrière-plan, et de tester dif­fé­rentes nuances.

Comment intégrer des Webfonts res­pon­sives via Media Queries ?

Depuis l’in­tro­duc­tion des CSS Media Queries (requêtes média) dans CSS3, il existe une solution efficace pour mettre en place des polices adap­ta­tives. Les Media Queries iden­ti­fient certaines ca­rac­té­ris­tiques d’un appareil, afin d’ajuster l’affichage des textes de votre site Web aux con­di­tions d’uti­li­sa­tion. Parmi ces ca­rac­té­ris­tiques figurent notamment :

• La ré­so­lu­tion de l’écran
• La largeur et la hauteur de la fenêtre du na­vi­ga­teur
• L’orien­ta­tion de l’écran

Une ty­po­gra­phie réel­le­ment réactive en CSS repose sur l’uti­li­sa­tion d’unités de mesure relatives. Les valeurs fixes en pixels, en tant qu’unité statique, ne per­met­tent pas une mise à l’échelle fluide en fonction des dif­fé­rentes tailles d’écran. Pour concevoir une police de ca­rac­tères adap­ta­tive, il est donc re­com­mandé de définir la taille des polices Web à l’aide d’unités flexibles telles que em, rem ou des pour­cen­tages.

L’in­té­gra­tion et l’ajus­te­ment d’une ty­po­gra­phie res­pon­sive à l’aide des Media Queries reposent sur les commandes CSS suivantes :

• Avec @font-face, vous intégrez une police Web dans votre page.
• Les règles @media per­met­tent d’adapter la ty­po­gra­phie à dif­fé­rentes largeurs d’écran, par exemple avec @media screen and (min-width: 800px).
• La propriété font-size définit la taille d’affichage de la police, soit en pixels, soit à l’aide d’unités de mesure relatives comme em.

Titres res­pon­sives avec les Media Queries

Les titres sont mis en forme en CSS à l’aide des balises h1, h2, h3, etc. Il est possible d’attribuer dif­fé­rentes tailles d’affichage relatives à un titre en utilisant l’unité em. L’exemple ci-dessous illustre comment, à partir d’une taille de police définie à 100 % (font-size: 100%), le titre principal (h1) peut être affiché selon plusieurs tailles relatives :

body {
    font-size: 100%;
}
h1 {
    font-size: 3em;
}
@media screen and (max-width: 64em) {
    h1 {
        font-size: 2.5em;
    }
}
@media screen and (max-width: 50em) {
    h1 {
        font-size: 2em;
    }
}
@media screen and (max-width: 30em) {
    h1 {
        font-size: 1.5em;
    }
}

Dans cet exemple, quatre variantes d’affichage dif­fé­rentes sont définies pour le h1. La taille de police appliquée dépend de la largeur de la fenêtre du na­vi­ga­teur, dé­ter­mi­née par la valeur maximale définie avec max-width.

La largeur est exprimée ici à l’aide de l’unité em. Comme aucune taille de police fixe n’a été définie au préalable, cette valeur repose sur le réglage par défaut du na­vi­ga­teur, gé­né­ra­le­ment 16 pixels. Étant donné que 1em cor­res­pond à 16 px, il est possible de calculer fa­ci­le­ment les largeurs sou­hai­tées en divisant le nombre de pixels par 16. Dans cet exemple, la taille de police du h1 s’adapte à quatre largeurs de fenêtre dif­fé­rentes :

• Plus de 1 024 px
• Jusqu’à 1 024 px (64em)
• Jusqu’à 800 px (50em)
• Jusqu’à 480 px (30em)

Lorsque le titre est plus long, il peut passer à la ligne sur les écrans de petite taille. Dans ce cas, il est re­com­mandé d’ajuster également l’in­ter­ligne du titre de manière relative, comme expliqué dans la section suivante.

Texte principal res­pon­sive avec em

Comme pour les titres, dé­fi­nis­sez la taille de la police d’un pa­ra­graphe (p) à 100 %. Là encore, la taille de la police est exprimée à l’aide de l’unité em. La mise en œuvre de dif­fé­rentes tailles de police, en fonction des quatre largeurs de fenêtre définies pré­cé­dem­ment, s’effectue en CSS de la manière suivante :

body {
    font-size: 100%;
}
p {
    font-size: 1.5em;
}
@media screen and (max-width: 64em) {
    body {
        font-size: 90%;
    }
}
@media screen and (max-width: 50em) {
    body {
        font-size: 75%;
    }
}
@media screen and (max-width: 30em) {
    body {
        font-size: 50%;
    }
}

Étant donné que la valeur body de 100 % cor­res­pond, dans la plupart des na­vi­ga­teurs, à 16 pixels, la taille de police de base du texte (font-size: 1.5em) est de 24 pixels dans cet exemple (1,5 × 16 = 24). La ty­po­gra­phie res­pon­sive est mise en œuvre à l’aide de la propriété font-size. Pour l’élément body, la taille de la police s’adapte au­to­ma­ti­que­ment à la largeur de la fenêtre du na­vi­ga­teur.

Dès lors que le texte de vos pages Web est conçu de manière res­pon­sive, il est né­ces­saire d’ajuster non seulement la taille de la police, mais aussi l’in­ter­ligne de façon continue. Selon la pratique ty­po­gra­phique courante, l’in­ter­ligne doit augmenter à mesure que la longueur des lignes s’accroît. Une autre règle générale indique que l’in­ter­ligne du texte courant devrait re­pré­sen­ter entre 120 et 140 % de la taille de police utilisée (1.2em à 1.4em), cette valeur dépendant toutefois toujours de la police employée. Cette adap­ta­tion s’effectue à l’aide de la propriété line-height (hauteur de ligne) :

body {
    font-size: 100%;
}
p {
    font-size: 1.5em;
    line-height: 1.3em;
}
h1, h2, h3 {
    line-height: 1.2em;
}

Texte principal res­pon­sive avec rem

Plutôt que d’utiliser em, il est souvent re­com­mandé d’opter pour l’unité de mesure relative rem (« root em ») pour concevoir un texte principal res­pon­sive. Con­trai­re­ment à em, qui dépend du contexte de l’élément parent, rem se base sur la taille définie au niveau de l’élément racine html. La mise à l’échelle de la ty­po­gra­phie est ainsi contrôlée de manière globale, ce qui garantit une adap­ta­tion cohérente de l’ensemble des contenus textuels. Cette approche constitue un avantage notable, en par­ti­cu­lier lorsque la structure du document comporte des im­bri­ca­tions d’éléments complexes ou lorsque des ajus­te­ments globaux de taille sont né­ces­saires.

Les commandes CSS suivantes il­lustrent un exemple de ty­po­gra­phie Web réactive utilisant rem :

html {
    font-size: 100%;
}
p {
    font-size: 1.5rem;
}
h1 {
    font-size: 3rem;
}
h2 {
    font-size: 2.5rem;
}
h3 {
    font-size: 2rem;
}

L’unité rem est aujourd’hui prise en charge par la quasi-totalité des na­vi­ga­teurs Web modernes. La dé­fi­ni­tion d’une variante de secours (fallback) reposant sur des valeurs en pixels n’est donc gé­né­ra­le­ment né­ces­saire que dans des contextes très spé­ci­fiques, par exemple pour assurer la com­pa­ti­bi­lité avec d’anciennes versions de na­vi­ga­teurs ou des en­vi­ron­ne­ments fortement con­traints. Dans ces cas par­ti­cu­liers, il est possible de prévoir une valeur de repli avant la dé­cla­ra­tion en rem, comme illustré ci-dessous :

html {
    font-size: 100%;
}
p {
    font-size: 24px;
    font-size: 1.5rem;
}

Polices res­pon­sives via le viewport

Une autre approche pour mettre en œuvre une ty­po­gra­phie Web réactive consiste à utiliser les unités de viewport en CSS. En Webdesign, le viewport cor­res­pond à la taille de la fenêtre du na­vi­ga­teur. Les unités de viewport per­met­tent d’adapter le contenu des pages à la largeur dis­po­nible de la fenêtre et de le mettre à l’échelle en fonction de celle-ci. Par rapport aux Media Queries, cette méthode présente l’avantage d’un ajus­te­ment plus fluide lors des chan­ge­ments de taille de la fenêtre.

Les unités de viewport suivantes sont dis­po­nibles :

• vw (viewport width) : largeur relative à la fenêtre du na­vi­ga­teur
• vh (viewport height) : hauteur relative à la fenêtre du na­vi­ga­teur
• vmax (viewport maximum) : valeur la plus élevée entre la largeur et la hauteur
• vmin (viewport minimum) : valeur la plus faible entre la largeur et la hauteur

Pour ces quatre unités de viewport, il s’agit de valeurs exprimées en pour­cen­tage. Par exemple, 10vw cor­res­pond à 10 % de la largeur de la fenêtre. Avec un viewport de 640 × 480 pixels, vmax se réfère à 640 pixels, soit la plus grande des deux valeurs. Dans ce cas, 10vmax cor­res­pond à 64 px (640 ÷ 10).

Toutefois, l’uti­li­sa­tion des unités de viewport pour la ty­po­gra­phie doit être envisagée avec pré­cau­tion. Sur des écrans très larges ou lors de l’uti­li­sa­tion du zoom du na­vi­ga­teur, les tailles de police peuvent devenir ex­ces­si­ve­ment grandes ou, au contraire, trop petites, ce qui peut nuire à la li­si­bi­lité et à l’ac­ces­si­bi­lité. Pour cette raison, les unités de viewport sont souvent combinées avec des limites minimales et maximales, par exemple via la fonction clamp().

Titres et textes fluides res­pon­sives via le viewport

Les unités de mesure du viewport per­met­tent d’adapter aussi bien les titres que le texte principal de manière fluide. L’in­té­gra­tion des unités de viewport s’effectue selon un principe com­pa­rable à l’uti­li­sa­tion de rem avec les Media Queries, car ces deux unités de mesure reposent sur des valeurs relatives :

p {
    font-size: 2vmin;
}
h1 {
    font-size: 5vw;
}
h2 {
    font-size: 4vh;
}
h3 {
    font-size: 3vmin;
}

Grâce à ces ins­truc­tions CSS, vous pouvez par exemple définir que les ca­rac­tères du texte courant (p) occupent en per­ma­nence 2 % de la largeur ou de la hauteur de la fenêtre (font-size: 2vmin), selon la valeur la plus faible. De cette manière, la ty­po­gra­phie en CSS res­pon­sive Webdesign conserve toujours les mêmes pro­por­tions, même lorsque les di­men­sions de la fenêtre du na­vi­ga­teur sont réduites.

Ty­po­gra­phie Web res­pon­sive avec clamp()

Une autre méthode par­ti­cu­liè­re­ment pratique pour créer une police réactive en CSS consiste à utiliser la fonction clamp(). Celle-ci permet de définir une taille de police fluide qui s’adapte dy­na­mi­que­ment à la largeur de l’écran, tout en étant encadrée par des limites minimales et maximales fixes. clamp() combine ainsi les avantages des unités relatives (comme vw ou rem) avec un contrôle précis de la li­si­bi­lité, évitant que les textes ne de­vien­nent trop petits ou ex­ces­si­ve­ment grands selon la taille de l’écran.

La syntaxe est la suivante : font-size: clamp(minimum, préféré, maximum);. Cela cor­res­pond à :

• minimum : la plus petite taille de police autorisée.
• préféré : la valeur flexible qui s’ajuste dy­na­mi­que­ment à la largeur de la fenêtre d’affichage.
• maximum : la plus grande taille de police permise.

Un exemple pour un titre pourrait se présenter ainsi :

h1 {
    font-size: clamp(1.5rem, 5vw, 3rem);
}

L’avantage de clamp() par rapport aux Media Queries réside dans le fait que la taille de la police s’ajuste de manière fluide, sans qu’il soit né­ces­saire de définir plusieurs points de rupture. Cette approche est aujourd’hui con­si­dé­rée comme une bonne pratique pour la ty­po­gra­phie Web moderne, car elle combine flexi­bi­lité, li­si­bi­lité et sim­pli­cité de mise en œuvre, tout en réduisant le besoin de règles @media dis­tinctes.

En résumé : ne pas négliger la ty­po­gra­phie dans le CSS res­pon­sive Webdesign

Quelques ins­truc­tions CSS suffisent pour mettre en place une ty­po­gra­phie adaptée au CSS res­pon­sive Webdesign. Une fois l’im­plé­men­ta­tion terminée, il est re­com­mandé de tester le rendu sur un maximum d’appareils ou d’ému­la­teurs et d’effectuer les ajus­te­ments né­ces­saires avant la mise en ligne du site Web.

Le choix entre les Media Queries et les unités de viewport en CSS dépend du contexte et relève en partie d’une pré­fé­rence per­son­nelle. Les Media Queries sont lé­gè­re­ment moins réactives que les unités de viewport lors des chan­ge­ments de taille, mais elles offrent une meilleure com­pa­ti­bi­lité avec les na­vi­ga­teurs plus anciens. Il existe par ailleurs d’autres approches pour mettre en œuvre une ty­po­gra­phie Web réactive, comme les Container Queries. Celles-ci per­met­tent d’adapter la ty­po­gra­phie en fonction de la taille d’un conteneur spé­ci­fique plutôt que du viewport global, mais leur usage reste limité à des contextes de mise en page locaux et ne remplace pas encore en­tiè­re­ment les mé­ca­nismes réactifs.

Toutes ces méthodes répondent aux exigences d’une ty­po­gra­phie Web res­pon­sive : dans le CSS res­pon­sive Webdesign, la police doit toujours s’adapter à l’espace dis­po­nible, en s’appuyant sur des ajus­te­ments relatifs de la taille des ca­rac­tères et de l’in­ter­ligne, ainsi que sur l’uti­li­sa­tion de Webfonts vec­to­rielles, garantes d’une mise à l’échelle fluide et d’une li­si­bi­lité constante.