Guía de estilo/Tipografía
Jerarquía de tipos
La jerarquía se establece a través del tamaño, el peso y el espaciado, no a través de múltiples fuentes. Un sistema. Una voz.
Los titulares lideran. El texto de apoyo explica. Los metadatos permanecen en silencio.
Título H1
- Altura de línea: 1.1x
- Cuaderno de texto: sin ajuste
- Uso: Secciones de encabezado de pantalla completa (es decir. Portafolio (páginas)
Estándar H1
- Altura de línea: 1x
- Cuaderno de texto: sin ajuste
- Uso: Secciones mínimas de cabecera (es decir. Guía de estilo, CV, etc.)
Título estándar H2
- Altura de línea: 1.1x
- Cuaderno de texto: sin ajuste
- Uso: Por lo general, esto se usa en los componentes “Título” (excepto las versiones extra grandes)
Otros títulos encabezados H2
- Espaciado entre letras: estándar
- Altura de línea: 1x
- Cuaderno de texto: sin ajuste
- Uso: Se utiliza en el componente Título de obras y en el componente título utilizado en las páginas Portafolio.
Estándar h3
- Distancia entre letras: 0.01em
- Altura de línea: 1.3x
- Texto de la indentación: 0.01em
- Uso: Esto no se usa mucho en un sentido tradicional. Idealmente, esto se usa en componentes jerárquicos como encabezados de lista o títulos de tarjetas.
Familias de fuentes y maridajes
Utilice únicamente la fuente primaria aprobada. El emparejamiento se logra a través del peso y la escala, no los cambios de fuente.
Múltiples fuentes introducen ruido y reducen la cohesión.
Títulos
Familia de fuentes: Playfair Display
Letras: aabbccddeeffgghhiIJjkkllMMnnooppqrrssttuUvwWxxyyZz
Números: 1234567890
Pesa: Atrevida, Demi-audaz
Alturas de línea: 1x—1.3x
Cuerpo
Familia tipográfica: Titillium Web
Letras: aabbccddeeffgghhiIJjkkllMMnnooppqrrssttuUvwWxxyyZz
Números: 1234567890
Pesa: Atrevida, Demi-audaz
Alturas de línea: 1.4x—1.5x
Uso por contexto
Las cabeceras establecen la estructura. En los párrafos se comunica sustancia. Soporte de subtítulos, nunca compitas.
Cada estilo de texto tiene un trabajo. No reutilice estilos casualmente.
Escalado receptivo
Cada estilo de texto tiene un trabajo. No reutilice estilos casualmente.
La tipografía debe escalar fluidamente a través de los puntos de interrupción. Sin saltos bruscos. No se ignoran casos extremos.
| Tamaño de fuente base | Punto de ruptura | Ejemplo |
|---|---|---|
| 16px | ≥ 1920px | Este es un ejemplo del tamaño del texto base |
| 14px | < 1920px ≥ 1440px | Este es un ejemplo del tamaño del texto base |
| 1vw | < 1440px ≥ 992px | Este es un ejemplo del tamaño del texto base |
| 12px | < 992px ≥ 768px | Este es un ejemplo del tamaño del texto base |
| 11px | < 768px | Este es un ejemplo del tamaño del texto base |
Estándares de legibilidad
Si el texto se rompe en un dispositivo, el sistema está roto.
La legibilidad siempre vence a la estética. La longitud de línea, el espaciado y el contraste deben ser compatibles con la lectura sin esfuerzo.
Si requiere esfuerzo, falla.
- El tamaño del cuerpo del texto fluctúa entre 16px y 11px en el punto de rotura más bajo. (ver más arriba para más detalles)
- Las alturas de línea también se ajustan según el propósito del elemento. Por ejemplo, la mayoría de los títulos o encabezados operan con una altura de línea de 1x a 1.1x, mientras que la mayoría de las copias corporales operan en el rango de 1.3x a 1.5x.