Share
Lors de l'utilisation de la typographie sur le Web, vous devez garder à l'esprit de nombreux éléments pour créer une page offrant un accès clair au contenu et le présentant de manière lisible. En règle générale, cela peut être divisé en deux catégories: Lisibilité et Lisibilité. La lisibilité fait référence à la manière dont les mots et les blocs de texte sont disposés sur une page. La lisibilité fait référence à la manière dont un caractère est conçu et à la distinction d’un caractère. Pour les besoins de cet article, je parlerai un peu des deux, en vous suggérant des techniques spécifiques pour améliorer votre typographie..
Parlons d'abord de la lisibilité. Il est important de comprendre ce qui rend une police plus lisible qu'une autre. Lorsque vous choisissez un caractère, tout dépend de la manière dont vous prévoyez de l'utiliser. Posez-vous quelques questions de base: à quelle taille le texte sera-t-il utilisé? Est-ce qu'il apparaîtra comme une copie du corps ou un titre? Devra-t-il être un bourreau de travail ou sera-t-il davantage utilisé comme bonbon aux yeux? Sera-t-il associé à une autre police? Est-ce que l'apparence de la police de caractères complète le sujet??
Il est également important de garder à l'esprit que différents types de caractères ont été conçus pour différentes utilisations. Par exemple, le Garamond original a été conçu pour être très lisible lorsqu'il est imprimé dans un corps de texte volumineux. Certains disent également que c’était la police la plus écologique de son époque, économisant l’utilisation de l’encre. Bell Centennial est une police de caractères commandée par AT & T dans les années 1970 et conçue pour être utilisée dans les annuaires téléphoniques. Ces répertoires ont été fabriqués à partir de papier bon marché et, pour cette raison, Bell Centennial a été conçu de manière à prendre en charge la propagation de l'encre pendant le processus d'impression. Du côté numérique, il existe des polices spécialement conçues pour l'écran, telles que Georgia et Verdana. Azura est une police relativement récente spécialement conçue pour la lecture de texte à l'écran..
En bref, il est utile de connaître le contexte voulu de la police de caractères que vous envisagez d’utiliser. Certaines polices sont en effet très flexibles, incluent plusieurs poids et peuvent être utilisées de différentes manières. D'autres sont plus contraignants, conçus pour être utilisés très spécifiquement.
Cela nous amène au premier des quelques points à retenir concernant la lisibilité d'une police:
Certaines polices ont été conçues pour être utilisées en grandes tailles, par exemple dans les titres. Habituellement, ces polices sont moins lisibles avec des tailles plus petites et ne doivent pas être utilisées pour la copie sur corps. Ceux-ci s'appellent faces d'affichage. La police illustrée ci-dessous, Knockout, est l'une de mes faces d'affichage préférées..
D'autres polices sont spécialement conçues pour être utilisées dans de grandes surfaces de copies de corps plus petites. Celles-ci sont appelées texte ou corps.
Il y a beaucoup de variations entre les deux. En règle générale, je cherche un visage qui convient à la tâche, en gardant à l'esprit que je prévois de l'associer à une autre police et de l'essayer. J'ai déjà filtré toutes les polices que je ne pense pas appropriées à la tâche, mais si vous débutez, cela peut prendre quelques essais et erreurs..
Alors, qu'est-ce qui est le plus lisible: les caractères serif ou sans-serif? L’histoire nous dit que les visages empattés ont toujours été considérés comme plus lisibles, car ils étaient presque toujours utilisés dans l’impression pour les grands passages de texte. Les faces empattées permettent à l’œil de s’écouler plus facilement sur le texte, ce qui améliore la vitesse de lecture et diminue la fatigue oculaire..
Cela dit, il existe de nombreux visages sans empattement lisibles. En ligne, il semble que les visages sans empattement soient plus utilisés que jamais pour le corps du texte. Je pense qu'il y a plusieurs raisons à cela. Les lettres les plus simples semblent mieux fonctionner avec les tendances actuelles en matière de conception et peuvent sembler plus modernes. De plus, nous ne lisons généralement pas de grands passages de texte sur un site Web. Par conséquent, les polices sans empattement conviennent très bien en morceaux plus courts..
Il convient de noter qu’il existe un débat à ce sujet. L’un des points de vue est que les visages empattés ne réduisent pas bien la lisibilité de l’écran. D'autres pensent qu'il n'y a pas de différence. La position que je prends toujours est la suivante: est-ce correct? Est-ce que je lirais une section de type définie comme je l'ai conçue??
Une autre caractéristique à noter est la hauteur x. Cela s’applique généralement à l’utilisation de caractères de type à la taille du texte. La hauteur x est, ainsi, la mesure de la hauteur du «x» minuscule dans une police donnée. Il ne prend pas en compte la hauteur des ascendeurs ou des descendeurs. Vous serez peut-être surpris de savoir à quel point il existe une différence de hauteur x entre les faces. Lorsqu'elles sont utilisées de petite taille, les polices de caractères de taille x plus grande sont généralement plus lisibles..
La lisibilité consiste à organiser les mots et les groupes de mots de manière à ce que le lecteur puisse accéder facilement au contenu avec un sens. C'est vraiment une forme d'art qui s'affine avec le temps au fur et à mesure des combinaisons réussies.
D'après mon expérience, cela semble être l'un des concepts les plus difficiles à comprendre pour les développeurs débutants et les concepteurs. Même les concepteurs chevronnés ont parfois du mal à trouver le meilleur arrangement de la typographie dans un modèle. Maintenant que ces deux désignations commencent à fusionner en matière de conception Web, il est important de commencer à comprendre le concept de lisibilité. Voici quelques points à garder à l'esprit:
L'une des «erreurs» typographiques les plus courantes que je vois sur le Web aujourd'hui est un mauvais espacement des caractères. Je fais référence ici aux cas où un texte en bloc ne dispose pas de suffisamment de marge, de sous-titres et de corps de texte corrélé qui ne sont pas regroupés visuellement, etc. Un espacement correct (combiné à la hiérarchie) permet au lecteur de numériser le texte et d'y accéder aux endroits désirés.
Ce n'est pas une règle absolue, mais il me semble que la relation d'espacement entre les paragraphes (espacement supplémentaire placé avant ou après un paragraphe), l'espace autour d'un bloc de caractères et l'espacement des lettres peuvent être proportionnelles à la ligne. hauteur d'un paragraphe. La hauteur de ligne est définie comme la distance verticale entre les lignes de texte. Ainsi, par exemple, si la hauteur de ligne d'un paragraphe est définie sur 2em et si un paragraphe avec le même texte est défini sur 1.5em, le premier paragraphe nécessitera un espacement plus grand et probablement plus de marge autour du paragraphe..
Cela se fait en grande partie à l'œil plutôt que selon une formule exacte, mais j'utilise une bonne règle empirique en ce qui concerne la relation entre l'espacement des paragraphes et la hauteur de ligne. En général, l’espacement des paragraphes (ce qui sur le Web se traduit par une marge ou un remplissage placé en haut ou en bas d’un paragraphe) autour de la moitié de la hauteur de ligne. Cela a tendance à aider les passages de texte à «tenir ensemble» plutôt que d'utiliser un retour complet entre chaque paragraphe, créant ainsi un espace important entre les paragraphes..
De toute évidence, il faut veiller à ce que le texte ne soit pas présenté trop petit. Il est également important de garder à l'esprit que l'âge de votre public peut varier, d'où la qualité de la vue. Généralement, il est bon de rester autour de 13px ou .813em au plus petit. Actuellement, avec la mise en œuvre plus large de sites Web réactifs, il y a une tendance à la copie de corps plus grande. Dans RWD, il est également important de garder à l’esprit que différentes tailles de texte pour différents appareils peuvent avoir un sens. Par exemple, il peut être judicieux d’augmenter la taille de la copie sur une largeur de téléphone portable par opposition à une largeur de bureau..
Une autre pratique courante qui entrave la lisibilité des types consiste à permettre aux lignes horizontales de types sur une page de devenir trop larges. Cette distance est appelée mesure (parfois aussi longueur de ligne). Si une ligne de type est trop longue, c'est une lecture fastidieuse et un étirement permettant à l'œil du lecteur de revenir au bord gauche du bloc de texte pour la ligne suivante. Il est également intimidant de voir un bloc de texte disposé de cette façon et certains lecteurs pourraient même ne pas essayer de le lire..
Alors, quelle est la largeur maximale d'un bloc de texte? Tout dépend de la taille du texte. Plus le texte est large, plus la ligne peut être longue (encore une fois, toute cette proportion). À mon avis, généralement environ 70 caractères est aussi long que vous voulez être. En moyenne, pour le texte de la taille du texte, j'essaie de rester dans les limites de 45ems.
L'espacement des lettres (également appelé suivi) est l'augmentation ou la diminution constante de la distance entre les formes de lettre d'un mot ou d'un bloc de texte. À ne pas confondre avec le crénage, qui consiste à ajuster la distance entre les caractères individuels. L'espacement des lettres peut être utilisé pour ajuster la densité d'un bloc de texte ou d'un titre ou sous-titre individuel.
Évidemment, l’espacement des lettres affecte la lisibilité du texte. Trop ou trop peu et la lisibilité sera compromise. Cependant, il y a des moments où, à mon avis, un espacement des lettres est nécessaire. Comme vous pouvez le voir dans le graphique ci-dessous, j'aime bien ajouter un espacement généreux des lettres aux sous-titres ou aux phrases de texte en majuscule. Je trouve qu'il est plus facile de lire du texte en majuscule lorsque les caractères disposent d'un espace supplémentaire autour d'eux. De plus, en fonction de la police de caractères utilisée, j'aime augmenter légèrement l'espacement des lettres dans le corps de la copie..
Il peut sembler évident qu'un bon contraste de type est essentiel à la lisibilité. Le fait est que les concepteurs (y compris moi-même) repoussent sans cesse les limites du contraste. Il se peut que nous souhaitions qu'une certaine section de texte soit moins visible ou que nous créions des «couches» de hiérarchie dans notre conception. Quoi qu'il en soit, gardez à l'esprit que le contraste à l'écran, en particulier lorsqu'il s'agit de petites formes fines comme le corps du texte, varie considérablement d'un écran à l'autre. Il est préférable de pécher par excès de contraste.
Comme nous l'avons déjà vu dans cette série, la hiérarchie joue un rôle important dans la lisibilité du contenu. Une hiérarchie réussie organise le contenu en parties digestibles et permet au lecteur de numériser et d’accéder facilement au texte..
Commencez à penser à l’utilisation de ces concepts de lisibilité et de lisibilité dans vos projets. Plus vous en faites, mieux vous vous porterez.
Accentsconagua