Site personnel

FORMATEUR - WEBMESTRE - Tél : 06 25 27 61 68

7 rue André Bernard - 93110 Rosny sous Bois

FORMATEUR TITRES ET TRAVAUX FICHES PRATIQUES LIENS UTILES ANCIEN SITE

Typographie en CSS

On l'oublie parfois, mais le fondement du Web est de présenter du contenu.

Quelle que soit sa charte graphique un site web sans contenu manquera son objectif et n'aura pas de visiteurs réguliers. Les styles CSS joignent l'utile à l'agréable et mettrons en forme les portions de texte de vos documents.

Les polices de caractères

Les diverses versions de HTML ont peu à peu intégré des mises en forme du texte.
Avant CSS, il était déjà possible de définir un choix de police, une taille, un style et quelques effets. Ces facultés limitées restent toutefois déconseillées : elles sortent du cadre fonctionnel du langage HTML et empiètent sur celui de la mise en forme.

Le langage CSS, bien plus adapté aux choix des représentation de textes, propose d'autres fonctionnalités :

gestion de la justification du texte,
largeurs de graisse différentes,
interlignage et interlettrage,
surlignement,
modification de la casse,
etc.

Quelques effets de style bien choisis permettent ainsi à un texte d'adopter une présentation esthétique, conférant un grand confort de lecture.

Déclarer la police en CSS

C'est la propriété font-family qui permet de contrôler la police affectée à un élément du site (qu'il s'agisse du document complet ou de l'une de ses parties).

Le code suivant applique la police Verdana à l'ensemble du document :

body { font-family:'Verdana';
}

Cette propriété se transmettant hiérarchiquement par héritage, elle vaudra également pour tous les descendants de l'élément <body>, c'est à dire toute la page web. Il sera donc inutile de préciser une police pour chacun des descendants, sauf évidemment pour en changer.

Si Verdana est absente de l'ordinateur, elle y sera remplacée par une autre. Pour éviter cela, on précisera plusieurs valeurs à font-family, ce qui en étendra les possibilités. Par exemple :

body { font-family:'Verdana', Arial, Helvetica, sans-serif;
}

Unités de taille des polices de caractères

Deux systèmes permettent d'indiquer les dimensions des éléments en CSS (notamment les tailles de polices) : les unités de taille fixe et les unités de taille relative.

C'est la propriété font-size qui détermine la taille de la police d'un élément. Elle est héritée : sa valeur sera transmise à tous les descendants de l'élément considéré.

p {
font-size: 14px; (px = unité pixel dit « unité relative »)
}

1) Les unités de taille fixe

Les unités de taille fixe (ou unités absolues) sont :

le point (1 pt vaut environ 0,35 mm),
le pica (1 pc vaut environ 4,22 mm),
le centimètre (cm),
le millimètre (mm) et
le pouce (1 in vaut environ 2,54 cm).

Le W3C conseille de limiter leur usage à des médias de sortie connus (imprimante etc.). En clair, on les évitera sur écran d'ordinateur, chaque moniteur étant particulier (sa diagonale, sa résolution, son nombre de couleurs, etc.).
De telles unités sont toutefois parfaitement adéquates à une sortie sur papier.

2) Les unités de taille relative et pourcentages

Les unités relatives sont

le cadratin (em),
la hauteur d'« x » (ex),
le pourcentage (%) et
le pixel (px).

Pour les trois premières unités, la taille de police de référence se transmet par héritage : dans le cas d'élément imbriqués, la police change à chaque nouveau conteneur.

1 em représente la taille d'un caractère (ainsi que l'espace pour ses jambages) dans la police de référence.

1 ex correspond à la hauteur du caractère minuscule « x », sans jambages, dans la police de référence.

Le pourcentage, s'il se prête bien aux textes et polices de caractères, ne leur est pas spécifique. Il se définit relativement à la taille de référence dans le conteneur de l'élément.

Ainsi, a définir une taille de référence de 2 em dans un paragraphe puis une taille de 2 em dans un de ses éléments enfants, on attribue à ce dernier une taille de 2 em par rapport à 2 em, soit 4 em !

p, span {
font-size: 2em;
}

Dans cet exemple, les balises et reçoivent chacune la taille de texte 2 em. descendant de , sa taille sera double de la taille de référence.

