Une taille de police en fonction de la largeur d’écran

J’ai souvent eu l’occasion à travers mes divers projets Web mobile (responsive), d’avoir à réduire la taille des polices de titre car même un simple mot ne passait pas en largeur. Pour éviter d’avoir une césure sur chaque mot du titre, le plus simple était de s’autoriser une réduction approximative du corps. (approximative… façon de parler). Je vous propose des solutions relative.

CSS3 à la rescousse

Il existe une unité encore peu connue car prise en charge par nos navigateurs depuis peu de temps, il s’agit des unités relative au viewport. Pour comprendre ce qu’est le viewport, je vous invite à lire cette article de Raphaël Goetter : Comprendre le viewport dans le Web mobile.

Pour résumer, nous allons proposer un corps de texte qui dépend de la largeur de la fenêtre du navigateur.
Vous connaissez certainement les unités px, em, rem ou pt pour dimensionner vos corps de texte ? Rajoutez à cette liste :

• vw : « Viewport Width », correspond à l’unité relative à la largeur de votre écran
• vh : « Viewport Height », correspond à l’unité relative à la hauteur de votre écran
• vmin (vm pour IE9) : « Viewport Min », correspond à l’unité relative à la plus petite des deux dimensions (largeur ou hauteur selon l’orientation)
• vmax : « Viewport Max », correspond à l’unité relative à la plus grande des deux dimensions (largeur ou hauteur selon l’orientation)

Très bien, mais que représente une unité de vw, par exemple ?
C’est assez simple mais pas forcément intuitif de prime abord : 1 unité représente 1% de la dimension de référence.

Prenons un exemple plus parlant.
Si j’écris ce morceau de code CSS appliqué à mon titre de niveau 1 :

h1 {
   font-size: 10vw;
}

Mon corps de texte aura un équivalent de 10% de la largeur de mon viewport, à savoir la largeur de la fenêtre de votre navigateur.
Sur l’écran que j’utilise actuellement, la définition est de 1920px de large, mon titre de niveau 1 aura alors une font-size équivalente à 192px.

Bien que la spécification du W3C sur ces unités prévoit qu’au changement de dimensions du viewport, les dimensions des éléments bénéficiant des unités vw, vh, vmin et vmax soient mis à jour, il semblerait que Chrome n’en fasse qu’à sa tête (Safari également probablement, mais je n’ai pas la version 6 sur PC 😉 )

Il vous faudra donc recharger la page sur la page de démonstration à chaque redimensionnement de la fenêtre du navigateur.
Voir la démonstration
J’ai ajouté un petit script JavaScript pour auto rafraichir le calcul, basé sur l’évènement « resize » de la fenêtre.
Pour les curieux, le voici, il est basé sur jQuery.

<script>
  $(window).resize(function() {
	$('h1, h2').css('z-index', 'auto'); //auto reflow
  });
</script>

Le support est encore partiel, mais ces unités sont utilisables pour bientôt, et déjà pour la cible iPhone, Chrome 20+, Firefox 19+, Opera 15.0+ et IE10+.
Voir le support sur CanIuse

Pour les curieux, voici également une petite expérimentation de respect d’un ratio 16:9 en fonction du viewport.

Solution de secours en JS

Il existe une alternative en JavaScript – comme souvent – qui se nomme FitText.js, qui est un plugin jQuery (hélas).
Cette solution fonctionne a priori partout sauf sur IE et propose de rajouter dynamiquement un attribut style sur un élément en faisant varier la taille de font-size en pixels.

1. Téléchargez la ressource sur Github
2. Appelez la librairie jQuery et le script Fittext depuis votre document HTML

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
   <script src="jquery.fittext.js"></script>

3. Puis ciblez les éléments textuels que vous souhaitez contraindre

   <script>
      $(".responsive_headline").fitText(); // basique
      $(".responsive_h3").fitText(1.2); // compression proportionnelle
      $(".responsive_headline").fitText(0.8); // décompression proportionnelle
      $(".responsive_headline").fitText(1.2, { minFontSize: '20px', maxFontSize: '40px' }); // compression avec taille max et taille min
   </script>

Voir la démonstration sur fittextjs.com

C’est probablement la meilleure alternative aujourd’hui, cependant elle ne fonctionne pas sur Internet Explorer.

Conclusion

Ces essais manquent de tests, n’hésitez pas à me faire vos retours dans les commentaires sur différents navigateurs (Safari 6 Mac, Android, etc.).
Merci à vous !