Le Blog

Le blog laboratoire de F.L.D. Studio
0

Unité de mesure REM et rythme vertical

Unité CSS REM

Nouveauté apportée par CSS3 en 2013, l'unité de mesure REM pour Root EM qui est une unité de mesure relative.

A la différence de l’unité EM qui est relative à la valeur de son parent, le REM est une unité relative à la racine du document (HTML). L'unité REM n'est donc pas soumise aux règles de la cascade comme le EM ce qui la rend plus simple à utiliser.

On l'utilisera avec bonheur pour tout projet de type responsive. Il sera alors facile de modifier une seule fois la taille de la police de base du site pour à l'aide des Medias Queries CSS3  l'agrandir ou la rapetisser en fonction des différentes tailles d'écran et ainsi modifier toutes les tailles de polices, mais aussi les interlignes et les marges internes ou externe (padding, margin)  des différents éléments de décoration ou d'interface. C'est le principe même d'un design « fluide ».

La taille de l'élément racine

Par défaut la plupart des navigateurs utilisent une taille de police par défaut de 16px. L'utilisateur à  la possibilité de modifier cette donnée. Le mieux est donc de se baser sur cette valeur afin de l'utiliser  en valeur relative soit en plus grand ou plus petit. Dans ce cas on sort de l'approche "Perfect Pixel" pour entrer dans celle du "Lacher Prise". En effet, il ne s'agit plus de respecter une maquette au pixel pret mais plutôt de s'en approcher en laissant les tailles d'écrans, orientations et taille des polices commander le design.

Comment trouver les valeurs ?

Il faut faire un petit calcul pour convertir une unité PX en unité EM ou REM et cela peux être fastidieux. Le plus simple est de diminuer la taille de la police de base par défaut ( 16px ) pour la ramener à une taille de 10px à l'aide de cette opération :  16 * 0,625 = 10. De la sorte les calculs pourront se faire « de tête » puisque une taille de 10px fait 1em/1rem, une taille de 8px fait 0.8em/0.8rem, une taille de 14px fait 1.4em/1.4rem, une taille de 100px fait 10em/10rem...etc

Exemple en CSS

html{
	font-size:62.5% ; */  Police par défaut : 16px * 62.5% = 10px /*
}
h1{
	font-size:2.6rem ; */ Police de 26px /*
}

Exemple avec une définition corrigeant un bug de Internet Explorer 5 et 7  sous Windows  (la déclaration en 100% sur le html)

html {font-size : 100%;}
body {font-size :62.5%;}


Le seul bémol, c'est la non compatibilité avec IE8 qui comprend le EM mais pas le REM. Si l'on doit supporter cette version du navigateur de Microsoft il suffira de doubler les règles avec du PX ou du EM pour IE et du REM pour les autres.
Exemple :

div{
	font-size:16px ;
	font-size:1.6rem ;
}

Gestion de l'interlignage

Toutes les polices de caractères n'utilisent pas les espaces réservés en haut et bas de la même manières. Pour régler se problème il faut définir une hauteur de ligne à l'aide de la propriété ligne-height.

Les unités de mesure

Le px, em et rem ne sont pas les seules unitées de mesure à notre disposition. Ci dessous un extrait de cette article : http://bitsofco.de/2015/css-font-sizing/ et pour comprendre leur utilisation utiliser ce site : http://katydecorah.com/css-ruler/

UnitTypeDescription
pxAbsolute1 “viewport pixel
ptAbsolute1 point is 1/72 of an inch
pcAbsolute1 pica is equal to 12 points
%RelativeRelative to the parent element’s font size
emRelativeRelative to the parent element’s font size
remRelative(root em) Relative to the html font size
keywordRelativexx-small, x-small, small, medium, large, x-large, xx-large
vwRelative1/100th of the width of the viewport
vhRelative1/100th of the height of the viewport
vminRelative1/100th of the viewport’s smaller dimension (height or width)
vmaxRelative1/100th of the viewport’s larger dimension (height or width)

Articles de fond :

Vidéo :

Calculateurs en ligne

Outil pour le ryhtme vertical

Retour sur expérience :

Catégories: Typographie

Tags: font

Commentaires: Pas de commentaires

Envoyer un commentaire