Attirer les lecteurs avec des points d'entrée

Lors de la conception de votre mise en page, pensez et travaillez d'abord les caractères en utilisant le style, la taille, la couleur et le poids pour créer de l'unité et de la variété. Le ou les titres, le paragraphe principal et les citations tirées doivent servir de points d'entrée, les différents niveaux typographiques offrant une variété de saveurs visuelles à vos lecteurs.

Unité et variété

Pour comprendre ce qu'est l'unité et la variété, prenons l'exemple d'une mise en page sans variété et sans point d'entrée. Si vous arrivez sur un site comme celui de l'exemple ci-dessous, aurez-vous envie de vous plonger dans le contenu ?

Non seulement il n'est pas audacieux, mais il manque aussi de structure. On ne distingue pas le titre de la signature, le texte courant de la citation. Il y a beaucoup d'unité, c'est certain, mais il n'y a pas de variété et, par conséquent, pas de hiérarchie.

L'exemple révisé ci-dessous fait quelques progrès.

Nous avons utilisé la taille pour créer un titre en tant qu'en-tête <h1> élément. La signature et la date sont des rubriques mineures <h2>. Le texte courant est présenté sous forme de paragraphe <p> élément.

L'éclatement d'un seul et long paragraphe rend la lecture plus agréable.

Si l'on compare le projet révisé au projet initial, on constate qu'il est plus structuré qu'au départ et que les changements de taille créent une certaine variété.

La typographie sur le web, un atout pour l'avenir

Dans les exemples précédents, la police Times® est un choix parfaitement sain mais neutre. Vous pouvez choisir parmi une palette presque illimitée de sites web polices pour rendre ce choix plus attrayant. Dans l'exemple ci-dessous, nous avons choisi la police Bree™ Serif pour l'en-tête et la police Neue Helvetica® pour la ligne de titre et le texte courant.

Nous avons beaucoup progressé par rapport à notre conception initiale, mais nous ne sommes pas encore au bout de nos peines. Dans l'exemple ci-dessous, nous sommes passés de deux à trois paragraphes, le premier devenant plus grand et plus engageant pour créer un autre point d'entrée.

Nous disposons maintenant d'un premier paragraphe volumineux pour attirer les lecteurs et, avec l'aide du site Web polices et d'une variété de tailles et de poids, nous sommes passés de " peut-être que je ne le ferai pas " à " peut-être que je le ferai ", ce qui constitue un bon premier pas vers l'attraction des lecteurs.

Si le paragraphe de tête de l'exemple précédent est trop volumineux à votre goût ou à celui de vos lecteurs, vous pouvez alors vous contenter de la première ligne en utilisant l'attribut ::première ligne pseudo-élément CSS, illustré ci-dessous avec la première ligne en gros caractères.

Nous avons maintenant un titre grand et lourd qui mène à une première ligne de grande taille qui se distingue du reste du paragraphe. Ces deux niveaux de typographie créent une hiérarchie et attirent le lecteur par des variations de taille.

La famille Neue Helvetica fonctionne dans ces exemples, mais l'utilisation de la police Trade Gothic® Suivante permet d'obtenir plus de caractères sur chaque ligne et, en prime, le chiffon de droite est plus beau.

Les initiales en relief ou les majuscules sont autant d'éléments qui donnent du piquant à l'ensemble. Il existe également des options pour marquer les paragraphes par des retours à la ligne, des retraits ou des rétrogradations.

Dire quelque chose avec des citations tirées

Nous avons ajouté un peu de variété à la mise en page, mais nous n'en sommes pas encore là, et c'est l'occasion idéale d'ajouter un petit quelque chose : une citation extraite. Parfois appelée "citation extractible", la citation extractible est une expression, une phrase ou une citation tirée du corps du texte et mise en évidence. Placez une citation tirée dans un style, une couleur ou une taille différents sur le site police. Souvent, les citations tirées apparaissent plus grandes que le texte courant.

Nous utilisons la police Centaur® en italique pour la citation ci-dessous.

Créez une classe pour votre citation tirée ou utilisez le code HTML <blockquote>
comme le montrent ce CSS et ce HTML.

blockquote {
font-size: 1.9em;
line-height: 1.5em;
font-family: "Centaur W02 Italic";
margin: 0px 50px 30.4px 50px;
}

<blockquote>Web typography can make a site stand out from the herd, attract new visitors, and keep visitors coming back.</blockquote>

Notre citation initiale ci-dessus a un chiffon droit en désordre, nous avons donc changé la taille dans l'itération Suivante . Pour mettre encore plus en valeur la citation, nous avons introduit des meubles typographiques à l'aide de Bordure supérieure et border-bottom.

blockquote {
font-size: 1.95em;
line-height: 1.4em;
font-family: "Centaur W02 Italic";
margin: 10px 85px 30.4px 85px;
border-bottom: 1px;
border-top: 9px;
border-left: 0px;
border-right: 0px;
border-style: solid;
padding: 10px 0px 20px 0px;
}

Pourquoi s'arrêter là ? Nous changeons encore les choses en agrandissant l'en-tête dans la police Bree Serif Thin et en transformant quelques mots du début en point d'entrée du paragraphe dans la police Trade Gothic Suivante Bold.

Pour différencier encore plus les titres et les citations, le titre Suivante est environ 1,7 fois plus grand que la citation.

La nouvelle mise en page à droite, avec un titre plus dominant, permet de créer une différence notable entre le titre et la citation tirée, ce qui fait ressortir le titre.

Dans la mise en page finale ci-dessous, nous avons réduit le poids de la bordure supérieure à 4 pixels et, avec ce poids plus léger, elle n'est pas aussi gênante que la bordure précédente, plus lourde, de 9 pixels.

Pour créer davantage de permutations, vous pourriez expérimenter l'emplacement de la citation tirée, en la plaçant sous le pli du navigateur ou même directement sous le titre, ce qui lui donnerait presque la fonction d'un sous-titre. Vous pouvez également opter pour une typographie complète et supprimer les bordures supérieure et inférieure de la citation tirée. Vous pouvez également expérimenter avec la casse, en utilisant par exemple des majuscules pour faire ressortir encore plus les mots en gras du premier paragraphe, comme nous l'avons expliqué dans la section " Punching Up Web Typography with Capital Letters" (Renforcer la typographie Web avec des lettres majuscules). Utilisez la variété avec parcimonie, car un excès peut nuire à l'unité et à la hiérarchie.

Revenir pour en savoir plus

La variété typographique ne doit pas seulement offrir des points d'entrée qui attirent l'attention, mais elle doit aussi être à la fois hiérarchique et fonctionnelle, avec des titres, des sous-titres, des citations tirées et des textes courants qui se distinguent nettement les uns des autres. Utilisez la taille, la graisse et le style, ainsi que différentes polices, comme ingrédients pour concevoir vos points d'entrée. Rendez-les visuellement appétissants pour que le lecteur se plonge dans le contenu et, espérons-le, revienne régulièrement pour se resservir.