Typographie et mise en forme de caractères
Le fondement du Web est de présenter du contenu.
Quelle que soit sa charte graphique, un site Web manquera son objectif et n'aura pas de visiteur régulier. Les styles CSS joignent l'utile à l'agréable et mettront en forme les portions de texte de vos documents.
Les polices standards
Tâcher de se limiter à cette liste !
| Nom |
Caratèristiques |
Usage |
| Arial |
Sans sérif |
Imprimé, Web |
| Arial Black |
Sans sérif, forte graisse |
Imprimé, Web |
| Comic Sans MS |
Police fantaisie, sans sérif |
Web |
| Courier New |
Chasse fixe |
Listing, code |
| Georgia |
Empattements simples (sérif) |
Imprimé, Web |
| Symbol Monotype |
Alphabet grec |
Imprimé, Web |
| Times New Roman |
Empattements (sérif) |
Imprimé, Web |
| Trebuchet MS |
Sans sérif |
Web |
| Verdana |
Sans sérif |
Web |
| Webdings |
Police fantaisie |
Web |
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. (document complet où l'une des ses parties).
Le code suivant applique la police Times New Roman à l'ensemble du document :
body {
font-family: "Verdana";
}
Typographie web : gérer la taille du texte avec les « em »
Pour concevoir un site web dont le texte sera lisible par tous, quelle que soit la configuration matérielle ou les besoins spécifiques de l'utilisateur, il faut permettre le redimensionnement du texte. Cela implique l'abandon des tailles de texte en pixels, et l'utilisation d'unités relatives, qui ont deux caractéristiques principales :
- contrairement aux tailles indiquées en pixels, elles permettent l'agrandissement du texte « à la volée » (après le chargement de la page), même avec les réglages par défaut d'Internet Explorer pour Windows ;
- elles se basent sur la taille du texte par défaut indiquée par l'utilisateur dans les préférences de son navigateur.
On conseille donc aux webmasters, pour indiquer la taille du texte via la propriété CSS font-size, d'utiliser en priorité des unités relatives. C'est-à-dire les valeurs en pourcentage, ou bien celle qui nous intéresse ici : l'unité relative em.
Voir article alsacreations
Application pratique
En jouant avec les différentes propriétés et en désignant
chaque paragraphe par son identificateur (id),
HTML
<body>
<p id="p1">mise en forme du même texte</p>
<p id="p2">mise en forme du même texte</p>
<p id="p3">mise en forme du même texte</p>
<p id="p4">mise en forme du même texte</p>
</body>
on peut écrire en utilisant les règles de syntaxes et de regroupements :
CSS
#p1 { font: 40px "Times New Roman", Times, serif; letter-spacing: 5px; border-bottom: 4px solid gray;}
#p2 { font: bold small-caps 30 px "Trebuchet MS" , sans serif; letter-spacing: -1px;}
#p3 { font: 40px "Courier New", Courier, monospace;}
#p4 { font: italic 25px Verdana, Arial, sans-serif; text-decoration:line-through;}
Résultats dans le navigateur :
mise en forme du même texte
mise en forme du même texte
mise en forme du même texte
mise en forme du même texte
Pied de page et Mentions légales
Ouvrages de références
- « More on CSS » par Eric Meyer
(© CampusPress), 2005.
- « CSS 2 Pratique du design web » par Raphaël Goetter
(© Eyrolles), 2009.
Haut de page
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. |
