Color, unidades y tipografía

⏱ 40 minutos
📶 Nivel: principiante
🧩 Incluye ejercicio

💡 🎯 Al terminar esta lección podrás…

Elegir y ajustar colores con hsl() y transparencia.
Usar la unidad correcta en cada caso (rem, px, %, vw, ch).
Dar un aspecto cómodo y legible al texto.
Cargar fuentes web con buen rendimiento y crear tamaños fluidos con clamp().

1.Formas de escribir un color

CSS ofrece varias notaciones para el mismo color. Todas funcionan; cada una es cómoda para algo distinto:

Formato	Ejemplo	Cuándo usarlo
Nombre	`crimson`, `teal`, `tomato`	Pruebas rápidas (hay 140 nombres)
Hexadecimal	`#4f46e5`, `#fff`, `#4f46e580`	El más común; lo dan las herramientas de diseño
RGB	`rgb(79 70 229)`, `rgb(79 70 229 / 50%)`	Cuando necesitas transparencia
HSL	`hsl(243 75% 59%)`	El más fácil de ajustar a mano: tono, saturación, luminosidad
currentColor	`border: 1px solid currentColor`	Reutiliza el color del texto del elemento
transparent	`background: transparent`	Sin color

HSL merece atención: el primer número es el tono (0–360, la rueda de colores), el segundo la saturación (0% gris, 100% vivo) y el tercero la luminosidad (0% negro, 100% blanco). Para hacer un tono más claro u oscuro solo cambias el último número.

✏️ Experimenta con HSL

Código (edítalo)

<style>
  .fila { display: flex; gap: 8px; margin: 8px 0; }
  .c { width: 64px; height: 64px; border-radius: 10px; }
  .a { background: hsl(243 75% 30%); }
  .b { background: hsl(243 75% 45%); }
  .d { background: hsl(243 75% 59%); }
  .e { background: hsl(243 75% 75%); }
  .f { background: hsl(243 75% 90%); }
  .g { background: hsl(243 75% 59% / 40%); }
</style>
<p>Mismo tono, distinta luminosidad:</p>
<div class="fila"><div class="c a"></div><div class="c b"></div><div class="c d"></div><div class="c e"></div><div class="c f"></div><div class="c g"></div></div>
<p>Cambia el <b>243</b> por 0 (rojo), 120 (verde) o 30 (naranja).</p>

Resultado

⚠️ Importante · Contraste

Un color bonito no sirve si el texto no se lee. Recuerda el mínimo de contraste: 4.5 : 1 para texto normal. Puedes comprobarlo con el comprobador de la lección de accesibilidad.

2.Unidades: absolutas y relativas

Unidad	Relativa a…	Úsala para…
`px`	Nada (píxel de pantalla)	Bordes finos, sombras, detalles que no deben escalar
`rem`	Tamaño de letra de la raíz (`html`, normalmente 16px)	Tamaños de texto y espacios: respeta la preferencia de la persona
`em`	Tamaño de letra del propio elemento	Espacios que deben crecer con el texto (botones)
`%`	La propiedad del padre	Anchos fluidos
`vw` / `vh`	1% del ancho / alto de la ventana	Secciones a pantalla completa, texto fluido
`dvh`	Alto visible real en móvil (descuenta la barra del navegador)	Mejor que `vh` en celulares
`ch`	Ancho del carácter «0»	Limitar el ancho de un texto a ~65 caracteres
`fr`	Fracción del espacio libre (Grid)	Columnas flexibles

💡 Consejo · La regla práctica

Texto y espacios: rem. Bordes y sombras: px. Anchos fluidos: %, fr o min()/clamp(). Si alguien aumenta el tamaño de letra de su navegador, solo lo que está en rem se agranda.

✏️ rem frente a px

Código (edítalo)

<style>
  html { font-size: 20px; } /* cambia a 12px, 16px, 24px */
  .px  { font-size: 16px; }
  .rem { font-size: 1rem; }
  .em  { font-size: 1.5em; }
</style>
<p class="px">Texto en 16px: no cambia</p>
<p class="rem">Texto en 1rem: sigue a html</p>
<p class="em">Texto en 1.5em: relativo a su padre</p>

Resultado

