🖌️ 1.11 · UI/UX básico: diseñar la experiencia del usuario

🎯 Objetivo del tema

🗺️ Mapa del tema

Hay una diferencia enorme entre un sitio que FUNCIONA y uno que se DISFRUTA usar. La primera es técnica: el código corre, los datos llegan, los botones hacen algo. La segunda es diseño: el usuario encuentra lo que busca sin esfuerzo, se siente guiado, y hasta disfruta el proceso. Eso es UX. UI es la parte visual. Las dos juntas hacen que tu sitio sea profesional.

1.11.1 UI vs UX: no son lo mismo

UI (User Interface) es lo que se VE: colores, tipografía, botones, layout. UX (User Experience) es lo que se SIENTE al usarlo: ¿fue fácil? ¿me frustré? ¿encontré lo que buscaba? Un sitio puede tener UI bonita pero UX horrible (bonito pero inusable), o UX excelente pero UI fea (usable pero horrible). El objetivo es AMBAS.

1.11.2 Las 10 heurísticas de Nielsen

Jakob Nielsen, gurú de la usabilidad, estudió miles de interfaces y destiló 10 reglas de oro que se aplican a CUALQUIER producto digital. Si tu sitio falla alguna, hay un problema de usabilidad. No son leyes absolutas, son guías que el 95% del tiempo aciertan.

1.11.3 Principios de diseño visual

Hay 5 principios que, cuando los aplicas bien, hacen que algo se vea 'profesional' sin que sepas exactamente por qué. Son las reglas que diseñadores gráficos estudian durante años y que tú puedes aplicar en 10 minutos si los conoces.

1.11.4 Arquitectura de información

La arquitectura de información (AI o IA en español) es CÓMO organizas y etiquetas el contenido para que el usuario encuentre lo que busca. Es la diferencia entre un sitio donde el usuario dice 'ah, aquí está' en 3 segundos, y uno donde dice '¿dónde diablos está eso?' y se va.

Las 4 reglas de oro

• Agrupa contenido relacionado (proximidad). Los items de 'Configuración de cuenta' van juntos, no dispersos.
• Usa etiquetas CLARAS, no jerga. 'Mi cuenta' es mejor que 'Dashboard de usuario'.
• Limita las opciones. Un menú con 7 items es manejable. Uno con 20 es paralizante (paradoja de la elección).
• Muestra el camino. Indica siempre al usuario DÓNDE está ('Inicio > Blog > Mi post').

Patrones comunes de navegación

1.11.5 Diseño de formularios usables

El formulario es donde el usuario te entrega datos (o se va). Según estudios de Baymard, el 67% de usuarios abandonan un formulario si es muy largo o confuso. Cada campo cuenta. Estas son las reglas para diseñar formularios que la gente REALMENTE llena.

1.11.6 Microinteracciones y feedback

Las microinteracciones son esos pequeños momentos de feedback que hacen que un sitio se sienta VIVO: el botón que cambia de color al pasar el mouse, el spinner mientras carga, la animación al agregar algo al carrito, el '¡Listo!' al guardar. Cada una responde a la heurística #1 de Nielsen: visibilidad del estado del sistema.

Los 4 tipos de feedback que SIEMPRE debes dar

• Al hacer clic en un botón: cambio visual inmediato (color, escala, sombra). Confirma que el click se registró.
• Mientras carga: spinner o barra de progreso. El usuario NECESITA saber que algo está pasando.
• Al completarse: mensaje de éxito (verde) o animación de check. '¡Listo!', 'Guardado', 'Enviado'.
• Al fallar: mensaje de error CLARO y específico, cerca del campo que falló. Rojo, con icono, con texto.

El ejemplo completo: un botón de 'Guardar' bien diseñado

async function guardar() {
  const boton = document.querySelector('#btn-guardar');
  const textoOriginal = boton.textContent;

  // 1. Feedback inmediato: cambiar el texto a 'Guardando...'
  boton.textContent = 'Guardando...';
  boton.disabled = true;  // evitar doble click

  try {
    await fetch('/api/guardar', { method: 'POST', body: ... });
    // 2. Feedback de éxito: cambiar a '¡Guardado!' con color verde
    boton.textContent = '¡Guardado!';
    boton.classList.add('exito');
    setTimeout(() => {
      boton.textContent = textoOriginal;
      boton.classList.remove('exito');
    }, 2000);
  } catch (error) {
    // 3. Feedback de error: cambiar a 'Error' con color rojo
    boton.textContent = 'Error. Reintentar';
    boton.classList.add('error');
  } finally {
    boton.disabled = false;  // siempre rehabilitar el botón
  }
}

