La propriété font-family définit la police utilisée pour afficher le texte.

Syntaxe de base

p {
font-family: Arial;
}

Pile de polices (Font Stack)

Spécifiez plusieurs polices en cas de fallback :

p {
font-family: "Trebuchet MS", Verdana, sans-serif;
}

Le navigateur essaiera chaque police dans l’ordre jusqu’à en trouver une disponible.

Les 5 familles génériques

Polices web sûres

Ces polices sont disponibles sur presque tous les systèmes :

• Sans-serif : Arial, Helvetica, Verdana
• Serif : Times New Roman, Georgia
• Monospace : Courier New

La propriété font-size contrôle la taille du texte.

Unités principales

• px : Pixels (unité absolue)
• em : Relatif à la taille du parent
• rem : Relatif à la taille de l’élément racine (html)

Méthode recommandée : rem

/* Base de 10px pour faciliter les calculs */
html {
font-size: 10px;
}

p {
font-size: 1.4rem; /* = 14px */
}

Comparaison em vs rem

/* Avec em - cascade complexe */
article { font-size: 1.5em; } /* 24px si parent = 16px */
article p { font-size: 0.833em; } /* 20px relatif au 24px */

/* Avec rem - toujours relatif à html */
article { font-size: 1.5rem; } /* 15px si html = 10px */
article p { font-size: 2rem; } /* 20px, simple ! */

La propriété color définit la couleur du texte.

Formats de couleur CSS

/* Mots-clés */
p { color: red; }
p { color: rebeccapurple; }

/* HSLA */
p { color: hsla(0, 100%, 50%, 0.5); }

Exemple pratique

body {
color: #333; /* Gris foncé - meilleure lisibilité que noir pur */
}

.success {
color: #008800; /* Vert pour le succès */
}

font-style : Italique

p {
font-style: normal; /* Par défaut */
font-style: italic; /* Italique */
font-style: oblique; /* Incliné artificiellement */
}

font-weight : Graisse

p {
font-weight: normal; /* 400 */
font-weight: bold; /* 700 */
font-weight: lighter; /* Plus léger que parent */
font-weight: bolder; /* Plus gras que parent */
font-weight: 100; /* Ultra-léger */
font-weight: 900; /* Ultra-gras */
}

text-transform : Casse

p {
text-transform: none; /* Pas de transformation */
text-transform: uppercase; /* MAJUSCULES */
text-transform: lowercase; /* minuscules */
text-transform: capitalize; /* Première Lettre */
}

text-decoration : Décorations

a {
text-decoration: none; /* Aucune */
text-decoration: underline; /* Souligné */
text-decoration: overline; /* Ligne au-dessus */
text-decoration: line-through; /* Barré */
}

/* Style avancé */
a {
text-decoration: underline wavy red;
}

La propriété text-shadow ajoute des ombres au texte.

Syntaxe

text-shadow: décalage-x décalage-y flou couleur;

Exemple simple

h1 {
text-shadow: 4px 4px 5px rgba(0, 0, 0, 0.5);
}

Paramètres :

• 4px : Décalage horizontal (positif = droite)
• 4px : Décalage vertical (positif = bas)
• 5px : Rayon de flou
• rgba(...) : Couleur de l’ombre

Ombres multiples

h1 {
text-shadow:
-1px -1px 1px #aaa,
0px 4px 1px rgba(0, 0, 0, 0.5),
4px 4px 5px rgba(0, 0, 0, 0.7),
0px 0px 7px rgba(0, 0, 0, 0.4);
}

Effets créatifs

/* Effet néon */
.neon {
color: #fff;
text-shadow:
0 0 5px #fff,
0 0 10px #fff,
0 0 20px #0ff,
0 0 30px #0ff;
}

/* Effet relief */
.emboss {
color: #ccc;
text-shadow:
-1px -1px 0 #fff,
1px 1px 0 #333;
}

text-align : Alignement horizontal

p {
text-align: left; /* Gauche (défaut) */
text-align: right; /* Droite */
text-align: center; /* Centré */
text-align: justify; /* Justifié */
}

line-height : Hauteur de ligne

p {
line-height: 1.5; /* 1.5x la taille de police */
line-height: 24px; /* Valeur fixe */
line-height: 150%; /* Pourcentage */
}

letter-spacing et word-spacing

p {
letter-spacing: 2px; /* Espace entre lettres */
word-spacing: 4px; /* Espace entre mots */
}

/* Premier vers - style spécial */
p::first-line {
letter-spacing: 2px;
word-spacing: 4px;
}

text-indent : Indentation

p {
text-indent: 2em; /* Retrait de la première ligne */
}

La propriété font permet de combiner plusieurs propriétés en une seule ligne.

Syntaxe

font: [style] [variant] [weight] [stretch] size[/line-height] family;

Exemples

/* Complet */
body {
font: italic normal bold normal 16px/1.5 Helvetica, Arial, sans-serif;
}

/* Avec line-height */
h1 {
font: bold 2em/1.2 Georgia, serif;
}

Équivalent en propriétés séparées

/* Version raccourcie */
font: italic bold 16px/1.5 Arial, sans-serif;

/* Équivalent développé */
font-style: italic;
font-variant: normal;
font-weight: bold;
font-stretch: normal;
font-size: 16px;
line-height: 1.5;
font-family: Arial, sans-serif;

HTML

<article>
<h1>Le Guide Ultime de la Typographie Web</h1>
<p class="meta">Par Jean Dupont | 15 janvier 2024</p>
<p class="intro">
La typographie est l'art de rendre le texte non seulement lisible,
mais aussi attrayant et expressif.
</p>
<h2>Pourquoi la typographie compte</h2>
<p>
Une bonne typographie améliore la <strong>lisibilité</strong>,
renforce l'<em>identité visuelle</em> et guide le lecteur.
</p>
</article>

CSS Complet

/* Base */
html {
font-size: 10px;
}

em {
font-style: italic;
color: #0066cc;
}