#Barcamp : Les unités CSS

Taille de police

Par défaut, la taille de la police sous Firefox est fixée à 16px. Mais l’internaute peut modifier cette taille (et la fixer à 32px par exemple). Pareil pour la taille minimale de la police : elle n’est pas définie par défaut, mais peut l’être par l’utilisateur.

Pour améliorer l’accessibilité d’un site, il faut donc laisser la possibilité à l’internaute de redimensionner le texte. Pour cela, il faut utiliser les unités relatives (em ou rem) et non les pixels. Cela est valable autant pour la propriété font-size que pour line-height.

Sources : alsacréations

em.

L’ em est une unité relative qui se base sur l’élément parent pour déterminer sa taille. A savoir que la balise HTML se base sur la taille de police par défaut du navigateur. Attention à ne pas tomber dans le piège de la cascade qui vas augmenter rapidement la taille de police.

rem

le rem pour root em se comporte exactement comme le em à la différence que le rem se base sur l’élément racine, donc soit la balise HTML soit la police par défaut du navigateur.

vh et vw.

Il est pratique de vouloir que le texte soit d’une taille adapté en fonction de la taille de l’écran. Si vous avez une tablette, le titre de l’application va être en plus gros que le titre de la même application mais sur mobile. Et  les unités VW et WH vont permettre de réaliser cela facilement.

D’abord il faut savoir que la première lettre V de ces unités signifie viewport (donc ce sont des unités relative à la taille du viewport que vous avez définie -ou non-), ensuite, w pour width et h pour height.

Donc :

  • vw : « Viewport Width », correspond à l’unité relative à la largeur de votre écran
  • vh : « Viewport Height », correspond à l’unité relative à la hauteur de votre écran

Prenons un exemple en supposant que vous avez un écran (enfin un viewport…) de 1000px de hauteur :

La taille du texte à l’intérieur de votre div sera donc de (1000 * 20/100) = 200px.

Et si vous passez à un écran de 800px de hauteur, vous aurez alors une taille de texte de 160px.

Source : graphikArt

vmin et vmax

vmin et vmax pour viewport min et max : il correspondent à l’unité à la plus petite ou grande des deux dimensions (largeur ou hauteur selon l’orientation).

Du responsive en em ?

Pour aller plus loin il est aussi possible de définir les medias queries avec des unités relative. Ainsi si l’utilisateur utilise une taille de police importante l’interface passe en mode « tablette » ou « mobile ».  ainsi la police seras toujours adaptée en fonction du device.

Sources :

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.