Documentation - Typographie.
Découvrez Marssel : un framework CSS intelligent, configuration minimale, conçu pour des interfaces rapides et une expérience développeur simplifiée.
Démarrage
Concepts de base
Utilitaires
Typographie
Marssel offre un système complet pour gérer la typographie avec support des polices locales, Google Fonts, et toutes les propriétés de texte : taille, poids, hauteur de ligne, espacement et alignement.
Polices Google Fonts
Utilisez font- pour charger et appliquer des Google Fonts :
Titre avec Roboto
Roboto Bold (700)
Roboto Regular Italic
Open Sans
Lato
Montserrat
Poppins
Inter
<!-- Police standard -->
<h4 class="font-[Roboto]">Titre avec Roboto</h4>
<!-- Police avec poids spécifique -->
<h4 class="font-[Roboto(700)]">Roboto Bold (700)</h4>
<!-- Police avec style italique -->
<p class="font-[Roboto(400_italic)]">Roboto Regular Italic</p>
<!-- Polices courantes -->
<p class="font-[Open_Sans]">Open Sans</p>
<p class="font-[Lato]">Lato</p>
<p class="font-[Montserrat]">Montserrat</p>
<p class="font-[Poppins]">Poppins</p>
<p class="font-[Inter]">Inter</p>Polices locales
Marssel charge automatiquement les polices locales depuis votre dossier public/fonts/ :
<!-- Police locale -->
<h1 class="font-[MyCustomFont]">Police personnalisée</h1>
<!-- Avec poids spécifique -->
<h2 class="font-[MyCustomFont(600)]">Custom Font Semibold</h2>
```
**Organisation des polices locales :**
```
public/
fonts/
Roboto/
Roboto-Regular.woff2
Roboto-Bold.woff2
Roboto-Italic.woff2
MyCustomFont/
MyCustomFont-Regular.woff2
MyCustomFont-Bold.woff2Générer le manifest des polices
# Générer automatiquement fonts-manifest.json
node generate-fonts-manifest.mjsPoids disponibles
Thin (100)
Extra Light (200)
Light (300)
Regular (400)
Medium (500)
Semibold (600)
Bold (700)
Extra Bold (800)
Black (900)
<p class="font-[Roboto(100)]">Thin (100)</p>
<p class="font-[Roboto(200)]">Extra Light (200)</p>
<p class="font-[Roboto(300)]">Light (300)</p>
<p class="font-[Roboto(400)]">Regular (400)</p>
<p class="font-[Roboto(500)]">Medium (500)</p>
<p class="font-[Roboto(600)]">Semibold (600)</p>
<p class="font-[Roboto(700)]">Bold (700)</p>
<p class="font-[Roboto(800)]">Extra Bold (800)</p>
<p class="font-[Roboto(900)]">Black (900)</p>Taille de police
Utilisez font-size- ou fs- :
Texte 12px
Texte 14px
Texte 16px (standard)
Texte 18px
Texte 24px
Texte 32px
Texte 48px
Texte 0.875rem
Texte 1rem
Texte 1.5rem
Texte 2rem
Texte 0.8em
Texte 1.2em
Titre responsive
<!-- Tailles en pixels -->
<p class="font-size-[12px]">Texte 12px</p>
<p class="font-size-[14px]">Texte 14px</p>
<p class="font-size-[16px]">Texte 16px (standard)</p>
<p class="font-size-[18px]">Texte 18px</p>
<p class="font-size-[24px]">Texte 24px</p>
<p class="font-size-[32px]">Texte 32px</p>
<p class="font-size-[48px]">Texte 48px</p>
<!-- Tailles en rem -->
<p class="font-size-[0.875rem]">Texte 0.875rem</p>
<p class="font-size-[1rem]">Texte 1rem</p>
<p class="font-size-[1.5rem]">Texte 1.5rem</p>
<p class="font-size-[2rem]">Texte 2rem</p>
<!-- Tailles en em -->
<p class="font-size-[0.8em]">Texte 0.8em</p>
<p class="font-size-[1.2em]">Texte 1.2em</p>
<!-- Tailles responsive -->
<h4 class="font-size-[24px] md--font-size-[32px] lg--font-size-[48px]">
Titre responsive
</h4>Poids de police
Utilisez font-weight- ou fw- :
Texte light (300)
Texte normal (400)
Texte medium (500)
Texte semibold (600)
Texte bold (700)
Normal
Gras
Plus gras
Plus léger
<!-- Valeurs numériques -->
<p class="font-weight-[300]">Texte light (300)</p>
<p class="font-weight-[400]">Texte normal (400)</p>
<p class="font-weight-[500]">Texte medium (500)</p>
<p class="font-weight-[600]">Texte semibold (600)</p>
<p class="font-weight-[700]">Texte bold (700)</p>
<!-- Valeurs nommées -->
<p class="fw-[normal]">Normal</p>
<p class="fw-[bold]">Gras</p>
<p class="fw-[bolder]">Plus gras</p>
<p class="fw-[lighter]">Plus léger</p>Hauteur de ligne
Utilisez line-h- pour l'interligne :
Hauteur de ligne 1
Hauteur de ligne 1.2
Hauteur de ligne 1.5 (recommandé)
Hauteur de ligne 1.6
Hauteur de ligne 2
Hauteur 24px
Hauteur 32px
<!-- Valeurs numériques -->
<p class="line-h-[1]">Hauteur de ligne 1</p>
<p class="line-h-[1.2]">Hauteur de ligne 1.2</p>
<p class="line-h-[1.5]">Hauteur de ligne 1.5 (recommandé)</p>
<p class="line-h-[1.6]">Hauteur de ligne 1.6</p>
<p class="line-h-[2]">Hauteur de ligne 2</p>
<!-- Valeurs en pixels -->
<p class="line-h-[24px]">Hauteur 24px</p>
<p class="line-h-[32px]">Hauteur 32px</p>
<!-- Pour une meilleure lisibilité -->
<div class="font-size-[16px] line-h-[1.6] c-[374151]">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Une hauteur de ligne de 1.5-1.6 améliore la lisibilité des paragraphes.
</div>Espacement des lettres
Utilisez letter-spacing- :
Espacement normal
Espacement serré
Très serré
Espacement large
Plus large
Très large
Titre avec tracking serré
Texte espacé en majuscules
<!-- Espacement normal -->
<p class="letter-spacing-[normal]">Espacement normal</p>
<!-- Espacement serré -->
<p class="letter-spacing-[-0.5px]">Espacement serré</p>
<p class="letter-spacing-[-1px]">Très serré</p>
<!-- Espacement large -->
<p class="letter-spacing-[0.5px]">Espacement large</p>
<p class="letter-spacing-[1px]">Plus large</p>
<p class="letter-spacing-[2px]">Très large</p>
<!-- Titres avec espacement -->
<h4 class="font-size-[48px] font-weight-[700] letter-spacing-[-1px]">
Titre avec tracking serré
</h4>
<!-- Texte en majuscules -->
<p class="text-transform-[uppercase] letter-spacing-[2px] font-weight-[600]">
Texte espacé en majuscules
</p>Espacement des mots
Utilisez word-spacing- :
Espacement normal des mots
Mots plus espacés
Mots très espacés
Mots rapprochés
<!-- Espacement standard -->
<p class="word-spacing-[normal]">Espacement normal des mots</p>
<!-- Espacement augmenté -->
<p class="word-spacing-[5px]">Mots plus espacés</p>
<p class="word-spacing-[10px]">Mots très espacés</p>
<!-- Espacement réduit -->
<p class="word-spacing-[-2px]">Mots rapprochés</p>Alignement du texte
Utilisez text-align- :
Texte aligné à gauche
Texte centré
Texte aligné à droite
Texte justifié sur toute la largeur disponible
Centré sur mobile, aligné à gauche sur desktop
<p class="text-align-[left]">Texte aligné à gauche</p>
<p class="text-align-[center]">Texte centré</p>
<p class="text-align-[right]">Texte aligné à droite</p>
<p class="text-align-[justify]">Texte justifié sur toute la largeur disponible</p>
<!-- Alignement responsive -->
<p class="text-align-[center] md--text-align-[left]">
Centré sur mobile, aligné à gauche sur desktop
</p>Décoration du texte
Utilisez text-dec- ou text-decoration- :
<!-- Soulignement -->
<p class="text-dec-[underline]">Texte souligné</p>
<!-- Ligne au-dessus -->
<p class="text-dec-[overline]">Texte avec ligne au-dessus</p>
<!-- Barré -->
<p class="text-dec-[line-through]">Texte barré</p>
<!-- Aucune décoration -->
<a href="#" class="text-dec-[none]">Lien sans soulignement</a>
<!-- Au hover -->
<a href="#" class="text-dec-[none] a---[text-dec-[underline]]:hover">
Souligné au survol
</a>Transformation du texte
Utilisez text-transform- :
Texte en majuscules
TEXTE EN MINUSCULES
première lettre majuscule
Texte normal
Badge<!-- Majuscules -->
<p class="text-transform-[uppercase]">Texte en majuscules</p>
<!-- Minuscules -->
<p class="text-transform-[lowercase]">TEXTE EN MINUSCULES</p>
<!-- Première lettre en majuscule -->
<p class="text-transform-[capitalize]">première lettre majuscule</p>
<!-- Normal -->
<p class="text-transform-[none]">Texte normal</p>
<!-- Badge en majuscules -->
<span class="bg-[2563eb] c-[fff] px-[12px] py-[6px] rounded-[20px] text-transform-[uppercase] letter-spacing-[1px] font-size-[12px] font-weight-[700]">
Badge
</span>