Sous-texte

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 inférieure interne du bouton. Utile pour les conditions courtes ou les compléments d’information.

Impact : clarifie le sens du texte principal et réduit l’écart entre attente et résultat après le clic.

Conseil : le passage à 2 lignes est fréquent sur mobile ; vérifiez toujours le retour à la ligne et l’interligne en vue smartphone.

Paramètres

• Sous-texte (2 lignes max) : précise les conditions ou compléments du texte principal pour aligner l’attente avant le clic.

Le sub text s’affiche à l’intérieur du bouton, zone inférieure (sous le texte principal). Il diffère du « sub copy » qui s’affiche à l’extérieur, sous le bouton. Si le texte est vide, la zone sub text n’est pas rendue. Convient pour les informations de prix ou les mentions courtes comme « Essai gratuit ».

Pas de survol : le sub 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. Légèrement 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 sub text. Assure la lisibilité tout en restant plus discret que le texte principal.

Impact : l’optimisation de la taille et de l’interligne évite l’impression d’écrasement à l’intérieur du bouton.

Conseil : partez du rendu sur mobile en 2 lignes, puis ajustez l’apparence principalement pour le bureau.

Paramètres

• Font Family : police. Alignez-la sur le design global du site.
• Font Weight : graisse. Plus légère que le texte principal par défaut ; augmentez uniquement si nécessaire.
• Font Size : taille. Ne descendez pas en dessous du seuil de lisibilité ; la lisibilité prime.
• Line Height : interligne. Ajuste la lisibilité et l’impression de densité sur 2 lignes.
• Letter Spacing : espacement. Ajustez finement pour améliorer la lisibilité.

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. Compense un manque de contraste avec le fond.
• Blur : flou. Une valeur trop élevée produit un effet de bavure ; restez modéré.
• Horizontal : décalage horizontal. Un effet décoratif trop marqué nuit à la lisibilité ; restez discret.
• 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 les marges et la position du sub text. Ajuste la distance avec le texte principal.

Impact : des marges bien calibrées améliorent le regroupement des informations et réduisent le risque de lecture en diagonale.

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

Paramètres

• Margin : marge extérieure. Ajuste l’espacement avec le texte principal pour clarifier l’ordre des informations.
• Padding : marge intérieure. Garantit la lisibilité lorsqu’un fond est appliqué.
• Transform > Rotation (deg) : rotation. Évitez les effets marqués ; un angle très léger suffit pour un accent. Valeur par défaut : 0.

Les réglages du sub text sont responsive. Vérifiez que la taille de police et les marges restent adaptées sur mobile. Si vous utilisez micro text et sub text simultanément, le contenu intérieur du bouton augmente ; prévoyez un padding suffisant.

Différence avec le micro copy : le sub 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 » (et non le « sub copy ») positionné à l’extérieur du bouton.