17. La typographie et la mise en forme des caractères
Polices génériques
Voici une liste non exhaustive des polices les plus courantes :
Arial, Arial Black, Comic Sans MS, Courrier New, Georgia, Times New Roman, Trebuchet MS, Verdana, Webdings
Pour déclarer la police en CSS, on appliquera la déclaration suivante :
font-family: police1, police2, police3
- Les noms composés doivent être protégés par des apostrophes simples ou doubles.
- Si la police 1 est absente du PC, elle sera remplacée par la suivante.
Les unités de taille de police
Deux systèmes permettent d’indiquer les dimensions des éléments en CSS :
• les unités de taille fixe
- le point (1 point vaut environ 0,35 mm)
- le pica (1 pc vaut environ 4,22 mm)
- le centimètre (cm)
- le millimètre (mm)
- le pouce (1 in vaut environ 2,54 cm)
Evitez d’utiliser ces unités fixes dans l’élaboration de votre site web et pour le calcul de vos dimensions et tailles de polices ; Le site s’en trouve complètement dégradé si l’utilisateur choisit d’augmenter la taille du texte.
Styles et effets sur les caractères
Propriétés à connaître :
Styles et effets sur les mots et paragraphes
Propriétés à connaître :
N'oubliez pas de consulter l'article sur les propriétés de formatage de texte !
accéder à l'article suivant
Voici une liste non exhaustive des polices les plus courantes :
Arial, Arial Black, Comic Sans MS, Courrier New, Georgia, Times New Roman, Trebuchet MS, Verdana, Webdings
Pour déclarer la police en CSS, on appliquera la déclaration suivante :
font-family: police1, police2, police3
- Les noms composés doivent être protégés par des apostrophes simples ou doubles.
- Si la police 1 est absente du PC, elle sera remplacée par la suivante.
Les unités de taille de police
Deux systèmes permettent d’indiquer les dimensions des éléments en CSS :
• les unités de taille fixe
- le point (1 point vaut environ 0,35 mm)
- le pica (1 pc vaut environ 4,22 mm)
- le centimètre (cm)
- le millimètre (mm)
- le pouce (1 in vaut environ 2,54 cm)
Evitez d’utiliser ces unités fixes dans l’élaboration de votre site web et pour le calcul de vos dimensions et tailles de polices ; Le site s’en trouve complètement dégradé si l’utilisateur choisit d’augmenter la taille du texte.
• les unités de taille relative et pourcentages
- la largeur de « M » (em),
- la hauteur d’ « x » (ex)
- le pourcentage (%)
- le pixel (px)
Pour Les unités em, ex et %, la taille de la police de référence se transmet par héritage : dans le cas d’éléments imbriqués, la police de référence change à chaque nouveau conteneur.
Le pixel (dit « unité relative » car sa taille dépend de la plate-forme 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.
C’est la propriété font-size qui détermine la taille de la police d’un élément.
- la largeur de « M » (em),
- la hauteur d’ « x » (ex)
- le pourcentage (%)
- le pixel (px)
Pour Les unités em, ex et %, la taille de la police de référence se transmet par héritage : dans le cas d’éléments imbriqués, la police de référence change à chaque nouveau conteneur.
Le pixel (dit « unité relative » car sa taille dépend de la plate-forme 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.
C’est la propriété font-size qui détermine la taille de la police d’un élément.
Styles et effets sur les caractères
Propriétés à connaître :
• color
définit la couleur de police. C’est une propriété héritée : sauf précision explicite contraire, tout élément reprendra la couleur de son élément parent.
• font-weight
définit la graisse de caractères.
• font-style
gère les italiques et les obliques.
• text-transform
pour modifier la casse.
• text-decoration
pour souligner, surligner, barrer et faire clignoter. Attention cependant avec cette dernière propriété qui peut finir par agresser.
On peut cumuler toutes ces fonctionnalités de décoration du texte, en précisant plusieurs valeurs à la propriété text-decoration.
exemple :
text-decoration: underline overline
produira ainsi un titre souligné et surligné .
définit la couleur de police. C’est une propriété héritée : sauf précision explicite contraire, tout élément reprendra la couleur de son élément parent.
• font-weight
définit la graisse de caractères.
• font-style
gère les italiques et les obliques.
• text-transform
pour modifier la casse.
• text-decoration
pour souligner, surligner, barrer et faire clignoter. Attention cependant avec cette dernière propriété qui peut finir par agresser.
On peut cumuler toutes ces fonctionnalités de décoration du texte, en précisant plusieurs valeurs à la propriété text-decoration.
exemple :
text-decoration: underline overline
produira ainsi un titre souligné et surligné .
Styles et effets sur les mots et paragraphes
Propriétés à connaître :
• background-color
surligne un mot précis.
• text-align
définit l’alignement du texte.
• line-height (toutes les unités sont acceptées. em est conseillé)
est l'espace séparant deux lignes consécutives d’un paragraphe. Il est d’environ 1,2 em par défaut. Se nomme interlignage.
• letter-spacing (toutes les unités sont acceptées)
est la distance séparant deux caractères consécutifs. Une valeur négative resserre les caractères. Se nomme crénage.
• word-spacing (toutes les unités sont acceptées)
règle l’espace séparant deux mots consécutifs.
surligne un mot précis.
• text-align
définit l’alignement du texte.
• line-height (toutes les unités sont acceptées. em est conseillé)
est l'espace séparant deux lignes consécutives d’un paragraphe. Il est d’environ 1,2 em par défaut. Se nomme interlignage.
• letter-spacing (toutes les unités sont acceptées)
est la distance séparant deux caractères consécutifs. Une valeur négative resserre les caractères. Se nomme crénage.
• word-spacing (toutes les unités sont acceptées)
règle l’espace séparant deux mots consécutifs.
N'oubliez pas de consulter l'article sur les propriétés de formatage de texte !
accéder à l'article suivant
Publicité