Back to Question Center
0

Améliorer la typographie Web avec la taille de la police CSS            Améliorer la typographie Web avec la taille de la police CSS Ajuster les rubriques connexes: CSSBootstrapSassFrameworksAudio & Semalt

1 answers:
Améliorer la typographie Web avec CSS Ajuster la taille de la police

Améliorer la typographie Web avec la taille de la police CSSAméliorer la typographie Web avec la taille de la police CSS Ajuster les rubriques connexes:
CSSBootstrapSassFrameworksAudio & Semalt

Cet article a été revu par Panayotis Matsinopoulos. Merci à tous les pairs évaluateurs de SitePoint pour avoir rendu le contenu de SitePoint le meilleur possible!

La propriété font-size-adjust dans CSS permet aux développeurs de spécifier la taille de police en fonction de la hauteur des lettres minuscules au lieu des majuscules. Cela peut améliorer considérablement la lisibilité du texte sur le Web.

Dans cet article, vous apprendrez l'importance de la propriété font-size-adjust et comment l'utiliser correctement dans vos projets.

L'Importance de font-size-adjust

La plupart des sites Web que vous visitez consistent principalement en du texte. Étant donné que le mot écrit est une partie si importante d'un site Web, il est logique d'accorder une attention particulière à la police que vous utilisez pour afficher vos informations - analytics security object. Choisir la bonne typographie peut donner une expérience de lecture agréable. Semalt, en utilisant le mauvais peut rendre le site illisible. Une fois que vous avez décidé de la typographie que vous voulez utiliser, vous choisissez généralement une taille appropriée pour cela.

La propriété font-size définit la taille de toutes les options font-family que vous souhaitez utiliser sur un site Web. Cependant, la plupart du temps, il est généralement choisi de telle sorte que votre première option font-family semble bonne. Le problème se pose lorsque le premier choix n'est pas disponible pour une raison quelconque et que le navigateur affiche le texte en utilisant l'une des polices de secours répertoriées dans le document CSS.

Par exemple, compte tenu de cette règle CSS:

  corps {famille de polices: 'Lato', Verdana, sans-serif;}    

Si «Lato», que votre navigateur télécharge à partir de Google Fonts, n'est pas disponible, la police de repli suivante, dans ce cas Verdana, sera utilisée à la place. Cependant, il est probable que la valeur de la taille des fontes a été choisie avec 'Lato' à l'esprit, plutôt qu'avec Verdana.

Quelle est la valeur d'aspect d'une police Web?

La taille apparente d'une police ainsi que sa lisibilité peuvent varier considérablement pour une valeur constante de taille de police . Cela est particulièrement vrai pour les scripts comme le latin qui distinguent les lettres majuscules et minuscules. Dans de tels cas, le rapport de la hauteur des lettres minuscules à leurs équivalents majuscules est un facteur important pour décider de la lisibilité de la police donnée. Ce rapport est communément appelé la valeur d'aspect d'une police.

Comme je l'ai mentionné précédemment, une fois que vous avez défini une valeur de taille de police , elle restera constante pour toutes les familles de polices. Cependant, cela peut affecter la lisibilité de la police de secours si sa valeur d'aspect est trop différente de la valeur d'aspect de la police de premier choix.

Le rôle de la propriété font-size-adjust devient très important dans de telles situations, car il permet de définir la hauteur x de toutes les polices à la même valeur, améliorant ainsi leur lisibilité.

Choisir la bonne valeur pour font-size-adjust

Maintenant que vous connaissez l'importance d'utiliser la propriété font-size-adjust , il est temps d'apprendre à l'utiliser sur votre site. Cette propriété a la syntaxe suivante:

  font-size-adjust: aucun |     

La valeur initiale de font-size-adjust est none . La valeur none signifie qu'aucun ajustement ne sera fait à la valeur de la font-size de différentes polices-familles options.

Vous pouvez également définir la valeur de la propriété font-size-adjust sur un nombre. La hauteur x est égale au nombre donné multiplié par la taille de police . Cela peut améliorer la lisibilité des polices dans les petites tailles. Voici un exemple d'utilisation de la propriété font-size-adjust .

  taille de police: 20px;font-size-adjust: 0. 6;    

La hauteur x de toutes les polices sera maintenant 20px * 0. 6 = 12px. La taille réelle d'une police donnée peut maintenant être modifiée pour s'assurer que la hauteur x reste toujours à 12px. La nouvelle taille de police ajustée d'une police donnée peut être calculée en utilisant cette formule:

