Typographie et mise en forme des caractères

 

Voilà encore un problème lié à la diversité des postes clients qui liront votre page : une police de caractères ne sera pas systématiquement reproduite chez votre visiteur. En effet, le navigateur utilise les polices de caractères présentes sur la machine du visiteur, si celles que vous avez programmées n'y sont pas, elles seront remplacée par une police par défaut : Times New Roman sur les PC, Times sur les Mac. Ces dernières ne sont pas les plus adaptée (attention aux textes de petite taille par exemple). Pour s'assurer d'une qualité minimale, une solution est de se limiter aux polices standards.

Nous allons parcourir très rapidement les principales propriétées d'affichage des polices de caractères du texte :

 

Entrons dans le vif du Sujet

s'hérite CSS1 iemzchromeoperasafari
I font-family

Exemple

p#typo { font-family : 'Trebuchet MS', times, sans-serif ; }

Syntaxe CSS

Cette propriété peut contenir plusieurs noms de polices ou famille de polices. Si le navigateur ne dispose pas la première police, alors il tente la suivante, etc.

Il existe deux types de noms de famille de police:

 
The name of a font family of choice such as Helvetica or Verdana in the previous example.
<generic-family>
  • une famille de police (<family-name>) , comme "times", "courrier", "Arial", "Helvetica" , "Verdana" etc
  • une famille générique (<generic-family>) comme "serif", "sans-serif", "cursive", "Fantasy", "monospace".

Les polices sont classées par familles génériques suivant leur style, leur empattement (serif) , leur chasse :

"serif", "sans-serif", "monospace", "cursive", "Fantasy"

La stratégie la plus sure est de placer dans l'ordre :

  1. La police préférentielle en premier
  2. Une police plus généralement répandue comme une police standard (voir ci-dessous)
  3. Éventuellement d'autres choix de polices
  4. Une famille générique en dernier

Voici, d'après Raphael Goetter (Pratique du CSS2, Eyrolles) une liste de 11 polices les plus courantes présentes sur les principaux systèmes d'exploitation.

Les polices standards
Nom Caracté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) Web
Impact Sans sérif Imprimé, Web
Symbol exemple Alphabet grec Imprimé, Web
Times New Roman Empattements (sérif) Imprimé, Web
Trebuchet MS Sans sérif Web
Verdana Sans sérif Web
Webdings exemple Police fantaisie Web


s'hérite CSS1 iemzchromeoperasafari
II font-size

Exemple

p#size1 { font-size : 1.2em;}

p#size2 { font-size : 120%;}

p#size3 { font-size : bigger;}

s'hérite CSS1 iemzchromeoperasafari
III font-style

Exemple

p#style1 { font-style : italic;}

p#style2 { font-style : oblique;}

p#style3 { font-style : normal;}

s'hérite CSS1 iemzchromeoperasafari
IV font-variant

Exemple

p#variant1 { font-variant : normal; }

p#variant2 { font-variant : small-caps; }

s'hérite CSS1 iemzchromeoperasafari
V font-weight

Exemple

p#weight1 { font-weight:bold; }

p#weight2 { font-weight:bolder; }

p#weight3 { font-weight:500; }

On trouve sur http://www.w3.org/TR/css3-webfonts/optimaweights.png

bold

normal
correspond à ‘400’.
bold
correspond à ‘700’.

 

s'hérite CSS1 iemzchromeoperasafari
VI font, syntaxe raccourcie

Exemple

p#raccourci1 { font: italic small-caps bold 1.2em "Lucida Sans Unicode","Lucida Grande",sans-serif; }

 

s'hérite CSS1 iemzchromeoperasafari
VI Color

Pour les développements sur la couleur, voir la section "couleurs"

Exemple

p#color1 { color:red; }

Ressources

 

Avez-vous atteint les objectifs ?
Vous devez :
Testez-vous

http://www.salonleposh.com/

Rechercher une police originale gratuite et la faire apparaître sur une de vos pages.