Font-size responsive (proportionnel à la resolution)

font-size-responsive-accessibilite

A travers de nombreux projets Web mobile en responsive design, nous avons souvent eu à effectuer une réduction de la taille des polices de titre étant donné que même un simple petit mot ne passait pas sur la largeur.

Afin d’éviter d’avoir une cassure de titre par exemple, le plus simple des opérations était de réduire plus ou moins le fontsize.
A travers ce topique, nous allons vous proposer différentes solutions relatives à cet effet.

L’utilisation de CSS3

Il faut savoir qu’il existe une unité qui n’est pas encore assez vulgarisé puisqu’elle n’a été prise en charge par les navigateurs que récemment.
Cette unité ou plutôt ces unités sont celles relatives au Viewport.

En gros, ce que nous allons faire est de mettre un corps de texte dépendant de la largeur de la fenêtre du navigateur.
Les unités qui vont suivre vous sont sûrement familiers pour le redimensionnement de vos corps de texte : px, em, rem ou encore pt.

Voici une liste de quelques unités qui viennent rajouter les unités de redimensionnement :

  • vw ou ViewportWidth correspondant à l’unité relative à la largeur de l’écran
  • vh ou ViewportHeight correspondant à l’unité relative à la hauteur de l’écran
  • vmin (vm pour Internet Explorer 9) ou Viewport Min correspondant à l’unité relative à la plus petite des deux dimensions (hauteur ou largeur selon l’orientation)
  • vmax ou Viewport Max correspondant à l’unité relative à la plus grande des deux dimensions (hauteur ou largeur selon l’orientation)

La question que vous allez sans doute poser, que représente une unité vw ?
La réponse est simple bien qu’elle n’est pas forcément intuitive aux premiers abords. Ainsi, une unité représente 1% de la dimension de référence.

Avec ça, le corps de texte correspondra de 10% de la largeur du viewport qui est la largeur de la fenêtre du navigateur.
Par exemple si nous utilisons un écran HD, la définition est de 1920px de large et donc le titre de niveau un aura ainsi une taille de police correspondant à 192px.

Problématique et solution au resize de la page

Bien que la spécification du W3C sur les unités relatives au Viewport prévoit qu’au changement de dimensions du Viewport les dimensions des éléments devraient bénéficier des unités vw, vh, vmin et vmax soient mises à jour, il semblerait que les navigateurs Safari et Chrome n’en fassent qu’à leur tête.

De ce fait, il sera toujours nécessaire de recharger la page lorsqu’un redimensionnement de la fenêtre du navigateur s’opère.

Nous avons ajouté un script JavaScript dans le but de rafraîchir automatiquement le calcul. Ce dernier est basé sur l’évènement « resize » de la fenêtre.

Bien que le support soit encore partiel, ces unités seront bientôt utiliser et elles cibleront l’iPhone,Android,Firefox 19+, IE10+, Opera 15.0+ et Chrome 20+.

Répondre