tipografía Sistema de diseño

Cree jerarquías de contenido claras en todos los tamaños.

8 comprobaciones · 3 grupos de contenido

Contenido de la lista

Progreso de la revisión

Estructura y significado

Comparar información y presentación en contexto de uso.

Utilice una escala de tamaño de fuente consistenteDefina niveles desde el título hasta el título y evite agregar nuevos tamaños para cada pantalla.Reemplace títulos con contenido más extenso y aumente el tamaño de fuente en los dispositivos. Mantenga la jerarquía, los acentos vietnamitas, el interlineado y las acciones relacionadas fáciles de leer sin cortar el contenido.Ejemplo La tarjeta tiene un título de dos líneas, una descripción y un botón para abrir; Cuando las letras son más grandes, la etiqueta aumenta de altura en lugar de cubrir el botón o cortar la marca vietnamita.Establecer estilo por rolDistinga títulos, contenido, etiquetas y subtítulos para elegir estilos según el significado.Un tipo de letra debe tener un nombre que desempeñe el mismo papel que el cuerpo o la etiqueta; Los cambios de roles deben actualizarse sincrónicamente en lugar de editar cada pantalla.Compruebe las fuentes y acentos vietnamitasElija el peso a usar, haga una copia de seguridad de la fuente y verifique el texto acentuado cuando falle la descarga de la fuente.Verifique la longitud de las letras, los acentos vietnamitas y el peso realmente cargado; Las fuentes de respaldo deben tener un tamaño similar para evitar saltos en el diseño.

Interacción y usabilidad

Pruebe la operación, cambie el estado y continúe trabajando.

Ajustar el espaciado entre letrasEstablezca la altura de línea y el espaciado entre caracteres adecuados para títulos y lecturas largas.Pruebe con un párrafo de varias líneas, no solo con una oración de muestra. Las líneas demasiado apretadas dificultan la lectura y el espaciado amplio entre letras puede destruir palabras y puntuación en tamaños pequeños.Mantenga el texto legible al escalarVerifique que la pantalla sea estrecha y que el nivel de zoom sea del 200 % para evitar que el texto se corte o se superponga contenido.Al aumentar el tamaño de la fuente o el zoom, los botones y etiquetas deben estirarse según el contenido; Evite alturas fijas que corten la segunda línea.Mantenga el contenido lo suficientemente contrastanteAsegúrese de que el texto pequeño siga siendo fácil de leer y no utilice el color como único indicador de significado.Verifique también el estado deshabilitado del subtexto, el marcador de posición y la luz/oscuridad; Las letras pequeñas sobre fondos de colores suelen pasar desapercibidas.

Completa la experiencia

Busque detalles que sean fáciles de pasar por alto al poner en uso el diseño.

Definir tamaños mínimos de texto por rolDocumente los mínimos legibles para el cuerpo del texto, las etiquetas y los subtítulos, y explique cuándo se necesita un estilo más grande en lugar de reducir el texto para que quepa.Pruebe con el tamaño de pantalla real del dispositivo; El texto en una imagen de vista previa ampliada puede ocultar problemas de legibilidad en tamaño completo.Definir una escala de tipo responsivaDocumente cómo cambian los encabezados y el cuerpo del texto en los anchos de las ventanas gráficas, preservando al mismo tiempo la jerarquía y evitando cambios abruptos de tamaño.Si utiliza tamaños de fuente flexibles, establezca límites mínimos y máximos; Verifique que la etiqueta larga no esté reducida para mantener solo una línea.

El progreso se guarda automáticamente en este navegador.

GUÍA

Cómo revisar

Verifique la jerarquía cuando el texto sea largo y ampliado

Reemplace títulos con contenido más extenso y aumente el tamaño de fuente en los dispositivos. Mantenga la jerarquía, los acentos vietnamitas, el interlineado y las acciones relacionadas fáciles de leer sin cortar el contenido.

EJEMPLOS

Ejemplos de uso

Título largo en una etiqueta

La tarjeta tiene un título de dos líneas, una descripción y un botón para abrir; Cuando las letras son más grandes, la etiqueta aumenta de altura en lugar de cubrir el botón o cortar la marca vietnamita.