Tipografía para Web | Diseño Digital

El texto como Interfaz de Usuario

1. Punto de partida

La web es principalmente texto. Aunque existan video, animación, inteligencia artificial y entornos inmersivos, la interacción digital sigue mediada por lenguaje escrito.

Texto no es decoración. Texto es interfaz. Diseñar web es organizar información escrita para que pueda leerse, escanearse y entenderse rápidamente.

Web Design is 95% Typography
-Oliver Reichenstein

Como señala Oliver Reichenstein en su artículo fundacional "Web Design is 95% Typography", optimizar tipografía es optimizar la interfaz de usuario.

Recursos:

2. Tipografía como sistema

Elegir una tipografía no es hacer tipografía. La tipografía en web implica construir un sistema cohesivo y escalable.

Componentes del sistema tipográfico

Jerarquía
Orden de importancia visual y semántica (h1-h6, p, small)
Escala
Progresión de tamaños. Común: escala mayor (1.25), tercera mayor (1.25), cuarta perfecta (1.333). Herramienta: Type Scale
Ritmo vertical
Espaciado consistente entre elementos (margin, padding, line-height)
Longitud de línea
45–75 caracteres para lectura óptima
Espaciado
Letter-spacing, word-spacing, y espacio entre bloques
Contraste
Mínimo 4.5:1 para texto normal, 3:1 para texto grande (WCAG AA)
Accesibilidad
Escalabilidad, legibilidad, y soporte para tecnologías asistivas

La calidad del diseño depende del sistema, no de la fuente aislada. Un sistema tipográfico robusto garantiza consistencia visual y mantenibilidad del código. 

/* Ejemplo de sistema tipográfico en CSS */
html {
  font-size: 100%; /* 16px base */
}

body {
  font-family: system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  color: #1a1a1a;
}

h1 { font-size: 2.488rem; }    /* ~40px */
h2 { font-size: 2.074rem; }    /* ~33px */
h3 { font-size: 1.728rem; }    /* ~28px */
p  { font-size: 1rem; }         /* 16px */
small { font-size: 0.833rem; } /* ~13px */

3. Familias tipográficas

Serif

Tradición editorial, adecuada para lectura extensa. Asociada a libros y publicaciones culturales. Las serifas (remates) guían el ojo horizontalmente, facilitando la lectura en bloques largos.

Google Fonts recomendadas:

@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700&display=swap');

font-family: "Merriweather", Georgia, serif;

Sans Serif

Contemporánea, funcional y altamente legible en pantalla. Dominante en interfaces digitales. Sin remates decorativos, ofrece claridad en tamaños pequeños y pantallas de baja resolución.

Google Fonts recomendadas:

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300..900&display=swap');

font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

Monospace

Caracteres de ancho igual. Asociada a programación y sistemas técnicos. Esencial para código, tablas de datos y situaciones donde la alineación vertical es crítica.

Google Fonts recomendadas:

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap');

font-family: "Fira Code", "Courier New", monospace;

Otros grupos genéricos

  • cursive: Simula escritura manual. Uso decorativo. Ejemplo: Pacifico
  • fantasy: Decorativa o temática. Uso expresivo puntual. Ejemplo: Creepster
  • system-ui: Fuente nativa del sistema. Alta legibilidad, rendimiento óptimo (sin descarga), y familiaridad para el usuario. 
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 
             "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

Variable Fonts

Las fuentes variables contienen múltiples variaciones (peso, ancho, inclinación) en un solo archivo. Ventajas: menor peso de descarga, interpolación suave, y control granular sobre los ejes tipográficos.

Google Fonts variables:

@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:wght@100..1000&display=swap');

h1 {
  font-family: "Roboto Flex", sans-serif;
  font-variation-settings: "wght" 800, "wdth" 120;
}

4. Jerarquía y semántica

HTML define estructura semántica que lectores de pantalla y motores de búsqueda interpretan. La jerarquía visual debe reflejar la jerarquía semántica del HTML.

Niveles semánticos

<h1>
Título principal del documento. Solo uno por página para SEO y accesibilidad.
<h2>
Secciones principales. Divide el contenido en bloques temáticos.
<h3>–<h6>
Subsecciones. Mantener jerarquía lógica sin saltar niveles.
<p>
Texto base. El tamaño de párrafo define la escala del sistema.

Diseñar jerarquía visual

La jerarquía no depende solo del tamaño, también de: 

/* Jerarquía completa */
h1 {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.1;
  margin-block: 0 1.5rem;
  letter-spacing: -0.02em;
}

h2 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  margin-block: 2rem 1rem;
}

