Les internautes jugent un site, d'abord par son aspect visuel. Les messages passent mieux via un joli support. Ils scannent plus qu'ils ne lisent => police grand format et site au design épuré. Il faut capter l'attention.

Insérez des formes, géométriques ou non, pour mettre en valeur votre texte et utilisez les espaces de vos images pour insérer du texte.

Code CSS :

font-family: "choix 1", choix2, '3ème choix', ..., générique;

Les différentes polices — appartenant logiquement à la même famille — sont séparées par des virgules, et les noms de police sont entre guillemets droits (ou éventuellement entre apostrophes droites) lorsqu'ils contiennent des espaces et/ou des caractères spéciaux.

La dernière police doit toujours être générique. Elles sont au nombre de cinq :
serif, sans-serif, monospace, cursive et fantasy.

On utilisera de préférence les polices qui sont probablement installées sur l'ordinateur du visiteur. On ne téléchargera des polices "exotiques" que si c'est nécessaire.

Les polices placées dans une collection doivent être proches non seulement par leur style, mais aussi par leur taille, la largeur relative des caractères, ... Ainsi, placer Arial et Verdana dans une même collection est une erreur : Verdana est plus haute et surtout beaucoup plus large.

Les 5 catégories

serif. = avec empattements (des petits bâtons sous les lettres)

Polices employées dans la presse papier (journaux, magazines). Elles représentent l'élégance, le sérieux, la tradition. Employées pour les textes longs. = Pour vieux, banques, avocats, administration, ... et donc pour les paragraphes (textes)
```
font-family: "Times New Roman", Times, serif;
font-family: Georgia, serif;
```

sans-serif. = sans empattements.

Polices plus lisibles sur un écran, plus moderne. = Pour jeunes et pour les titres

font-family: Arial, Helvetica, , sans-serif;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-family: "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", "Luxi Sans", sans-serif;
font-family: Tahoma, Geneva, Kalimati, sans-serif;
font-family: Verdana, "DejaVu Sans", "Bitstream Vera Sans", Geneva, sans-serif;
font-family: Impact, "Arial Black", sans-serif;

monospace. = chaque caractère à la même largeur (à chasse fixe).

Polices employées pour la comptabilité, le code, ...

font-family: "Courier New", Courier, "Liberation Mono", monospace;
font-family: Monaco, "DejaVu Sans Mono", "Lucida Console", "Andale Mono", monospace;

cursive (ou script, manuscrite). Aspect plus personnel

Pour l'enfance, la création artisanale, les artistes, atmosphère intimiste, familiarité, "confidence". Pour un blog par exemple ou par touches pour faire passer un message particulier : Laissez-moi un message
fantasy

Tester l'apparence de quelques polices.

La police doit être choisie en fonction du public visé.

Exemples. Une marque masculine (sport, automobile) recourra volontiers à des polices d'écriture assez massives qui dégagent une certaine force. A l'inverse, les marques de luxe type bijoux ou parfum, préféreront utiliser des polices fines, ornementées

Le style rétro et vintage pour tout projet (proposition de loisirs, annonce de soirées ...) qui demande un petit recours à la nostalgie et surtout, suggère l'intemporel.

Bouton call-to-action de type “Acheter maintenant” ou “Réserver en ligne” => sans serif
Bouton “En savoir plus” => manuscrite

Gros titre et paragraphe => 2 polices différentes

La couleur du texte doit former un contraste fort avec le fond afin d'être lu facilement.

La page sera aussi testée sous différentes tailles (zoom) et sous différents écrans (smartphone)

Jouer surtout sur le gras/non-gras, sur les tailles des caractères et parfois sur les petites majuscules (small-caps).

font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: normal;
font-weight: 500;
font-weight: 600;
font-weight: bold;
font-weight: 800;
font-weight: 900;

font-size:150%;

font-variant: small-caps;

L'italique est à éviter car plus difficile à lire.
Le souligné à éviter car il correspond au code du lien hypertexte.

Espaces (insécables ou non)

- Pour les . ,, on met une ⁽¹⁾ espace après un point ou une virgule (et pas avant !).
La règle est : signe simple, espace simple
- Pour les ! ? : ;, on met une espace insécable avant, une espace après
signe double, espace double
- pour les () [] {} "" '', on met des espaces à l'extérieur, pas à l'intérieur.

Le tiret (long), —, est un signe de ponctuation — qui ne doit pas être confondu avec le trait d'union ni avec le signe moins —. On met des espaces à l'extérieur et des espaces insécables à l'intérieur.

Les trois points ( ...) sont précédés d'un espace insécable.

(1) "espace" est féminin en typographie.