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](https://developers.google.cn/cars/design/android-auto/design-system/images/type-scale2.png?authuser=8&hl=fr)
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](https://developers.google.cn/cars/design/android-auto/design-system/images/4dp-grid.png?authuser=8&hl=fr)
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](https://developers.google.cn/cars/design/android-auto/design-system/images/type-families.png?authuser=8&hl=fr)
Exemples
![](https://developers.google.cn/cars/design/android-auto/design-system/images/typography-do1.png?authuser=8&hl=fr)
À 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.![](https://developers.google.cn/cars/design/android-auto/design-system/images/typography-dont1.png?authuser=8&hl=fr)
À é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.
![](https://developers.google.cn/cars/design/android-auto/design-system/images/type-style.png?authuser=8&hl=fr)
Exemples
![Tailles de texte dans la typographie](https://developers.google.cn/cars/design/android-auto/design-system/images/scale-example-1.png?authuser=8&hl=fr)
b. Corps 2
c. Corps 1
![Tailles de texte dans la typographie](https://developers.google.cn/cars/design/android-auto/design-system/images/scale-example-2.png?authuser=8&hl=fr)
b. Écran 3
c. Corps 2
![La typographie à faire](https://developers.google.cn/cars/design/android-auto/design-system/images/typography-do2.png?authuser=8&hl=fr)
À 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](https://developers.google.cn/cars/design/android-auto/design-system/images/typography-dont2.png?authuser=8&hl=fr)
À é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.