Fuentes Web

Elegir y configurar fuentes web en CSS define la legibilidad y el estilo de una interfaz. Aquí aprenderás a usar familias tipográficas del navegador, crear un font stack con fallback confiable y cargar tipografías de Google Fonts como Poppins e Inter, con pesos y variaciones bien seleccionados para títulos y textos.

¿Qué familias tipográficas existen y cómo impactan la legibilidad?

Las tipografías se agrupan en cinco familias que todo navegador reconoce por defecto. Elegir la correcta mejora la claridad del contenido y el tono visual del sitio.

• Serif: con “decoraciones” al final de los trazos. Ejemplo típico: Times New Roman. Da un aire clásico y editorial.
• Sans-serif: sin decoraciones. Ejemplos comunes: Arial, Helvetica. Se percibe más limpia y moderna.
• Monospace: ancho fijo en cada carácter. Ideal para mostrar código.
• Cursive: simula escritura a mano.
• Fantasy: más decorativa y expresiva.

¿Qué diferencias hay entre serif, sans-serif y monospace?

• Serif: termina en “piquitos” o remates, útiles para dar formalidad.
• Sans-serif: elimina remates, mejora la lectura en pantallas y se ve más neutral.
• Monospace: todos los caracteres ocupan el mismo ancho, facilita alinear símbolos y leer código.

¿Cuándo usar monospace para código?

• Para resaltar funciones, variables y fragmentos de programación.
• Para mejorar la lectura de ejemplos técnicos.
• Para diferenciar texto técnico con fondo claro y padding.

¿Cómo definir font-family, tamaños y estilos en CSS?

Empieza por apuntar a las familias genéricas del navegador con un font-size claro. Luego añade estilo visual cuando lo necesites.

.serif {
  font-family: serif;
  font-size: 20px;
}

.sans {
  font-family: sans-serif;
  font-size: 20px;
}

.monospace {
  font-family: monospace;
  font-size: 20px;
  background: #f0f0f0;
  padding: 5px;
}

• Usa font-family para elegir la familia tipográfica.
• Define font-size consistente para jerarquía y lectura.
• Para destacar monospace: fondo claro y padding breve.

¿Qué errores típicos debes evitar al estilizar fuentes?

• Olvidar el “#” en colores hexadecimales: el navegador no lo interpreta.
• Escribir “font” en lugar de font-size: no aplicará el tamaño.
• No verificar en el inspector: confirma qué fuente se está renderizando.

¿Cómo crear un font stack y cargar Google Fonts con fallback?

Un font stack es la lista ordenada de fuentes en font-family. El navegador intenta la primera; si no existe en el sistema, usa la siguiente. Cierra siempre con una familia genérica como serif, sans-serif o monospace para asegurar un fallback universal.

/* Ejemplo de font stack con genérica al final */
.code-label {
  font-family: "Courier New", Courier, monospace;
}

Cargar de terceros con Google Fonts permite controlar pesos y variaciones como Roman o itálica para casos específicos (por ejemplo, títulos en bold 700). Embeber con la etiqueta HTML de link es directo.

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

Luego, define tus clases con comillas y agrega la familia genérica como fallback.

.google-title {
  font-family: "Poppins", sans-serif; /* títulos */
}

.google-text {
  font-family: "Inter", sans-serif; /* párrafos */
}

• Buena práctica: termina el stack con una familia genérica. Garantiza renderizado consistente si falla la fuente primaria.
• Compatibilidad: algunas fuentes existen solo en ciertos sistemas (Mac OS o iOS) y no en Windows. El fallback evita inconsistencias.
• Confiabilidad: si se cae el servicio de fuentes, el fallback entra sin romper el diseño.

¿Qué considerar al combinar fuentes del sistema y de terceros?

• Prioriza la fuente de marca, pero planea un fallback coherente.
• Selecciona solo los pesos necesarios para rendimiento.
• Alinea usos: títulos con 700, textos con 400/600 según necesidad.

¿Tienes dudas sobre tu font stack o qué pesos cargar desde Google Fonts? Comparte tu caso y ajustamos juntos la configuración ideal.