Archives des tags : Font-size

Pas encore de description pour le tag Font-size. Suggérez à l'administrateur du site de d'y remédier.
HTML & CSS

EM Calculator : simplifiez vos calculs en em

Une pratique courante pour déterminer les tailles de caractère consiste à utiliser une valeur de 62.5% sur le body pour obtenir une taille de base de 10px et d’utiliser un coefficient multiplicateurs en em pour simplifier les calculs à venir. Dans ce contexte, 1.2em est égale à 12px et 2.4em à 24px, etc. Selon l’article Font sizing with rem could be avoided, c’est une fausse bonne idée : des calculs fastidieux nous sont épargnés, certes, mais nous devrons spécifier les nouvelles tailles à chaque fois. On ne peut raisonnablement pas utiliser une taille par défaut de 10px pour le texte si on veut être lu. →

HTML & CSS

Nouvelle méthode de remplacement de texte par une image

Dans l’article Nouvelle méthode de remplacement d’image en CSS, je vous faisais part d’une nouvelle méthode de remplacement de texte par l’image en CSS proposée par Scott Kellum qui utilise la propriété text-indent avec un décalage en pourcentage. Cette méthode n’étant pas dénuée d’effets de bord (voir dans la suite de l’article), une nouvelle technique a fait son apparition lors de la mise à jour de HTML5 Boilerplate. Je vous propose une traduction de l’article Another CSS image replacement technique écrit par Nicolas Gallagher qui détaille une technique avec font-size : →

Ergonomie & Accessibilité

Une solution CSS accessible pour remplacer du texte HTML par une image

Dans l’article remplacer du texte HTML par une image avec CSS, j’ai listé un certains nombre de techniques efficaces permettant d’avoir un titre de niveau `h1` (par exemple) qui disparait de l’affichage au profit d’un visuel plus «sexy». Le but étant d’améliorer l’apparence du site et le référencement dans les moteurs de recherche. Toutefois, les solutions présentées n’offrent pas toujours une expérience utilisateur satisfaisante pour tous. Les utilisateurs de lecteurs d’écran comme Jaws ou NVDA risquent de ne pas y trouver leur compte. Certaines solutions sont «accessibles» uniquement lorsque les CSS sont désactivées et il faudra penser aux cas où les images sont absentes. →