h3 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
  margin-block: 1.5rem 0.75rem;
}

p {
  font-size: 1rem;
  line-height: 1.6;
  margin-block: 0 1rem;
}

Accesibilidad: Lectores de pantalla navegan por headings. Usuarios con discapacidad cognitiva dependen de jerarquía clara. W3C: Headings Tutorial

5. Tamaño base y rem

El navegador define un tamaño base de 16px por defecto, pero usuarios pueden modificarlo en la configuración del navegador (accesibilidad crítica para personas con baja visión). 

/* CORRECTO: Respetar preferencia del usuario */
html {
  font-size: 100%; /* = 16px si el usuario no lo modificó */
}

/* INCORRECTO: Anula preferencia del usuario */
html {
  font-size: 16px; /* ❌ Valor fijo */
}

¿Qué es rem?

rem = root em. Unidad relativa al tamaño de fuente del elemento <html>.

Ventajas de rem

  1. Accesibilidad: Escala automáticamente con las preferencias del usuario
  2. Consistencia: Todo el sistema escala proporcionalmente
  3. Mantenibilidad: Un cambio en la raíz afecta todo el sitio
  4. Previsibilidad: Siempre relativo al mismo origen (a diferencia de em)
/* Sistema tipográfico con rem */
html { font-size: 100%; }

body { font-size: 1rem; }      /* 16px */
h1   { font-size: 2.5rem; }    /* 40px */
h2   { font-size: 2rem; }      /* 32px */
small { font-size: 0.875rem; } /* 14px */

Nota: Si un usuario configura su navegador a 20px, todo el sistema escala automáticamente (h1 = 50px, h2 = 40px, etc.).

Referencia: Pixels vs. Relative Units — 24 Accessibility

6. Unidades en tipografía

Unidades absolutas

px (píxel)
Unidad fija. No escala con preferencias del usuario. Evitar para font-size por accesibilidad. Útil para borders, sombras, y ajustes menores. 
/* ❌ Poco accesible */
p { font-size: 16px; }

Unidades relativas

rem (root em)
Relativa al <html>. Previsible y escalable. Recomendada para font-size. 
/* ✅ Accesible y escalable */
p { font-size: 1rem; }
h1 { font-size: 2.5rem; }
em
Relativa al tamaño de fuente del elemento padre. Compone (1.5em de 1.5em = 2.25). Útil para espaciado proporcional al texto. 
p {
  font-size: 1rem;
  margin-bottom: 1em; /* Se ajusta al tamaño del texto */
  padding-inline: 2em;
}
% (porcentaje)
Relativa al elemento padre. Similar a em. 
small { font-size: 87.5%; } /* 87.5% del padre */
vw / vh (viewport width / height)
Relativa al tamaño de la ventana. 1vw = 1% del ancho del viewport. Útil para tipografía fluida, pero cuidado con accesibilidad (puede ser muy pequeña o grande). 
/* Tipografía fluida con clamp() */
h1 {
  font-size: clamp(2rem, 5vw, 4rem);
  /* min: 2rem, ideal: 5vw, max: 4rem */
}
ch (character width)
Ancho del carácter "0" en la fuente actual. Ideal para controlar longitud de línea. 
article {
  max-width: 65ch; /* ~65 caracteres por línea */
}
ex
Altura de la letra "x" minúscula (x-height). Útil para alinear elementos con el texto.

Comparación práctica

Unidad Relativa a Accesibilidad Uso recomendado
rem Elemento raíz ✅ Excelente Font-size, spacing
em Elemento padre ✅ Buena Padding, margin proporcional
ch Ancho de carácter ✅ Buena Max-width de contenido
vw Viewport ⚠️ Cuidado Tipografía fluida con clamp()
px Nada ❌ Mala Borders, sombras

Recursos:

7. Longitud de línea

La legibilidad depende críticamente de la longitud de línea (también llamada "medida" en tipografía tradicional).

Problemas de longitud incorrecta

Rango óptimo

45–75 caracteres por línea (óptimo: ~65 caracteres). Este rango está validado por investigación de tipografía y usabilidad.

Implementación con ch

La unidad ch representa el ancho del carácter "0". Es aproximada pero efectiva para controlar longitud de línea. 

/* Contenido principal */
article {
  max-width: 65ch;
  margin-inline: auto;
  padding-inline: 1rem;
}

/* Contenido ancho (listas, tablas) */
.wide-content {
  max-width: 80ch;
}

/* Textos breves (poesía, citas) */
blockquote {
  max-width: 50ch;
}

Consideraciones responsive

/* Sistema adaptable */
article {
  max-width: min(65ch, 100% - 2rem);
  margin-inline: auto;
}

