Typographie et Polices de caractères pour page Web

L’objectif principal de la conception web est la présentation optimale du contenu. L’un des domaines les plus passionnants de la conception Web et quelque peu ignoré par le grand public est la typographie. La typographie est responsable de la mise en page et de l’esthétique des lettres, des chiffres et des symboles qui sont sur papier – ou, dans notre cas, à l’écran – et de la gestion des relations qui se produisent entre eux.

Une typographie correcte peut attirer l’attention des utilisateurs, en établissant un projet différent de tous les autres. Il ne faut pas oublier que les gens passent plus de temps à lire sur le Web que dans les livres imprimés, les magazines et les journaux.

Qu’est-ce que la typographie web?

La typographie Web fait référence à la police de caractères utilisée dans les textes d’un site Web.

La typographie peut modifier le sens que nous associons à un dessin ou modèle. Nous devons savoir que le texte peut dire une chose, les lettres, une autre très différente. Dans toute composition graphique ou page web, le contenu textuel est le principal responsable de la transmission du message au spectateur final.

Lorsque nous concevons, nous devons être clairs sur le fait que la typographie fait partie du design, qui transmet ses propres qualités en fonction de ses caractéristiques. Les caractères nuancent les mots et donnent ou renforcent le sens. La mauvaise sélection de ces formulaires peut interférer négativement dans la communication.

Avec la couleur, la typographie peut modifier complètement le sens que nous associons à un dessin. Il est important de savoir que le texte peut dire une chose ; les lettres peuvent dire quelque chose de très différent.

La typographie et la police sont deux choses différentes

Tout d’abord, le terme Typographie ne signifie pas la même chose que la police de caractères. Ce sont des mots que nous utilisons tous fréquemment comme synonymes, et bien que l’interlocuteur soit parfaitement compris quel que soit celui qu’il utilise, ils ne le sont pas.

Typographie

Elle se réfère au concept générique, c’est-à-dire à l’art et à la technique de création et de composition de types (caractères spécifiques) pour transmettre un message, ainsi qu’à la classification et à l’étude des différentes polices de caractères.

Police de caractères

Elle représente le style d’un groupe spécifique formé par des caractères, des signes, des nombres, etc.

Les typographies Web sont une tendance croissante du web design

L’utilisation des polices web est parfaitement compatible avec la plupart des navigateurs plus anciens.

Les nouveaux écrans rétina nécessitent de travailler avec des images en deux résolutions, l’une pour les écrans à rapport de pixels normal et l’autre pour les écrans à résolution rétinienne. Il n’y a pas besoin de faire quoi que ce soit avec les typographies. Elles s’adaptent parfaitement à n’importe quelle résolution et à n’importe quel rapport de pixels.

Différences entre typographie web et typographie imprimée

Bien que les principes de base de la bonne typographie d’impression soient également appliqués sur le web, il existe un principe qui fait la différence, la typographie sur le web n’est pas fixe, prévisible et contrôlable comme dans l’impression car elle peut varier d’un utilisateur à l’autre selon le système d’exploitation, le navigateur, les polices installées et la résolution écran. Les différences les plus importantes peuvent être énumérées comme suit:

  • L’orientation de la page est généralement horizontale plutôt que verticale.
  • La page entière n’est pas vu en même temps.
  • Le concepteur a beaucoup moins de contrôle sur la typographie et la mise en page que le matériel imprimé.
  • La résolution est plus faible, de sorte que les détails fins ne sont pas bien définis.
  • En raison de ce qui précède, la vitesse de lecture est inférieure d’environ 30 %.
  • Les utilisateurs du site scannent plutôt que de lire, de sorte que la compréhension et la rétention sont réduites à 50 %.
  • Les barres de défilement sont ajoutées comme problème/obstacle.

Quelle est la typographie idéale pour l’impression ?

C’est la Typographie avec serif. Elle est utilisée dans des textes imprimés plus ou moins volumineux, tels que livres, journaux, magazines, etc., puisque l’œil suit la ligne horizontale des enchères ou des empattements, c’est-à-dire que c’est là que l’œil se déplace en lisant. Les plus utilisés le sont probablement :

  • Book Antiqua,
  • Courier,
  • Georgia,
  • Lucida,
  • MS Serif,
  • Times New Roman.

Si vous regardez plusieurs livres que vous avez à la maison, vous verrez que la plupart d’entre eux ont ce style typographique, serif. Cependant, dans la couverture des livres, d’autres typographies peuvent être utilisées, même écrites à la main (script).

D’autre part, les journaux et les magazines jouent davantage avec le changement de typographie dans les titres et les sous-titres, mais dans les textes détaillés à lire, il n’y a pas de changement.

Quelle est la typographie idéale pour un livre numérique ou un site web ?

La police sans empattement est sans fioritures et linéaire. Elle est mieux adaptée à la résolution d’écran, mais elle est également utilisé pour les titres, les couvertures, et vous le verrez même dans de petits blocs de texte. Exemples de polices:

  • Arial,
  • Helvetica,
  • Tahoma,
  • Verdana.

Dans ce cas, peu importe la taille de la page, mais il est important de hiérarchiser les informations. Vous devez également garder à l’esprit qu’une typographie adéquate peut réduire la fatigue visuelle et augmenter la concentration, en faisant passer le lecteur, en même temps, plus de temps sur votre page.

Polices de caractères et SEO

Parlant de valeurs mesurables, de temps de chargement et d’optimisation, les polices web obligent l’utilisateur à les télécharger, avec le poids que cela implique et l’appel ou les appels au serveur. Cela augmente le temps de chargement. Les polices Web doivent être téléchargées par l’utilisateur alors que la police par défaut est déjà installée sur l’appareil ou l’ordinateur. Il s’agit d’un appel de plus au serveur, et quelques kilo-octets de transfert de plus

Soyez donc prudent avec les polices que vous utilisez, pensez quelle police utiliser, collez seulement celles qui sont nécessaires et cherchez une bonne combinaison. Ce n’est qu’alors que vous utiliserez leur véritable puissance, qui n’est autre que d’améliorer l’expérience de l’utilisateur, avec une augmentation de la lisibilité et de l’accessibilité de votre design web.