|
== Les caractères ==
=== <ttcode>font-size</ttcode> : taille des caractères ===
La propriété <ttcode>font-size</ttcode> permet de modifier la taille des caractères. On peut utiliser une unité de distance ou un mot clef se référant à une taille prédéfinie dans le navigateur web ou modifiant une taille héritée d'un élément parent. Les unités utilisables sont répertoriées dans le chapitre [[../Valeurs et unités#Distances et dimensions|Valeurs et unités]], les mot-clefs sont listés plus bas. Par exemple ces styles :
p#t1 { font-size: 12px; }
On peut aussi utiliser des mot-clefs décrivant la taille de la police :
* de manière relative avec <ttcode>larger</ttcode> (plus grand) ou <ttcode>smaller</ttcode> (plus petit)
* de manière absolue avec <ttcode>xx-small</ttcode>, <ttcode>x-small</ttcode>, <ttcode>small</ttcode>, <ttcode>medium</ttcode>, <ttcode>large</ttcode>, <ttcode>x-large</ttcode>, <ttcode>xx-large</ttcode>, dans l'ordre du plus petit au plus grand
Dans le premier cas la taille est relative à celle spécifiée pour un parent et dans le second cas la taille correspond à une valeur prédéfinie dans le navigateur. Exemple ces styles :
# Les Internet Explorer 5.0 à 7.0 de Microsoft ne permettent pas à l'utilisateur de modifier la taille de la police affichée lorsque l'unité utilisée est le pixel. De ce fait il est recommandé pour des raisons d'accessibilité de '''ne jamais spécifier de tailles de police en pixels''' pour permettre d'agrandir le texte.
# La taille relative <ttcode>small</ttcode> correspond généralement à 16 pixels dans Internet Explorer et à 12 pixels dans les autres navigateurs. Il est donc peu recommandé à nouveau d'utiliser ce genre de spécification, à moins d'utiliser une feuille de style spéciale pour Internet Explorer.
=== <ttcode>color</ttcode> : couleur des caractères ===
La propriété <ttcode>color</ttcode> définit la couleur des caractères. Par défaut celle-ci est héritée du parent. Pour la changer, il faut utiliser une valeur de couleur selon les possibilités indiquées dans le chapitre [[../Valeurs et unités#Les couleurs|Valeurs et unités]].
Exemple :
=== Gras, italique ===
==== <ttcode>font-style</ttcode> ====
La propriété <ttcode>font-style</ttcode> permet de passer en texte italique ou de revenir en texte droit, lorsqu'on est déjà dans un passage en italique. Les différentes valeurs possibles sont les suivantes :
* <ttcode>normal</ttcode>, texte normal
* <ttcode>italic</ttcode>, texte en italique
* <ttcode>oblique</ttcode>
La police utilisée doit avoir une variante correspondant à chaque valeur de cette propriété. Aussi, comme bien souvent la variante ''oblique'' n'existe pas, on se contentera des deux premières valeurs.
NB: le style standard de ''strong'' est caractères gras et celui de ''em'' est caractères en italique.
==== <ttcode>font-weight</ttcode> ====
La propriété <ttcode>font-weight</ttcode> définit la ''graisse'' de la police. Les valeurs possibles sont :
* <ttcode>normal</ttcode>, texte normal
* <ttcode>bold</ttcode>, texte gras
* <ttcode>bolder</ttcode>
* <ttcode>lighter</ttcode>
* une valeur entre 100 et 900 par pas de 100
NB: le style standard de ''strong'' est caractères gras et celui de ''em'' est caractères en italique.
=== <ttcode>text-decoration</ttcode> : souligné, surligné, barré ===
La propriété <ttcode>text-decoration</ttcode> permet d'ajouter un trait au texte. Les valeurs possibles sont :
* <ttcode>none</ttcode>, texte normal
* <ttcode>underline</ttcode>, texte souligné
* <ttcode>overline</ttcode>, texte surligné
* <ttcode>line-through</ttcode>, texte barré
Cette propriété est très utile pour styliser les liens qui sont par défaut soulignés dans les navigateurs. Il est en effet assez courant de nos jours ne plus les souligner mais de seulement les colorer.
=== Majuscules et minuscules ===
==== <ttcode>font-variant</ttcode> ====
La propriété <ttcode>font-variant</ttcode> permet de basculer les caractères en petites capitales d'imprimerie. Il faut pour cela lui donner la valeur <ttcode>small-caps</ttcode>, la valeur <ttcode>normal</ttcode> permettant de revenir à des lettres minuscules. Par exemple ce code CSS :
p {font-variant: small-caps;}
Cet effet peut être intéressant dans les titres ou dans les menus. Par contre sur un texte complet, il est rare d'utiliser des petites majuscules.
==== <ttcode>text-transform</ttcode> ====
La propriété <ttcode>text-transform</ttcode> contrôle la casse du texte. Elle accepte les valeurs suivantes :
* ''capitalize'' met une majuscule à chaque début de mot
<em style="text-transform: uppercase;">minuscules, MAJUSCULES dans em</em>
<ttcode style="text-transform: lowercase;">minuscules, MAJUSCULES dans tt</ttcode>
{{Fin}}
À nouveau ce genre d'effet ne trouve habituellement sa place que dans les titres ou les menus.
=== Le raccourci <ttcode>font</ttcode> ===
La propriété <ttcode>font</ttcode> est un raccourci pour spécifier plusieurs propriétés relatives à la police en une seule ligne dont certaines sont détaillées plus loin dans ce chapitre. Cette propriété, bien que pratique, est néanmoins peu tolérante quand à l'ordre des propriétés spécifiées, lequel est le suivant :
# <ttcode>[[#font-style|font-style]]</ttcode>
# <ttcode>[[#font-variant|font-variant]]</ttcode>
# <ttcode>[[#font-weight|font-weight]]</ttcode>
# <ttcode>[[#font-size : taille des caract.C3.A8res|font-size]]</ttcode>
# <ttcode>[[#line-height|line-height]]</ttcode>
# <ttcode>[[#font-family : choix de la police|font-family]]</ttcode>
Dans cette liste, <ttcode>font-size</ttcode> et <ttcode>font-family</ttcode> '''doivent obligatoirement être mentionnées'''. Par ailleurs <ttcode>font-size</ttcode> et <ttcode>line-height</ttcode> doivent être accolés avec la barre oblique '/'. Il faut donc être rigoureux lorsqu'on utilise ce raccourci. Le W3C donne les exemples suivants :
p { font: 12px/14px sans-serif }
p { font: normal small-caps 120%/120% fantasy }
Attention : toute propriété parmi les 6 listées plus haut qui n'est pas mentionnée lors de l'utilisation de <ttcode>font</ttcode> est '''remise à sa valeur initiale'''.
== Police de caractères ==
On considère habituellement qu'un long texte doit être rédigé en utilisant un des deux premiers types. Le débat entre avec ou sans empattement est un sujet à part entière, certains considérant les premières comme plus lisibles. En pratique on trouve très couramment des polices à empattement dans les livres, avec donc une connotation de tradition. Les polices sans empattement sont plus récentes et sont donc empreintes d'une idée de modernisme. Aussi utilise-t-on souvent ces polices sur le web. Enfin les polices à chasse fixe servent souvent à afficher du code source, elles ont ainsi une connotation ordinateur, imprimante, etc.
=== <ttcode>font-family</ttcode> : choix de la police ===
La propriété <ttcode>font-family</ttcode> définit la police de caractères. Elle accepte comme valeur un ou plusieurs nom(s) de polices ou de type de police ( police ''générique''). Dans le cas de plusieurs noms, il faut les séparer par des virgules et les éventuels espaces additionnels ne comptent pas. Le navigateur affichera alors le texte avec la première police trouvée dans l'ordre de la liste. Pour cette raison, il est de peu d'utilité de mentionner à la fin de la liste des polices ayant moins de chance d'être installées sur la plate-forme de l'utilisateur. Enfin il n'est pas obligatoire d'encadrer les noms de guillemets (") ou d'apostrophes (') et le nom des polices est insensible à la casse.
Comme nous le verrons plus loin, il est impératif de ''toujours mentionner'' en dernier le nom d'une police ''générique'' pour que le navigateur ait une solution de rechange s'il ne trouve pas les polices demandées. La liste possible correspond aux types de police précédemment évoqués :
Ainsi la police ''verdana'', très utilisée sur le web, est une police qui paraît généralement plus grosse que les autres à taille égale. C'est très certainement la raison pour laquelle elle est si souvent choisie : à taille égale, elle paraît plus lisible puisque plus grosse. L'inconvénient d'utiliser cette police est que, si elle n'est pas disponible sur la plate-forme utilisée, le navigateur se rabattra sur une autre vraisemblablement moins grosse en apparence. L'utilisateur aura donc une impression différente de la page, probablement moins bonne que souhaitée.
Pour éviter ce type de désagrément, la recommandation que l'on peut faire est d'utiliser comme valeur de la propriété <ttcode>font-family</ttcode> une liste de polices dont la taille de l'x est similaire. Pour appréhender cette dimension, il suffit d'aligner verticalement un même mot écrit avec différentes polices. La difficulté, on le verra au paragraphe suivant, est de trouver une liste de polices qui sera probablement disponible sur les 3 plates-formes majeures : Linux, Macintosh et Windows.
=== Les polices et les plates-formes ===
=== Alignement du texte ===
==== <ttcode>text-align</ttcode> ====
La propriété <ttcode>text-align</ttcode> définit l'alignement du contenu d'un élément, typiquement le texte dans un paragraphe. Les valeurs possibles sont :
* ''left'', alignement à gauche
On constate aisément dans cet exemple que le texte justifié peut ne pas toujours être une bonne solution lorsque la largeur du contenant n'est pas suffisante. Des espacements exagérés entre mots peuvent en effet apparaître, c'est un problème connu avec ce type d'alignement du texte. La solution serait d'introduire la césure des mots mais cela ne fait pas encore partie du standard CSS !
Remarque : Les spécifications du W3C indiquent que la propriété <ttcode>text-align</ttcode> ne concerne que les contenus de type ''inline'' (en ligne), c'est-à-dire destinés à être affichés les uns à la file des autres comme du texte, des liens, etc.
==== <ttcode>text-indent</ttcode> ====
La propriété <ttcode>text-indent</ttcode> définit le retrait de la première ligne de texte d'un élément. La valeur spécifiée est une [[../Valeurs et unités#Distances et dimensions|valeur de distance]]. Par exemple le code suivant :
p {text-indent: 2em;}
=== Espacement des caractères, des mots et des lignes ===
==== <ttcode>letter-spacing</ttcode> ====
La propriété <ttcode>letter-spacing</ttcode> modifie l'espacement entre les lettres des mots. Cet espacement est nul par défaut, ce qui ne veut pas dire que les caractères se touchent, et peut prendre une [[../Valeurs et unités#Les couleurs|valeur de distance]] quelconque. On l'utilisera notamment pour rendre plus lisibles des titres surchargés par la graisse ou les lettres capitales. Par exemple, le code CSS suivant :
strong {font-size: 150%}
Remarque : le style par défaut de ''strong'' est caractères gras alors que ''span'' est du texte normal.
==== <ttcode>word-spacing</ttcode> ====
La propriété <ttcode>word-spacing</ttcode> contrôle l'espacement des mots. Cet espacement est nul par défaut, ce qui à nouveau ne signifie pas que les mots se touchent, et peut prendre une [[../Valeurs et unités#Les couleurs|valeur de distance]] quelconque. Comme l'espacement de mots standard des navigateurs est très bien, il n'y a que peu de raisons d'utiliser cette propriété, si ce n'est pour créer des effets de typographie. Par exemple, le code CSS suivant :
strong {word-spacing: 1em;}
À utiliser à bon escient...
==== <ttcode>line-height</ttcode> ====
La propriété <ttcode>line-height</ttcode> modifie l'espacement entre les lignes d'un texte. Cet espacement peut prendre une [[../Valeurs et unités#Les couleurs|valeur de distance]] quelconque. L'espacement entre les lignes est un facteur important de lisibilité et d'agrément de lecture et, malheureusement, l'espacement par défaut des navigateurs est souvent trop étroit. L'œil reconnaît tout de suite un espacement qui convient et qui lui permet de suivre facilement la ligne en cours de lecture. Ainsi, bien que dans les exemples suivant il s'agisse de latin, il est clair qu'une valeur entre 1.5em et 2.0em rend le texte plus agréable à lire ! Signalons également qu'imposer une augmentation de l'interlignage peut parfois être le seul moyen d'éviter l'enchâssement des caractères typographiques dans le cas de titres particulièrement longs qui causent un retour à la ligne comme le montre le dernier exemple.
Espacement de 1.1em, de toute évidence pénible à lire :
| 