/* O con container queries */
@container (min-width: 60ch) {
  p { max-width: 65ch; }
}

Relación con interlineado

Líneas más largas requieren mayor interlineado para compensar:

Referencia: Robert Bringhurst recomienda 45–75 caracteres en The Elements of Typographic Style, considerado la biblia de la tipografía.

Estudios:

8. Interlineado

El interlineado (line-height en CSS, leading en tipografía tradicional) es el espacio vertical entre líneas de texto. Afecta directamente la comodidad y velocidad de lectura.

Principios del interlineado

Factores que afectan el interlineado

Longitud de línea
Líneas más largas necesitan más interlineado
Tamaño de fuente
Texto pequeño necesita más espacio proporcional
X-height de la fuente
Fuentes con x-height alta (como Verdana) necesitan más espacio
Peso de la fuente
Pesos pesados (bold) necesitan más respiración

Valores recomendados

/* Texto base */
body {
  line-height: 1.6;
}

/* Headings: menos interlineado por ser texto corto */
h1, h2, h3 {
  line-height: 1.1–1.3;
}

/* Texto pequeño: más proporción */
small, .caption {
  line-height: 1.7;
}

/* Texto display (muy grande) */
.hero-text {
  line-height: 1;
  letter-spacing: -0.02em;
}

Accesibilidad del interlineado

WCAG 2.1 Success Criterion 1.4.12: Line height debe ser al menos 1.5× el tamaño de fuente en párrafos.

Usuarios con dislexia, baja visión o discapacidades cognitivas dependen de interlineado generoso. 

/* Cumple WCAG 2.1 Level AA */
p {
  line-height: 1.5; /* mínimo */
  /* Recomendado: 1.6 */
}

Unidades en line-height

Usar valores sin unidad (unitless): 

/* ✅ CORRECTO: Valor sin unidad */
p {
  line-height: 1.6; /* Se multiplica por font-size */
}

/* ❌ EVITAR: Valores fijos */
p {
  line-height: 24px; /* No escala con texto */
}

/* ⚠️ CUIDADO: Valores relativos */
p {
  line-height: 1.6em; /* Se hereda como valor fijo */
}

Valores sin unidad heredan proporcionalmente, permitiendo que cada elemento calcule su propio interlineado basado en su font-size.

Recursos:

9. Evitar justificado en web

El texto justificado (alineado a ambos lados) no es recomendable en web. Aunque funciona en impresión con algoritmos de partición de palabras sofisticados, en pantalla genera problemas.

Problemas del justificado en web

  1. Ríos de espacio en blanco: CSS distribuye espacio entre palabras de forma desigual, creando "ríos" verticales que interrumpen la lectura.
  2. Partición de palabras limitada: La propiedad hyphens tiene soporte inconsistente entre navegadores y es deshabilitada por muchos usuarios.
  3. Ancho fluido: En web responsive, el ancho del contenido cambia constantemente (móvil, tablet, desktop), haciendo impredecible el espaciado.
  4. Accesibilidad: Usuarios con dislexia encuentran más difícil leer texto justificado. Espacios irregulares dificultan tracking.

Alineación recomendada

/* ✅ RECOMENDADO */
p {
  text-align: left; /* LTR languages */
  /* text-align: start; (respeta dirección del idioma) */
}

/* ❌ EVITAR */
p {
  text-align: justify;
}

Excepción: Justificado con hyphenation

Si es absolutamente necesario justificar (ej: diseño editorial), combinar con hyphenation: 

p {
  text-align: justify;
  hyphens: auto;
  hyphenate-limit-chars: 6 3 2; /* min-word min-before min-after */
}

@supports (hyphens: auto) {
  p { text-align: justify; }
}

Nota: hyphens: auto requiere atributo lang en HTML para funcionar: 

<html lang="es"> <!-- Esencial para hyphenation -->

Alternativas modernas

/* Alineación lógica (respeta LTR/RTL) */
p {
  text-align: start;
}

/* Centrado para textos breves */
blockquote {
  text-align: center;
}

/* Derecha para datos numéricos */
.table-number {
  text-align: end;
}

Principio fundamental: Pantalla no es impresión. Las convenciones editoriales impresas no siempre se transfieren a medios digitales responsivos.

Referencias:

10. Texto como interfaz

Tratar texto como interfaz implica diseñar para escaneo, comprensión rápida y acción. El texto no solo comunica, también guía al usuario a través de la experiencia.

Principios de texto como UI

1. Escaneabilidad
Usuarios no leen palabra por palabra, escanean en patrón F (eye-tracking research de Nielsen Norman Group).
  • Usar headings descriptivos
  • Listas con bullets
  • Negritas para keywords
  • Párrafos cortos (3–4 líneas)
