Tipografía web: cómo elegir y aplicar la tipografía de una web

La tipografía web es la elección y la composición del texto en un sitio web: qué tipografías, con qué tamaños, longitud de línea, interlineado, pesos y contraste, y cómo se cargan las fuentes para que las páginas sigan siendo rápidas. Una buena tipografía web hace que el texto se lea con facilidad en cualquier pantalla, transmite la voz de la marca y es accesible; un sistema sensato no suele necesitar más de dos tipografías y una escala corta de tamaños.

Última actualización: 29 de octubre de 2026.

Esta guía explica cómo elegir las tipografías de una web, cómo crear una escala tipográfica, qué ajustes deciden la legibilidad, los requisitos de accesibilidad, la carga de fuentes y el rendimiento, las licencias, la tipografía multilingüe y los errores que vemos con más frecuencia. Está escrita para responsables de marketing, fundadores y diseñadores que preparan el briefing de una web o la revisan.

En Odduel, agencia de creatividad y tecnología en Barcelona y São Paulo, nuestro servicio de branding diseña identidades cuya tipografía tiene que funcionar tanto en pantalla como en papel. Para The Sugar Coated Cult combinamos Druk Condensed y Druk Wide para los titulares con Helvetica Neue para el texto; para Torto Cozinha, Neue Metana para los títulos con Avenir Next para el cuerpo de texto. Nuestra propia web usa Inter alojada en nuestro servidor. Los principios que siguen salen de ese trabajo.

En resumen: elige para el texto una tipografía que se lea bien en tamaños pequeños en pantalla y, como mucho, otra para los titulares que transmita la marca. Pon el cuerpo de texto a 16 píxeles o más, con líneas de unos 45 a 75 caracteres y un interlineado de entre 1,4 y 1,6 veces el tamaño. Crea una escala corta de tamaños, mantén un contraste alto, deja que el texto se pueda ampliar, carga solo los pesos que uses, aloja las fuentes en tu servidor cuando la licencia lo permita y revisa cada idioma en el que publiques.

¿Cómo elegir las tipografías de una web?

Empieza por la función de cada tipografía, no por un moodboard.

• Tipografía de texto: la que sostiene los párrafos, los formularios y los menús. Necesita formas abiertas, una distinción clara entre letras parecidas como I, l y 1, una altura de x generosa para los tamaños pequeños, y los pesos y cursivas que vayas a usar.
• Tipografía de titulares: opcional, para titulares y frases cortas, donde la marca habla más alto. Puede tener más carácter, porque se lee en fragmentos breves y a gran tamaño.
• Tipografía monoespaciada o de acento: puntual, para código, datos o un recurso concreto de la marca.

Prueba las candidatas con tu contenido real, en cada idioma en el que publiques, a los tamaños que vayas a usar, en un móvil y en un portátil. Una tipografía que impresiona en un catálogo puede cansar la vista en un párrafo largo.

La tipografía de titulares es donde se encuentran tipografía e identidad. Debe salir del propio sistema de la marca, para que la web, el packaging, las publicaciones en redes y la señalética hablen con la misma voz. Si la tipografía de la identidad no tiene licencia para web o no cubre tus idiomas, elige una tipografía preparada para web con una estructura parecida en lugar de un sustituto sin relación, y deja la decisión registrada en la guía de marca. Nuestra guía de branding explica cómo encaja la tipografía en la identidad completa, del logotipo al tono de voz.

¿Serif o sans serif en pantalla?

Las pantallas actuales muestran bien las dos. Las sans serif siguen siendo la opción habitual para interfaces y cuerpo de texto porque se mantienen claras en tamaños pequeños y en pantallas de menor resolución. Las serif pueden funcionar muy bien en lecturas largas, webs editoriales y marcas que buscan una voz más literaria, siempre que estén diseñadas para pantalla y se usen a un tamaño cómodo. La elección depende del tono y de la legibilidad a tus tamaños, no de una regla.

¿Cómo crear una escala tipográfica?

Una escala tipográfica es un conjunto reducido de tamaños que se usa de forma coherente en toda la web. Da unidad a las páginas y agiliza el diseño y el desarrollo.

Función	Tamaño habitual en ordenador	Tamaño habitual en móvil	Interlineado	Notas
Cuerpo de texto	De 16 a 20 px	De 16 a 18 px	De 1,4 a 1,6	Nunca menos de 16 px en párrafos
Texto pequeño (pies de foto, etiquetas)	De 13 a 14 px	De 13 a 14 px	De 1,3 a 1,5	Solo textos cortos, con contraste alto
H3	De 20 a 24 px	De 18 a 22 px	De 1,2 a 1,35	Claramente más grande o con más peso que el texto
H2	De 28 a 40 px	De 24 a 30 px	De 1,1 a 1,25	Títulos de las secciones principales
H1	De 40 a 80 px o más	De 30 a 44 px	De 1,0 a 1,15	Uno por página; puede usar la tipografía display

Son rangos, no un estándar. Hoy muchas webs usan tamaños fluidos que crecen de forma progresiva entre un mínimo y un máximo a medida que se ensancha la ventana, para que los títulos quepan en móviles estrechos y sigan teniendo presencia en pantallas grandes.

¿Qué ajustes determinan la legibilidad?

