Comment modifier le soulignement par défaut de Webflow pour une meilleure lisibilité

Introduction

Dans un projet Webflow, chez Digidop, on considère que chaque détail compte. Cependant, il arrive parfois que certains éléments par défaut de Webflow puissent poser de petits problèmes. C'est précisément ce qu’on va aborder dans cet article.

Si vous avez l’habitude de développer des sites web sur Webflow, vous avez peut-être déjà remarqué que le soulignement par défaut est très proche du texte (beaucoup plus que le soulignement par défaut d’une maquette Figma par exemple), ce qui peut affecter l'esthétique et la lisibilité de vos designs.

Mais ne vous inquiétez pas, on a la solution à ce problème, et elle est extrêmement simple puisqu’elle ne consiste qu’en une toute petite ligne de code CSS personnalisé, que vous pourrez intégrer systématiquement à vos sites Webflow.

Dans cet article, on vous montre comment intégrer facilement cet ajustement dans vos projets. C’est parti !

Le problème de soulignement par défaut dans Webflow

Le soulignement par défaut dans Webflow est en fait très proche du texte lui-même, et semble pratiquement fusionner avec les lettres, ce qui peut créer une esthétique qui ne correspond pas toujours à la vision que vous avez pour votre design.

Pour illustrer ça, comparons le avec le soulignement par défaut dans des maquettes Figma :

Lorsque vous créez des textes soulignés dans Figma, vous remarquerez que le soulignement est positionné plus bas, ce qui améliore la lisibilité globale du texte. En revanche, dans Webflow, le rendu n’est pas le même, et c'est là que nous entrons en action.

La solution rapide avec du code CSS personnalisé

Maintenant que le problème est identifié, passons à la solution. Heureusement, cette solution est incroyablement simple : tout ce dont vous avez besoin, c'est d'une ligne de code CSS personnalisée.

La ligne magique que nous allons utiliser est la suivante :

body {text-underline-offset: .25em;}

En l'ajoutant à votre projet Webflow, vous ajustez l'écart entre le texte et le soulignement à 0,25em (unité de mesure relative à la taille de la police).

Pour appliquer cet effet à votre site, suivez les étapes suivantes.

Si vous utilisez le clonable de Client-First :

• Depuis le navigateur du Designer, ouvrez le composant Global Styles, puis l’Embed qui se trouve à l’intérieur pour accéder aux styles globaux de Client-First.

• Dés qu’il est ouvert, remontez au début de l’Embed jusqu’aux styles qui améliorent la lisibilité.

• Enfin, ajoutez simplement la ligne suivante à l’élément Body (comme sur l’image).

text-underline-offset: .25em;

Si vous créez un projet de zéro et n’utilisez pas le clonable de Client-First :

• Ouvrez les paramètres du site et rendez-vous dans l’onglet Custom Code.
• Copiez-collez le code suivant dans le header :

<style>
body {text-underline-offset: .25em;}
</style>

Vous pouvez aussi, de façon similaire à la configuration Client-First, créer un Embed global dans lequel ajouter ce code personnalisé pour que les styles soient visibles dans le Designer (en ajoutant du CSS dans le code personnalisé des paramètres de la page ou du site, les changements ne seront pas visibles dans le Designer).

Enfin, après avoir ajouté la ligne de code et éventuellement ajusté la valeur, assurez-vous de republier votre site. C'est aussi simple que ça !

Conclusion

Félicitations ! Vous avez maintenant une nouvelle astuce simple mais très pratique dans votre boîte à outils Webflow.

Chaque petit détail compte pour créer une expérience utilisateur exceptionnelle : l'ajustement du soulignement ne fait pas exception en contribuant à rendre les textes de vos sites web plus esthétiques et plus lisibles.

Pour aller plus loin, aller lire nos derniers articles :

• Rentrée Digidop 2023 : accomplissements, évolutions et perspectives
• Découvrez le nouveau Webflow Apps (+7 Apps à utiliser pour vos prochains projets)
• Comment créer un défilement infini (infinite marquee) de logos dans Webflow

…ou découvrez notre chaîne YouTube !