Typographie

La typographie, ou stylisation du texte, est utilisée pour exprimer la hiérarchie du texte et son fonctionnement dans une UI. La typographie utilisée pour l'environnement de conduite doit donner la priorité à la lisibilité.

En bref:

  • Utiliser l'affichage, le corps et le sous-texte de l'échelle typographique d'Android Auto
  • La taille minimale du corps du texte est de 24 dp. Réservez la taille du sous-texte aux informations non cruciales.
  • Utiliser une grille de 4 dp pour l'alignement
  • Appliquer des attributs de style pour créer des effets (soutenir la hiérarchie, attirer l'attention)
  • Utilisez avec parcimonie l'épaisseur de police moyenne et évitez le gras

Références de mise à l'échelle et de grille

L'échelle typographique et la grille de composition d'Android Auto offrent un ensemble cohérent et lisible de styles de texte pour toute une gamme de tailles de texte d'affichage, de corps du texte et de sous-texte.

Échelle typographique Android Auto

L'échelle de type propose neuf styles pour le texte d'affichage, le corps du texte et le sous-texte, chacun avec une police, une taille de police et une hauteur de ligne spécifiques.

Bien que la plus petite taille du corps du texte pour Android Auto soit de 24 dp, les tailles de type de sous-texte inférieures à 24 dp peuvent être utilisées avec parcimonie. Comme cette taille de sous-texte n'est pas facilement lisible en un coup d'œil, il doit être réservé aux informations non cruciales, comme le contenu de la barre d'état.

Échelle de type
Dans cette échelle, les informations sur la police sont écrites au format suivant: (Nom de la police) (Taille du type) / (Hauteur de ligne). Les valeurs de taille du type et de hauteur de ligne sont indiquées en points (pt).

Grille de composition et référence de référence

Tous les styles de type sont affichés sur la grille de 4 dp. Cette grille garantit que le texte est mis à l'échelle de manière uniforme et espacé verticalement, créant ainsi une hiérarchie visuelle cohérente basée sur des incréments de 4 dp.

mise à l'échelle sur une grille de 4 dp
L'échelle Android Auto est conçue pour prendre en charge des incréments de taille de police de 4 dp.

Conseils et exemples

Appliquer une échelle et un style cohérents au texte de votre UI peut aider à:

  • Veillez à ce que tout le texte soit lisible.
  • Transmettre une hiérarchie visuelle entre les éléments de texte
  • Concentrer l'attention aux endroits les plus importants

Les conseils suivants montrent comment appliquer l'échelle et les styles Android Auto de manière appropriée.

Application de l'échelle

Pour les polices de 32 dp et plus, utilisez Google Sans. Roboto est utilisé partout ailleurs car il est lisible dans des tailles plus petites.

Familles de types
Cet exemple illustre les utilisations appropriées de Google Sans et de Roboto à différents niveaux de l'échelle typique.

Exemples

À faire

Si vous utilisez une police d'affichage plus adaptée au texte de grande taille, telle que Google Sans, utilisez des tailles de police d'au moins 32 dp. Utilisez Roboto pour un texte secondaire plus petit, car il offre une bonne lisibilité à des tailles inférieures à 32 dp.

À éviter

N'utilisez pas Google Sans pour des textes de petite taille dans lesquels sa lisibilité n'est pas optimale.

Application du style...

Chaque style typographique se compose d'un ensemble d'échelles et d'attributs, tels que la couleur, l'opacité et l'épaisseur de la police. Ces attributs peuvent être ajoutés à n'importe quel style de type pour créer un effet, que l'objectif soit de concentrer l'attention ou de réduire l'accentuation.

Dans cet exemple, le style de titre est constitué de l'échelle du corps 1 (qui définit la taille de la police et la hauteur de la ligne) modifiée par des attributs supplémentaires de couleur, d'opacité et d'épaisseur.

Exemples

Tailles de texte dans la typographie
a. Corps 3
b. Corps 2
c. Corps 1
Tailles de texte dans la typographie
a. Corps 2
b. Écran 3
c. Corps 2
La typographie à faire

À faire

Utilisez l'épaisseur de police moyenne avec parcimonie. Enregistrez-le pour l'utiliser lorsque vous devez mettre en valeur le texte principal ou actif, comme l'onglet "Récents" dans cet exemple, ou pour établir une hiérarchie visuelle.
La typographie ne fonctionne pas

À éviter

L'épaisseur de police en gras (appliquée à tout le texte de cet exemple) est moins lisible que l'épaisseur moyenne et doit être évitée.