Cambia el font-size de html y observa qué textos se mueven. Esto es lo que ocurre cuando una persona ajusta el tamaño de texto en su navegador.

3.Tipografía: las propiedades que importan

Propiedad	Qué controla	Valores útiles
`font-family`	La familia de letra (con alternativas)	`system-ui, sans-serif`
`font-size`	Tamaño	`1rem`, `1.25rem`, `clamp(1rem, 2.5vw, 1.5rem)`
`font-weight`	Grosor	`400` (normal), `600`, `700` (negrita)
`font-style`	Cursiva	`italic`, `normal`
`line-height`	Altura de línea	`1.6` sin unidad para texto corrido
`letter-spacing`	Espacio entre letras	`0.05em` en mayúsculas, `-0.02em` en titulares grandes
`text-align`	Alineación	`left`, `center`, `right`, `justify`
`text-transform`	Mayúsculas y minúsculas	`uppercase`, `capitalize`
`text-decoration`	Subrayado, tachado	`none`, `underline`, `line-through`
`text-wrap`	Reparto de líneas	`balance` en titulares, `pretty` en párrafos
`white-space`	Saltos y espacios	`nowrap`, `pre-wrap`

Pilas de fuentes (font-family)

Escribes varias familias, de preferida a alternativa. El navegador usa la primera que tenga. Termina siempre con una familia genérica: serif, sans-serif, monospace, system-ui.

Tres pilas útiles

body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
h1   { font-family: Georgia, "Times New Roman", serif; }
code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; }

📌 Nota · Las comillas

Los nombres de fuente con espacios ("Segoe UI") van entre comillas. Los de una palabra (Georgia) no las necesitan.

4.Un texto cómodo de leer

Casi todo el contenido de un sitio es texto, y pequeñas decisiones lo cambian todo. Estos números funcionan casi siempre:

Ajuste	Valor recomendado	Por qué
Tamaño de texto corrido	`1rem` a `1.125rem` (16–18px)	Más pequeño cansa; en móvil es el mínimo cómodo
`line-height` del párrafo	`1.5` a `1.7`	Da aire entre líneas
`line-height` de títulos	`1.1` a `1.3`	Los títulos grandes con mucha altura se ven sueltos
Ancho del texto	`max-width: 65ch` (45–75 caracteres)	Líneas muy largas pierden al lector
Contraste	4.5:1 como mínimo	Accesibilidad
Jerarquía	Escala de tamaños: 1, 1.25, 1.5, 2, 2.5 rem	Tamaños consistentes y proporcionados

✏️ Antes y después

Código (edítalo)