Pour conclure cette liste,
le pixel dit « unité relative » car sa taille dépend de la plateforme et de l'écran d'ordinateur
est sans doute l'unité la plus utilisée.

Sur un système donné, il restera une unité fixe partout dans le document.

En réalité, un affichage correct n'implique d'imposer aucune dimension : seules les images et illustrations doivent avoir une taille spécifiée et figée pour s'afficher dans les meilleurs conditions.
Partout ailleurs, on préférera des dimensions relatives : cela fluidifie la navigation sur le site.

Prenez l'habitude d'autoriser une certaine souplesse sur vos pages web. Sachez proposer plutôt qu'imposer, surtout au niveau de la taille du texte.

Pour information, et malgré son menu Affichage/Taille de texte, Internet Explorer refuse d'agrandir tout texte dont la taille est précisée en pixels (px) : les dimensions demeurent figées. Cette unité est donc à proscrire pour les textes de petite taille.

Styles et effets sur les caractères

CSS propose de nombreux styles typographiques.

Nous distinguons les styles prévus pour les caractères

couleur,
italique,
soulignement, etc.

et ceux prévus pour les paragraphes

interlignages,
justification,
crénage, etc.

Définir et modifier la couleur de police

La propriété CSS color définit la couleur de police (la propriété font-color n'existe pas). C'est une propriété héritée : sauf précision explicite contraire, tout élément reprendra la couleur de son élément parent.

Revoir la page couleur – notation RGB.

Pour afficher les textes de citation (balise <blockquote>) en bleu on pourra écrire :

blockquote {
color:blue;
}

Pour teindre en noir le texte de l'élément d'identifiant « toto » on précisera :

#toto {
color: #000;
}

La propriété font-weight définit la graisse des caractères. Elle accepte les valeurs :

normal : graisse normale.
bold : gras.
lighter :moins gras que la référence.
bolder :plus que la référence.

La graisse d'un caractère dépend directement du type de police utilisée. D'autre part une grande partie des polices ne reconnaîtra que les valeurs normal et bold.
Exemple :

.gras {
font-weight:bold;
}

La propriété font-style gère les italiques et les obliques. Elles admet les valeurs :

normal : police droite.
italique : « Italic, Cursive ».
oblique : « Slanted, Incline »

Caractères soulignés, surligné, barrés

La propriété text-decoration permet :

de souligner le texte (valeur underline) ;
de surligner le texte (valeur overline) ;
de barrer le texte (valeur line-through).

On peut cumuler toutes ces fonctionnalités de décoration de texte, en précisant plusieurs valeurs à la propriété text-decoration.
Le code suivant produira un titre souligné et surligné :

h1 {
text-decoration: underline overline;
}

On recourt très fréquemment à la propriété text-decoration pour modifier le soulignement des liens hypertextes. Ainsi, pour mettre en place des liens soulignés uniquement lors de leur survol par le pointeur de souris, on pourra écrire :

a {
text-decoration: none;
}
a:hover {
text-decoration:underline;
}

La casse : minuscules et majuscules

La casse est la prise en compte des majuscules et des minuscules des caractères. Elle se traduit en CSS par la propriété héritée text-transform, qui admet quatre valeurs :

capitalize : seule la première lettre de chaque mot du texte est affichée en majuscule.
lowercase : tout le texte sera affiché en minuscules.
uppercase : tout le texte sera affiché en majuscules.
none : le texte ne sera pas modifié.

Seul l'affichage des caractères sera modifié, le texte du document source restant inchangé.
Exemple :

CSS
.majuscule {
text-transform:uppercase;
}

HTML
pratique du design web</p

Cet exemple fait afficher au navigateur le texte : « PRATIQUE DU DESIGN WEB »... même si la structure de base reste en minuscule. Il ne s'agit donc que d'un effet visuel.

Style et effets sur les paragraphes

Interlignage de texte

L'interligne est l'espace séparant deux lignes consécutives d'un paragraphe (à ne pas confondre avec les marges de paragraphe, qui ne portent que sur son périmètre).

Les paragraphes et autres éléments contenant du texte ont une valeur d'interligne par défaut qui dépend des navigateurs ; elle est d'environ 1,2 em soit un peu plus que la valeur d'un caractère.

La propriété CSS mettant en place l'interligne s'appelle line-height.
Elle admet pour valeurs un nombre avec l'unité em, un pourcentage ou le mot-clé normal.

