Article

::first-letter

Illustration CSS first letter

Le pseudo-élément `::first-letter` permet de styliser la première lettre d’un bloc de texte. C’est pratique pour renforcer la hiérarchie visuelle d’un article. 

p::first-letter {
  color: var(--ion-color-danger);
  font-size: 130%;
}

Pris isolément, c’est un détail CSS. Bien utilisé, cela participe pourtant à la lisibilité d’une interface éditoriale, d’un portail ou d’un contenu dense.

Aller plus loin

Solution accessibilité et interfaces inclusives

Pour replacer la hiérarchie visuelle dans un cadre plus large : lisibilité, compréhension et confort de lecture.

Découvrir la solution accessibilité

Premier échange

Si ton interface reste dense, confuse ou fatigante à lire, mieux vaut revoir la hiérarchie visuelle avant d’ajouter des effets.

Décrire le contexte

Articles liés

Mettre 1 item sur 2 en couleur

Une autre technique simple pour améliorer la lecture et la hiérarchie d’une liste longue.

Voir l’exemple pair et impair

Organismes du handicap et outils accessibles

Pour voir comment la lisibilité dépasse la seule couche CSS et touche directement l’usage réel.

Voir le cas organismes du handicap