Sommaire

Les en-têtes

Les en-têtes sont appliqués avec les éléments HTML allant de <h1> à <h6>.

Voici un exemple d’affichage :

images/C07-001.png

Un certain nombre de propriétés communes qui s’appliquent à tous ces éléments :

h1,h2,h3,h4,h5,h6 { 
  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; 
  font-weight: normal; 
  font-style: normal; 
  color: inherit; 
  text-rendering: optimizeLegibility; 
  margin-top: 0; 
  margin-bottom: 0.5rem; 
  line-height: 1.4; 
}

En ce qui concerne la taille de caractère, cela va dépendre bien sûr de la taille de l’écran de diffusion, puisque Foundation travaille avec les requêtes de médias qui permettent d’adapter le design général à la largeur des écrans de diffusion.

Voilà les règles appliquées pour un affichage sur des écrans larges :

@media screen and (min-width: 40em) { 
  h1 { 
    font-size: 3rem; } 
  h2 { 
    font-size: 2.5rem; } 
  h3 { 
    font-size: 1.9375rem; } 
  h4 { 
    font-size: 1.5625rem; } 
  h5 { 
    font-size: 1.25rem; } 
  h6 { 
    font-size: 1rem; } 
}