Unités de taille

Les unités pour exprimer les longueurs (et largeur, hauteur, taille des caractères, marges, épaisseur de bordure...) ont des origines diverses : l'electronique (pixel) , l'imprimerie (le point), relatif (%), ...
Faisons ensemble un tour exhaustif et construisons -nous un argumentaire rationnel sur leur bon ou mauvais emploi.

Entrons dans le vif du Sujet

I Quelles sont les unités possibles ?

Plusieurs unités possibles pour spécifier une taille de texte ou une taille de boîte, en voici une liste que nous allons détailler par la suite :

Reference

Les unités absolues

  • centimètre (cm)
     
  • millimètre (mm)
     
  • pouce (in)
              [1in=2,54cm]
     
  • point (pt),
              [1/72 de pouce ou 0,352778mm]
     
  • pica (pc),
              [1 picas vaut 12 points et 4,233mm]

Les unités relatives

  • relative à la police de caractères
    • la taille relative à la police de l'élément parent (em)
               [si la hauteur d'un caractère est fixée à 10pt dans l'élément parent  alors 1em=10pt,
                  si elle est fixée à 12pt alors 1em=12pt ]
        
    • la taille relative à la lettre x minuscule (ex) de l'élément parent
        
  • relative à la taille de l'écran et la résolution employée
    • le pixel (px)
         
  • relative à la dimension d'un élément parent ou une autre dimension du même élément
    • le pourcentage (%)
Exemple
Pixels Points Ems
8px Font 6pt Font 0.5em Font
9px Font 7pt Font 0.55em Font
10px Font 7.5pt Font 0.625em Font
11px Font 8pt Font 0.7em Font
12px Font 9pt Font 0.75em Font
13px Font 10pt Font 0.8em Font
14px Font 10.5pt Font 0.875em Font
16px Font 12pt Font 1.0em Font
17px Font 13pt Font 1.05em Font
18px Font 13.5pt Font 1.125em Font
20px Font 14.5pt Font 1.25em Font
22px Font 16pt Font 1.4em Font
24px Font 18pt Font 1.5em Font
26px Font 20pt Font 1.6em Font
29px Font 22pt Font 1.8em Font
32px Font 24pt Font 2.0em Font
35px Font 26pt Font 2.2em Font
36px Font 27pt Font 2.25em Font
38px Font 29pt Font 2.35em Font
40px Font 30pt Font 2.45em Font
45px Font 34pt Font 2.75em Font
48px Font 36pt Font 3.0em Font

Les conversions sont approximatives et dépendent des navigateurs comme des OS et de la familles de caractères

II Pixel ou em

L'unité pixel est une unité relative, mais certaines versions d'Internet Explorer (ie7) la considèrent comme une unité absolue quand elle est appliquée à des tailles de caractères, ce qui interdit le redimensionnement de la taille de l'affichage sur ce navigateur quand une taille de caractères est indiquée en pixels.

C'est pourquoi, de nombreux Webdesigners (Eric Meyer) suggèrent de se tourner vers l'unité "em" qui permet tous les redimensionnements

Exemple

Cet exemple ne contient qu'un seul ordre relatif de taille de caractères et pourtant, elles sont de plus en plus grande !!!! POURQUOI ?

Bonjour
Bonjour
Bonjour

Ressources

Articles relatifs à discuter :

 

Avez-vous atteint les objectifs ?
Vous devez :
Testez-vous

Questions élémentaires :

Dans l'exemple pixel ou em , si la taille sur le body est 12px, quelle est la taille en px du 3eme bonjour ?

Bonjour
Bonjour
Bonjour

Question de réflexion :

Quelle est la réalité de la problèmatique px/em ? avec quels moyens est effectué le grossissement, zoom ou nouveau choix d'une police ?