Fuentes en CSS
Aprende a trabajar con fuentes en CSS, desde las propiedades básicas hasta técnicas avanzadas como fuentes web, variables y optimización.
Cristian Escalante
Última actualización: 7 de abril de 2025
Fuentes en CSS
La tipografía es un elemento fundamental en el diseño web. Las fuentes que elijas y cómo las implementes pueden tener un impacto significativo en la legibilidad, la estética y la experiencia general del usuario en tu sitio web. En este artículo, exploraremos en profundidad cómo trabajar con fuentes en CSS.
Propiedades básicas de fuentes
font-family
La propiedad font-family especifica la familia de fuentes que se utilizará para mostrar texto. Es recomendable proporcionar múltiples opciones en orden de preferencia, terminando con una familia genérica como respaldo:
body {
font-family: 'Helvetica Neue', Arial, sans-serif;
}
Las familias genéricas disponibles son:
serif: Fuentes con remates (como Times New Roman)sans-serif: Fuentes sin remates (como Arial)monospace: Fuentes de ancho fijo (como Courier)cursive: Fuentes que imitan la escritura a manofantasy: Fuentes decorativas
font-size
La propiedad font-size controla el tamaño del texto:
h1 {
font-size: 2.5rem;
}
p {
font-size: 16px;
}
.small-text {
font-size: 0.8em;
}
font-weight
La propiedad font-weight controla el grosor o peso de la fuente:
h1 {
font-weight: bold; /* o 700 */
}
p {
font-weight: normal; /* o 400 */
}
.destacado {
font-weight: 600;
}
Los valores numéricos van desde 100 (muy ligero) hasta 900 (muy grueso), donde 400 equivale a "normal" y 700 a "bold".
font-style
La propiedad font-style se utiliza principalmente para aplicar texto en cursiva:
em {
font-style: italic;
}
.normal {
font-style: normal;
}
.oblique {
font-style: oblique;
}
font-variant
La propiedad font-variant permite mostrar texto en versalitas:
.small-caps {
font-variant: small-caps;
}
line-height
Aunque técnicamente no es una propiedad de fuente, line-height controla el espacio vertical entre líneas de texto y es crucial para la legibilidad:
p {
line-height: 1.6;
}
.apretado {
line-height: 1.2;
}
.espaciado {
line-height: 2;
}
Propiedad abreviada font
La propiedad font permite establecer varias propiedades de fuente en una sola declaración:
p {
/* font: font-style font-variant font-weight font-size/line-height font-family */
font: italic normal bold 16px/1.6 'Helvetica Neue', Arial, sans-serif;
}
Fuentes web (Web Fonts)
Las fuentes web te permiten utilizar fuentes que no están instaladas en el dispositivo del usuario.
@font-face
La regla @font-face te permite definir y utilizar tus propias fuentes web:
@font-face {
font-family: 'MiFuentePersonalizada';
src: url('ruta/a/mi-fuente.woff2') format('woff2'),
url('ruta/a/mi-fuente.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
body {
font-family: 'MiFuentePersonalizada', sans-serif;
}
Google Fonts
Google Fonts es un servicio gratuito que facilita el uso de fuentes web:
<head>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet">
</head>
body {
font-family: 'Open Sans', sans-serif;
}
h1 {
font-weight: 700;
}
h2 {
font-weight: 600;
}
p {
font-weight: 400;
}
Formatos de fuentes
Existen varios formatos de archivos de fuentes, cada uno con diferentes niveles de compatibilidad:
- WOFF2: El formato más moderno y eficiente, con mejor compresión
- WOFF: Buena compatibilidad con navegadores modernos
- TTF/OTF: Compatibles con navegadores más antiguos, pero archivos más grandes
- EOT: Formato antiguo para Internet Explorer
- SVG: Raramente usado hoy en día
Para una compatibilidad óptima, proporciona al menos WOFF2 y WOFF:
@font-face {
font-family: 'MiFuente';
src: url('mi-fuente.woff2') format('woff2'),
url('mi-fuente.woff') format('woff');
}
Optimización de fuentes
font-display
La propiedad font-display controla cómo se muestra una fuente durante su carga:
@font-face {
font-family: 'MiFuente';
src: url('mi-fuente.woff2') format('woff2');
font-display: swap; /* Muestra texto con fuente alternativa hasta que la personalizada se cargue */
}
Valores comunes:
swap: Usa una fuente alternativa hasta que la personalizada se cargueblock: Oculta el texto brevemente hasta que la fuente se carguefallback: Espera un tiempo corto y luego usa una alternativa si es necesariooptional: Permite al navegador decidir si usar la fuente personalizada
Subconjuntos de caracteres
Para mejorar el rendimiento, puedes cargar solo los caracteres que necesitas:
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap&subset=latin" rel="stylesheet">
Precargar fuentes críticas
Para fuentes esenciales, puedes usar la precarga para mejorar el rendimiento:
<link rel="preload" href="mi-fuente.woff2" as="font" type="font/woff2" crossorigin>
Técnicas avanzadas
Variables CSS para sistemas tipográficos
Las variables CSS (custom properties) son excelentes para crear sistemas tipográficos coherentes:
:root {
--font-primary: 'Roboto', sans-serif;
--font-secondary: 'Merriweather', serif;
--font-monospace: 'Fira Code', monospace;
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-md: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.25rem;
--font-size-2xl: 1.5rem;
--font-size-3xl: 1.875rem;
--font-size-4xl: 2.25rem;
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--line-height-tight: 1.2;
--line-height-normal: 1.5;
--line-height-relaxed: 1.75;
}
h1 {
font-family: var(--font-primary);
font-size: var(--font-size-4xl);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
}
p {
font-family: var(--font-secondary);
font-size: var(--font-size-md);
font-weight: var(--font-weight-normal);
line-height: var(--line-height-relaxed);
}
code {
font-family: var(--font-monospace);
font-size: var(--font-size-sm);
}
Escala tipográfica
Una escala tipográfica crea una jerarquía visual coherente:
:root {
--base-size: 1rem;
--scale-ratio: 1.25; /* Escala mayor tercera */
--text-xs: calc(var(--base-size) / var(--scale-ratio));
--text-sm: var(--base-size);
--text-md: calc(var(--base-size) * var(--scale-ratio));
--text-lg: calc(var(--text-md) * var(--scale-ratio));
--text-xl: calc(var(--text-lg) * var(--scale-ratio));
--text-2xl: calc(var(--text-xl) * var(--scale-ratio));
--text-3xl: calc(var(--text-2xl) * var(--scale-ratio));
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-md); }
h6 { font-size: var(--text-sm); }
p { font-size: var(--text-sm); }
.small { font-size: var(--text-xs); }
Tipografía responsiva
Ajusta automáticamente el tamaño de fuente según el tamaño de la ventana:
/* Método 1: Media queries */
h1 {
font-size: 2rem;
}
@media (min-width: 768px) {
h1 {
font-size: 2.5rem;
}
}
@media (min-width: 1200px) {
h1 {
font-size: 3rem;
}
}
/* Método 2: Unidades viewport */
h1 {
font-size: calc(1.5rem + 1.5vw);
}
/* Método 3: clamp() */
h1 {
font-size: clamp(1.5rem, 1rem + 2vw, 3rem);
}
Fuentes variables
Las fuentes variables permiten ajustar múltiples atributos como peso, anchura e inclinación en un solo archivo:
@font-face {
font-family: 'MiFuenteVariable';
src: url('mi-fuente-variable.woff2') format('woff2-variations');
font-weight: 100 900;
}
.light {
font-weight: 300;
}
.normal {
font-weight: 400;
}
.bold {
font-weight: 700;
}
.custom {
font-weight: 527;
font-variation-settings: 'wdth' 85, 'ital' 0.5;
}
Ejemplo práctico: Sistema tipográfico completo
Veamos un ejemplo completo de un sistema tipográfico para un sitio web:
/* Base y variables */
:root {
/* Fuentes */
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-serif: 'Merriweather', Georgia, serif;
--font-mono: 'Fira Code', Consolas, Monaco, monospace;
/* Tamaños (escala de tipo) */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-lg: 1.125rem; /* 18px */
--text-xl: 1.25rem; /* 20px */
--text-2xl: 1.5rem; /* 24px */
--text-3xl: 1.875rem; /* 30px */
--text-4xl: 2.25rem; /* 36px */
--text-5xl: 3rem; /* 48px */
--text-6xl: 4rem; /* 64px */
/* Pesos */
--font-light: 300;
--font-normal: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;
/* Alturas de línea */
--leading-none: 1;
--leading-tight: 1.25;
--leading-snug: 1.375;
--leading-normal: 1.5;
--leading-relaxed: 1.625;
--leading-loose: 2;
/* Espaciado entre letras */
--tracking-tighter: -0.05em;
--tracking-tight: -0.025em;
--tracking-normal: 0;
--tracking-wide: 0.025em;
--tracking-wider: 0.05em;
--tracking-widest: 0.1em;
}
/* Estilos base */
body {
font-family: var(--font-sans);
font-size: var(--text-base);
font-weight: var(--font-normal);
line-height: var(--leading-normal);
color: #333;
}
/* Encabezados */
h1, h2, h3, h4, h5, h6 {
font-weight: var(--font-bold);
line-height: var(--leading-tight);
margin-top: 1.5em;
margin-bottom: 0.5em;
}
h1 {
font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
letter-spacing: var(--tracking-tight);
}
h2 {
font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
}
h3 {
font-size: clamp(var(--text-xl), 3vw, var(--text-3xl));
}
h4 {
font-size: var(--text-xl);
}
h5 {
font-size: var(--text-lg);
}
h6 {
font-size: var(--text-base);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
}
/* Párrafos y texto */
p {
margin-bottom: 1.5em;
}
.lead {
font-size: var(--text-xl);
line-height: var(--leading-relaxed);
margin-bottom: 2em;
}
small, .text-small {
font-size: var(--text-sm);
}
.text-xs {
font-size: var(--text-xs);
}
/* Enlaces */
a {
color: #0066cc;
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
}
a:hover {
text-decoration-thickness: 2px;
}
/* Listas */
ul, ol {
margin-bottom: 1.5em;
padding-left: 1.5em;
}
li {
margin-bottom: 0.5em;
}
/* Código */
code, pre {
font-family: var(--font-mono);
font-size: var(--text-sm);
}
pre {
background-color: #f5f5f5;
padding: 1em;
border-radius: 4px;
overflow-x: auto;
}
/* Citas */
blockquote {
font-family: var(--font-serif);
font-style: italic;
border-left: 4px solid #ddd;
padding-left: 1em;
margin-left: 0;
}
/* Utilidades tipográficas */
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.uppercase {
text-transform: uppercase;
}
.capitalize {
text-transform: capitalize;
}
.italic {
font-style: italic;
}
.font-light {
font-weight: var(--font-light);
}
.font-normal {
font-weight: var(--font-normal);
}
.font-medium {
font-weight: var(--font-medium);
}
.font-semibold {
font-weight: var(--font-semibold);
}
.font-bold {
font-weight: var(--font-bold);
}
/* Responsividad */
@media (max-width: 640px) {
:root {
/* Ligeramente más pequeño en móviles */
--text-base: 0.9375rem;
}
h1, h2, h3 {
/* Reducir espacio superior en móviles */
margin-top: 1em;
}
}
Mejores prácticas para trabajar con fuentes
- Limita el número de fuentes: Usa no más de 2-3 familias de fuentes en un sitio para mantener la coherencia y el rendimiento.
- Considera la legibilidad: Elige fuentes legibles y asegúrate de que el tamaño y el contraste sean adecuados.
- Proporciona alternativas: Siempre incluye fuentes de respaldo y familias genéricas.
- Optimiza el rendimiento: Usa subconjuntos, precarga y formatos modernos como WOFF2.
- Prueba en diferentes dispositivos: Asegúrate de que tus fuentes se vean bien en diferentes tamaños de pantalla y resoluciones.
- Respeta la jerarquía: Crea una clara jerarquía visual con diferentes tamaños y pesos.
- Considera la accesibilidad: Asegúrate de que el texto sea redimensionable y legible para usuarios con discapacidades visuales.
- Usa unidades relativas: Prefiere
rem,emo porcentajes sobre píxeles para permitir el redimensionamiento.
Conclusión
Las fuentes son un componente esencial del diseño web que afecta tanto a la estética como a la usabilidad. Con CSS moderno, tenemos una amplia gama de herramientas para implementar tipografía sofisticada y responsiva. Desde las propiedades básicas hasta las técnicas avanzadas como fuentes variables y sistemas tipográficos escalables, dominar el uso de fuentes en CSS te permitirá crear experiencias web más atractivas y accesibles.