Empieza con Escala tipográfica
- Elige el tamaño base y la razón.
- Copia las variables CSS.
Resultado de ejemplo
Datos de referencia:
- Tamaño base: 16 px
- Razón: 1,25 Tercera mayor
- Interlineado: 1,5
Resultado:
| Nombre | px | rem | Interlineado |
|---|---|---|---|
| xs | 10,2 | 0,64 | 15,4 px |
| sm | 12,8 | 0,8 | 19,2 px |
| base | 16 | 1 | 24 px |
| lg | 20 | 1,25 | 30 px |
| xl | 25 | 1,563 | 37,5 px |
| 2xl | 31,3 | 1,953 | 46,9 px |
| 3xl | 39,1 | 2,441 | 58,6 px |
| 4xl | 48,8 | 3,052 | 73,2 px |
| 5xl | 61 | 3,815 | 91,6 px |
CSS:
:root {
--text-xs: 0.64rem;
--text-sm: 0.8rem;
--text-base: 1rem;
--text-lg: 1.25rem;
--text-xl: 1.563rem;
--text-2xl: 1.953rem;
--text-3xl: 2.441rem;
--text-4xl: 3.052rem;
--text-5xl: 3.815rem;
}Información útil
- ¿Qué razón uso?
- 1,2 (tercera menor) para interfaces; 1,25-1,333 para contenido; 1,5-1,618 para titulares muy marcados.