La typographie en CSS...

Prosper MUNDA BYENDA — Tue, 18 Jul 2023 09:10:13 +0000

La typographie est un élément essentiel dans la conception de sites web et d'applications, car elle joue un rôle majeur dans l'expérience utilisateur et l'accessibilité. C’est aussi l'art et la technique d'agencement des caractères pour créer un texte visuellement agréable et lisible. Elle offre la possibilité de manipuler et de personnaliser les polices, la famille de polices, la taille, le poids, l'épaisseur des lignes et l'alignement du texte grâce aux propriétés CSS (Cascading Style Sheets). Ce dernier est un langage utilisé pour styliser les pages Web. Il permet de contrôler l'apparence des éléments sur une page, y compris la typographie. C'est une partie essentielle de la conception Web, car elle peut affecter de manière significative l'apparence générale d'un site Web.
Dans cet article, nous explorerons différentes propriétés CSS utilisées pour manipuler la typographie et améliorer l'apparence de notre contenu.

Famille de polices

La famille de polices peut être un nom de police unique ou une liste de noms de polices séparés par des virgules. Par exemple, nous pouvons choisir entre des polices classiques telles que Arial, Times New Roman, ou opter pour des polices plus modernes et créatives disponibles sur le Web (sur Google Fonts, par exemple).

En CSS, on utilise cette propriété font-familypour spécifier la famille de polices pour un élément. En voici la syntaxe :

selecteur {
  font-family: police1, police2, police3;
}

Comme vous pouvez le voir, la spécification de plusieurs familles de polices dans l'ordre de préférence garantit une meilleure compatibilité entre les navigateurs, car si la première police n'est pas disponible, le navigateur utilisera la suivante.

Par exemple, le code suivant définirait la famille de polices de l' h1 élément sur « Arial, sans-serif » :

h1 {
  font-family: Arial, sans-serif;
}

Si le navigateur n'a pas la police spécifiée, il essaiera de trouver une police similaire.

Taille de police

La propriété font-size spécifie la taille de la police d'un élément. La taille de la police peut être spécifiée en pixels, ems ou pourcentages. Il est important de choisir une taille appropriée qui soit à la fois lisible et adaptée à l'interface utilisateur. Une taille de police trop petite peut rendre la lecture difficile, tandis qu'une taille trop grande peut nuire à l'agencement général de la page. Il est recommandé d'utiliser des unités relatives telles que les pourcentages ou les ems pour garantir une mise à l'échelle proportionnelle du texte en fonction de la taille de la fenêtre du navigateur.

Par exemple, le code suivant définirait la taille de la police de l' p élément sur 16 pixels :

p {
  font-size: 16px;
}

Poids de la police

La propriété font-weight spécifie l'épaisseur de la police d'un élément. Elle permet de donner à un texte une apparence plus fine ou plus grasse. Les valeurs couramment utilisées sont les mots-clés normal (pour un texte normal), bold (pour un texte en gras) et lighter (pour un texte plus léger). Cependant, les valeurs numériques peuvent également être utilisées comme "100" pour une police plus légère et "900" pour une police plus grasse.
Cela se présente comme suit:

normal : L'épaisseur de police par défaut.
bold : un poids de police plus lourd.
bolder : une épaisseur de police plus lourde que l'épaisseur de police actuelle.
lighter : une épaisseur de police plus légère que l'épaisseur de police actuelle.

Par exemple, le code suivant définirait l'épaisseur de la police de l' h1 élément sur gras :

h1 {
  font-weight: bold;
}

Style de police

La propriété CSS font-style spécifie le style de police d'un texte. Il peut être défini sur l'une des trois valeurs suivantes :

normal - Le style de police par défaut.
italic - Un style de police incliné.
oblique - Un style de police incliné qui est créé en inclinant artificiellement les glyphes d'une police normale.

La propriété font-style peut être utilisée pour créer une variété d'effets typographiques. Elle permet d’utiliser des polices spécifiques pour chaque style, mais également elle permet d'ajouter un style rapide à une police par défaut. Par exemple, vous pouvez l'utiliser pour rendre le texte plus formel ou informel, ou pour mettre en valeur certains mots ou expressions.

Voici un exemple d'utilisation de la propriété font-style :

p {
  font-style: italic;
}

Ce code mettra tout le texte de l' p élément en italique.
Vous pouvez également utiliser la propriété font-style pour créer un style de police de secours. Par exemple, si vous spécifiez le italic style de police, mais que le navigateur n'a pas de version italique de la police, le navigateur utilisera le oblique style de police à la place.

Voici un exemple de création d'un style de police de secours :

p {
  font-style: italic;
  font-style: oblique;
}

La manipulation de l'épaisseur des lignes de texte peut être réalisée à l'aide de la propriété text-decoration. Il est courant d'utiliser cette propriété pour souligner ou barrer un texte, en utilisant respectivement les valeurs underline et line-through. Cependant, elle peut également être utilisée pour augmenter l'épaisseur des lignes de texte en spécifiant une valeur telle que double ou thick, pour un effet plus visible et distinctif.