L'exemple suivant génère un bloc de paragraphe de 20 caractères de large sur fond vert et en interligne double :

CSS
.interligne {
line-height: 2em;
width: 20em;
background-color: green;
}

HTML
Test de paragraphe pour montrer la hauteur de l'interligne fixé à 2em, soit le double de la hauteur de caractère.

Le crénage

Le crénage (ou interlettrage) est la distance séparant deux caractères consécutifs.
Toutes les balises disposent d'une valeur de crénage par défaut, qu'on peut modifier grâce à la propriété CSS letter-spacing (une valeur négative ayant pour effet de resserrer les caractères.

.ecart {
letter-spacing: 0.4em;
}
.rapproche {
letter-spacing: -3em;
}

L'espace entre les mots

La propriété word-spacing règle l'espace séparant deux mots consécutifs. Elle se comporte comme letter-spacing et admet les mêmes valeurs mais en ne portant que sur les mots entiers.
Cette fonctionnalité n'est proposé par Internet Explorer qu'à partir de sa version 6.

.ecart {
word-spacing: 0.4em;
}
.rapproche {
word-spacing: -1em;
}

Définir la justification du texte

Trois comportements vis-à-vis des marges sont possibles pour chaque paragraphe :
alignement à gauche, alignement à droite, justification.

Cette dernière possibilité, souvent utilisée dans les livres, se traduit par un alignement simultané sur les deux marges, en jouant automatiquement sur l'interlettrage et l'espace entre les mots.

La propriété CSS définissant l'alignement de texte est text-align. Elles admet les valeurs :

left : alignement à gauche,
right : alignement à droite,
justify :texte justifié,
center : texte centré et
normal (comportement par défaut).

Exemple de texte justifié dans un bloc :

CSS
.interligne {
text-align:justify;
width: 10em;
background-color: green;
}

HTML
Test de paragraphe démontrant l'alignement justifié, c'est à dire collé à gauche et à droite du bloc.

Marquer un mot avec une couleur de fond

Vous n'avez pas manqué de remarquer dans les exemples précédents la propriété background-color (couleur d'arrière-plan), introduite dans quelques exemples. Nous la détaillerons dans le chapitre suivant, mais sachez d'ores et déjà qu'elle permet de mettre en valeur un mot précis. (effet marqueur)

La procédure est simple, et consiste comme d'habitude à structurer d'abord le contenu.
Nous traduisons l'importance de ce mot par la balise d'emphase , à laquelle nous attribuons via CSS la couleur jaune. Par la même occasion, nous remplaçons son style italique par défaut en style normal (police droite).

CSS
em {
font-style:normal;
background-color:yellow;
}

HTML
Test de paragraphe montrant qu'une expression importante peut être marquée par une simple couleur de font.

Ces fantaisies visuelles sont à consommer avec modération !

La notation raccourcie

Pour éviter l'accumulation de déclaration de police, le W3C a prévu une notation raccourcie des propriétés débutants par « font... ».

Comme nous l'avons déjà évoqué dans le chapitre « Syntaxes des feuilles de styles », il est possible de synthétiser la règle suivante :

p {
font-family:Arial, Helvetica, sans-serif;
font-style:italic;
font-weight:bold;
font-size:120%;
line-height:140%;
}

sous la forme :

p {
font: italic bold 120%/140% Arial, Helvetica, sans-serif;
}

L'ordre est important : commencez par déclarer les styles de police (graisse, italique), enchaînez sur la taille (et l'éventuel interligne) pour conclure avec la ou les familles de polices.

Application de mise en forme du texte

Illustrons les principales propriétés de mise en forme des textes et de la typographie
en proposant quatre maquettes bien distintes pour le même paragaphe.

L'objectif est d'obtenir l'effet visuel de l'illustration à partir du code HTML suivant :

Voici un paragraphe qui a du style !
Voici un paragraphe qui a du style !
Voici un paragraphe qui a du style !
Voici un paragraphe qui a du style !

Résultat à obtenir des quatre maquettes pour le même paragaphe :

Voici un paragraphe qui a du style !

Solution CSS

Haut de page

Auto-entrepreneur.
Access®, Excel®, Powerpoint®, Word® & Windows® sont des produits et marques déposés
propriété de Microsoft, Inc.
Photoshop® & Dreamweaver ® sont des produits et marques déposés propriété de Adobe System.

Dernière mise à jour le 12.08.2011