2. Jerarquía de información
Ordenar contenido del más al menos importante. Pirámide invertida (periodismo): conclusión primero, detalles después.
3. Acción clara
CTAs (calls-to-action) y enlaces deben ser inequívocos:
  • ❌ "Click aquí" — Ambiguo
  • ✅ "Descargar guía PDF" — Específico
4. Tono consistente
Voice & tone del contenido debe reflejar la marca y ser coherente en todo el sitio.

Tipografía funcional

/* Énfasis por función, no decoración */

/* Llamadas a la acción */
.cta {
  font-size: 1.125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Metadata / información secundaria */
.meta {
  font-size: 0.875rem;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Código inline */
code {
  font-family: monospace;
  font-size: 0.9em;
  background: #f5f5f5;
  padding: 0.2em 0.4em;
  border-radius: 3px;
}

/* Citas destacadas */
blockquote {
  font-size: 1.25rem;
  font-style: italic;
  border-left: 4px solid currentColor;
  padding-left: 1.5rem;
}

Microcopy efectivo

Microcopy (textos de UI pequeños) tiene impacto desproporcionado:

Optimización es accesibilidad

Optimizar tipografía es optimizar accesibilidad, usabilidad y comprensión. Un sistema tipográfico robusto:

Métricas de éxito:

Recursos:

11. Accesibilidad tipográfica

La accesibilidad tipográfica garantiza que el contenido sea legible y usable para todas las personas, incluyendo quienes tienen discapacidades visuales, cognitivas, o motoras.

Estándares WCAG 2.1

Las Web Content Accessibility Guidelines (WCAG) definen criterios de accesibilidad. Para tipografía:

1.4.3 Contraste (Nivel AA)

/* ✅ Contraste adecuado */
body {
  color: #1a1a1a; /* sobre fondo blanco = 16.1:1 */
  background: #ffffff;
}

/* ❌ Contraste insuficiente */
.subtle-text {
  color: #999999; /* sobre blanco = 2.8:1 ❌ */
}

Herramienta: Color Contrast Analyzer — Adobe

1.4.4 Redimensionamiento de texto (Nivel AA)

El texto debe poder escalarse hasta 200% sin pérdida de contenido o funcionalidad. 

/* ✅ Escalable */
html { font-size: 100%; }
p { font-size: 1rem; }

/* ❌ No escalable */
html { font-size: 16px; }
p { font-size: 16px; }

1.4.8 Presentación visual (Nivel AAA)

1.4.12 Espaciado de texto (Nivel AA)

Usuarios deben poder ajustar espaciado sin pérdida de contenido: 

/* Los usuarios pueden aplicar: */
* {
  line-height: 1.5 !important;
  letter-spacing: 0.12em !important;
  word-spacing: 0.16em !important;
}

p {
  margin-bottom: 2em !important;
}

/* Tu CSS debe adaptarse sin romper layout */

Tipografía para dislexia

15-20% de la población tiene algún grado de dislexia. Mejores prácticas:

Fuentes recomendadas:

Modo de alto contraste

Respetar las preferencias del sistema operativo: 

/* Detectar preferencia de contraste alto */
@media (prefers-contrast: high) {
  body {
    color: #000000;
    background: #ffffff;
  }
  
  a {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
}

Checklist de accesibilidad tipográfica

  1. ☑️ Usar rem para font-size
  2. ☑️ Contraste mínimo 4.5:1 (texto normal)
  3. ☑️ Line-height ≥ 1.5 en párrafos
  4. ☑️ Max-width 45-75ch para lectura
  5. ☑️ No justificar texto en párrafos
  6. ☑️ Fuentes legibles (evitar decorativas para cuerpo)
  7. ☑️ Atributo lang en HTML
  8. ☑️ Tamaño mínimo 1rem (16px equivalente)
  9. ☑️ Texto en imágenes evitado (o con alt adecuado)
  10. ☑️ Color no es único indicador de información

Herramientas de testing

Recursos fundamentales:

12. Fundamentos

  1. Diseñar sistemas, no tamaños sueltos.
  2. Respetar la preferencia del usuario.
  3. Usar rem para jerarquía.
  4. Controlar longitud con ch.
  5. No justificar texto.
  6. Priorizar lectura sobre ornamentación.
  7. Recordar que texto es interfaz.

Bibliografía y referencias

Artículos fundamentales

Libros esenciales

Recursos de fuentes

Casos de estudio

Accesibilidad

Herramientas

Sistemas de diseño de referencia

Comunidades y blogs