CSS : on reprend tout à zéro ! (épisode 3)

Par Joe Gillespie

Cet article est le troisième d'une série qui en compte 15. Chaque épisode sera publié bimensuellement dans nos pages.

Troisième étape : appliquer du style au texte

Nous nous sommes déjà débarrassés du côté brut du noir et blanc pour le remplacer par quelque chose de plus doux, mais on peut faire beaucoup plus. On peut changer la police d'écriture, la taille des caractères, la quantité d'espace entre les lignes et ajouter des détails de mise en valeur comme des retraits de paragraphes.

La police d'écriture

Nous allons commencer par le style de police, dans la mesure où c'est ce qui va apporter le plus grand changement. À la différence du papier, les pages Web ne peuvent utiliser que les polices qui sont installées sur l'ordinateur de l'utilisateur : on ne peut donc pas se contenter d'indiquer la police qui nous plaît le plus, il faut utiliser celles qui sont communes à tous les ordinateurs (celles qui sont préinstallées avec le système). Cela réduit considérablement le choix. Vous allez vous apercevoir que vous êtes limités à deux ou trois polices serif, à autant de sans-serif et à un style de type machine à écrire, à espacement constant : monospace. Au lieu de ne choisir qu'un seul style de police, on indique une famille, dans l'espoir qu'une d'entre elles sera installée sur l'ordinateur du visiteur.

Exemples de polices pour le Web

Ci-dessus : quelques polices courantes sur les ordinateurs Windows et Mac. Vous ne pouvez jamais être certain que telle ou telle police est présente, il faut donc fournir des alternatives.

Voici une indication courante de famille de polices sans-serif :

font-family: Verdana, Geneva, Arial, sans-serif;

Voici une famille de polices serif :

font-family: Georgia, "Times New Roman", Times, serif;

Remarquez que lorsque le nom d'une police contient plus d'un mot, l'ensemble doit être placé entre guillemets à l'anglaise : "Times New Roman".

Ajoutons les polices sans-serif à nos styles et voyons ce que ça donne.

Notre page en police sans-serif >>

La taille des caractères

La question de la taille qu'on assigne aux caractères est très délicate. Pour l'impression, on peut fixer une taille de police en points, et le caractère aura toujours cette même taille. Il occupera toujours le même espace sur la page, et les retours à la ligne seront toujours à l'endroit que vous aurez choisi.

Sur le Web, les tailles de caractères ne sont pas gravées dans le marbre, et elles peuvent changer d'un ordinateur à l'autre, parfois du tout au tout. En fonction de la taille de l'écran de l'internaute, de son système d'exploitation et de son navigateur, les caractères peuvent devenir tellement petits qu'ils en sont illisibles, ou aussi grands que dans des méthodes de lecture pour enfants. Les internautes ont heureusement la possibilité de choisir une taille « confortable » dans les préférences de leur navigateurs, et donc de réduire un peu ces variations de taille, mais le résultat peut rester très différent de ce que vous attendiez.

Vue la popularité grandissante du Wi-Fi et des systèmes de poche, les modes de navigation sur vos pages vont changer radicalement dans les prochaines années. Pour que vos pages restent lisibles à long terme, vous devez raisonner en termes de maquettes liquides qui s'adaptent à la taille de l'écran.

Répétez après moi : « Le Web, ce n'est pas la même chose que le papier ! »

Tailles de caractères relatives

Si vous voulez que vos pages touchent le plus large public, mieux vaut assigner une taille de caractères relative à la taille que le visiteur aura choisie par défaut. Il y a plusieurs façons d'assigner des tailles de caractères relatives. Vous pouvez utiliser des pourcentages de la valeur par défaut (%), ou bien une unité nommée « em », qui correspond à 100%. 1.2em revient à 120%. La meilleure méthode est d'utiliser un ensemble de descriptions pré-définies qui font penser à des tailles de tee-shirts. « Medium » revient à 100%, ou 1em. « Smaller » est une taille en-dessous, et « Larger » une taille au dessus. Il y a aussi x-small, xx-small, x-large et xx-large. L'intérêt d'utiliser ce système par rapport aux pourcentages ou aux ems, c'est que les navigateurs ne laisseront pas la police d'écriture devenir si petite qu'on ne puisse plus la lire. Imaginez, par exemple, que vous indiquiez une taille de caractères de 0.7em ou de 70% qui rendrait très bien sur votre PC. Pour quelqu'un équipé d'un Mac avec une taille de caractères par défaut plus petite, ce 70% pourrait faire passer vos caractères sous le seuil de la lisibilité. xx-small est une bonne solution pour déterminer quelle est la taille de caractères minimum que l'ordinateur peut afficher.

