#12 Colores y tipografía#12 Colores y tipografía

Formas de escribir un color

CSS entiende los colores de varias maneras. Todas sirven para cualquier propiedad que acepte un color.

Por su nombre

Hay unos 140 colores con nombre en inglés: red, navy, tomato, gold, teal, hotpink, rebeccapurple… Son perfectos para empezar y hacer pruebas.

1
2
3

Hexadecimal: #RRGGBB

Es la forma más habitual en el mundo real; la verás en todos los programas de diseño. Una almohadilla y seis cifras, en grupos de dos: rojo, verde y azul. Cada grupo va de 00 (nada) a ff (todo), en sistema hexadecimal (0–9 y a–f).

No hace falta calcularlos: se copian de un selector de color. Busca «color picker» en Google o haz clic en el cuadradito de color que aparece junto a cualquier color en las DevTools.

rgb() y la transparencia

rgb() usa los mismos tres canales, pero con números del 0 al 255. Su ventaja es que admite un cuarto valor, el alfa u opacidad, después de una barra:

1
2
3
4

Color del texto y del fondo

• color: el color del texto.
• background-color: el color del fondo. También puedes usar la forma corta background.

body {
  color: #222;
  background-color: #fdf6e3;
}

El contraste importa

Si el texto y el fondo se parecen demasiado, cuesta leer, y para mucha gente (personas mayores, con baja visión o usando el móvil al sol) resulta imposible.

1
2

Tipografías: font-family

font-family elige la fuente. Siempre se escribe como una lista de reserva, separada por comas: el navegador usa la primera que tenga disponible.

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
}

• Los nombres con espacios van entre comillas.
• La lista acaba con una familia genérica, que siempre existe:

Fuentes de Google Fonts

Para usar fuentes que no tiene todo el mundo instaladas, la forma más fácil es Google Fonts (fonts.google.com), con cientos de fuentes gratuitas:

1. Elige una fuente y pulsa Get font → Get embed code.
2. Copia las etiquetas <link> que te da y pégalas en el <head>, antes de tu hoja de estilos.
3. Usa el nombre de la fuente en tu CSS.

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

body {
  font-family: "Poppins", sans-serif;
}

Tamaños: font-size y las unidades

h1 { font-size: 40px; }
p { font-size: 1.125rem; }

Las unidades más importantes:

Más propiedades del texto

1
2
3
4

Errores típicos

• Confundir color con background-color, o inventarse font-color (no existe).
• Hexadecimales mal escritos: sin #, o con cinco o siete cifras.
• Olvidar las comillas en fuentes con espacios: font-family: Open Sans falla.
• No poner una familia genérica al final de la lista.
• Poner el <link> de Google Fonts después de tu CSS, o no ponerlo y usar la fuente igualmente.
• Texto con poco contraste, como gris claro sobre blanco.
• Justificar textos (justify) en columnas estrechas: quedan huecos muy feos entre palabras.

Ejercicios

Ejercicio 1: la tarjeta de visita (fácil)

Da estilo a esta tarjeta: fondo #1d3557, texto blanco, el nombre en 2rem y negrita, el cargo en mayúsculas con algo de espacio entre letras, y todo centrado.

1
2
3
4
5

.tarjeta {
  padding: 24px;
  background-color: #1d3557;
  color: white;
  text-align: center;
}

.nombre {
  font-size: 2rem;
  font-weight: bold;
}

.cargo {
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

Ejercicio 2: mejora la lectura (medio)

Este artículo cuesta de leer. Mejóralo: tipografía de la familia serif, tamaño de 1.125rem, altura de línea de 1.7, texto #222 sobre fondo #fffdf7, y el título en una fuente sans-serif.

1
2
3

body {
  font-family: Georgia, serif;
  color: #222;
  background-color: #fffdf7;
  font-size: 1.125rem;
  line-height: 1.7;
}

h1 {
  font-family: system-ui, sans-serif;
}

Ejercicio 3: tu paleta (reto)

Elige tres colores que te gusten en un selector de color y escribe sus hexadecimales. Crea una página con un título, un párrafo y un enlace usándolos: uno para el fondo, otro para el texto y otro para los títulos y enlaces. Comprueba el contraste en las DevTools.

1
2

body {
  background-color: #f1faee;
  color: #1d3557;
  font-family: sans-serif;
}

h1, a {
  color: #e63946;
}

Ficha resumen

• Colores: nombre (tomato), hexadecimal (#ff6347), rgb(255 99 71), con transparencia rgb(0 0 0 / 50%).
• color = texto · background-color = fondo. Cuida el contraste (4.5 o más).
• font-family: lista de reserva acabada en genérica. Google Fonts: <link> en el <head>.
• Tamaños de letra en rem (1rem ≈ 16px).
• font-weight, line-height (1.5–1.7 en textos), text-align, text-decoration, text-transform, letter-spacing.

Glosario