Botón con feedback completo

1.11.7 Mapas de calor: visualizar cómo el usuario realmente usa tu interfaz

Hasta ahora hablamos de heurísticas, formularios, microinteracciones y arquitectura de información. Todo basado en PRINCIPIOS y EXPERIENCIA. Pero la pregunta más importante de UX es: ¿el usuario REALMENTE hace lo que yo creo que hace? La respuesta casi nunca es la que esperas. Los mapas de calor (heat maps) son la herramienta que convierte tu intuición en datos reales: te muestran DÓNDE hacen clic los usuarios, HASTA DÓNDE hacen scroll, y en qué ZONAS ponen el mouse. Es como tener un mapa de calor cerebral de tu interfaz. Sin esta herramienta, estás diseñando a ciegas.

Los 3 tipos de heat maps que necesitas conocer

• CLICK HEAT MAP (mapa de clics): muestra DÓNDE hicieron clic los usuarios con su mouse. Las zonas más rojas son las más clicadas. Revela: botones que el usuario ESPERA que estén pero no están, áreas 'muertas' que el diseñador pensó que eran importantes, y errores de UI (los usuarios hacen clic en elementos que NO son botones porque parecen clickeables).
• SCROLL HEAT MAP (mapa de scroll): muestra HASTA DÓNDE hizo scroll cada usuario. Una curva típica: 100% ven el hero, 60% ven la segunda sección, 30% llegan al final. Revela: si tu CTA principal está abajo del 'fold' (zona que pocos ven), si el contenido importante está siendo ignorado, y dónde poner la información crítica (arriba).
• MOUSE MOVEMENT HEAT MAP (mapa de movimiento): muestra DÓNDE movió el mouse el usuario. Aunque no siempre equivale a dónde miró, es un buen proxy de atención. Revela: si los usuarios 'leen' en patrón F (horizontal arriba, vertical abajo a la izquierda), si ignoran zonas que el diseñador pensó que eran centrales, y cómo el ojo 'escanea' la página.

Las 5 herramientas gratuitas y profesionales para heat maps

Cómo instalar Microsoft Clarity en 5 minutos (recomendado)

<!-- Paso 1: ve a clarity.microsoft.com y crea una cuenta con tu Microsoft -->
<!-- Paso 2: 'Add new project' y pega la URL de tu sitio -->
<!-- Paso 3: Clarity te da un codigo de seguimiento similar a este: -->

<script type="text/javascript">
  (function(c,l,a,r,i,t,y){
    c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
    t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
    y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
  })(window, document, "clarity", "script", "TU_ID_DE_CLARITY");
</script>

<!-- Paso 4: pega este codigo en el <head> de tu index.html -->
<!-- Paso 5: espera 24-48h y revisa el dashboard -->

<!-- Que captura Clarity automaticamente: -->
<!-- 1. Heat map de clics (donde los usuarios hacen clic) -->
<!-- 2. Heat map de scroll (hasta donde llegan) -->
<!-- 3. Heat map de mouse movement (donde mueven el cursor) -->
<!-- 4. Session recordings (videos reales de sesiones, una herramienta PODEROSA) -->
<!-- 5. Dead clicks (clics en elementos que NO son clickeables: bug grave de UX) -->

<!-- Clarity NO requiere banner de cookies porque anonimiza IPs y aplica GDPR. -->
<!-- Es la unica herramienta 100% gratis y sin limites que cumple esto. -->

Instalación de Microsoft Clarity en 5 minutos

Cómo INTERPRETAR un heat map (la parte que nadie enseña)

• ZONA ROJA en un elemento que NO es botón: bug. Los usuarios esperan hacer clic ahí. Solución: hazlo botón o rediseña para que NO parezca clickeable (quitar subrayado, sombra, color).
• ZONA ROJA en tu CTA principal: éxito. Está funcionando. Solución: déjalo donde está.
• ZONA MUERTA en tu propuesta de valor: los usuarios no leen. Solución: reescribe el titular, agrega una imagen, o muévelo más arriba.
• Scroll map: si solo 20% llega al final de la página, el contenido de abajo es INVISIBLE. Solución: usa un sticky CTA flotante, o reordena para que lo importante esté arriba.
• Patrón F en el eye tracking: los usuarios leen en F (horizontal arriba, vertical a la izquierda). Solución: pon CTAs y beneficios en la parte superior-izquierda, no en el centro-abajo.
• Dead clicks (Clarity los detecta): usuarios haciendo clic en imágenes, logos, o texto que parece botón. Solución: o hazlo interactivo, o rediseña para que no parezca clickeable.