xx-large x-large large medium small x-small xx-small

Caractères xx-small : C'est petit mais le texte reste lisible
Avec une taille fixe trop petite : C'est beaucoup trop petit

Tailles de caractères absolues

Si votre site ne concerne qu'un nombre limité de visiteurs qui utilisent à peu près le même type d'ordinateur que vous, vous pouvez également indiquer des tailles de caractères en pixels. Les pixels ne varient pas tellement d'un ordinateur de bureau à l'autre, et la taille des caractères sera similaire, sinon identique. Dès que l'on passe à des ordinateurs portables ou bien de poche, ou encore à des moniteurs très grands et à haute résolution, les tailles de pixels s'éloignent de la norme, et la taille des caractères sera modifiée d'autant.

Pour que vous puissiez percevoir les différences, j'ai placé ci-dessous trois paragraphes de texte en utilisant trois méthodes : les pourcentages, les tailles de tee-shirts et les pixels. Sur mon écran sous Mozilla, leurs tailles sont quasi-identiques, mais ce n'est peut-être pas le cas sur le vôtre.

Cette ligne est définie à 85% de la taille du texte qui l'entoure.
Cette ligne est définie en x-small.
Cette ligne est définie à 11px absolument.

Notez qu'il ne faut jamais utiliser les « points » pour indiquer des tailles de caractères, c'est une unité d'impression.

L'interlignage

La quantité d'espace entre les lignes est d'environ 120% de la taille de caractères par défaut. On peut en ajouter un peu plus, ce qui améliore généralement la lisibilité, surtout si les lignes sont longues. J'évoquerai la longueur des lignes plus tard. Dans notre page d'exemple actuelle, la longueur des lignes est déterminée par la largeur de la fenêtre du navigateur, donc elle est peut-être plus grande qu'il ne faudrait.

Pour changer l'interlignage, nous avons à nouveau l'option relative (en % ou en ems) ou absolue (en px). Dans notre exemple, j'ai indiqué une hauteur de ligne (line-height), c'est-à-dire la hauteur du caractère et de l'espace supplémentaire au dessus, à 180% de la taille de caractères (small) pour toute la page. Comme la définition du style de la partie « body » commence à être un peu longue, je l'ai séparée en plusieurs lignes. Le navigateur s'en moque, mais c'est plus facile à lire par des humains. Tant que les accolades sont présentes et que chaque définition de style est séparée des autres par un point-virgule, tout va bien.

body { 
background-color: #e8eae8;
color: #5d665b;
margin: 50px;
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: small;
line-height: 180%
} 

Nous avons maintenant une page plus « aérée » >>

Les paragraphes

Tout ce que nous avons réalisé jusqu'à présent concernait l'ensemble de la page. Maintenant nous allons voir comment appliquer notre style à des zones plus précises.

Comme je l'ai évoqué précédemment, de gros morceaux de texte peuvent être découpés en paragraphes pour les rendre plus faciles à lire. Il existe plusieurs façons de séparer visuellement les paragraphes. On peut ajouter de l'espace supplémentaire, ou pourquoi pas faire un retrait de première ligne.

En typographie créative, les designers souhaitent parfois utiliser d'autres techniques moins courantes, comme un retrait d'à peu près la moitié de la largeur de la colonne, ou un retrait négatif. Les CSS sont capables de gérer tout cela, mais le séparateur de paragraphes par défaut est un « espacement de paragraphe » qui fait à peu près la moitié de la hauteur de ligne (line-height).

Pour qu'un bloc de texte devienne un paragraphe, contentez-vous de l'encadrer par une paire de balises <p>...</p>. Pour pouvoir manipuler le style des paragraphes avec CSS, on ajoute p { } aux définitions de style dans la partie « head » de la page, à la suite des styles pour « body ». Entre les accolades, ajoutez text-indent: 3em; (indent est le mot anglais pour « retrait », NdT)

 <style type="text/css" title="mes_styles" media="all">
