Nile-University-Student-Union-org/Availability-tracker

Que fait Availability-tracker ?

Maîtrisez les échelles typographiques fluides, les associations de polices (serif éditorial + sans technique), le crénage optique, le rythme vertical et les systèmes CSS modernes avec clamp() sans décalages de mise en page.

Introduction

Cette compétence fournit des outils et des connaissances pour créer des typographies web fluides et élégantes qui s'adaptent parfaitement à toutes les tailles d'écran. Elle combine les principes traditionnels de la typographie imprimée avec les techniques CSS modernes.

Échelles typographiques fluides

• Utilisez clamp(min, préférée, max) pour définir des tailles de police fluides.
• Exemple : font-size: clamp(1rem, 2.5vw, 2rem);
• Créez une échelle modulaire avec des ratios (par exemple, 1.25 ou 1.5).
• Évitez les sauts brusques avec des unités vw et rem combinées.

Associations de polices

• Associez une police serif éditoriale (par exemple, Palatino, Georgia) avec une police sans technique (par exemple, Helvetica, Inter).
• Utilisez la police serif pour les titres et les longs textes de corps.
• Utilisez la police sans pour les boutons, les étiquettes et les données.
• Exemple : --font-serif: 'Georgia', serif; et --font-sans: 'Inter', sans-serif;

Crénage optique

• Appliquez font-kerning: normal; pour activer le crénage intégré de la police.
• Pour un contrôle plus fin, utilisez letter-spacing avec des valeurs négatives pour les titres grands.
• Exemple : letter-spacing: -0.02em; pour les titres.

Rythme vertical

• Définissez une hauteur de ligne de base avec line-height sur le corps du texte.
• Utilisez des multiplicateurs de cette hauteur pour les marges et les espacements.
• Exemple : margin-bottom: calc(1.5 * 1rem);
• Évitez les décalages de mise en page en définissant une hauteur explicite pour les polices chargées dynamiquement avec size-adjust.

Systèmes CSS avec clamp()

• Utilisez clamp() pour les largeurs, les marges et les espacements.
• Exemple : width: clamp(300px, 50%, 800px);
• Combinez avec min() et max() pour des mises en page robustes.
• Testez sur plusieurs viewports pour garantir l'absence de débordement.

Exemple complet

:root {
  --font-serif: 'Georgia', 'Palatino Linotype', serif;
  --font-sans: 'Inter', 'Helvetica Neue', sans-serif;
  --base-size: clamp(1rem, 2vw, 1.25rem);
  --scale-ratio: 1.25;
}

body {
  font-family: var(--font-serif);
  font-size: var(--base-size);
  line-height: 1.6;
  font-kerning: normal;
}

h1 {
  font-size: clamp(2rem, 5vw, 4rem);
  font-family: var(--font-sans);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 0.5em;
}

p {
  margin-bottom: 1.6rem;
}

.container {
  width: clamp(320px, 80%, 1200px);
  margin: 0 auto;
}

Bonnes pratiques

• Évitez les requêtes média pour les changements de taille de police ; utilisez clamp() à la place.
• Testez la lisibilité sur les mobiles et les écrans larges.
• Utilisez @font-face avec size-adjust pour normaliser les polices personnalisées.
• Privilégiez le crénage optique automatique plutôt que manuel.

Références

• MDN : clamp()
• Principes de typographie
• CSS Fonts Module Level 4