Typographie CSS - Pourquoi la grille de base est-elle totalement désactivée?

Question

Aujourd'hui, j'ai lu un article sur la typographie CSS et comment mettre en place une grille de base simple. J'ai pensé que ça pourrait être amusant d'essayer, alors j'ai tout mis en place, mais apparemment ça ne semble pas être comme prévu.

Voici le violon en plein écran: http://jsfiddle.net/j5Tav/embedded/result/
Et avec le code: http://jsfiddle.net/j5Tav/

Pour visualiser la ligne de base, j'utiliser Baseliner comme bookmarklet. Il affiche une ligne de base en utilisant JavaScript.

Comme vous pouvez le voir dans mon code SCSS, je mis la ligne de base 21px à une taille de police de 14px:

/* Reset */ 
* { margin: 0; padding: 0; } 

/* Variables */ 
$bodyFontSize: 14px; 
$baseline: 21px; /* 1.5 for 14px */ 

body { 
    font-size: $bodyFontSize; 
    line-height: $baseline; 
} 

article { 
    margin: 0 auto; 
    width: 65%; 
} 

h1, 
h2, 
p { 
    margin-bottom: $baseline; 
} 

h1 { 
    font-size: $bodyFontSize * 2; 
    line-height: $baseline * 2; 
} 

h2 { 
    font-size: $bodyFontSize * 1.8; 
    line-height: $baseline * 1.8; 
} 

encore, lorsque vous utilisez Baseliner au violon plein écran et entrez 21 dans le bookmarklet , la ligne de base est totalement désactivée. Pourquoi? Ai-je calculé quelque chose de mal?

Answer 1

Jetez un oeil à la « The Ugly » de cet article:

http://coding.smashingmagazine.com/2012/12/17/css-baseline-the-good-the-bad-and-the-ugly/

En bref, l'application de la même hauteur de la ligne à tous vos éléments ne garantira pas que le texte au sein de ces éléments seront être aligné sur la grille de base que vous avez en tête. En effet, en CSS, le texte est défini sur le centre vertical de la valeur de hauteur de ligne. Par exemple, si vous avez un paragraphe avec un texte de 6 pixels et un autre paragraphe avec un texte de 24 pixels et qu'ils ont tous deux la même valeur de hauteur de ligne (par exemple, 30 pixels), le texte de ces paragraphes ne sera pas être aligné sur la même ligne de base.

Pour obtenir une grille de ligne de base uniforme dans CSS, vous devez compenser verticalement chaque élément de texte qui a une taille de police différente. Vous pouvez le faire en ajoutant un remplissage en bas et en haut de chaque élément dans lequel le texte ne correspond pas à la hauteur de ligne choisie. Un outil comme Baseliner par John Keyes peut être utile pour savoir où la ligne de base « vrai » est:

http://keyes.ie/things/baseliner/

Vous voulez vous assurer que le rembourrage en haut et en bas ajouter à votre valeur de hauteur de la ligne; Par exemple, si vous devez ajouter 5 pixels du remplissage supérieur de l'élément h1 pour l'aligner avec la grille de base de votre choix de 10 pixels, vous devez ajouter 5 pixels au remplissage inférieur pour obtenir la hauteur totale du h1 élément (y compris le remplissage) pour égaler un multiple de 10 pixels (en supposant que sa hauteur de ligne a été fixée à un multiple de 10 pixels, par exemple, 10 pixels, 20 pixels, etc.). Vous pouvez également utiliser des marges à cette fin, mais cela risque d'être compliqué en raison de la réduction des marges. En outre, vous voulez éviter d'avoir une hauteur de ligne plus petite qu'une taille de police, et vous voulez éviter de combiner deux tailles de police différentes dans un élément, car cela peut également se détacher de la grille de la ligne de base. Comme le note l'article cité, créer une vraie grille de base de CSS est plutôt désordonné, du moins si vous le faites manuellement.

Answer 2

Configurer manuellement le rythme vertical est une douleur.

Vous avez tagué votre question avec scss, alors pourquoi ne pas utiliser son awesomeness? Jetez un coup d'œil au rythme vertical de Compass!

• Quelle est la boussole: Snugug's training glossary
• Official Vertical Rhythm documentation
• Quelques guides utiles, vidéos et articles sur Compass verticale Rhythm:
  • Vertical Rhythm with Compass
  • Compass Tutorials #10 - Vertical Rhythm - YouTube
  • Keep the Rhythm: Vertical rhythm on objects having dynamic heights
  • Introduction to Building Websites Using Susy and Compass's Vertical Rhythm
  • Google it pour plus d'informations!