Quelques rappels sur les fonts et les em

  • Différences entre em et rem : l’unité em est relative à son parent contrairement à rem qui est relative à la balise html
  • Mettre font-size: 100% sur l’élément html (et non 1em). Normalement c’est inutile mais il s’agit en fait d’un correctif pour un bug d’Internet Explorer (de 5 à 7), bug qui rend « anarchique » le redimensionnement du texte à la volée dans ce navigateur. Il a du mal à gérer des tailles de texte en em si aucune déclaration en pourcentage ne les précède.
  • Ne pas avoir peur d’utiliser du texte un peu gros pour votre corps de texte, et ne pas trop chercher à « minimiser » les textes « subalternes » en les ramenant à des tailles ridicules (pas en dessous de 80%)

Points sur la propriété line-height :

  • Elle prend soit un nombre (valeur sans unité qui correspond à un coefficient multiplicateur de la taille de fonte utilisée) soit une longueur (valeur utilisée pour calculer la hauteur de la boîte de la ligne)
  • Elle fonctionne mieux si on utilise un facteur / multiplicateur, ce qui signifie pas d’unité, mais seulement un nombre qui multiplie la taille de police.
  • Il est donc préférable de ne pas de mettre d’unité à cette propriété pour éviter les problèmes des cascades.

NB : A la place de 1.2 mettre la valeur souhaitée (1.2 est généralement la valeur par défaut des navigateurs mais selon la police utilisée)

  • Pour du texte, une line-height à 1.4 fois la taille du texte est recommandée.
  • Pour les titres, une line-height à 1.2 est recommandée.

Sources :

Générer une font avec des icônes en rails

Une « fonte-icône » est une police qui utilise des glyphes représentant des icônes vectorielles. Très pratique, car on peut facilement changer la couleur, la taille en css. En plus de leur flexibilité, les polices d’icônes permettent un gain de performance puisqu’il suffit de charger un fichier de police pour avoir accès à beaucoup de caractères.

Nous allons voir comment mettre en œuvre une police d’icônes personnalisée avec Rails.

Nous allons utiliser la gem ‘fontcustom’ de Rails. Cette gem nécessite Ruby 1.9.2+ et FontForge.

1- Installation de fontforge

Si vous avez besoin de Xquartz lors de l’installation de fontforge, vous pouvez le télécharger ici.

2- Ajouter la gem ‘fontcustom’ à votre Gemfile (puis faire un bundle update)

3- Ajouter une tâche rake en créant un fichier /lib/tasks/icons.rake

4- Créer un fichier fontcustom.yml dans config avec les options suivantes :

On va mettre nos icônes svg dans le dossier app/assets/icons. Les fichiers pour la police compilés se mettront dans le dossier app/assets/fonts.

5- Faire la commande suivante pour compiler les icônes :

En regardant votre arborescence, vous verrez que des fichiers ont été créés :

6- Importer le fichier _icons.scss dans votre application.scss

Après l’installation et la compilation, rien de plus simple pour l’utilisation dans vos vues :

Pour connaître les noms des classes, il faut aller voir le fichier _icons.scss qui contient ces noms.

Si on ajoute ou supprime une icône dans le dossier, il suffit de recompiler avec la commande suivante :

Sources :

#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 :