Traitement typographique en CSS

Raphaël GIOVANNETTI — P.A.S.T. — Département Info-Com — Université Paul Valéry Montpellier III

La syntaxe qui permet de définir une propriété CSS et sa valeur est toujours :

propriété : valeur ;

Il est possible de coupler plusieurs propriétés et leurs valeurs les unes à la suite des autres :

propriété : valeur ; propriété : valeur ;

Propriétés typographiques CSS

Sert à Propriété Valeur Exemple NB
Couleur du texte color
  • Code hexadécimal : #ffcc00
  • Nom d’une couleur : green
 
color : #ffcc00 ;
color : green ;
Famille de police font-family Famille(s) de typographie(s) 
font-family:'Times New Roman', Times, serif;

On peut indiquer plusieurs familles de typo par ordre décroissant de choix.

Les polices avec espaces doivent être mises entre guillemets.

Attention : votre internaute n’aura pas forcément les mêmes typographies installées sur sa machine.

On utilise généralement des « web safe font » communes à tous les systèmes.

La liste…
Taille police font-size Valeur en pixel ou pourcentage 
font-size : 14px ;
font-size : 1em ;
 Les unités em se basent sur la taille du texte par défaut indiquée par l'utilisateur dans les préférences de son navigateur.
Alignement du texte text-align justify / left / right / center 
text-align :justify ;
Interlignage line-height Valeur en pixel ou pourcentage 
line-height :20px ;
line-height :1.5em ;
 Les unités em se basent sur la taille du texte par défaut indiquée par l'utilisateur dans les préférences de son navigateur.
Soulignement text-decoration none / underline / overline / line-through 
text-decoration : underline ;
Graisse font-weight normal / bold / bolder 
font-weight :bold ;
Italic font-style normal / italic / oblique 
font-style :italic ;
Casse (capital / minuscule) text-transform capitalize / uppercase / lowercase 
text-transform : uppercase;
 Capitales au début du mot / tout en capitale / tout en minuscule.
Espacement mot word-spacing Valeur en pixel ou pourcentage 
word-spacing : 2px ;
word-spacing : 1em ;
Espacement lettre letter-spacing Valeur en pixel ou pourcentage 
letter-spacing : 5px ;
letter-spacing : 1em ;
Indentation text-indent Valeur en pixel ou pourcentage 
text-indent : 10px ;
text-indent : 1em ;
 Les unités em se basent sur la taille du texte par défaut indiquée par l'utilisateur dans les préférences de son navigateur.
Ombrage du texte text-shadow
  • Décalage horizontal
  • + décalage vertical
  • + pourcentage flou (blur)
  • + couleur
 
text-shadow: 0px 0px 9px #777;