Microtexte

Texte

L’apparence peut légèrement différer de la version réelle.

Point clé : définit le texte auxiliaire affiché dans la zone supérieure interne du bouton. Convient pour une catégorisation ou un sous-titre du texte principal.

Impact : permet de donner une hiérarchie d’information à l’intérieur même du bouton.

Conseil : gardez une taille et une opacité plus faibles que le texte principal pour ne pas lui voler la vedette.

Paramètres

• Micro-texte (2 lignes max) : complète brièvement le texte principal pour accélérer la compréhension.

Le micro text s’affiche à l’intérieur du bouton, zone supérieure (au-dessus du texte principal). Il diffère du « micro copy » qui s’affiche à l’extérieur, au-dessus du bouton. Si le texte est vide, la zone micro text n’est pas rendue. Convient aux étiquettes courtes ou aux noms de catégorie.

Pas de survol : le micro text ne dispose pas de réglages au survol. Les effets de survol sont contrôlés au niveau du bouton lui-même (style, arrière-plan, icône, etc.).

Couleur

L’apparence peut légèrement différer de la version réelle.

Point clé : définit la couleur de base. C’est le fondement de la structure en couches.

Impact : le rendu final dépend de la combinaison avec l’overlay et la couleur du texte.

Conseil : privilégiez une couleur lisible en combinaison texte/fond, plutôt qu’une couleur tape-à-l’œil isolée.

Paramètres

• Couleur du texte + Alpha : couleur et opacité du texte. Réglez un contraste plus faible que le texte principal pour marquer la hiérarchie.

Police

L’apparence peut légèrement différer de la version réelle.

Point clé : définit la police du micro text. Assure la lisibilité d’un petit texte auxiliaire.

Impact : la combinaison taille/graisse/interligne détermine la lisibilité et l’équilibre avec le texte principal.

Conseil : définissez d’abord Font Size et Line Height, puis ajustez Weight et Letter Spacing en dernier.

Paramètres

• Font Family : police. Alignez-la sur la police du corps de texte pour conserver l’unité visuelle.
• Font Weight : graisse. Plus légère que le texte principal pour marquer son rôle de complément.
• Font Size : taille. Partez de la taille minimale lisible sur mobile pour définir le point de départ.
• Line Height : interligne. Garantit la lisibilité en cas de passage à 2 lignes.
• Letter Spacing : espacement. Ajustez finement pour réduire l’impression de texte tassé.

Ombre de texte

L’apparence peut légèrement différer de la version réelle.

Point clé : définit l’ombre portée du texte. Utile pour améliorer la lisibilité sur une image de fond.

Impact : l’intensité de l’ombre modifie l’équilibre entre visibilité et aspect décoratif.

Conseil : commencez avec un Blur faible et un Alpha bas, puis augmentez progressivement selon le besoin.

Paramètres

• Couleur + Alpha : couleur et opacité de l’ombre. Aide à compenser un manque de contraste avec le fond.
• Blur : flou. Une valeur trop élevée rend les contours du texte flous.
• Horizontal : décalage horizontal. Des valeurs extrêmes nuisent à la lisibilité.
• Vertical : décalage vertical. Un léger décalage vers le bas donne un résultat naturel.

Layout

L’apparence peut légèrement différer de la version réelle.

Point clé : définit la position et les marges du micro text. La distance avec le texte principal contrôle l’ordre de lecture.

Impact : des marges correctes permettent de lire les informations de manière progressive, même dans un bouton étroit.

Conseil : réglez d’abord le Margin (distance extérieure), puis ajoutez Padding et Rotation uniquement si nécessaire.

Paramètres

• Margin : marge extérieure. Crée la distance avec le texte principal et guide le regard.
• Padding : marge intérieure. Empêche le texte de paraître tassé lorsque le style comporte un fond.
• Transform > Rotation (deg) : rotation. Réservez à un usage décoratif avec un angle très modéré. Valeur par défaut : 0.

Les réglages du micro text sont responsive. Vérifiez que la taille de police et les marges restent adaptées sur mobile, pour que le texte tienne dans le bouton.

Différence avec le micro copy : le micro text ne dispose pas de presets de style, bordure, rayon ni de couleur de fond/dégradé (réservés au micro copy). Les paramètres disponibles sont : texte, couleur du texte, police, ombre de texte et layout (marge, padding, rotation). Si vous avez besoin d’un texte auxiliaire avec décoration, utilisez le « micro copy » positionné à l’extérieur du bouton.