1.11.8 Diseño gráfico aplicado a la web: los 6 fundamentos visuales

Hasta ahora hablamos de UX, heurísticas, formularios y heat maps. Todo enfocado en CÓMO se USA el sitio. Pero hay otro pilar igual de importante: CÓMO SE VE. Un sitio con UX perfecta pero视觉 horrible (colores que chillan, tipografía ilegible, layout desordenado) genera desconfianza. Los usuarios juzgan tu sitio en 50 milisegundos: si el diseño gráfico no es profesional, se van sin importar lo bien que funcione. Aquí entran los 6 fundamentos del diseño gráfico aplicado a la web: color, tipografía, jerarquía, contraste, alineación, y espaciado. Son atajos mentales que tu cerebro aplica automáticamente sin que lo sepas. Cuando los dominas, tu sitio se siente profesional. Cuando los ignoras, se siente amateur. No necesitas ser diseñador: necesitas entender las reglas.

Los 6 pilares del diseño gráfico web explicados

Pilar 1 — Color: la regla 60-30-10 y psicología

/* Paleta de ejemplo: basada en la regla 60-30-10 */
:root {
  /* 60% color dominante (fondos, grandes areas) */
  --color-primary: #2563eb;     /* azul corporativo */
  --color-primary-light: #dbeafe;
  --color-primary-dark: #1e40af;

  /* 30% color secundario (textos, superficies) */
  --color-secondary: #64748b;   /* gris azulado para texto */
  --color-surface: #ffffff;      /* blanco de fondo */
  --color-surface-alt: #f8fafc;  /* gris muy claro para secciones */

  /* 10% color de acento (CTAs, alertas) */
  --color-accent: #f59e0b;       /* naranja para llamar la atencion */
  --color-success: #10b981;      /* verde para confirmaciones */
  --color-error: #ef4444;        /* rojo para errores */
  --color-warning: #f59e0b;      /* amarillo para warnings */
}

/* Aplicacion: */
body { background: var(--color-surface); color: var(--color-secondary); }  /* 30% */
section { background: var(--color-surface-alt); }  /* variante del 30% */
header { background: var(--color-primary); color: white; }  /* 60% (header grande) */
button.primary { background: var(--color-primary); }  /* 10% (acentos) */
button.accent { background: var(--color-accent); }  /* 10% (llamar atencion) */

/* Psicologia del color: */
/* Azul (primary): confianza, profesionalismo, tecnologia. Lo usan bancos, SaaS, redes sociales. */
/* Verde (success): crecimiento, naturaleza, salud. Lo usan apps de finanzas, salud, sustentabilidad. */
/* Rojo (error/danger): urgencia, pasion, peligro. Lo usan CTAs de venta, alertas, errores. */
/* Naranja (accent): creatividad, energia, llamada a la accion. Lo usan CTAs secundarios. */
/* Morado (premium): lujo, creatividad, misterio. Lo usan marcas premium, apps creativas. */
/* Gris (neutral): seriedad, sofisticacion, neutralidad. Lo usan sitios corporativos. */

/* Regla de oro: elige UN color primario y maximo UN acento. Mas de 2-3 colores = caos visual. */

Sistema de colores con regla 60-30-10 y CSS variables

Pilar 2 — Tipografía: la jerarquía que guía el ojo

/* Sistema tipografico basado en escala modular (ratio 1.250) */
:root {
  /* Familia principal: una sola fuente para el 90% del sitio */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;

  /* Escala de tamanos (cada nivel es 1.25x el anterior) */
  --text-xs: 0.8rem;     /* 12.8px - anotaciones, captions */
  --text-sm: 0.9rem;     /* 14.4px - texto secundario */
  --text-base: 1rem;     /* 16px - cuerpo del texto (LEGIBLE) */
  --text-lg: 1.25rem;    /* 20px - subheaders */
  --text-xl: 1.563rem;   /* 25px - h3 */
  --text-2xl: 1.953rem;  /* 31.25px - h2 */
  --text-3xl: 2.441rem;  /* 39px - h1 */
  --text-4xl: 3.052rem;  /* 49px - hero */

  /* Pesos (no uses mas de 2-3 pesos en un mismo diseno) */
  --font-normal: 400;
  --font-medium: 500;
  --font-bold: 700;

  /* Line-height y letter-spacing segun uso */
  --leading-tight: 1.2;   /* para headings */
  --leading-normal: 1.5;  /* para cuerpo de texto */
  --leading-loose: 1.75;  /* para texto pequeno, instrucciones */
}

