Estilos Tipografía
Tipografía
La tipografía organiza la lectura. Material 3 define 15 estilos en cinco grupos (display, headline, title, body y label), cada uno en tamaño grande, mediano y pequeño.
Páginas WebUnidad 3: Diseño responsiveEl texto principal de una página se lee cómodo a 16 px con 24 px de interlineado.INSCRIBIRME
Escala tipográfica
Asignatura
Páginas Web
Semestre 2026-2
Unidad 3: Diseño responsive
Sliders y botones
Taller práctico
Office avanzado
Entrega del taller 3
Notas parciales
El texto principal de una página se lee cómodo a este tamaño.
Texto de apoyo en tarjetas, listas y diálogos.
Notas al pie y textos secundarios.
Inscribirme
Etiqueta de chip
INSIGNIA
Tamaño / interlineado en sp (en web, px). Valores de referencia de Material 3 con la fuente Roboto.
Los 5 grupos
| Grupo | Para qué | Equivalente en HTML |
|---|---|---|
| Display | Textos cortos y muy grandes: portadas, números destacados | Portadas, cifras |
| Headline | Títulos de pantalla o sección | h1, h2 |
| Title | Títulos de tarjetas, diálogos y listas | h3, h4 |
| Body | Texto de lectura | p, li |
| Label | Texto dentro de componentes: botones, chips, pestañas | button, label |
Lectura cómoda
- Líneas de 40 a 70 caracteres en el texto de lectura (aquí se usa
max-width: 65ch). - Interlineado de 1,4 a 1,6 veces el tamaño en el cuerpo de texto.
- Pocas fuentes: una para todo, o una para títulos y otra para lectura.
- Mayúsculas solo en textos muy cortos: se leen más lento.
En CSS
:root {
--md-sys-typescale-headline-medium: 400 28px/36px "Roboto", sans-serif;
--md-sys-typescale-title-medium: 500 16px/24px "Roboto", sans-serif;
--md-sys-typescale-body-large: 400 16px/24px "Roboto", sans-serif;
--md-sys-typescale-label-large: 500 14px/20px "Roboto", sans-serif;
}
h2 { font: var(--md-sys-typescale-headline-medium); }
p { font: var(--md-sys-typescale-body-large); max-width: 65ch; }
button { font: var(--md-sys-typescale-label-large); }
/* Tamaño fluido con clamp: mínimo, ideal, máximo */
h1 { font-size: clamp(2rem, 5vw, 3.5rem); }Accesibilidad
Usa rem
Si el usuario agranda la letra del navegador, rem la respeta; px fijos no tanto.
Contraste
4,5:1 para texto normal; 3:1 desde 24 px (o 19 px en negrita).
Encabezados en orden
h1, h2, h3 en orden lógico, sin saltos, aunque el tamaño visual sea otro.