<!--
body { background-color: #e8eae8;
color: #5d665b;
margin: 50px;
font-family: Verdana, Geneva,
Arial, sans-serif;
font-size: small;
line-height: 180%
}

p { text-indent: 3em
} -->
</style> 

Cette page est divisée en paragraphes >>

Remarquez que le premier paragraphe ne présente pas de retrait : il n'est pas encadré par <p>...</p>, donc ce n'est pas officiellement un paragraphe (en termes de HTML).

Les titres

J'ai déjà expliqué les six niveaux de titre que le HTML propose par défaut. Rien ne nous oblige à les conserver tels quels, nous pouvons les redéfinir selon nos besoins. Là encore, il ne s'agit que d'ajouter d'autres définitions aux styles.

Par défaut, les titres sont en grands caractères gras, et dotés d'espacements supplémentaires au-dessus et en-dessous. Souvenez-vous que les titres h1, h2 et h3 sont plus gros que le texte normal, tandis que h5 et h6 sont plus petits. Amusons-nous avec un titre h3 pour changer sa couleur et sa police de caractères.

h3 {color: #966b72; font-family: Georgia, "Times New Roman", Times, serif }

Nous avons maintenant des titres >>

Vous remarquez peut-être que j'ai ajouté une ligne vide sous le deuxième titre. Si vous vous contentez de mettre un paragraphe vide (<p></p>) cela ne marchera pas, il doit y avoir quelque chose entre les balises. Un espace ne fonctionnera pas non plus (<p> </p>) parce que HTML ignore les espaces s'ils ne sont pas entre deux caractères. Ce dont nous avons besoin, c'est d'un caractère invisible que nous fournit HTML sous le nom d'espace insécable que l'on peut taper &nbsp; comme ici :

 <p>&nbsp;</p>

L'espace insécable est également très utile placé entre deux mots que vous ne souhaitez pas voir séparés lorsque la ligne se termine : des noms de personnes ou d'entreprises par exemple.

D'autres petites manips

Avant d'aborder la partie suivante, essayons de modifier quelques petites choses dans notre page de texte.

Dans la définition de la partie « body », j'ai mis une marge de 50 pixels pour tous les côtés. Il est possible d'avoir différentes marges pour la gauche, la droite, le haut et le bas. Il n'y a qu'à les séparer comme ceci (respectivement marge du haut, de gauche, de droite et du bas, NdT) :

margin-top: 70px;
margin-left: 120px;
margin-right: 50px;
margin-bottom: 70px; 

Cela va donner quelque chose plus proche d'une page imprimée, avec une marge de gauche plus importante. J'ai aussi appliqué à deux ou trois mots du gras (strong) et des italiques (em). Attention, les italiques rendent mal sur certains ordinateurs, et deviennent particulièrement difficiles à lire quand la taille est réduite.

Voyez notre page quand le texte a reçu ses styles >>

Désormais, vous disposez d'une page qui commence à avoir du style, et sans avoir fourni trop d'efforts. Toutefois, elle ressemble encore à un document tapé à la machine ou à l'aide d'un traitement de texte. Dans le prochain article, nous verrons d'autres possibilités de mise en page plus intéressantes.

En attendant, vous pouvez vous amuser avec les valeurs des styles de la page que vous venez de créer. Essayez différentes polices et tailles de caractères, différents interlignages. Mais surtout, visionnez votre page avec autant de navigateurs différents que possible, pour observer toutes les différences de rendu.

Épisode 4 »

Fiche technique

À propos de l'auteur

Joe Gillespie est un web designer qui partage ses passions pour le design, les CSS et la typographie depuis 8 ans sur son site Web Page Design for Designers. Il a pris sa retraite du Web cette année, au terme de 80 publications mensuelles. Dommage pour nous !

Articles du même auteur

Articles similaires

Voici la liste des dix articles les plus récents en rapport avec cet article :

Débutant

CSS

© 2001-2016 Pompage Magazine et les auteurs originaux - Hébergé chez Nursit.com ! - RSS / ATOM - About this site