Dans la bonne direction

Quelle est la première chose que lisent vos visiteurs lorsqu'ils arrivent sur votre site ? Il ne doit pas s'agir d'une animation Flash annonçant son temps de chargement. Si c'est le cas, vous devez mettre votre site à jour - immédiatement ! En outre, vous devez penser d'abord à la typographie, car c'est ce que les lecteurs recherchent : la typographie. En pensant d'abord à la typographie et en tenant compte de la hiérarchie, les visiteurs remarqueront d'abord vos titres. Les titres sont les éléments qui attirent l'attention. La taille est un moyen d'établir une dominance et de faire ressortir vos titres. Et si le plus grand est généralement le meilleur, le contraste et le poids peuvent également attirer l'attention du lecteur. Veillez également à soigner les détails, d'autant plus qu'un titre peut faire ou défaire l'ensemble de votre mise en page.

Hiérarchie et fonctionnalité des titres

Les éléments d'en-tête ont six niveaux, avec h1 étant le titre principal qui descend jusqu'à h6, la rubrique la plus mineure.


<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>


Rubriques descendantes de h1 à h6, fixé dans le cadre de la Amasis™ eText police de caractères.

En HTML, les titres sont connus comme des éléments de niveau bloc parce qu'ils occupent leur propre espace dans un bloc. Les éléments de bloc sont différents des éléments en ligne. Les éléments en ligne peuvent exister à l'intérieur d'un bloc.

Sélection d'une rubrique dans Typecast™ de Monotype vous permet de voir comment un élément se comporte. Au niveau du bloc h1 occupe son propre espace, indiqué par l'encadré bleu.

Faire de la Rubrique crée un élément en ligne au sein de l'élément h1 du bloc contenant l'élément.

Traitez votre h1 à travers h6 de manière hiérarchique, en les classant du plus grand au plus petit, du plus foncé au plus clair, ou du plus lourd au plus fin.

Avant d'opter pour une taille de caractères et police, créez des permutations de vos titres. Ces exemples, réalisés avec la police de caractères Avenir®, montrent comment la taille, la valeur et le poids peuvent être utilisés pour créer une hiérarchie.

Vous pouvez également mélanger polices et utiliser la couleur pour créer de la variété, comme illustré ci-dessous avec Avenir comme caractère sans empattement et le Minion® Pro comme caractère avec empattement.

Dimensionnement des rubriques

Les titres sont comme une main tendue, introduisant les lecteurs au contenu par une poignée de main qui les conduit sur votre site. Mais comme nous voyons tellement de messages de nos jours, les titres doivent attirer le lecteur visuellement. Ils doivent également coexister avec le reste de votre site, puisque les titres sont la ligne de suspension à partir de laquelle toute la typographie descend vers le pli du navigateur, son bord le plus bas.
Bien que les titres soient destinés à attirer l'attention du lecteur, il n'est pas toujours préférable d'utiliser des caractères plus grands. Prenons l'exemple de la mise en page ci-dessous.

L'intitulé de l'article peut sembler cavalier, compte tenu de la nature de l'article et de son contenu. 5em police-et une rupture gênante avec les WEB sur sa propre ligne et un espace négatif béant qui l'entoure. En raison de la grande rubrique 1 notre élément rubrique 2 Les règles et les caractères ont changé est coupé au niveau du pli du navigateur. Le passage à l'échelle d'un écran de taille mobile à l'aide de Typecast montre les problèmes rencontrés sur un petit écran.

Le dimensionnement de l'en-tête est réduit à 4emL'exposition, présentée ci-dessous, commence à faire le ménage, en supprimant l'espace négatif.

Mais la présentation mobile, plus petite, présente encore des problèmes au niveau de l'en-tête et du corps du texte, où les ruptures créent des espaces négatifs béants.

Le titre monumental en majuscules attirera certainement l'attention du lecteur. Le fait de l'alléger et de l'accompagner d'une citation plus lourde crée une hiérarchie, comme le montre le schéma ci-dessous.

Dans l'exemple ci-dessus, les majuscules semblent faire l'affaire, et d'autres essais avec polices et la taille des caractères pourraient nous permettre d'obtenir les résultats souhaités. Mais ce titre est long et les majuscules rendent la lecture difficile et les relations spatiales bizarres. Supprimons le text-transform : uppercase de notre CSS.

L'utilisation de la casse mixte nous donne un aspect et une sensation complètement différents, avec des collines et des vallées entre les majuscules et les minuscules auxquelles nous sommes habitués.

Mais nous n'en sommes pas encore là. Les minuscules ascendantes et descendantes du titre, ainsi que les majuscules, interfèrent les unes avec les autres en raison de la faible hauteur de ligne. En réduisant la taille des caractères à 2em et l'ajustement de la hauteur de ligne empêche les lettres de se heurter les unes aux autres. L'ajustement de la taille et du poids de la citation d'ouverture, du paragraphe et du sous-titre permet d'harmoniser l'ensemble.

D'autres tests et ajustements pour les appareils mobiles devront être effectués pour voir comment la mise en page fonctionne sur un écran plus petit.

Titres et chiffres

Si votre titre comporte des chiffres, vérifiez si le site police propose des chiffres avec ou sans doublure. Les Neue Helvetica® (en anglais) utilisée pour notre rubrique 1 dans les exemples précédents, comporte des chiffres de doublure, parfois appelés chiffres de doublure.

Les chiffres alignés s'alignent généralement sur la ligne de tête et la ligne de base des lettres capitales. La police de caractères Georgia® comporte des chiffres non alignés, comme le montrent les deux exemples les plus bas illustrés ci-dessous.

Remarquez que les chiffres non linéaires de la Géorgie ont des hampes et des descentes, comme les lettres minuscules, ce qui explique pourquoi les chiffres non linéaires sont également appelés chiffres minuscules ou chiffres en minuscules.
Le passage à un site police comme celui de la Géorgie, qui a des chiffres non linéaires, parfois aussi appelés chiffres anciens, crée plus de collines et de vallées dans l'intitulé. Mais dans le cas d'un titre en majuscules, les chiffres ressortent bizarrement.

Pour un titre en majuscules avec des chiffres, envisagez d'utiliser la famille de caractères Demos® Suivante au lieu de Georgia. Non seulement la famille Demos a des chiffres alignés qui s'accordent bien avec les titres en majuscules, mais elle a aussi de grandes lettres minuscules pour un aspect et une sensation monumentaux. Elle est également disponible dans une variété de graisses.

Faites des essais avec la taille, la longueur des lignes et la couleur pour voir quel type de mise en page vous obtenez et comment l'en-tête interagit avec le reste de la conception.

Où se dirigent les lecteurs

Pour la plupart des concepteurs et des utilisateurs, les animations d'introduction tape-à-l'œil et les comptes à rebours créés avec Flash sont dépassés. Même si votre site comporte beaucoup d'images, la typographie a son importance à une époque où nous sommes régulièrement confrontés à un barrage de messages typographiques. Pensez d'abord à la typographie et réfléchissez à la façon dont les titres rendront votre site fonctionnel et distinctif.

Pour concevoir vos titres, vous devez jouer avec la taille, le style, le poids et la couleur des caractères, tout en tenant compte de la manière dont les titres s'inscrivent dans la hiérarchie et la mise en page du site. Explorez l'impact de la typographie Web sur l'aspect et la convivialité de votre site, ainsi que sur son identité, d'autant plus que ce sont les en-têtes qui établissent le premier contact avec vos visiteurs. Vous voulez qu'ils se dirigent vers votre site pour avoir une bonne première impression.