Présentation de Lumos

Lumos est une extension Chrome simple mais extrêmement utile, développée par Timothy Ricks (figure bien connue de la communauté Webflow). Son but est de permettre aux designers et développeurs de prévisualiser et tester rapidement des polices de caractères (issues de Google Fonts ou installées localement sur votre ordinateur) directement sur n'importe quelle page web.

Fini le temps où il fallait inspecter le code, modifier le CSS manuellement ou faire des maquettes juste pour voir à quoi ressemblerait un titre avec une autre police. Avec Lumos, vous activez l'extension, sélectionnez un élément de texte sur la page, et choisissez une nouvelle police dans la liste pour voir le changement instantanément.

Fonctionnalités principales de Lumos

  • Sélecteur d'éléments : Cliquez sur n'importe quel texte de la page web pour le cibler.
  • Liste de polices : Accès à l'ensemble du catalogue Google Fonts.
  • Polices locales : Possibilité d'utiliser les polices installées sur votre propre ordinateur.
  • Prévisualisation instantanée : Le texte sélectionné se met à jour immédiatement avec la police choisie.
  • Ajustements de base : Permet parfois de tester rapidement des variations de graisse (Weight) ou de style (Italic).
  • Simplicité : Interface minimaliste et directe.

Comment nous l'utilisons : Lumos est un petit outil pratique dans notre phase de conception et d'exploration :

  1. Tester des associations de polices : Voir rapidement comment une police de titre de Google Fonts s'accorde avec la police de corps de texte existante d'un site (ou d'une maquette en ligne).
  2. Choix de polices pour un projet : Naviguer sur des sites d'inspiration et tester différentes options de polices sur leurs mises en page pour mieux se projeter.
  3. Présentation client rapide : Modifier à la volée la police d'un titre sur une page de staging lors d'un appel client pour montrer une alternative.

Lumos, en conclusion

Avantages de Lumos

  • Extrêmement simple et rapide à utiliser.
  • Gain de temps considérable pour tester des polices en contexte réel.
  • Accès facile à Google Fonts et aux polices locales.
  • Gratuit et open-source.
  • Développé par une source fiable (Timothy Ricks).

Inconvénients et limites de Lumos

  • Fonctionnalités limitées aux changements de police (pas de taille, couleur, etc.).
  • Ne fonctionne que sur le texte sélectionné (pas de changement global sur la page, sauf si on cible body).
  • La prévisualisation est temporaire (disparaît au rechargement de la page).
  • N'est qu'une extension Chrome (pas disponible pour d'autres navigateurs nativement).

Alternatives à Lumos

  • WhatFont (Extension Chrome) : Permet d'identifier les polices utilisées sur une page, mais pas de les modifier/tester.
  • Outils de développement du navigateur (Inspecteur) : Permet de modifier le CSS (y compris `font-family`) mais de manière moins conviviale et rapide que Lumos.
  • Logiciels de design (Figma, Sketch, Adobe XD) : Permettent de tester les polices de manière exhaustive mais hors du contexte d'un site live.