/* Aplicacion con jerarquia clara: */
h1 { font-size: var(--text-3xl); font-weight: var(--font-bold); line-height: var(--leading-tight); }
h2 { font-size: var(--text-2xl); font-weight: var(--font-bold); line-height: var(--leading-tight); }
h3 { font-size: var(--text-xl); font-weight: var(--font-medium); line-height: var(--leading-tight); }
p  { font-size: var(--text-base); font-weight: var(--font-normal); line-height: var(--leading-normal); }
small { font-size: var(--text-sm); color: var(--color-secondary); }

/* Reglas de oro: */
/* 1. Maximo 2 familias tipograficas (sans + serif opcional). */
/* 2. Cuerpo del texto: 16-18px (nunca menor, es ilegible). */
/* 3. Line-height: 1.5-1.6 para cuerpo, 1.1-1.3 para headings. */
/* 4. Maximo 60-75 caracteres por linea (legibilidad). */
/* 5. Usa Google Fonts: Inter, Roboto, Open Sans, Source Sans Pro. */

Sistema tipográfico con escala modular 1.250 y CSS variables

Pilar 3 — Espaciado: la escala de 8px que lo unifica todo

/* Escala de espaciado en multiplos de 4 (recomendado) u 8 px */
:root {
  --space-1: 0.25rem;   /* 4px  - separacion minima */
  --space-2: 0.5rem;    /* 8px  - entre elementos pequenos */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px - entre parrafos */
  --space-5: 1.5rem;    /* 24px - entre bloques */
  --space-6: 2rem;      /* 32px - entre secciones */
  --space-8: 3rem;      /* 48px - entre grupos */
  --space-10: 4rem;     /* 64px - padding de pagina */
  --space-12: 6rem;     /* 96px - separacion mayor */
}

/* Aplicacion consistente: */
.card { padding: var(--space-4); margin-bottom: var(--space-5); }
.card-title { margin-bottom: var(--space-2); }
.card-text { margin-bottom: var(--space-4); }
.section { padding: var(--space-10) 0; }
.container { padding: 0 var(--space-4); }

/* Reglas de oro: */
/* 1. Usa UNA escala (4 u 8 px) en TODO el sitio. */
/* 2. Espaciado vertical entre secciones: minimo 2x el espaciado entre elementos. */
/* 3. El 'espacio en blanco' (margen/padding) es BUENO. No temas dejar respirar. */
/* 4. Agrupar elementos relacionados: 8px entre ellos, 24px con el siguiente grupo. */
/* 5. Padding de botones consistente: mismo vertical/horizontal para todos los botones. */

/* Ejemplo de un boton bien espaciado: */
.btn {
  padding: var(--space-2) var(--space-4);  /* 8px 16px */
  margin: var(--space-2);                  /* 8px entre botones */
  border-radius: 0.375rem;                 /* 6px, consistente con cards */
}

Escala de espaciado en múltiplos de 4 con CSS variables

Pilar 4-6 — Contraste, alineación y jerarquía visual

• CONTRASTE (Accesibilidad WCAG): texto sobre fondo debe tener ratio de contraste 4.5:1 (AA) o 7:1 (AAA). Usa WebAIM Contrast Checker (gratis). Errores comunes: gris claro sobre blanco (1.5:1, INVISIBLE), texto blanco sobre amarillo (1.1:1, INVISIBLE), texto de color sin aumento de peso. La regla: si tu usuario puede tener 60 años o vista cansada, haz el contraste GENEROSO.
• ALINEACIÓN (orden visual): TODO debe alinearse a una rejilla. En web típicamente 8 o 12 columnas. CSS Grid lo hace explícito. Errores comunes: botones a 13px y otros a 17px (no se ve igual), texto con margen random (a veces 15px, otras 22px), iconos que NO se alinean con el texto. La regla: si hay 2 elementos que se 'ven mal' pero no sabes por qué, casi siempre es alineación.
• JERARQUÍA VISUAL (qué mira primero el usuario): el ojo debe saber DÓNDE mirar primero. Usa tamaño + peso + color + espaciado para crear orden. Lo más importante: MÁS GRANDE + MÁS OSCURO + MÁS ARRIBA. Lo menos importante: más pequeño + gris claro + agrupado al final. Errores comunes: 5 elementos del mismo tamaño compitiendo por atención, todos los textos en negrita (nada destaca), espaciado igual entre cosas importantes y no importantes.

