À l’ère des centaines d’écrans, les concepteurs de sites Web doivent souvent prendre en compte l’expérience de navigation des différents clients.
La taille du texte est un élément important de l’expérience utilisateur. Différentes résolutions, différentes tailles d'écran, différents DPI et même différents paramètres du navigateur auront un impact sur la taille finale du texte affiché. Bien que de nombreux navigateurs puissent désormais facilement zoomer sur la page, il est toujours difficile pour les utilisateurs de re-zoomer à chaque visite, sans compter que de nombreux utilisateurs ne savent pas comment zoomer sur la page. Il est préférable de donner aux utilisateurs une taille de police par défaut plus adaptée en fonction de leur résolution. Alors, quelle est la taille appropriée pour cette taille de police ?
12px ? 14px ? 15px ? 16px ? Ou ne devrions-nous pas utiliser l'unité px ?
La racine du problème est que toutes les unités de taille de police (px, pt, em) à l’écran sont des unités relatives et qu’elles ne peuvent à elles seules déterminer la taille réelle du texte. De plus, la perception fondamentale de la taille du texte dépend de la perspective des yeux, qui dépend non seulement de la taille physique du texte, mais également de sa distance par rapport à l'œil humain.
taille physique
Tout d'abord, supposons une taille de texte physique que nous souhaitons atteindre, par exemple définie sur 16 pixels sur un moniteur 17 pouces 1280 * 1024. Calculée, sa hauteur est d'environ 4,32 mm. Nous prévoyons de rendre le texte Web plus proche de cela sur la plupart des moniteurs. taille, alors quelle taille de police doit être affichée à différentes résolutions ?
Étape 1 : Comptez la résolution principale de l’utilisateur et la taille d’écran correspondante.
Pour convertir entre la taille physique et la résolution, comptez d’abord la résolution et la taille d’écran correspondante. La répartition des résolutions des utilisateurs peut être obtenue à partir des journaux statistiques du site Web. Étant donné que chaque paramètre de résolution peut correspondre à plusieurs écrans de tailles différentes et que la taille de l'écran ne peut pas être obtenue via la page Web, nous devons procéder à une analyse statistique du marché actuel des moniteurs : pour une certaine résolution, compter les plages de tailles d'écran possibles, de la plus petite à la taille la plus grande, relativement courante (ou utilisez le milieu de gamme comme taille courante). Comme le montre l'image ci-dessous——
Marché des écrans d'ordinateur (il existe de nombreux types de produits, et il est inévitable que l'on en manque, les données sont à titre indicatif uniquement)
Étape 2 : Calculez la largeur physique des tailles d'écran grand public pour chaque résolution
Les formats d'image des moniteurs actuels incluent non seulement des écrans standard 4:3, des écrans larges 16:10, mais également des formats plus irréguliers. Afin de comparer des moniteurs avec des formats d'image différents, les résolutions horizontales sont utilisées à des fins statistiques. Utilisez la taille et le rapport hauteur/largeur courants (en supposant que la longueur et la largeur des pixels sont les mêmes) pour calculer la largeur de l'écran (pouces), puis convertissez-la en métrique (millimètres). En les faisant correspondre un à un, vous pouvez voir le. tendance de la taille de l’écran. Combinés avec la répartition des utilisateurs de chaque résolution, les résultats sont tels qu'illustrés dans la figure ci-dessous (chaque point de l'image correspond à une résolution, l'axe horizontal est le nombre de pixels dans le sens horizontal de l'écran, l'axe vertical est le nombre de pixels dans le sens horizontal de l'écran, l'axe vertical est le la largeur physique de l'écran et la taille de la bulle indique l'utilisation de cette résolution. Le nombre d'utilisateurs. La bulle bleue indique un écran standard et la violette indique un écran large) : les trois plus grandes bulles sont 1024*768, 1280*1024 et 1280*800.
Étape 3 : Calculez la taille de la police sur différents moniteurs
Divisez la largeur physique de l'écran par la largeur des pixels pour obtenir la largeur de chaque pixel. Divisez ensuite ce nombre par la taille physique spécifiée du texte pour obtenir la taille de police requise à différentes résolutions. Par exemple, pour afficher un texte carré de 4,32 mm, les tailles de police suivantes sont requises pour chaque résolution (calculées séparément pour les ordinateurs portables et les ordinateurs de bureau) :
Tailles de police requises à différentes résolutions
On peut voir que les tailles des ordinateurs portables et des ordinateurs de bureau sont très différentes. Pour plus de commodité, la taille principale ou la taille moyenne de chaque résolution est utilisée pour calculer la taille de police requise pour la taille de police spécifiée à chaque résolution. (L'image suivante supprime les résolutions qui ne sont essentiellement utilisées que sur les ordinateurs portables), en prenant comme exemples 4,32 mm, 3,77 mm et 3,25 mm (polices de taille 16, 14 et 12 à une résolution de 17 pouces de 1 280 x 1 024) :
Afin de maintenir une taille physique fixe, la relation entre la taille de police requise et la résolution sous chaque écran grand public
Étant donné que certaines polices chinoises ne s'affichent pas correctement avec des nombres non pairs lorsque cleartype n'est pas activé, il est généralement recommandé d'utiliser des nombres pairs tels que 12, 14, 16, 18 et 22 px. Autrement dit, sélectionnez le nombre pair le plus proche pour une certaine résolution. Par exemple : 14 px est utilisé pour les résolutions horizontales d’écran inférieures à 1 100, 16 px est utilisé pour les résolutions horizontales de 1 100 à 1 500, 18 px est utilisé pour les écrans supérieurs à 1 500, et ainsi de suite.
distance à l'oeil humain
Bien que la taille de police des ordinateurs portables soit beaucoup plus petite que celle des ordinateurs de bureau, cela ne nous apporte pas beaucoup d'inconvénients, car la distance entre l'œil humain et l'écran est généralement plus proche lors de l'utilisation d'ordinateurs portables que lors de l'utilisation d'ordinateurs de bureau. Lorsque les netbooks deviennent de plus en plus petits (l'exemple extrême étant celui des téléphones portables), les gens peuvent les tenir plus près lorsqu'ils les utilisent, de sorte que l'angle de vision soit plus grand. Au contraire, lorsque l'écran devient de plus en plus grand (24 pouces ou même plus), en raison de considérations telles que l'angle de vision global, les gens peuvent également s'éloigner de l'écran, réduisant ainsi l'angle de vision.
Quantitativement parlant : étant donné que la taille du texte h (4~5 mm) est très petite par rapport à la distance d (30~60 cm) entre l'œil humain et le texte, on peut considérer approximativement que l'angle de vision θ est proportionnel à h et inversement. proportionnel à d (θ≈tgθ=h/ d). En d’autres termes, un texte de même taille n’apparaîtra que la moitié de sa taille lorsqu’il se trouve à deux pieds de lui.
En d’autres termes, le moniteur ne peut transmettre qu’une taille approximative, et chaque utilisateur ajustera toujours l’effet réel qu’il voit en ajustant inconsciemment la distance par rapport à l’écran lors d’opérations spécifiques. Face à de plus en plus d'utilisateurs d'ordinateurs portables (veuillez vous référer à l'article précédent : Part de marché des ordinateurs portables), les concepteurs front-end ne peuvent fournir qu'un effet de page basé sur la taille moyenne des ordinateurs portables et des ordinateurs de bureau, et cela dépend des utilisateurs qui s'adaptent.
Utilisez JS pour ajuster automatiquement la taille de la police sous différentes résolutions
Par exemple, l'identifiant du div où se trouve le corps de la page Web est content——
Remarque : Afin de garantir que le texte peut être mis à l'échelle dans chaque navigateur, l'unité de taille de police utilise em au lieu de px. De manière générale, la valeur par défaut du navigateur est 1em=16px et 0,875em1em1,125em correspond à 1416. 18px.
Veuillez noter lorsque vous utilisez la mise à l'échelle de la taille de police : il est préférable d'utiliser des pourcentages au lieu de tailles de police fixes pour les unités de taille de police telles que les titres au sein du div afin qu'elles puissent être mises à l'échelle de manière synchrone avec le texte.
Pièce jointe : Les principales données citées dans les graphiques de cet article
Publié pour la première fois sur ce site : http://www.mhzx1.com