Guide pour concevoir de meilleures applications mobiles avec la typographie

Ce n'est un secret pour personne : les applications mobiles sont souvent utilisées en déplacement. Ajoutez à cela les limitations liées à la taille de l'écran, aux reflets du soleil, aux différents handicaps visuels des utilisateurs et à la qualité d'écran parfois insuffisante des smartphones, et vous obtenez la première règle de base concernant la taille minimale du corps du texte.

Apple recommande dans ses directives d'interface utilisateur de définir la taille minimale du texte du corps à 17 pt.

Dans les directives de conception matérielle de Google, il est recommandé de définir la taille minimale du texte du corps à 16 sp (équivalent à 16 pt dans iOS).

Il est important de noter que les recommandations des systèmes sont basées sur leurs polices par défaut. Il s'agit actuellement de la police Roboto pour Android et des polices San Francisco et New York pour iOS. La taille minimale des autres polices peut varier selon leurs caractéristiques. Par exemple, les polices aux traits très fins nécessitent une taille plus grande pour le corps du texte.

De plus, les normes WCAG 2.0 recommandent de respecter la taille de police minimale de 18 pt et 14 pt pour le texte en gras.

Les petites légendes peuvent faire exception. Cependant, si l'utilisateur ne peut pas les lire, cela ne devrait pas affecter gravement la compréhension de l'interface.

Recommandations

N'utilisez pas une taille de police inférieure à 16 pt pour le corps du texte de votre application. Une taille de police idéale se situe entre 16 et 18 pt.

🤓 Conseil de pro

Pour rendre la typographie de votre application plus accessible sur iOS, vous pouvez appliquer des tailles de police dynamiques. Grâce à cette technologie, les utilisateurs qui ont défini une taille de police plus grande ou plus petite dans les paramètres système pourront voir l'interface de votre application en fonction de ces paramètres.

Taille du titre

Ces dernières années, l'utilisation de grands titres en typographie numérique est devenue très populaire. Ils contrastent avec le texte principal et deviennent des éléments d'ancrage sur la page.

Soyez toutefois très prudent lorsque vous utilisez des en-têtes volumineux dans les applications mobiles. Souvent, l'utilisation d'une taille importante pour les titres dans les applications mobiles entraîne un allongement du titre sur trois ou quatre lignes, contenant un ou deux mots par ligne. Ces en-têtes sont désordonnés et difficiles à lire.

Recommandations

Choisissez une taille de titre contrastant avec le corps du texte et tenant en ne sur 2 à 3 lignes.

Dans certains cas, vous pouvez utiliser un titre en forme de sourcil pour raccourcir votre en-tête.

Contraste

Parmi les particularités de l'utilisation des applications mobiles, le rapport de contraste de l'arrière-plan et du texte est un paramètre très important.

Recommandations

• Suivez les normes de contraste WCAG 2.0
• Assurez-vous que le texte que vous placez sur les images a un contraste suffisant
• Proposer deux options pour placer du texte sur un fond clair et un fond foncé

Utilisez le plugin Stark (ou d'autres plugins similaires) pour Sketch, Adobe XD et Figma ou des outils de test de contraste en ligne pour vérifier le contraste de votre texte.

Polices système

Actuellement, sur iOS, vous pouvez utiliser deux polices système : San Francisco et New York. La police Roboto est également une police système pour Android.

Les polices système rendront le design de votre application plus cohérent avec celui du système d'exploitation. Cependant, leur utilisation exclusive vous empêchera d'obtenir un style unique.

Recommandations

La méthode la plus simple et la plus courante pour ajouter des accents et une touche typographique unique à votre application mobile consiste à utiliser une police système pour le corps du texte et les différents contrôles, et une police différente de celle par défaut pour les titres. Cette combinaison sera toujours intéressante et originale.

Vous pouvez consulter l’un de ces sites ci-dessous pour voir des paires de polices intéressantes ou consulter nos articles sur les associations de polices.

Typewolf.com
fontinuse.com
Nos associations de polices gratuites Vol. 1 , Vol. 2 et Vol. 3

🤓 Conseil de pro

Notez que les polices système Apple ne sont utilisables que dans les produits de l'écosystème Apple (iOS, macOS, etc.). La police Roboto de Google, quant à elle, est compatible avec tous les systèmes d'exploitation. Gardez cela à l'esprit lors de la conception d'une application pour les deux plateformes.

Ligne de base

On observe souvent une situation typique. En raison des différences de rendu du texte entre les outils de conception et les systèmes d'exploitation mobiles, les marges entre les blocs de texte et les autres éléments de l'interface peuvent différer visuellement.

Pour éviter cela, vous pouvez considérer toutes les marges par rapport à la ligne de base. Cette approche optimisera l'adéquation entre vos mises en page et leur implémentation dans l'application.

*Android ne dispose actuellement pas de méthodes de prise en charge complètes pour les espacements de base

Recommandations

Il est fort probable que l'utilisation de la ligne de base pour tous les éléments textuels de votre interface soit complexe et coûteuse à développer. Je recommande donc cette approche pour les éléments où la précision est particulièrement importante.

Espaces et marges

Les appareils mobiles ont une taille d'écran très limitée, vous souhaiterez donc insérer autant de texte que possible dans un seul écran visible.

Pour ce faire, il n'est pas nécessaire de sacrifier les espaces en réduisant les marges entre les blocs de texte. Cela briserait la hiérarchie entre les différents styles et blocs de texte et rendrait le texte plus difficile à lire.

Recommandations

Composez la mise en page de manière à ce qu'une partie du contenu soit au-dessus du pli, montrant ainsi à l'utilisateur qu'il y a plus de contenu et l'encourageant à faire défiler.

« Apprenez les règles comme un pro, pour pouvoir les briser comme un artiste »

— Pablo Picasso