Outils pour utilisateurs

Outils du site


cours2012:concepts_et_outils_pour_internet:grille_typographique

Voir cette page sous forme de diaporama.

Grille typographique

En quelques mots

  • Applique l'idée de :
    • Fixer la taille de police sur BODY (ou HTML)
    • Puis utilise des tailles relative (em (ou rem)) pour les différents texte
  • Le but est que toutes les tailles de police soit un multiple d'un pas fixe
    • Nécessite de faire de même pour les autres éléments graphique (images, marges,… )

Le calcul

Grille titre

Appliqué par

Alternative ?

Tout fixer en px

h1,h2,h3 { margin: 10px 0; }
h1 { font-size: 36px; line-height: 40px; }
h2 { font-size: 24px; line-height: 40px; }
h3 { font-size: 14px; line-height: 20px; }

Ou utiliser des "rem"

Visualiser la grille

960 gridder

<!DOCTYPE html>
<html lang="fr">
  <head>
    <!-- …blabla -->
	<script type="text/javascript">
	var gOverride = {
	  urlBase: 'http://gridder.andreehansson.se/releases/latest/',
	  gColor: '#EEEEEE',
	  gColumns: 12,
	  gOpacity: 0.35,
	  gWidth: 10,
	  pColor: '#C0C0C0',
	  pHeight: 21,
	  pOffset: 0,
	  pOpacity: 0.55,
	  center: true,
	  gEnabled: true,
	  pEnabled: true,
	  setupEnabled: true,
	  fixFlash: true,
	  size: 960
	};
	</script>
	<script type="text/javascript">
	// Insert optional override object before the function
 
	createGridder = function() {
	  document.body.appendChild(
	    document.createElement('script'))
	    .src='http://peol.github.com/960gridder/releases/latest/960.gridder.js';
	}
	</script>
	</head>
<body onload="createGridder()"  class="accueil">
 <!-- …blabla -->
<body>
</html>

Usage : Ajouter les deux balises scripts à HEAD. Et à BODY l'attribut : onload="createGridder()"

cours2012/concepts_et_outils_pour_internet/grille_typographique.txt · Dernière modification: 2016/11/15 13:47 par pracht