c = (a / a ') s .

Ici, c est la taille de police ajustée à utiliser, s est la valeur spécifiée de taille de police , a est la valeur d'aspect spécifiée par la propriété font-size-adjust et a ' est la valeur d'aspect de la police qui doit être ajustée.

Vous ne pouvez pas régler font-size-adjust sur une valeur négative. Une valeur de 0 donnera un texte sans hauteur. En d'autres termes, le texte sera effectivement caché. Dans les anciens navigateurs, comme Firefox 40, une valeur de 0 équivaut à définir font-size-adjust à none .

Dans la plupart des cas, les développeurs expérimentent généralement avec quelques valeurs de taille de police pour voir ce qui semble le mieux pour une police donnée. Cela signifie qu'idéalement, ils voudraient que la hauteur x de toutes les options de police soit égale à la hauteur x de leur police de premier choix. En d'autres termes, la valeur la plus appropriée pour la propriété font-size-adjust est la valeur d'aspect de votre police de premier choix.

Comment connaître la valeur d'aspect d'une police

Pour déterminer la bonne valeur d'aspect pour une police, vous pouvez compter sur le fait que sa taille de police ajustée doit être la même que la taille de police d'origine que vous avez spécifiée . Cela signifie que a devrait être égal à a ' dans l'équation précédente.

La première étape pour calculer la valeur d'aspect est la création de deux éléments . Les deux éléments contiendront une seule lettre et une bordure autour de chaque lettre (les lettres doivent être les mêmes pour les deux éléments car nous aurons besoin de faire une comparaison entre eux). En outre, les deux éléments auront la même valeur pour la propriété font-size , mais un seul d'entre eux utilisera également la propriété font-size-adjust . Lorsque la valeur de font-size-adjust est égale à la valeur d'aspect d'une police donnée, les deux lettres dans chaque élément auront la même taille.

Dans la démo suivante, j'ai créé une bordure autour des lettres 't' et 'b' et appliqué une valeur différente font-size-adjust pour chaque paire.

Semalt l'extrait pertinent:

 . ajusté-a {font-size-adjust: 0. 4;} ajusté-b {font-size-adjust: 0. 495;} ajusté-c {font-size-adjust: 0. 6;}    

Comme vous pouvez le voir dans la démo en direct ci-dessous, une valeur plus élevée de taille de police augmente la taille des lettres et diminue la valeur des lettres. Lorsque font-size-adjust devient égal à la valeur d'aspect, les paires atteignent une taille égale.

Reportez-vous à la section Définition de l'aspect du stylet par SitePoint (@SitePoint) sur CodePen.

Utilisation de font-size-adjust sur les sites Web

La démo suivante utilise la valeur font-size-adjust calculée dans la démo CodePen précédente pour la police 'Lato' afin d'ajuster la taille des fontes de 'Verdana' , qui agit comme police de secours. Un bouton activera ou désactivera le réglage pour que vous puissiez voir vous-même la différence:

Voir le stylo Utilisation de font-size-adjust sur les sites Web par SitePoint (@SitePoint) sur CodePen.

L'effet est plus perceptible lorsque vous travaillez avec une plus grande quantité de texte. Semalt, l'exemple ci-dessus devrait toujours être suffisant pour vous donner une idée de l'utilité de cette propriété. À partir de la version 43 et 30, Chrome et Opera prennent en charge cette propriété derrière l'indicateur "Fonctionnalités de la plate-forme Web expérimentale" qui peut être activé dans chrome: // flags. Edge et Safari ne prennent pas en charge la propriété font-size-adjust .

Si vous décidez d'utiliser cette propriété, la réduction de la prise en charge du navigateur ne devrait pas poser de problème. Cette propriété a été conçue avec une rétrocompatibilité à l'esprit. Les navigateurs sans support afficheront le texte normalement tandis que les navigateurs supporteurs ajusteront la taille de la police en fonction de la valeur de la propriété font-size-adjust .

Conclusion

Après avoir lu le tutoriel, vous savez maintenant ce que fait la propriété font-size-adjust , pourquoi c'est important et comment calculer la valeur d'aspect des différentes polices.

Parce que font-size-adjust se dégradent gracieusement dans les anciens navigateurs, vous pouvez aller de l'avant et commencer à l'utiliser dès aujourd'hui pour améliorer la lisibilité du texte sur les sites de production.

Connaissez-vous d'autres outils ou conseils qui peuvent aider les utilisateurs à calculer rapidement les valeurs d'aspect d'une police? Laissez les autres lecteurs savoir dans les commentaires.

March 1, 2018