Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
El estilo tipográfico ayuda a definir la jerarquía de información y la función de una IU. Las opciones de tipografía también pueden afectar en gran medida la legibilidad, lo cual es una consideración importante para la conducción.
Orientación de un vistazo (TL:DR):
Usa la pantalla, el cuerpo y el subtexto de la escala tipográfica del SO Android Automotive
El tamaño mínimo del texto del cuerpo es de 24 dp; reserva los tamaños de los subtextos para obtener información no crucial
Usa una cuadrícula de 4 dp para la alineación
Aplicar atributos de estilo para crear efectos (jerarquía de compatibilidad, enfoque de atención)
Usa grosores de fuente medianos con moderación y evita las negritas.
Referencias de escala y cuadrícula
Usa la escala tipográfica y la cuadrícula tipográfica del SO Android Automotive para garantizar una apariencia coherente y un texto fácil de ver en una variedad de niveles para el texto de visualización, el texto del cuerpo y el subtexto.
Escala tipográfica del SO Android Automotive
Esta escala muestra las fuentes, los tamaños de fuente y las alturas de línea que se usan para los nueve niveles predeterminados de texto de visualización, texto del cuerpo y subtexto que se usan en el SO Android Automotive.
El tamaño mínimo de tipo para el SO Android Automotive es de 24 dp. Los tamaños inferiores a 24 dp no se pueden ver fácilmente y deben usarse con moderación en el contexto automático. El tamaño del subtexto se reserva mejor para información no crucial o terciaria, como el contenido de la barra de estado.
El formato de la información de la fuente en esta escala es (Nombre de la fuente) (Tamaño de tipo) / (Altura de línea). Los valores para el tamaño del tipo y la altura de línea se muestran en puntos (pt).
Referencia de referencia y cuadrícula de tipografía
Mantener la escala y el ritmo vertical en función de una cuadrícula de 4 dp ayuda con la coherencia y la jerarquía visual.
La escala del SO Android Automotive está diseñada para admitir incrementos de tamaño de fuente de 4 dp.
Orientación y ejemplos
Aplicar la escala y el estilo a tus opciones tipográficas puede ayudarte a:
Mantén todo el texto legible
Demostrar una jerarquía visual entre los elementos de texto
Concentra la atención en los puntos más importantes
Cada estilo consiste en un conjunto de valores definidos por la escala y los atributos adicionales. Estos atributos incluyen valores de grosor de fuente, color y opacidad, y se pueden agregar a cualquier tamaño de tipo para crear el efecto deseado, como enfocar la atención.
En este ejemplo, el estilo Título consiste en la escala de Cuerpo 1 (que define el tamaño de la fuente y la altura de línea) modificada por atributos adicionales de color, opacidad y grosor.
Ejemplos
a. Cuerpo 3
b. Cuerpo 2
c. Cuerpo 1
a. Texto 2
b. Cuerpo 1
c. Cuerpo 1
Qué
hacer
Usa el grosor de la fuente media con moderación. Guárdala para cuando necesites enfatizar el texto principal o activo, como la pestaña Recientes en este ejemplo, o para establecer una jerarquía visual.
Qué no debes hacer
Los grosores de la fuente en negrita (que se aplican a todo el texto en este ejemplo) son menos legibles que los medianos y deben evitarse.
[[["Fácil de comprender","easyToUnderstand","thumb-up"],["Resolvió mi problema","solvedMyProblem","thumb-up"],["Otro","otherUp","thumb-up"]],[["Falta la información que necesito","missingTheInformationINeed","thumb-down"],["Muy complicado o demasiados pasos","tooComplicatedTooManySteps","thumb-down"],["Desactualizado","outOfDate","thumb-down"],["Problema de traducción","translationIssue","thumb-down"],["Problema con las muestras o los códigos","samplesCodeIssue","thumb-down"],["Otro","otherDown","thumb-down"]],["Última actualización: 2024-07-23 (UTC)"],[[["Utilize the Android Automotive OS typographic scale for display, body, and subtext to ensure glanceability and consistency."],["Maintain a minimum body text size of 24dp for legibility, reserving smaller sizes for non-crucial information."],["Adhere to a 4-dp grid for alignment and visual hierarchy within the UI."],["Apply style attributes like font weight and color to emphasize important elements and create visual focus."],["Use medium font weights carefully for highlighting primary content and avoid bold weights for improved legibility."]]],[]]