• Longitud de línea: entre 45 y 75 caracteres por línea en el texto, espacios incluidos. Con líneas más largas cuesta encontrar la siguiente; con líneas más cortas se rompe el ritmo.
• Interlineado: entre 1,4 y 1,6 veces el tamaño de la fuente en los párrafos, más ajustado en los títulos grandes.
• Espacio entre párrafos: una separación clara entre párrafos, normalmente cercana a una línea.
• Alineación: texto alineado a la izquierda para la mayoría de los contenidos en idiomas que se leen de izquierda a derecha; evita el texto justificado en la web, que crea huecos irregulares.
• Pesos: regular para el texto y un peso claramente mayor para destacar y para los títulos; los pesos muy finos se leen mal en tamaños pequeños.
• Mayúsculas y espaciado: las etiquetas cortas en mayúsculas ganan con un espaciado entre letras algo más amplio; los textos largos en mayúsculas cuestan de leer.
• Viudas y cortes: evita palabras sueltas en la última línea de títulos y párrafos cortos; el CSS actual puede equilibrar las líneas de los títulos automáticamente.

¿Cómo afecta la tipografía a la accesibilidad?

Una tipografía accesible es, sobre todo, buena tipografía aplicada con coherencia. Las Pautas de Accesibilidad para el Contenido Web fijan un contraste mínimo de 4,5:1 para el texto normal y de 3:1 para el texto grande, y exigen que el texto pueda ampliarse y el espaciado aumentarse sin que se pierda contenido.

• Contraste: comprueba el texto sobre su fondo real, también cuando va sobre fotografías.
• Ampliación: usa unidades relativas para que el texto crezca cuando el usuario aumente el tamaño en su navegador.
• Espaciado: el diseño debe aguantar un mayor espacio entre líneas, letras y palabras.
• Nada de texto en imágenes: los títulos y mensajes deben ser texto real, que se pueda leer, traducir y ampliar.
• Enlaces y foco claros: los enlaces deben parecer enlaces y el foco del teclado debe verse.

Nuestra guía sobre accesibilidad web explica con más detalle los requisitos que se aplican en Europa.

¿Cómo afecta la carga de fuentes al rendimiento?

Las fuentes son archivos que descarga cada visitante, así que influyen en la velocidad y en cómo se muestra la página mientras carga.

• Carga solo lo que uses: cada peso y cada estilo es un archivo distinto; dos familias con tres pesos cada una suelen ser más que suficientes.
• Usa formatos actuales: WOFF2 está comprimido y lo admiten los navegadores actuales.
• Aloja las fuentes en tu servidor siempre que puedas: servirlas desde tu propio dominio evita conexiones adicionales y, con algunos servicios, transferencias de datos de los visitantes a terceros, algo relevante según el RGPD.
• Controla cómo aparece el texto: configura font-display para que el texto se muestre al instante con una fuente alternativa, y elige una alternativa de proporciones parecidas para que las líneas no salten cuando llegue la fuente web.
• Precarga el archivo principal que se usa en la primera pantalla y reduce las fuentes a los caracteres que necesitan tus idiomas.
• Valora las fuentes variables, que reúnen muchos pesos en un solo archivo, cuando uses varios pesos.

Las buenas prácticas para fuentes de Google explican estas técnicas en detalle.

¿Cómo funcionan las licencias de fuentes en la web?

Las fuentes son software con licencia. Una licencia de escritorio para diseñar materiales impresos no suele cubrir su uso incrustado en una web, y las licencias web pueden cobrarse según las visitas mensuales o el número de dominios. Las familias de código abierto pueden usarse libremente dentro de los términos de su licencia. Lleva un registro de cada fuente, su licencia y lo que cubre, e inclúyelo en tu guía de marca; nuestra guía sobre la guía de marca explica qué más debe incluir.

¿Qué cambia en las webs multilingües?

Una web publicada en varios idiomas necesita una tipografía que cubra todos los caracteres que va a mostrar: los acentos del francés, el portugués y el español, la ß y las diéresis del alemán, y cualquier otro sistema de escritura que pienses añadir. Revisa el juego de caracteres de la fuente antes de decidirte. Prueba los titulares en el idioma más largo, porque las palabras en alemán y en portugués pueden ser mucho más largas que en inglés. Comprueba también que los saltos de línea y la división de palabras funcionan en cada idioma. Un tamaño que encaja un titular en inglés en una sola línea puede necesitar ajustes en otros idiomas.

¿Cuáles son los errores más comunes en tipografía web?

• Demasiadas fuentes o pesos, que dan un aspecto incoherente y ralentizan las páginas.
• Texto de lectura demasiado pequeño, sobre todo en el móvil.
• Texto gris con poco contraste sobre fondos claros.
• Líneas demasiado largas en pantallas anchas.
• Texto metido en imágenes, que los lectores de pantalla no pueden leer y que no se puede traducir ni ampliar.
• Fuentes cargadas desde varios servicios sin necesidad, con más conexiones y más datos que transferir.
• Olvidarse de los demás idiomas, con acentos que faltan o titulares que se desbordan.
• Sin plan alternativo, de modo que el texto no se ve o salta mientras cargan las fuentes.

Preguntas frecuentes

Una buena tipografía web es un sistema breve y coherente, probado con contenido real en cada idioma en que publicas. Descubre cómo nuestro servicio de branding diseña tipografías que funcionan en pantalla y en papel, o cuéntanos tu proyecto y revisaremos la tipografía de tu web.