Tres herramientas que acercan el CSS a cómo trabajas como diseñador: un sistema de color y tipografía reutilizable, tus propias fuentes y movimiento con intención.

Las propiedades personalizadas (variables) guardan un valor con nombre para usarlo en toda la hoja de estilos:

:root {
  --color-texto: #1d3557;
  --color-fondo: #f1faee;
  --color-acento: #e63946;
  --fuente-titulares: "Anton", Impact, sans-serif;
  --espacio: 1.5rem;
}

h1 {
  color: var(--color-acento);
  font-family: var(--fuente-titulares);
}
.tarjeta {
  padding: var(--espacio);
}

• Se declaran con dos guiones (--nombre), normalmente en :root (el documento entero).
• Se usan con var(--nombre).
• Cambias el valor en un sitio y cambia en toda la web. Es tu guía de estilo en código: paleta, familias, espaciados.

💡 Consejo. Un modo oscuro es, en gran parte, redefinir unas cuantas variables: @media (prefers-color-scheme: dark) { :root { --color-texto: …; --color-fondo: …; } }.

Con @font-face usas una fuente guardada en tu proyecto:

@font-face {
  font-family: "Anton";
  src: url("../fuentes/anton-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

• Formato WOFF2: comprimido y compatible con todos los navegadores actuales.
• font-display: swap: muestra una fuente del sistema mientras carga la tuya.
• Incluye siempre una pila de alternativas ("Anton", Impact, sans-serif).
• Licencia: comprueba que la fuente permite su uso en web. Las fuentes con licencia SIL Open Font License (OFL) lo permiten.

Fuentes de Google Fonts

La forma más rápida es enlazar una familia de Google Fonts desde el <head> y usarla en el CSS:

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

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

📌 Nota. Privacidad: al cargar la fuente desde los servidores de Google, cada visitante les envía su dirección IP. En Alemania, un tribunal condenó en 2022 a una web por ello. La alternativa es descargar la fuente (Google Fonts permite descargarlas) y servirla con @font-face desde tu proyecto: mismo resultado, sin terceros.

Fuentes de iconos

Librerías como Font Awesome o Material Icons son fuentes cuyos "caracteres" son iconos. También puedes crear tu propia fuente de iconos con IcoMoon a partir de tus SVG. Si un icono es el único contenido de un enlace, añade un texto accesible:

<a href="https://instagram.com/estudio" aria-label="Instagram del estudio">
  <i class="icono-instagram" aria-hidden="true"></i>
</a>

Una transición anima el paso entre dos estados, por ejemplo al pasar el ratón:

.boton {
  background-color: var(--color-texto);
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.boton:hover,
.boton:focus-visible {
  background-color: var(--color-acento);
  transform: translateY(-2px);
}

• Qué propiedad se anima, cuánto dura y con qué curva (ease, ease-in-out, linear).
• Anima preferentemente transform y opacity: son las más fluidas.
• Aplica lo mismo a :hover y a :focus-visible: quien usa teclado también merece la respuesta visual.

Para movimientos de varios pasos o que se repiten:

• Repetir el mismo color en 30 reglas en vez de usar una variable.
• Cargar fuentes desde servicios externos sin necesidad o sin licencia web.
• Animaciones largas que hacen esperar al usuario.
• Olvidar prefers-reduced-motion.