Marc Semper Lloret
← CSS: diseño, maquetación y responsive

Sesión 5 · Semana 2

Unidades, colores y tipografía

Hoy · Hoja de ruta

  1. 1. Aprende: Respecto a qué se calcula cada unidad, cómo se escriben los colores y qué hace legible un texto.
  2. 2. Haz: Define el sistema visual mínimo de tu proyecto.
  3. 3. Comprueba: El sitio es coherente entre sus cuatro páginas.

Antes de empezar · 5 minutos, sin apuntes

  1. Nombra las cuatro capas del box model de dentro hacia fuera.
  2. ¿Qué cambia box-sizing: border-box?
  3. Una caja de 300px tiene padding: 20px y dos bordes de 2px: calcula su anchura con el modelo inicial.

No todo se mide en píxeles

Unidad Se calcula respecto a Para qué la usamos
px Nada, es absoluta Bordes y detalles que no deben escalar
rem El tamaño de fuente raíz del documento Tamaños de texto y espaciados
em El tamaño de fuente del propio elemento Espacios que deben crecer con su texto
% Una medida del contenedor, según la propiedad Anchuras fluidas
vw / vh El ancho y el alto del viewport Con cuidado, y casi siempre dentro de clamp()

rem

Root em: una medida relativa al tamaño de fuente del elemento raíz, que por defecto son 16px. Así, 1.5rem son 24px… hasta que alguien cambia el tamaño de letra de su navegador, y entonces todo tu diseño escala con él. Ese es el motivo real para usarlo.

Ahí está la diferencia importante con px: un font-size: 16px ignora la preferencia de quien necesita la letra más grande. Un 1rem la respeta.

El contraste entre rem y em es este:

.card       { font-size: 1.25rem; padding: 1em; }  /* padding = 1.25 × 20px */
.card small { font-size: 0.8rem;  padding: 1em; }  /* padding = 0.8 × ese texto */

em se acumula al anidar, lo cual sorprende cuando no lo esperas. Regla práctica: rem por defecto, em cuando quieras que algo escale con su propio texto.

Las unidades de viewport tienen una trampa

100vh parece «la altura de la pantalla», y en un móvil no lo es: las barras del navegador aparecen y desaparecen al hacer scroll, así que el valor cambia bajo tus pies y el contenido salta.

Existen svh, lvh y dvh para las variantes pequeña, grande y dinámica. La regla aplicable hoy es más simple: no uses una unidad porque sea moderna, úsala cuando sepas respecto a qué se calcula.

Colores

color: #1f2937;             /* hexadecimal */
color: rgb(31 41 55);       /* rojo, verde, azul */
color: hsl(215 28% 17%);    /* tono, saturación, luminosidad */

Los tres describen el mismo color. hsl tiene una ventaja práctica cuando construyes una paleta: para conseguir una variante más clara del mismo color solo tienes que subir el último número, sin recalcular nada.

VS Code te muestra un cuadradito junto a cada color y te abre un selector al pulsarlo, con el que además puedes cambiar de notación.

El contraste no es una cuestión de gusto

Un texto gris claro sobre fondo blanco puede parecerte elegante y ser ilegible para bastante gente. El criterio está medido: el texto normal necesita una relación de contraste de al menos 4.5:1 con su fondo, y el texto grande, 3:1.

DevTools lo calcula: al abrir el selector de color de una declaración muestra la relación de contraste y advierte si no alcanza el mínimo. No es necesario estimarlo visualmente.

Tipografía

body {
    font-family: system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
}

h1 {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.1;
}

Tres decisiones que casi nadie explica:

  • La lista de font-family es una cadena de respaldo. El navegador usa la primera que tenga disponible. system-ui toma la tipografía del sistema operativo, así que carga instantánea y se ve nativa en cada dispositivo.
  • El line-height sin unidad —1.6, no 1.6rem— es lo correcto: al no tener unidad, cada elemento lo multiplica por su tamaño de fuente, así que un titular grande no acaba con el interlineado de un párrafo.
  • Los titulares llevan menos interlineado que el texto. Un line-height: 1.6 en un h1 de 2.5rem deja un hueco enorme entre sus dos líneas. Alrededor de 1.1 es lo habitual.

Una escala, no una lista de tamaños

No elijas cada tamaño por separado. Elige un paso y multiplica:

Nivel Tamaño
Texto 1rem
h3 1.25rem
h2 1.75rem
h1 2.5rem

Conviene una advertencia: no hace falta una tipografía distinta para cada zona. Una interfaz coherente usa una o dos familias y una escala corta. La variedad tipográfica no es riqueza: casi siempre es falta de decisión.

Tarea 5 · Tu sistema visual mínimo

Define para tu proyecto, y aplícalo a las cuatro páginas:

  1. Familia tipográfica y tamaño base.
  2. Una escala de encabezados de tres o cuatro pasos.
  3. line-height para texto y para titulares.
  4. Color de texto, color de fondo y un color principal.
  5. Dos o tres medidas de espaciado que vayas a repetir.

Comprueba el contraste de tu color de texto sobre tu fondo con DevTools. Si no llega a 4.5:1, oscurece hasta que llegue.

No buscamos todavía un diseño espectacular. Buscamos consistencia: que las cuatro páginas parezcan del mismo sitio.

Antes de cerrar · 2 minutos, sin mirar

  1. ¿Respecto a qué se calcula un rem, y por qué importa?
  2. ¿Por qué el line-height se escribe sin unidad?
  3. ¿Cuál es el contraste mínimo para texto normal?
Ver respuestas

1 · Respecto al tamaño de fuente del elemento raíz. Importa porque respeta la preferencia de tamaño de letra de quien usa la web, cosa que un valor en píxeles ignora.

2 · Para que cada elemento lo multiplique por su propio tamaño de fuente en lugar de heredar una altura fija.

3 · 4.5:1 con su fondo. Para texto grande basta 3:1.