1.11.9 Google Fonts en tu sitio: integrando tipografías externas (libres) con CDN y descargadas

En el bloque anterior hablamos de tipografía como uno de los 6 pilares del diseño gráfico. Pero elegir 'Inter' o 'Roboto' en tu CSS no sirve de nada si el usuario no tiene esas fuentes instaladas en su computadora. Aquí entran las FUENTES WEB: archivos de tipografía que se descargan junto con tu página y se aplican al texto. Google Fonts (fonts.google.com) es el catálogo más grande del mundo de fuentes LIBRES y de alta calidad: 1,500+ familias tipográficas que puedes usar en cualquier proyecto, personal o comercial, sin pagar un centavo. Hay 2 formas de integrarlas: por CDN (un <link> en tu HTML, rápido y simple) o descargadas (los archivos .woff2 en tu propio servidor, ideal para producción profesional). En este bloque vas a aprender las dos, con una práctica paso a paso implementando Google Fonts en una página sencilla.

Método 1: CDN (rápido, ideal para empezar y prototipos)

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Mi sitio con Google Fonts</title>

  <!-- PASO 1: ve a fonts.google.com y elige tus fuentes -->
  <!-- Por ejemplo: Inter (sans moderna) + Playfair Display (serif elegante) -->

  <!-- PASO 2: copia el codigo que Google Fonts te da. Tiene 2 partes: -->

  <!-- 2a) <link> en el <head> para PRECONECTAR al servidor de Google -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

  <!-- 2b) <link> con los parametros de las fuentes que elegiste -->
  <link
    href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Playfair+Display:wght@700&display=swap"
    rel="stylesheet"
  >

  <!-- PASO 3: usa las fuentes en tu CSS con font-family -->
  <style>
    body {
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      font-size: 1rem;
      line-height: 1.6;
      color: #1e293b;
      max-width: 720px;
      margin: 0 auto;
      padding: 2rem;
    }

    h1, h2, h3 {
      font-family: 'Playfair Display', Georgia, serif;
      font-weight: 700;
      line-height: 1.2;
      color: #0f172a;
    }

    h1 { font-size: 2.5rem; margin-bottom: 0.5rem; }
    h2 { font-size: 1.75rem; margin-top: 2rem; }

    .meta {
      font-size: 0.875rem;
      color: #64748b;
      font-style: italic;
    }
  </style>
</head>
<body>
  <article>
    <h1>Mi primer articulo con Google Fonts</h1>
    <p class="meta">Publicado el 5 de agosto de 2026 por Mavis</p>

    <p>
      Este parrafo usa <strong>Inter</strong> (sans-serif moderna) como
      fuente principal. Inter es una de las tipografías más populares de
      Google Fonts porque es legible, neutral y funciona bien en
      pantallas pequenas.
    </p>

    <h2>Una seccion con serif</h2>
    <p>
      Los titulos usan <strong>Playfair Display</strong> (serif elegante)
      para dar contraste visual con el cuerpo del texto. La combinacion
      sans + serif es clasica en diseno editorial: el cuerpo se lee
      comodamente y los titulos tienen personalidad.
    </p>

    <h2>Mas contenido</h2>
    <p>
      Y asi de simple: 2 lineas de HTML (los <link> en el <head>) y
      referenciar las fuentes en tu CSS. El navegador se encarga de
      descargar los archivos .woff2, parsearlos, y renderizar el texto.
    </p>
  </article>
</body>
</html>

Página completa con Google Fonts por CDN (método recomendado)

Método 2: Self-hosted (descargadas, ideal para producción)

# PASO 1: descargar los archivos de Google Fonts
# Opcion A: ir a fonts.google.com, seleccionar la fuente, click 'Download family'
#           Te baja un .zip con todos los pesos en formato TTF (~5-10 MB por familia)
#
# Opcion B (recomendada): usar google-webfonts-helper
#           https://gwfh.mranftl.com
#           Pegas el nombre de la fuente, eliges los pesos y subsets,
#           y te genera un .zip SOLO con los .woff2 que necesitas (~20-50 KB por peso)

