📝 Typographie

Alignement du texte

Les classes d’alignement du texte d’Orochi permettent de positionner facilement vos contenus à gauche, au centre ou à droite sans écrire de CSS supplémentaire. Elles assurent une mise en page cohérente et s’adaptent à tous les types d’écrans.

Aligné à gauche

Centré

Aligné à droite

<p class="o-text-start">Aligné à gauche</p>
<p class="o-text-center">Centré</p>
<p class="o-text-end">Aligné à droite</p>

Saut de mots

La classe o-text-break permet de forcer la coupure des mots trop longs afin d’éviter qu’ils ne débordent de leur conteneur. Elle garantit une meilleure lisibilité et un affichage propre, même pour des textes sans espaces ou des chaînes de caractères continues.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

<p class="o-text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>

Transformation de texte

Les classes de transformation de texte d’Orochi permettent de modifier facilement la casse de vos contenus sans écrire de CSS. Utilisez o-text-lowercase pour tout passer en minuscules, o-text-uppercase pour les majuscules, et o-text-capitalize pour mettre la première lettre de chaque mot en majuscule.

texte en minuscules.

texte en majuscules.

texte en minuscules.

<p class="o-text-lowercase">texte en minuscules.</p>
<p class="o-text-uppercase">texte en majuscules.</p>
<p class="o-text-capitalize">texte en minuscules.</p>

Taille de la police

Les classes de taille de police d’Orochi offrent un moyen rapide d’ajuster la hiérarchie visuelle de vos textes sans écrire de CSS. Utilisez .o-fs-1 pour les plus grandes tailles et descendez jusqu’à .o-fs-6 pour les textes plus discrets. Ces classes garantissent une cohérence typographique à travers tout votre projet.

Text .o-fs-1

Text .o-fs-2

Text .o-fs-3

Text .o-fs-4

Text .o-fs-5

Text .o-fs-6

<p class="o-fs-1">Text .o-fs-1</p>
<p class="o-fs-2">Text .o-fs-2</p>
<p class="o-fs-3">Text .o-fs-3</p>
<p class="o-fs-4">Text .o-fs-4</p>
<p class="o-fs-5">Text .o-fs-5</p>
<p class="o-fs-6">Text .o-fs-6</p>

Poids de la police et italique

Les classes de poids et de style de police d’Orochi permettent de gérer facilement l’épaisseur et l’inclinaison du texte sans écrire de CSS personnalisé. Utilisez .o-fw-bold ou .o-fw-semibold pour renforcer la visibilité d’un élément, et .o-fw-light ou .o-fw-lighter pour un rendu plus subtil. Les classes .o-fst-italic et .o-fst-normal vous permettent d’appliquer ou de retirer le style italique selon vos besoins.

Texte en gras.

Texte en gras (par rapport à l'élément parent).

Texte en demi-gras.

Texte de poids moyen.

Texte de poids normal.

Texte léger.

Texte plus léger (par rapport à l'élément parent).

Texte en italique

Texte avec un style de police normal

<p class="o-fw-bold">Texte en gras.</p>
<p class="o-fw-bolder">Texte en gras (par rapport à l'élément parent).</p>
<p class="o-fw-semibold">Texte en demi-gras.</p>
<p class="o-fw-medium">Texte de poids moyen.</p>
<p class="o-fw-normal">Texte de poids normal.</p>
<p class="o-fw-light">Texte léger.</p>
<p class="o-fw-lighter">Texte plus léger (par rapport à l'élément parent).</p>
<p class="o-fst-italic">Texte en italique</p>
<p class="o-fst-normal">Texte avec un style de police normal</p>