Texte et polices

Ce chapitre détaille les techniques permettant de gérer la mise en forme du texte et la typographie.

Police de caractère#

Police websafe#

Par défaut, seul un nombre limité de polices est disponible sur le web. Il s'agit des polices appelées "Websafe". Leur disponibilité peut varier d'un système à un autre, c'est pourquoi elles sont toujours regroupées par famille afin d'assurer aux visiteurs une vision similaire du site même s'il ne dispose pas de la police en question.

Police avec sérifs#

  • Georgia, serif
  • "Palatino Linotype", "Book Antiqua", Palatino, serif
  • "Times New Roman", Times, serif

Polices sans sérifs#

  • Arial, Helvetica, sans-serif
  • "Arial Black", Gadget, sans-serif
  • "Comic Sans MS", cursive, sans-serif
  • Impact, Charcoal, sans-serif
  • "Lucida Sans Unicode", "Lucida Grande", sans-serif
  • Tahoma, Geneva, sans-serif
  • "Trebuchet MS", Helvetica, sans-serif
  • Verdana, Geneva, sans-serif

Polices monospace#

  • "Courier New", Courier, monospace
  • "Lucida Console", Monaco, monospace

Autres polices#

Il est possible d'utiliser d'autres polices sur le web. Cependant, vous ne pouvez pas simplement les appeler par leurs noms. Vous devez ajouter les fichiers de police dans les ressources de votre site afin que les visiteurs puissent les voir.

La majeure partie des fonderies proposent des licences pour le web. Il existe aussi des convertisseurs en ligne, mais leur usage sur une typographie payant est illégal. Vous pouvez aussi utiliser des services tels que Google Fonts.

caution

Si vous écrivez directement le nom de la police dans votre CSS et qu'elle est installée sur votre ordinateur, cela fonctionnera sur votre machine, mais pas chez les autres visiteurs! Vous devez impérativement inclure la police dans le site et utiliser des formats de police web (p.ex. woff).

L'exemple ci-dessous montre comment intégrer la police Roboto depuis Google Fonts. Le code HTML est à insérer dans la balise head de chacune de vos pages web.

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

L'exemple ci-dessous (CSS uniquement) montre comment inclure une police web dans votre CSS (p.ex police achetée auprès d'une fonderie).

@font-face {
font-family: 'Ma Police';
src: url('mapolice.woff2') format('woff2');
}

Style#

Les paramètres de style vous permettent de modifier l'apparence de la police.

  • font-family: détermine le nom de la police utilisée;
  • font-weight: définit la graisse de la police;
  • font-style: définit la font en italique ou en oblique;
  • font-variant: permet d'utiliser les petites majuscules;
  • font-size: définit la taille de la police.
body {
font-family: 'Roboto', sans-serif;
font-size: 12px;
}
.font-light {
font-weight: 100;
}
.font-bold {
font-weight: 900;
}
.font-italic {
font-style: italic;
}
.small-caps {
font-variant: small-caps;
}
.font-size-large {
font-size: 24px;
}
.font-size-larger {
font-size: 48px;
}

Gestion du texte#

Couleur#

Pour gérer la couleur de votre texte, veuillez vous référer chapitre précédent

Alignement#

L'alignement du texte se gère grâce à la propriété text-align. Elle peut prendre les valeurs suivantes:

  • left;
  • right;
  • center; – justifs.

À noter qu'il n'est pas possible de gérer la manière dont le texte est justifié. Le justification se fait de toute manière à gauche.

.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.text-justify {
text-align: justify;
}

Espacement#

Les propriétés suivantes vous permettent de gérer l'espacement du texte:

  • line-height: interligne;
  • letter-spacing: interlettrage;
  • text-indent: retrait de première ligne (négatif ou positif).
important

Pour calculer le letter-spacing, il faut prendre la valeur définie dans votre logiciel et la diviser par 1000 et utiliser l'unit em. Par exemple un letter spacing de 10 dans votre logiciel donnne letter-spacing: 0.01em; en CSS.

.line-height-large {
line-height: 1.5em;
}
.letter-spacing-small {
letter-spacing: -0.1em;
}
.letter-spacing-large {
letter-spacing: 0.1em;
}
.text-indent-50 {
text-indent: 50px;
}

Décoration#

Les propriétés suivantes permettent de modifer divers paramètres du texte:

  • text-decoration: créer un effet de soulignement, de surlignement ou de barré;
  • text-transform: changer la case du texte.
  • text-shadow: créer un effet d'ombrage.
.text-underline {
text-decoration: underline;
}
.text-overline {
text-decoration: overline;
}
.text-strickthrough {
text-decoration: line-through;
}
.text-uppercase {
text-transform: uppercase;
}
/* text-shadow: x y blur-radius color; */
.text-shadow {
text-shadow: 0 0 2px #ff0000;
}
Edit this page