<style>
  .bien { max-width: 60ch; font: 1.05rem/1.7 Georgia, serif; color: #1e2235; }
  .bien h2 { font: 700 1.8rem/1.2 system-ui, sans-serif; text-wrap: balance; letter-spacing: -.01em; }
  .mal  { font-size: 11px; line-height: 1; color: #999; }
</style>
<div class="mal"><h2>Un texto difícil de leer</h2><p>Letra pequeña, sin espacio entre líneas y con poco contraste: cansa en segundos y excluye a mucha gente.</p></div>
<hr>
<div class="bien"><h2>Un texto cómodo de leer en una columna estrecha</h2><p>Tamaño suficiente, buen interlineado y un ancho moderado hacen que la lectura sea fluida, incluso en textos largos.</p></div>

Resultado

5.Fuentes web: Google Fonts y @font-face

Las fuentes del sistema (system-ui, Georgia) son rápidas y siempre disponibles. Si quieres otra tipografía, hay dos caminos:

Opción 1: Google Fonts

Elige una fuente en fonts.google.com y selecciona solo los pesos que vas a usar (cada peso es un archivo más).
Copia las líneas <link> en el <head> de tu HTML.
Úsala en tu CSS con una alternativa por si falla la descarga.

En el head del HTML

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap">

En tu CSS

body { font-family: "Inter", system-ui, sans-serif; }

Opción 2: @font-face (fuente propia)

Cargar un archivo de fuente

@font-face {
  font-family: "MiFuente";
  src: url("../fonts/mifuente.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

body { font-family: "MiFuente", system-ui, sans-serif; }

font-display: swap muestra el texto con una fuente temporal mientras carga la tuya: nadie ve una página en blanco.
Usa el formato woff2: es el más ligero y lo entienden todos los navegadores actuales.
Las fuentes variables incluyen todos los pesos en un solo archivo y permiten valores como font-weight: 550.

⚠️ Importante · Rendimiento y privacidad

Cada fuente web es una descarga más y retrasa la página. Usa máximo dos familias y pocos pesos. Además, descargar desde Google puede compartir datos de los visitantes con un tercero: si te importa, descarga los archivos y alójalos tú con @font-face.

6.Texto que se adapta: clamp()

Con la función clamp(mínimo, ideal, máximo) un tamaño crece con la pantalla pero nunca baja del mínimo ni sube del máximo:

Un título fluido

h1 { font-size: clamp(1.75rem, 1rem + 3vw, 3rem); }

Lee: «intenta 1rem + 3vw, pero no menos de 1.75rem ni más de 3rem». En una pantalla angosta el título vale 1.75rem; en una grande, 3rem; en medio crece suave. Verás más funciones de este tipo en la lección 11.

✏️ Título fluido

Código (edítalo)

<style>
  h1 { font-size: clamp(1.5rem, 1rem + 4vw, 3.5rem); text-wrap: balance; line-height: 1.1; }
</style>
<h1>Este título se adapta al ancho de la ventana</h1>
<p>Cambia el tamaño de tu ventana: el título crece y se reduce sin media queries.</p>

Resultado

7.Errores frecuentes

line-height con unidad (line-height: 24px): no escala si cambia el texto. Usa un número: 1.6.
Tamaños de letra en px en todo el sitio: no respetan la preferencia de la persona.
Texto gris claro sobre blanco (contraste insuficiente).
Párrafos a todo lo ancho de una pantalla grande: líneas demasiado largas.
Cargar 5 familias y 10 pesos de Google Fonts.
Olvidar la alternativa en font-family, o la familia genérica final.
font-size: 16 sin unidad: no vale.

📒 Apuntes para llevar

Los colores se escriben con nombre, hexadecimal, rgb() o hsl() (el más fácil de ajustar); / 50% añade transparencia.
rem para texto y espacios (respeta la preferencia de la persona), px para bordes finos, %/fr/clamp() para anchos.
vw, vh y dvh dependen de la ventana; ch limita el ancho de un texto en caracteres.
font-family es una pila terminada en una familia genérica.
Texto cómodo: 16–18px, line-height: 1.5–1.7 (sin unidad), max-width: 65ch y buen contraste.
text-wrap: balance mejora los titulares.
Google Fonts: pocos pesos y display=swap; o @font-face con woff2 y font-display: swap.
clamp(min, ideal, max) crea tamaños fluidos sin media queries.

8.Glosario

Término	Significado
HSL	Notación de color por tono, saturación y luminosidad.
`rem`	Unidad relativa al tamaño de letra de la raíz (`html`).
`em`	Unidad relativa al tamaño de letra del propio elemento.
`ch`	Unidad igual al ancho del carácter «0»; útil para limitar anchos de texto.
Familia genérica	Alternativa final de una pila: `serif`, `sans-serif`, `monospace`…
`font-display`	Define cómo se muestra el texto mientras carga una fuente web.
`clamp()`	Función que limita un valor entre un mínimo y un máximo.
Fuente variable	Archivo de fuente que contiene todos los pesos y anchos.

🧠 Comprueba lo aprendido

Elige una respuesta en cada pregunta. Verás al instante si acertaste y por qué.

¿Qué unidad es mejor para tamaños de texto, pensando en accesibilidad?

rem se basa en la preferencia de tamaño de la persona; px no.

¿Cuál es la forma más fácil de obtener una versión más clara de un color?

¿Cuál es la manera correcta de escribir un interlineado de 1.6 veces el texto?

¿Qué hace clamp(1rem, 4vw, 2rem)?

¿Para qué sirve font-display: swap?

Tu progreso se guarda en este navegador y se refleja en el índice del curso.

💡 🚀 ¡Ahora te toca!

La práctica fija lo aprendido. Pasa al ejercicio de esta lección.

Ir al ejercicio