Share
Bienvenue à la neuvième leçon de notre série Web Design for Kids, consacrée à la typographie..
Dans ce didacticiel, nous verrons en quoi consiste la typographie et pourquoi elle est si importante dans la conception. Nous avons beaucoup parlé de l'expérience de l'utilisateur jusqu'à présent et ce tutoriel ne fera pas exception. nous allons travailler dur pour nous assurer que notre texte est beau et facile à lire!
N'oubliez pas de poser des questions dans la section commentaires au bas de cette page.!
La typographie est partout. C'est la façon dont nous voyons les mots écrits. Ainsi, partout où nous rencontrons des mots, nous voyons la typographie. Ces mots peuvent être trouvés sur des écrans, du papier et des signes tout autour de nous.
Avec la typographie, nous pouvons changer l'apparence de ces mots, leur impact sur les lecteurs. le conception nombre de mots affectera souvent nos utilisateurs avant même qu’ils aient la chance de lire notre contenu, il est donc important que la conception et la convivialité de notre typographie correspondent à la convivialité du contenu lui-même..
Dans la leçon précédente, nous avons expliqué l’importance du contenu. Après tout, peu importe la qualité de notre site s'il ne contient aucune information que quiconque souhaite lire! La façon dont nous présentons ces mots à l'utilisateur, cependant, fait partie du message autant que les mots eux-mêmes..
La typographie implique beaucoup de terminologie assez similaire.
UNE police de caractères est la conception générale d'une collection de caractères (mots et symboles), tandis qu'un Police de caractère est une taille spécifique, un poids (quelle est l'épaisseur des lettres), un style et l'utilisation d'une police de caractères.
Notre conception Tuts + Town utilise un police de caractères appelé "Open Sans". Nous utilisons différentes tailles et poids de cette police, qui nous indiquent les les polices charger dans la page.
Ainsi, bien que nous utilisions des polices sur notre site, celles-ci sont basées sur des polices que quelqu'un a passé beaucoup de temps à concevoir..
Un caractère peut être serif ou sans serif. UNE serif est mieux décrit comme les queues ou les extensions aux extrémités de certaines lettres.
Un caractère serif a ces extensions:
Open Sans est une police de caractères sans empattement. sens sans pour autant serif. Une police de caractères sans empattement n'a pas d'extensions comme celle ci-dessus:
Il n’ya pas de bonne ou de mauvaise réponse quant à l’utilisation sur notre site, mais nous voudrons qu’elle corresponde à la conception générale et aux ressentir nous essayons de réaliser aussi bien que l'option la plus lisible compte tenu de notre disposition et de la quantité de texte.
Un caractère serif est généralement plus facile à lire sur papier ou lorsqu'il y a beaucoup de texte, alors qu'un sans-serif peut être mieux sur un écran ou avec une quantité de texte plus petite dans l'ensemble.
Afin d’obtenir la meilleure typographie pour nos sites Web, nous devons réfléchir à ce qui différencie chaque type de caractère. Il existe de nombreuses parties de chaque police de caractères que quelqu'un a conçues et réfléchies en détail.
Ce sont ces détails qui constituent le caractère unique de chacun et il nous appartient de choisir celui qui convient le mieux à différentes conceptions et situations..
Jetons brièvement un coup d’œil aux détails des caractères pour mieux comprendre comment ceux-ci peuvent améliorer (ou aggraver) nos dessins:
Il n'est pas nécessaire de mémoriser ces éléments pour le moment, mais sachez que leurs variantes permettent de personnaliser chaque police..
Comme pour la plupart des choses liées à la typographie, l’espacement est primordial pour offrir la meilleure expérience à nos utilisateurs. L’espacement entre chaque lettre, entre les mots et entre les lignes de mots peut faire toute la différence lisibilité.
Pas assez d'espacement nous donne des lettres et des mots qui sont trop entassés pour bien lire, alors trop d'espacement va tout casser et sera tout aussi difficile à lire et à suivre.
Les polices ont leur propre espacement, ce qui est généralement agréable à lire, mais examinons comment on appelle tout cet espacement différent et comment apporter des modifications à notre code CSS au cas où nous en aurions besoin dans nos conceptions..
suivi est l'espacement général entre tous les caractères (lettres) d'un texte.
Nous pouvons apporter des modifications à cela dans notre CSS si nous le voulons, en utilisant le l'espacement des lettres propriété:
h1 espacement des lettres: 5px;
Accentsconagua
espacement des mots propriété:h1 espacement des mots: 15px;
Kerning est l'espacement entre deux personnages.
Le concepteur de police de caractère modifie le crénage entre chaque paire de caractères, car certaines lettres sont plus proches les unes des autres et plus éloignées. Cela revient à rendre les choses plus équilibrées et il est difficile à faire avec CSS uniquement.
De premier plan se réfère à l'espacement entre les lignes de phrases.
Nous pouvons ajuster cet espacement en donnant une valeur qui modifie le jeu de caractères par défaut défini par la police utilisée par le biais de la police. hauteur de la ligne propriété.
p hauteur de ligne: 2;
Une valeur de 2 ici assurera notre leader est deux fois plus que le montant par défaut pour cette police.
Si un mot est laissé seul sur une ligne (aaaah) à la fin d'un bloc de texte, il est appelé un mot Veuve.
Supposons que les blocs de l'image suivante représentent des mots dans des colonnes. La veuve est le bloc bleu, assis seul à la fin de la colonne car c'est là que se termine la phrase:
Un Orphelin est un mot unique existant sur une ligne distincte au début d'une colonne, situé généralement à côté de la colonne où se trouve la majeure partie du texte associé.
Les veuves et les orphelins sont considérés comme une mauvaise typographie en raison de leur capacité de distraction, ce qui aggrave l'expérience de lecture.
Il existe différentes approches que nous pouvons adopter pour résoudre l'un de ces problèmes si cela se produit sur nos sites, telles que:
Nous pouvons choisir de aligner notre texte à gauche (par défaut sur le Web pour les langues écrites de gauche à droite telles que l'anglais), au centre ou à droite.
Le texte sur le Web doit généralement être aligné à gauche (là encore, pour les langues écrites de gauche à droite), car c’est ainsi que les locuteurs et les lecteurs de ces langues sont habitués à la lecture..
L'alignement au centre est souvent utilisé sur les titres et les en-têtes, ce qui leur permet de se distinguer davantage du texte principal d'une page. Nous pouvons le faire dans notre CSS avec le aligner le texte propriété, par exemple:
h1 text-align: center;
Les textes alignés de cette façon peuvent généralement être trouvés sur des affiches et des dépliants essayant d'attirer l'attention de quelqu'un, mais nous ne devrions pas centrer au centre un large corps de texte sur le Web car il sera beaucoup plus difficile à lire pour nos utilisateurs. Le texte aligné au centre crée des largeurs très différentes d'une ligne à l'autre, ce qui rend la tâche de l'œil plus difficile à suivre..
Certaines langues (telles que l'hébreu) sont écrites de droite à gauche, faisant de l'alignement de droite l'alignement par défaut.
En tant que concepteurs, nous pouvons également choisir d’aligner correctement certains petits morceaux de texte afin qu’ils se détachent un peu plus, comme les légendes d’image. Ces légendes sont des titres ou des descriptions pour des images avec leur propre élément HTML., figcaption.
L'alignement ci-dessus est fait en déclarant droite sur l'élément dans un document CSS:
figcaption text-align: right;
Une grande partie de la typographie que nous concevons sera due à la lecture du contenu nous-même et à des ajustements au besoin. Il existe cependant quelques conseils généraux qui peuvent nous aider à nous familiariser davantage avec nos compétences en typographie..
UNE taille de police moins que 16px sur le texte qui constitue la majeure partie de notre contenu est généralement considéré comme trop petit et difficile à lire sur les écrans.
Nous avons beaucoup parlé de hiérarchie visuelle dans le précédent tutoriel sur les bases de la conception. La hiérarchisation du texte tout au long de notre conception garantira une navigation plus aisée sur le site en séparant le contenu associé et en mettant en évidence les éléments les plus importants..
Le texte de notre site Tuts + Town comporte plusieurs niveaux de hiérarchie, le titre étant le plus important, suivi des catégories commerciales et des magasins spécifiques, et se terminant par la section "créé par" tout en bas..
La hiérarchie ici est établie par différentes tailles, couleurs et emplacements sur la page..
Nous parlerons plus longuement de la couleur et du contrat dans le prochain tutoriel. Sachez donc que vous devez être conscient de la couleur de votre texte et de ce qu'il entre en conflit avec la couleur de l'arrière-plan, ce qui rend la lecture difficile..
Voici un exemple de mauvais contraste à gauche et de meilleur contraste à droite:
Le texte rose vif sur un fond turquoise foncé à gauche montre l'impact d'un contraste médiocre. Le texte est difficile à lire, semble un peu flou et fait mal aux yeux!
En règle générale, il est préférable de ne pas utiliser plus de deux à trois polices différentes par projet. Les polices jumelées doivent être compatibles et les deux soutenir la convivialité et les idées derrière la conception.
Toutes les polices ne fonctionnent pas bien sur le Web et ne conviennent que pour l'impression. Heureusement, Google Fonts, que nous avions l'habitude d'importer dans notre site Tuts + Town, nous fournit une liste étonnante de polices adaptées au Web..
Dans ce didacticiel, nous avons abordé la nature exacte de la typographie. Nous avons également examiné comment différentes parties d’une police peuvent la distinguer des autres et concluons avec quelques conseils généraux à garder à l’esprit lorsque vous travaillez avec du texte et des polices sur le Web. Tous pour atteindre un objectif ultime: rendre notre contenu plus facile à lire.
Nous verrons ensuite quelques règles générales relatives à l’utilisation des couleurs sur le Web et le message que nous communiquons à nos utilisateurs en fonction de la sélection générale des couleurs..
On se voit en ville!