# PASO 2: estructura de carpetas de tu proyecto
mi-proyecto/
  fonts/                          # crea esta carpeta
    inter-v18-latin-regular.woff2
    inter-v18-latin-500.woff2
    inter-v18-latin-700.woff2
    playfair-display-v30-latin-700.woff2
  index.html
  styles.css

# PASO 3: declarar las fuentes con @font-face en tu CSS
/* styles.css */

/* Inter Regular (400) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;             /* 'swap' = muestra la fuente fallback mientras carga */
  src: url('/fonts/inter-v18-latin-regular.woff2') format('woff2');
}

/* Inter Medium (500) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/inter-v18-latin-500.woff2') format('woff2');
}

/* Inter Bold (700) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/inter-v18-latin-700.woff2') format('woff2');
}

/* Playfair Display Bold (700) */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/playfair-display-v30-latin-700.woff2') format('woff2');
}

/* PASO 4: usar las fuentes igual que con CDN */
body {
  font-family: 'Inter', system-ui, sans-serif;
}
h1 {
  font-family: 'Playfair Display', Georgia, serif;
}

Método self-hosted: descargar .woff2 + @font-face

Las 5 fuentes de Google Fonts más usadas en 2025

CDN vs Self-hosted: cuándo usar cada uno

• USA CDN cuando: estás aprendiendo/prototypeando, quieres la solución más rápida (1 minuto), no te importa la dependencia externa, estás en un hackathon o MVP, quieres la versión más reciente automática de la fuente.
• USA SELF-HOSTED cuando: tu sitio está en producción y quieres máximo control, necesitas cumplir GDPR estricto (CDN de Google comparte IPs con Google), quieres mejor performance (woff2 precargado, sin DNS extra), trabajas offline o en intranet, quieres eliminar una dependencia externa.
• PERFORMANCE: la CDN agrega 1-2 round-trips extra (DNS a fonts.googleapis.com, luego a fonts.gstatic.com). El self-hosted evita esos requests. Para sitios con tráfico alto, la diferencia es medible.
• PRIVACIDAD: la CDN de Google registra las IPs de tus usuarios (porque hacen fetch a Google). Si tu sitio debe cumplir GDPR estricto, self-hosted es obligatorio. La alternativa: usa Bunny Fonts (bunny.net/fonts) que es drop-in replacement de Google Fonts sin tracking.
• PRÁCTICA COMÚN: empieza con CDN (rápido, funciona), migra a self-hosted cuando deployes a producción. Es 30 minutos de trabajo extra (descargar woff2 + escribir @font-face) y vale la pena para sitios profesionales.

PRÁCTICA: página sencilla con Google Fonts paso a paso

• PASO 1: crea una carpeta 'practica-google-fonts' con un archivo 'index.html'.
• PASO 2: ve a fonts.google.com. Busca 'Inter'. Click en el icono '+' para agregarla. Selecciona los pesos 400 (regular) y 700 (bold).
• PASO 3: Google Fonts te muestra el codigo. Copia las 2-3 lineas de <link> y pegalas en el <head> de tu index.html.
• PASO 4: agrega un <style> con font-family: 'Inter', sans-serif; en el body.
• PASO 5: crea 3 secciones: <h1> con peso 700, <h2> con peso 400, y <p> con peso 400. Cada uno tendra diferente grosor automaticamente.
• PASO 6: anade una segunda fuente para titulos: busca 'Playfair Display' en Google Fonts, agregala, copia su <link> (ahora tendras 2 fuentes importadas).
• PASO 7: aplica Playfair Display a tus <h1> y <h2>: font-family: 'Playfair Display', serif;.
• PASO 8: prueba abrir el archivo en el navegador. Veras el cambio de fuente inmediatamente. Cambia un peso (de 400 a 500) y recarga: la fuente se actualizara al instante.
• PASO 9 (opcional, self-hosted): descarga los woff2 con google-webfonts-helper, copialos a /fonts, y reemplaza los <link> por @font-face. Compara el peso de la pagina (DevTools > Network) antes y despues.
• PASO 10 (opcional, Bunny Fonts): reemplaza 'fonts.googleapis.com' por 'fonts.bunny.net' en el <link>. Misma fuente, sin tracking de Google.

📚 Contenido ampliado

Material adicional, referencias externas verificadas y ejemplos extendidos.