La propriété CSS text-decoration spécifie la décoration ajoutée au texte. C'est une propriété abrégée pour:

text-decoration-line (required): Définit le type de décoration utilisé, tel que underline ou line-through.
text-decoration-color: Définit la couleur de la décoration.
text-decoration-style: Définit le style de la ligne utilisée pour la décoration, comme solid, wavy ou dashed.
text-decoration-thickness_: Définit l'épaisseur de la ligne utilisée pour la décoration.

La propriété text-decoration-line spécifie le type de décoration de texte à utiliser (souligné, surligné, etc.). Les valeurs possibles sont :

none - Pas de décoration
underline - Souligné
overline - Surligné
line-through - ligne traversante
blink - Cligner
inherit - Hérite la décoration de l’élément parent

La propriété text-decoration-color spécifie la couleur de la décoration du texte. La valeur peut être un nom de couleur, un code de couleur hexadécimal ou une valeur de couleur RVB.
La propriété text-decoration-style spécifie le style de décoration du texte (solide, pointillé, etc.). Les valeurs possibles sont :

solid - Ligne continue
dotted - ligne pointillée
dashed - Ligne interrompue
double - Double ligne
wavy - Ligne ondulée
inherit - Hérite le style de décoration du texte de l'élément parent

La propriété text-decoration-thickness spécifie l'épaisseur de la décoration du texte. La valeur peut être un nombre, une longueur ou un pourcentage. Un nombre est multiplié par la taille de police de l'élément pour déterminer l'épaisseur. Une longueur est l'épaisseur réelle de la ligne, en pixels ou autres unités. Un pourcentage est un pourcentage de la taille de police de l'élément.

Par exemple, le code suivant définit la décoration du texte de tous p les éléments sur un soulignement de couleur bleue et d'une épaisseur de 2 pixels :

p {
  text-decoration: underline blue 2px;
}

Le code suivant définit la décoration du texte de tous a les éléments sur une ligne traversante avec une couleur rouge et un style en pointillé :

a {
  text-decoration: line-through red dotted;
}

Hauteur de la ligne

La propriété line-height est couramment utilisée pour définir la distance entre les lignes de texte. Sur les éléments de niveau bloc, il spécifie la hauteur minimale des boîtes de ligne dans l'élément. Sur les éléments en ligne non remplacés, il spécifie la hauteur utilisée pour calculer la hauteur de la boîte de ligne.
La propriété line-height peut être définie sur un nombre, une longueur ou un pourcentage. Un nombre est multiplié par la taille de police de l'élément pour déterminer la hauteur de ligne. Une longueur est la hauteur réelle de la ligne, en pixels ou autres unités. Un pourcentage est un pourcentage de la taille de police de l'élément.

Par exemple, le code suivant définit la hauteur de ligne de tous p les éléments sur 1,5 fois la taille de la police :

p {
  line-height: 1.5;
}

Le code suivant définit la hauteur de ligne de tous p les éléments sur 20 pixels :

p {
  line-height: 20px;
}

Le code suivant définit la hauteur de ligne de tous p les éléments à 150 % de la taille de la police :

p {
  line-height: 150%;
}

Alignement du texte

La propriété text-align spécifie l'alignement du texte d'un élément. Elle permet de contrôler l'alignement du texte. Les valeurs courantes sont left (alignement à gauche), right (alignement à droite), center (alignement centré) et justify (alignement justifié).

Cette propriété est utile pour améliorer la lisibilité et l'esthétique du contenu en le plaçant correctement sur la page. L'alignement du texte peut être spécifié avec l'un des mots clés suivants :

left : l'alignement du texte par défaut.
center : Le texte est centré.
right : le texte est aligné à droite.
justify : le texte est justifié, de sorte qu'il remplit la largeur de l'élément.

Par exemple, le code suivant définirait l'alignement du texte pour l' p élément au centre :

CSS
p {
  text-align: center;
}

Conclusion

Les propriétés CSS présentées dans cet article peuvent être utilisées pour manipuler les polices, la famille de polices, la taille, l'épaisseur, l'épaisseur de ligne et l'alignement du texte. Elles offrent un large éventail d'options pour personnaliser l'apparence du texte dans leurs créations. En choisissant soigneusement les familles de polices, les tailles, les poids, les épaisseurs de lignes et l'alignement, il est possible de créer des interfaces utilisateur agréables à l'œil et faciles à lire. Il est important de prendre en compte l'accessibilité et de tester différents styles pour garantir une expérience utilisateur optimale.

Les références

Propriétés des polices CSS
Propriété CSS line-height

Je suis nouveau ici

Prosper MUNDA BYENDA — Wed, 12 Jul 2023 06:55:25 +0000

Je suis nouveau ici, s'il vous plait guidez-moi

DEV Community: Prosper MUNDA BYENDA