Iconografía

Dos tipos de icono. Las acciones de la interfaz usan iconos de línea ligeros con el estilo Feather; los enlaces de marca y sociales usan marcas sólidas. Ambos toman su color del texto que los rodea.

Iconos de línea

Los iconos de la interfaz se dibujan sobre una rejilla de 24 unidades con un trazo de dos píxeles, extremos redondeados y uniones redondeadas, con el estilo Feather. Se renderizan de 15 a 20 píxeles dentro de un área de pulsación de al menos 38 y nunca llevan su propio color: heredan currentColor del texto.

El repertorio completo de trabajo: cada glifo de línea que dibujan el sitio y esta documentación, a tamaño de muestra. Todos con la misma gramática Feather de 24 unidades y trazo de 2.
Buscar
Atrás
Chevrón
Descargar
RSS
Visto
Cerrar
Idioma
Tema oscuro
Tema claro
Pausa
Reproducir
Ampliar
Tiempo de lectura
Compartir
Copiar enlace
Volver arriba
Anterior
Siguiente
Plegar
Suscrito
Fechas
Rol
Llamada
Newsletter
Color
Tipografía
Maquetación
Forma
Iconografía
Movimiento
Redacción
Traducción
Accesibilidad
Sobrio
Editorial
Técnico
Área de toque · 44 × 44px Glifo · 20px Padding · 12px
El área de toque, anotada: un glifo de 20px centrado en un cuadrado de 44px: el anillo rayado es el padding pulsable.

Logotipos de marca

Los iconos sociales y de marca son marcas sólidas de un solo color en vez de dibujos de línea, para que un logotipo reconocible siga siéndolo. Viven en el pie de página y heredan el mismo currentColor, poniéndose verdes al pasar el cursor. Este es el componente real, renderizado aquí a partir de la misma fuente que usa el pie de página.

Las marcas sociales reales.

Reglas

Hazlo

Deja que los iconos tomen currentColor, para que sigan el tema y el texto que los rodea.

No lo hagas

Fijar a mano el color de un icono. Debería seguir al texto.

Hazlo

Mantén un área de pulsación de 44 píxeles aunque el glifo mida 16 píxeles.

No lo hagas

Reducir el área táctil al tamaño del dibujo.

Hazlo

Usa iconos de línea para las acciones y marcas sólidas para las marcas.

No lo hagas

Mezclar estilos de trazo y de relleno dentro del conjunto de la interfaz.
¿Has visto algo mal en esta página? Escríbeme