Color y tipografía
El color y la tipografía son lo primero que percibe alguien al entrar en una web, antes incluso de leer una palabra. Vamos a ver cómo definir ambos con precisión.
Formas de definir un color
Palabras clave predefinidas: red, coral, tomato... Cómodas para prototipos rápidos, poco precisas para una marca concreta.
El formato más común: #RRGGBB, dos dígitos hexadecimales por canal (rojo, verde, azul). Es justo el formato que usa la paleta de tu marca.
Los mismos canales en base 10 (0-255). La versión "a" añade un cuarto valor de opacidad, entre 0 (invisible) y 1 (opaco).
Tono (0-360°), saturación y luminosidad en porcentaje. Muy útil para crear variaciones de un mismo color cambiando solo la luminosidad.
Tipografía: la familia de fuentes
font-family acepta una lista de
fuentes, no solo una. El navegador intenta la primera; si no está instalada o no
cargó, prueba la siguiente, y así sucesivamente hasta llegar a una genérica
(sans-serif, serif, monospace) que siempre existe.
Unidades de tamaño de texto
Píxeles, tamaño fijo y absoluto. Predecible, pero no se adapta si el usuario cambia el tamaño de fuente del navegador.
Relativo al tamaño de fuente del elemento padre. Se puede volver confuso cuando se anida mucho, porque se multiplica en cada nivel.
Relativo siempre al tamaño de fuente del elemento raíz (html), sin importar el anidamiento. La opción recomendada por defecto para tamaños de texto en proyectos reales.
Si no sabes cuál elegir: usa rem para tamaños de
fuente y espaciados grandes, y px para detalles muy
concretos como bordes de 1px. Evita em hasta que
entiendas bien cómo se acumula entre elementos anidados.
Otras propiedades de texto habituales
Alineación horizontal: left, center, right, justify.
Subrayado, tachado, etc. Muy usado con valor "none" para quitar el subrayado por defecto de los enlaces.
Espaciado entre letras. Valores pequeños y positivos dan un aire elegante a títulos en mayúsculas.
Usar tamaños de fuente por debajo de 14-15px para el texto de lectura principal. Se ve "moderno" en el diseño, pero es incómodo de leer en la práctica, especialmente en móvil.
Ponlo a prueba
Comprueba lo que has aprendido
1. ¿Qué formato de color permite definir transparencia?
2. ¿Por qué font-family suele llevar varias fuentes en lista?
3. ¿Qué unidad de tamaño se recomienda por defecto para texto en proyectos reales?