06 Nov Tipos de tipografías: clasificación, ejemplos y cómo elegirlas
Elegir una tipografía no consiste en buscar una fuente bonita y aplicarla a toda la web. La tipografía define cómo se lee un contenido, qué jerarquía percibe el usuario y qué personalidad transmite una marca antes incluso de entrar en el mensaje.
El problema es que términos como serif, sans serif, slab, display o script se mezclan con clasificaciones históricas y con nombres de fuentes concretas. Si no tienes una base clara, es fácil elegir por estética y acabar con una web poco legible o incoherente.
En esta guía vas a ver los principales tipos de tipografías, cómo se clasifican, ejemplos conocidos y un método práctico para elegirlas según el uso: cuerpo de texto, titulares, ecommerce, web corporativa, portfolio o identidad de marca.
Para texto largo: prioriza legibilidad antes que personalidad.
Para títulos: puedes introducir más carácter y contraste.
Para una web profesional: una o dos familias bien trabajadas suelen ser suficientes.
Si dudas: empieza con una sans serif neutra para cuerpo y añade una segunda familia solo si aporta una función clara.
Tipos de tipografías: clasificación rápida
Para trabajar en diseño web no necesitas memorizar toda la historia de la tipografía. Lo más útil es empezar por seis grandes grupos prácticos.
| Tipo | Cómo reconocerla | Qué transmite | Uso habitual | Ejemplos |
|---|---|---|---|---|
| Serif | Remates al final de los trazos | Tradición, autoridad, elegancia | Editorial, cultura, lujo, lectura | Georgia, Merriweather, Playfair Display |
| Sans serif | Sin remates | Claridad, modernidad, neutralidad | Web, interfaces, ecommerce, SaaS | Inter, Roboto, Open Sans, Poppins |
| Slab serif | Remates gruesos y rectos | Solidez, carácter, impacto | Titulares, branding, proyectos editoriales | Roboto Slab, Arvo, Rockwell |
| Script | Imita escritura manual o caligráfica | Cercanía, elegancia o espontaneidad | Logos, firmas, títulos breves | Pacifico, Dancing Script |
| Display | Diseñada para llamar la atención | Personalidad, fuerza visual | Cabeceras, campañas, carteles | Bebas Neue, Anton |
| Monospace | Todos los caracteres ocupan el mismo ancho | Tecnología, precisión, código | Programación, datos, interfaces técnicas | Courier Prime, IBM Plex Mono, Inconsolata |
Esta clasificación es práctica, no absoluta. Algunas fuentes pueden mezclar rasgos o encajar en subcategorías más específicas. Lo importante es entender qué características visuales las diferencian y qué función pueden cumplir.
1. Tipografías serif: clásicas, editoriales y con autoridad
Las tipografías serif tienen pequeños remates en los extremos de los trazos. Son muy habituales en libros, prensa, revistas y marcas que quieren transmitir tradición o sofisticación.
En web pueden funcionar muy bien tanto en titulares como en cuerpo de texto, siempre que la fuente esté diseñada para pantalla y el tamaño, interlineado y contraste sean adecuados.
Buena para titulares con un tono elegante, editorial o de lujo.
Pensada para lectura en pantalla; útil en blogs y contenidos largos.
Un clásico web muy legible y disponible en muchos sistemas.
Cuándo la usaría: revistas, proyectos culturales, despachos, marcas premium, gastronomía, moda o una web donde quieras introducir un tono más editorial.
2. Tipografías sans serif: las más habituales en diseño web
Las sans serif prescinden de los remates. Su aspecto suele ser más limpio y directo, por eso dominan interfaces, ecommerce, aplicaciones y muchas webs corporativas.
No significa que todas transmitan lo mismo. Inter es muy neutra y funcional; Poppins tiene una geometría más marcada; Open Sans ofrece un tono más convencional; y una grotesca o neo-grotesca puede resultar más técnica o editorial.
Muy versátil para interfaces, productos digitales y texto web.
Geométrica y reconocible; funciona bien en titulares y marcas modernas.
Neutra y flexible, adecuada para interfaces y proyectos con mucho contenido.
Cuándo la usaría: webs corporativas, tecnología, ecommerce, formación, SaaS, servicios profesionales y prácticamente cualquier proyecto donde la claridad sea prioritaria.
3. Slab serif: remates gruesos y mucha presencia
Las slab serif tienen remates más gruesos y normalmente menos delicados que una serif tradicional. El resultado es una tipografía con mucha presencia visual.
Funcionan especialmente bien en titulares, identidad de marca, proyectos con tono industrial o editorial y composiciones donde necesitas contrastar con una sans serif más neutra.
Ejemplos conocidos son Roboto Slab, Arvo y Rockwell. Para párrafos largos las usaría con más cuidado: no porque estén prohibidas, sino porque el dibujo concreto de la fuente puede resultar demasiado pesado.
4. Script y manuscritas: personalidad con moderación
Las tipografías script imitan caligrafía, pincel o escritura manual. Pueden aportar mucha personalidad, pero precisamente por eso se vuelven cansadas si se usan en exceso.
Las reservaría para un logotipo, una firma, un titular corto, una cita o pequeños detalles de marca. En navegación, formularios o párrafos largos suelen perjudicar la lectura.
5. Display: tipografías diseñadas para destacar
Display es un término amplio para fuentes pensadas principalmente para tamaños grandes. Aquí caben diseños condensados, geométricos, experimentales o muy decorativos.
Son ideales para crear una voz visual fuerte en un H1, una campaña, una portada o una pieza promocional. En cambio, no suelen ser la mejor opción para cuerpo de texto.
Bebas Neue o Anton son ejemplos fáciles de reconocer: funcionan bien cuando necesitas impacto, pero pierden eficacia si las utilizas en todos los niveles de la interfaz.
6. Monospace: precisión y estética tecnológica
En una fuente monospace, cada carácter ocupa el mismo espacio horizontal. Esa regularidad recuerda a terminales, máquinas de escribir y entornos de programación.
Por eso funciona muy bien en fragmentos de código, datos técnicos, etiquetas o pequeños acentos visuales en una identidad tecnológica. Para una web completa puede resultar demasiado rígida si no existe una intención clara.
Familia tipográfica, fuente y estilo: no son exactamente lo mismo
En conversaciones de diseño solemos usar “fuente” y “tipografía” como sinónimos, pero conviene distinguirlos.
| Concepto | Qué significa | Ejemplo |
|---|---|---|
| Familia tipográfica | Conjunto de estilos que comparten un mismo diseño | Inter |
| Fuente | Un archivo o variante concreta dentro de esa familia | Inter Bold |
| Estilo | Peso, inclinación, anchura u otra variación | Regular, Italic, 700 |
| Tipografía | Puede referirse al diseño de letras o al sistema tipográfico completo | Elección, jerarquía y uso de Inter en una web |
Esta diferencia ayuda especialmente cuando trabajas con sistemas de diseño, CSS o fuentes variables.
Clasificación de tipografías: de las familias prácticas a Vox-ATypI
Si buscas una clasificación de tipografías más formal, uno de los sistemas históricos más conocidos es el desarrollado por Maximilien Vox en el siglo XX y adoptado posteriormente como base por la Association Typographique Internationale (ATypI).
Su objetivo era clasificar tipos según rasgos históricos y formales. No necesitas dominarlo para diseñar una web, pero sirve para entender por qué dos serif pueden parecer completamente distintas.
| Grupo | Rasgos generales | Idea asociada |
|---|---|---|
| Humanas | Inspiradas en escritura humanista, contraste moderado | Primeras romanas |
| Garaldas | Serif clásicas, proporciones equilibradas | Tradición editorial |
| Reales | Mayor contraste y estructura más racional | Transición |
| Didonas | Mucho contraste entre trazos y serif finas | Elegancia y moda |
| Mecanas | Remates robustos, aspecto sólido | Slab serif |
| Lineales | Sin serif | Sans serif |
| Incisas | Rasgos inspirados en inscripción y tallado | Carácter monumental |
| Script | Imitación de escritura cursiva o caligráfica | Caligrafía |
| Manuales | Aspecto dibujado o escrito a mano | Expresión manual |
Para un diseñador web, esta clasificación es más útil como cultura tipográfica que como sistema de decisión diaria. En la práctica, hablar de serif, sans serif, slab, script, display y monospace suele ser mucho más operativo.
Cómo elegir una tipografía para una web
La pregunta correcta no es “¿qué fuente me gusta?”, sino “¿qué función tiene que cumplir?”. Yo seguiría este orden.
1. Define la personalidad de la marca
Una clínica, una marca de moda, una startup financiera y un estudio creativo no deberían comunicar exactamente igual. Antes de abrir Google Fonts, define tres o cuatro atributos: por ejemplo, sobria, tecnológica, cercana, premium o experimental.
2. Separa texto de lectura y texto de impacto
El cuerpo necesita comodidad. El titular puede asumir más personalidad. Intentar que una misma fuente sea espectacular en ambos contextos suele forzar demasiado el sistema.
3. Comprueba caracteres e idiomas
Asegúrate de que la familia incluye tildes, eñes, signos, cifras y todos los caracteres que utilizarás. Si la web tendrá varios idiomas, revisa también la cobertura correspondiente.
4. Revisa pesos reales
No necesitas cargar nueve pesos. En muchas webs basta con regular para texto y semibold o bold para jerarquía. Cuantas más variantes descargues, más recursos puede necesitar la página.
5. Pruébala en móvil
Una fuente que funciona en un mockup grande puede perder claridad cuando el espacio se reduce. Revisa titulares largos, botones, formularios, menús y párrafos reales.
6. Evalúa rendimiento
Las webfonts tienen coste. Reducir familias, pesos y conjuntos de caracteres ayuda a mantener la carga bajo control. Cuando sea posible, sirve los archivos de forma optimizada y evita importar variantes que no vas a utilizar.
Cómo combinar tipografías sin complicar el diseño
Combinar fuentes no consiste en elegir dos que sean bonitas por separado. Necesitas suficiente contraste para que tengan funciones distintas y suficiente coherencia para que parezcan parte del mismo sistema.
| Combinación | Resultado | Ejemplo de uso |
|---|---|---|
| Serif + sans serif | Contraste clásico y fácil de controlar | Playfair Display + Inter |
| Una sola familia | Consistencia y simplicidad | Inter Regular + Inter Bold |
| Display + sans serif | Mucho carácter en títulos, lectura neutra | Bebas Neue + Open Sans |
| Slab + sans serif | Solidez con buena legibilidad | Roboto Slab + Roboto |
Mi regla habitual es empezar con una familia. Si la jerarquía funciona con pesos, tamaños y espacios, quizá no necesitas una segunda. Añádela solo si aporta un contraste que realmente mejore la identidad.
Ejemplos de tipografías según el tipo de proyecto
Una serif de alto contraste en titulares puede aportar una estética editorial. Para ficha de producto y navegación mantendría una sans serif neutra.
Ejemplo: Playfair Display + Inter.
Priorizaria claridad, cifras legibles y una familia que funcione bien en interfaz.
Ejemplo: Inter o IBM Plex Sans.
Puedes permitirte una display más expresiva en titulares si el resto de la interfaz es contenida.
Ejemplo: Bebas Neue + Source Sans 3.
La comodidad de lectura pesa más que el impacto visual. Una serif diseñada para pantalla puede funcionar especialmente bien.
Ejemplo: Merriweather o Source Serif 4.
Tipografía y legibilidad: lo que importa más que la familia
Decir que “las sans serif son siempre mejores para pantalla” o que “las serif son siempre mejores para textos largos” simplifica demasiado. La legibilidad depende del diseño concreto de la fuente y de cómo la utilices.
Revisaría especialmente estos factores:
- Tamaño: el texto base debe leerse sin esfuerzo. En muchas webs se parte de valores alrededor de 16–18 px, pero el resultado depende del dibujo de la fuente y del contexto.
- Interlineado: necesita suficiente aire para que las líneas no se mezclen visualmente.
- Longitud de línea: los bloques demasiado anchos dificultan seguir la lectura.
- Contraste: evita texto gris demasiado claro sobre blanco.
- Peso: una variante excesivamente fina puede perder definición en ciertos dispositivos.
- Jerarquía: H1, H2, cuerpo, etiquetas y botones deben diferenciarse de forma consistente.
Antes de aprobar una tipografía, prueba párrafos reales y no solo la frase de muestra del catálogo.
Fuentes variables: más flexibilidad en un solo archivo
Las variable fonts permiten almacenar varias variaciones de una familia en un mismo archivo mediante ejes como peso, anchura o inclinación. En lugar de cargar un archivo independiente para cada estilo, una única fuente puede cubrir un rango continuo.
Eso no significa que una fuente variable sea automáticamente más rápida en cualquier implementación, pero sí ofrece más flexibilidad y puede simplificar la gestión tipográfica.
Son especialmente interesantes en sistemas de diseño donde quieres ajustar la tipografía de forma fluida según tamaño de pantalla, jerarquía o contexto.
Errores frecuentes al elegir tipografías
Usar demasiadas familias
Más variedad no crea más jerarquía. Normalmente genera ruido. Una o dos familias bien utilizadas suelen resolver una web completa.
Elegir solo por personalidad
Una fuente puede encajar perfectamente con la marca y fallar en lectura, cifras o interfaz. La función siempre tiene que entrar en la decisión.
Cargar todos los pesos
Si solo utilizas 400 y 700, no tiene sentido descargar muchas variantes adicionales.
Usar script o display en cuerpo
Puede funcionar en casos muy concretos, pero generalmente sacrifica comodidad por impacto visual.
No revisar licencias
Que puedas ver una fuente online no significa que puedas utilizarla libremente en cualquier proyecto. Comprueba siempre la licencia y el uso permitido.
Elegir en Figma y no probar en navegador
El resultado real depende del renderizado, tamaños, anchuras, dispositivos y CSS. La decisión final debe validarse en la web.
Dónde encontrar tipografías para diseño web
Para proyectos web, empezaría por bibliotecas con licencias claras y buena información técnica.
| Recurso | Qué ofrece | Lo usaría para |
|---|---|---|
| Google Fonts | Amplio catálogo de fuentes open source | Webs, prototipos y proyectos de todo tipo |
| Fontshare | Familias gratuitas seleccionadas | Proyectos con una estética menos común |
| Adobe Fonts | Biblioteca incluida en planes compatibles de Adobe | Branding y proyectos con familias profesionales |
| Type foundries | Fuentes comerciales de estudios especializados | Identidad de marca y proyectos con personalidad propia |
No elegiría una tipografía por el catálogo donde aparece. La decisión debe volver siempre a legibilidad, identidad, licencia y rendimiento.
Preguntas frecuentes sobre tipos de tipografías
¿Cuáles son los principales tipos de tipografías?
Para diseño web, una clasificación práctica incluye serif, sans serif, slab serif, script, display y monospace. Existen clasificaciones históricas más detalladas, pero estas seis categorías son una buena base para elegir y combinar fuentes.
¿Qué diferencia hay entre serif y sans serif?
Las serif tienen remates en los extremos de los trazos; las sans serif no. Esa diferencia influye en la apariencia y personalidad, pero la legibilidad depende también del diseño concreto, tamaño, interlineado y contexto.
¿Qué tipografía es mejor para una web?
No existe una única mejor. Para cuerpo de texto elegiría una familia muy legible y con suficientes pesos. Inter, Roboto, Open Sans, Merriweather o Source Serif 4 pueden ser buenos puntos de partida según el estilo del proyecto.
¿Cuántas tipografías debería usar en una web?
En la mayoría de casos una o dos familias son suficientes. Puedes crear jerarquía con distintos tamaños y pesos sin añadir más tipografías.
¿Qué es una tipografía display?
Es una fuente diseñada principalmente para tamaños grandes y usos de impacto, como titulares, carteles o campañas. No suele ser la opción adecuada para párrafos largos.
¿Qué son las fuentes variables?
Son fuentes que pueden incluir rangos de peso, anchura, inclinación u otros ejes dentro de un mismo archivo, ofreciendo más flexibilidad que un conjunto de archivos estáticos separados.
¿Qué clasificación tipográfica se utiliza?
En diseño cotidiano suele utilizarse una clasificación funcional como serif, sans serif, slab, script, display y monospace. En historia y teoría tipográfica también es conocida la clasificación Vox-ATypI, que diferencia grupos como humanas, garaldas, reales, didonas, mecanas y lineales.
Cómo elegir bien sin convertir la tipografía en un problema
Los tipos de tipografías sirven para orientarte, no para decidir por ti. Dos fuentes de la misma familia pueden tener personalidades y comportamientos muy diferentes.
Primero define la función: lectura, titulares, navegación o identidad. Después prueba la familia con contenido real, revisa móvil, rendimiento y licencia. Si una sola tipografía resuelve todo con diferentes pesos, no necesitas complicarlo más.
Una buena elección tipográfica casi nunca es la que más destaca por sí sola. Es la que hace que la web se entienda mejor y que la marca suene como debe.
No hay comentarios