Cap height
C
Definition complete
<p>La <strong>cap height</strong> (hauteur des capitales) désigne en typographie la distance entre la ligne de base et le sommet des lettres majuscules d'une police de caractères. Cette mesure fondamentale constitue l'un des paramètres essentiels pour comprendre et harmoniser les proportions typographiques dans la conception web et print.</p>
<p>Contrairement à ce que l'on pourrait penser, la cap height ne correspond pas nécessairement à la hauteur totale des caractères. Elle se distingue de plusieurs autres mesures typographiques :</p>
<ul>
<li><strong>x-height</strong> : hauteur des lettres minuscules sans ascendantes (comme le "x")</li>
<li><strong>Ascendante</strong> : partie des minuscules dépassant la x-height (b, d, h)</li>
<li><strong>Descendante</strong> : partie sous la ligne de base (g, p, y)</li>
<li><strong>Em-square</strong> : carré de référence définissant l'espace total du caractère</li>
</ul>
<p>En design web, la compréhension de la cap height s'avère cruciale pour plusieurs raisons. Elle influence directement l'alignement vertical des textes avec d'autres éléments comme les icônes ou les images. Les propriétés CSS modernes comme <code>cap</code> dans les unités relatives permettent désormais de dimensionner des éléments en fonction de cette mesure.</p>
<p>Lors de l'association de plusieurs polices dans un même design, comparer leurs cap heights respectives aide à maintenir une cohérence visuelle. Deux polices de même taille en points peuvent paraître très différentes si leurs cap heights varient significativement. Cette connaissance permet d'ajuster les tailles pour créer des combinaisons harmonieuses.</p>
<p>Les outils de design moderne comme Figma intègrent ces métriques typographiques pour faciliter l'alignement précis des éléments textuels, contribuant à des interfaces plus soignées et professionnelles.</p>
Exemples pratiques
<ul>
<li><strong>Alignement icône-texte</strong> : Centrer verticalement une icône de 24px avec un texte en utilisant la cap height plutôt que la line-height</li>
<li><strong>Design de logo</strong> : Aligner le texte d'un logotype avec un symbole graphique en se basant sur la hauteur des capitales</li>
<li><strong>Appariement de polices</strong> : Ajuster Roboto à 16px avec Playfair Display à 15px pour harmoniser leurs cap heights</li>
<li><strong>Boutons UI</strong> : Calculer le padding vertical d'un bouton pour centrer optiquement le texte en majuscules</li>
<li><strong>Grille typographique</strong> : Construire un système de baseline grid cohérent basé sur les métriques de la police principale</li>
</ul>
A quoi sert Cap height ?
<ul>
<li>Aligner précisément les éléments textuels avec les composants graphiques</li>
<li>Harmoniser l'appariement de plusieurs familles typographiques</li>
<li>Concevoir des systèmes de design avec des espacements cohérents</li>
<li>Créer des logos et identités visuelles aux proportions maîtrisées</li>
<li>Optimiser la lisibilité des interfaces utilisateur</li>
<li>Développer des composants UI réutilisables et bien proportionnés</li>
</ul>
Cap height en pratique chez 123web
<p>Chez 123web, nous portons une attention particulière aux détails typographiques qui font la différence dans la qualité perçue d'un site web. Notre équipe de designers maîtrise les métriques comme la cap height pour créer des interfaces harmonieuses où textes, icônes et éléments graphiques s'alignent parfaitement. Cette rigueur typographique contribue à l'élégance et au professionnalisme de chaque projet que nous réalisons.</p>