Points et EM dans les CSS

Un choix fondamental

Dessin ou texte ?

Avec le web, l'idée de ne plus imprimer est devenue attrayante. Le wysiwyg qui rend identique ce qui est à l'écran et ce qui sera imprimé semble un vague souvenir du passé.

Il y a un choix fondamental à faire entre une belle image à l'écran avec du texte réduit au minimum ou du contenu avec des textes trop fatigants à lire à l'écran que l'on a envie d'imprimer.

Avec les CSS, on a la possibilité de faire un contrôle par pixel (px) pour un affichage précis des images à l'écran et un contrôle précis par point (pt) et par cadratin (em) pour le texte imprimé.

aa-16px-aaaa-1em-aaaa-12pt-aa

 

aa-21px-aaaa-1.33em-aaaa-16pt-aa

Quelle unité choisir ? px, pt, em ...

Pixel, point et quadratin

Si le texte doit rester uniquement à l'écran et que sa lecture n'est pas essentielle, le choix est simple. Il faut calibrer son texte en pixels (px). Ce sera alors facile de l'ajuster avec les images et les dimensions des blocs. Mais attention, sur un écran de portable à160 dpi ou un écran 19" à 60 dpi, le texte risque de devenir difficilement lisible.

Si le texte est important et doit être imprimé,il faut le calibrer en points (pt). La correspondance avec les écrans n'est pas évidente. Avec Mac OSX les écrans sont réputés avoir 72 dpi, 95 dpi avec windows et Linux demande à l'écran son dpi mais le navigateur n'en tient pas forcément compte.

Avec le souci de la lecture facile pour les personnes fatiguées des petites lettres, on choisira de le calibrer en cadratins (em) qui laissent à l'utilisateur le choix de la grandeur d'affichage en gardant la proportion entre les éléments de texte.

Utiliser le point comme unité

C'est la façon la plus proche du traitement de texte

Dans les logiciels de traitement de texte on est habitué à choisir la taille de la police de caractère en points.

12 points c'est la taille ordinaire du texte imprimé.

18 points c'est un titre.

9 points c'est une note.

 

La dimension définie en points est fixe dans internet explorer mais peut être agrandie par l'utilisateur dans Firefox, Chrome ou safari

La hauteur en points n'est pas constante d'une police à l'autre, car elle tient compte en plus de la hauteur d'x (c'est la hauteur du o minuscule) des jambages (le bout de lettre au dessus ou en dessous de la hauteur d'x comme dans le b ou le p) et des talus de tête et de pied (espace libre au dessus ou en dessous des lettres pour éviter que les lignes ne se chevauchent)

aa-Georgia-Times-aaaa-Helvetica-Geneva-aaaa-Papyrus-Courrier-aa

Ce n'est pas facile d'utiliser la hauteur d'x pour calibrer son texte même si cette unité existe en css. (font-size pour Times :3ex pour pour Arial: 2.7ex pour Papyrus: 2.925)

aa-Times-aaaa-Arial-aaaa-Papyrus-aa

Utiliser les cadratins comme unité

La dimension s'adapte au choix de l'utilisateur

Le cadratin (em) est la chasse (largeur) du M majuscule ( M se dit em en anglais). Le M est sensé être carré. En pratique c'est la hauteur du corps. 1 em = le nombre de points de la police. On peut donc définir la dimension des titres et des autres balises html en proportion du texte de base. Si on décide de changer la dimension de base, tout va changer dans les mêmes proportions.

<style type="text/css">
body {font-size:12pt}
div.page-couverture {font-size:18pt}
div.annexes {font-size:10pt}
h1 {font-size:1.75em;}
h2 {font-size:1.33em;}
h3 {font-size:1.17em;}
p {font-size: 0.92em;}
</style>

balise	em	body 12pt	page couverture 18pt	annexes 10pt
h1	1.75em	21 points	31,5 points	17,5 points
h2	1.33em	16 points	24 points	13 points
h3	1.17em	14 points	21 points	12 points
p	0.92em	11 points	16,5 points	9 points

Les navigateurs arrondissent les valeurs. On peut donc avoir des variations de rendu.

Attention avec les valeurs relatives si vous définissez des valeurs pour des éléments emboîtés; les valeurs vont devenir difficiles à maîtriser.

<style type="text/css">
body {font-size:12pt}
div.note {font-size: 0.88em;}
p {font-size: 0.92em;}
strong {font-size: 1.08em;}
</style>

Comment écrit-on le style ?

des trois façons habituelles

Dans une feuille de style externe

Quand ça sert pour tout le site web

Dans le fichier aspect.css :

body {font-size:12pt;}
h1 {font-size:1.75em;}
h2 {font-size:1.33em;}
h3 {font-size:1.17em;}
p {font-size: 0.92em;}



Dans le fichier contenu.html :

<html>
<head>
<link rel="stylesheet" href="aspect.css" type="text/css">
</head>
<body>
<h1>Titre principal</h1>
<h2>Titre secondaire</h2>
<h3>Titre tertiaire</h3>
<p>Paragraphe</p>
</body>
</html>



Dans l'entête du fichier html

Quand c'est spécial pour la page mais inapproprié pour le reste du site web

<html>
<head>
<style type="text/css">
h1 {font-size:21pt;}
h2 {font-size:16pt;}
p {font-size:12pt;}
</style>
</head>
<body>
<h1>Titre principal</h1>
<h2>Titre secondaire</h2>
<p>Paragraphe</p>
</body>
</html>



Dans la balise html

Quand ça doit s'appliquer à tout prix à cet endroit

<html>
<head>
</head>
<body>
<h1>Titre principal</h1>
<p>Paragraphe avec cette lettre <span style="font-size:54px;">y</span> en plein milieu qui est très grosse.</p>
</body>
</html>


Paragraphe avec cette lettre y en plein milieu qui est très grosse.