≡En resumen
- El tipo de letra es el diseño; la fuente es cada archivo o variante concreta de ese diseño (peso, estilo, tamaño).
- Las serif tienen remates en los extremos de los trazos y las sans serif no; ambas pueden ser muy legibles si están bien diseñadas.
- La legibilidad depende tanto de la letra como del tamaño, el interlineado, el contraste y el largo de línea.
- Cada fuente tiene una licencia: una licencia de escritorio no siempre permite usarla en una web, una app o un logotipo registrado.
- En una web, usa pocas fuentes, en WOFF2, con font-display y a ser posible alojadas en tu propio servidor.
01 ¿Qué es un tipo de letra?
La palabra «tipo» viene de la imprenta de tipos móviles: cada tipo era una pieza de metal con un carácter en relieve, y un juego completo de piezas del mismo diseño y tamaño era una fuente. Hoy los tipos son archivos digitales, pero la terminología se mantiene. En el lenguaje cotidiano, «tipo de letra», «fuente» y «tipografía» se usan como sinónimos, aunque en diseño tienen matices distintos.
02 Tipo de letra, fuente, familia y tipografía: diferencias
| Término | Qué es | Ejemplo |
|---|---|---|
| Tipo de letra (typeface) | El diseño de los caracteres | Garamond |
| Familia tipográfica | El conjunto de variantes de un tipo | Garamond regular, cursiva, negrita… |
| Fuente (font) | Una variante concreta, hoy normalmente un archivo | Garamond Bold en OTF o WOFF2 |
| Estilo o peso | La variación dentro de la familia | Light (300), Regular (400), Bold (700) |
| Tipografía | La disciplina de diseñar y componer con letras (y, por extensión, el tipo usado) | «La tipografía de esta web es muy legible» |
03 Clasificación: serif, sans serif y otros tipos de letra
Serif (con remates)
Tienen pequeños trazos terminales en los extremos. Transmiten tradición y seriedad. Ejemplos: Times New Roman, Garamond, Georgia.
Sans serif (palo seco)
Sin remates, de trazo más uniforme. Modernas y limpias, dominan en pantallas e interfaces. Ejemplos: Helvetica, Arial, Roboto, Inter.
Slab serif (egipcias)
Remates gruesos y rectangulares. Tienen mucha presencia en titulares y marcas. Ejemplos: Rockwell, Roboto Slab.
Caligráficas (script)
Imitan la escritura a mano o con pluma. Solo para textos cortos: invitaciones, logotipos, detalles.
Decorativas (display)
Diseñadas para verse grandes: carteles, titulares, logotipos. Poco legibles en párrafos.
Monoespaciadas
Todos los caracteres ocupan el mismo ancho. Se usan para código y tablas de datos. Ejemplos: Courier, JetBrains Mono.
La clasificación más citada es la Vox-ATypI, que el tipógrafo francés Maximilien Vox propuso en 1954 y que distingue, entre otras, las humanistas, garaldas, reales, didonas y lineales. En la práctica profesional basta con los grupos anteriores para elegir con criterio.
04 Legibilidad: cómo hacer que un texto se lea bien
- ✓Altura de la x generosa: las letras minúsculas grandes en relación con las mayúsculas se leen mejor en tamaños pequeños.
- ✓Tamaño suficiente: en web, el texto de párrafo suele partir de 16 px y crecer en pantallas grandes.
- ✓Interlineado de 1,4 a 1,6 veces el tamaño de la letra en textos largos.
- ✓Líneas de entre 45 y 75 caracteres, el rango que la tipografía editorial considera cómodo.
- ✓Contraste alto entre texto y fondo; evita el gris claro sobre blanco.
- ✓Formas de letra bien diferenciadas: la I mayúscula, la l minúscula y el 1 no deben confundirse.
- ✓Un máximo de dos tipos de letra por proyecto: uno para titulares y otro para texto.
05 Licencias de los tipos de letra
Un tipo de letra es software y está protegido por su licencia. Descargar una fuente de una web de fuentes gratuitas no significa que puedas usarla en tu logotipo o en tu tienda online. Antes de usarla, comprueba qué permite:
| Licencia | Qué permite normalmente | Ojo con |
|---|---|---|
| Escritorio | Instalarla en un número de ordenadores y usarla en impresos, imágenes y PDF | No suele cubrir incrustarla en una web o una app |
| Web | Cargarla en una web mediante @font-face | A menudo limitada por número de visitas o dominios |
| App y ebook | Incluirla dentro de una aplicación o un libro electrónico | Se licencia aparte por título o por app |
| Libre (SIL Open Font License, Apache) | Uso comercial, en web, apps e impresos, y modificarla | No se puede vender la fuente por separado |
| Gratis para uso personal | Proyectos sin fines comerciales | Un logotipo o una web de empresa son uso comercial |
06 Tipos de letra en la web: rendimiento y buenas prácticas
En una página web, cada tipo de letra es un archivo que hay que descargar antes de mostrar el texto con su aspecto final. Mal gestionadas, las fuentes retrasan la carga, provocan textos invisibles unos instantes o saltos de diseño cuando se sustituye la fuente provisional. Se declaran con la regla @font-face de CSS o se cargan desde un servicio como Google Fonts, con más de 1.900 familias libres.
-
1
Usa solo WOFF2
Es el formato comprimido para la web; según web.dev comprime en torno a un 30 % más que WOFF y lo soportan todos los navegadores modernos.
-
2
Carga pocas variantes
Cada peso o cursiva es otro archivo. Con dos familias y tres o cuatro variantes suele bastar; una fuente variable puede sustituir a varias.
-
3
Recorta los caracteres
El subsetting elimina glifos que no usas (por ejemplo, alfabetos que tu web no necesita). Comprueba que se conservan la ñ, las tildes y los signos de apertura.
-
4
Controla la visualización
Con font-display: swap el texto aparece enseguida con una fuente del sistema; con optional, la fuente web solo se usa si llega a tiempo.
-
5
Aloja las fuentes en tu servidor
Evitas conexiones a terceros y la transferencia de la IP del visitante; en 2022 un tribunal de Múnich condenó a una web por cargar Google Fonts desde los servidores de Google sin consentimiento.
-
6
Ajusta la fuente de respaldo
Propiedades como size-adjust igualan el tamaño de la fuente provisional para reducir el salto de diseño (CLS).
07 Cómo elegir el tipo de letra de una marca o una web
-
1
Parte de la personalidad de la marca
Una asesoría, una marca infantil y una tienda de moda no deberían hablar con la misma letra. Define tres adjetivos y busca tipos que los transmitan.
-
2
Prueba la legibilidad real
Compón un párrafo largo, un titular y un botón, en móvil y en papel. Lo que funciona en un cartel puede fallar a 14 px.
-
3
Revisa la familia completa
Necesitas varios pesos, cursiva, números legibles y soporte completo del español y de los idiomas en que trabajes.
-
4
Combina con contraste
Una serif para titulares y una sans serif para texto, o una sola familia con varios pesos. Evita dos tipos demasiado parecidos.
-
5
Comprueba la licencia y el peso
Que cubra todos los usos y que la versión web no dispare el tiempo de carga.
La tipografía es una de las piezas centrales de la identidad visual y debe quedar recogida, con tamaños y usos, en el manual de identidad corporativa. Si necesitas definirla desde cero, en nuestro estudio de diseño gráfico la trabajamos junto al logotipo y la paleta de color, y en los proyectos de diseño web profesional la aplicamos cuidando la legibilidad y la velocidad.
Preguntas frecuentes sobre Tipo de letra
Es el diseño que comparten todos los caracteres de un alfabeto y que les da un aspecto reconocible, como Arial, Garamond o Roboto. Suele formar una familia con varias variantes.
El tipo de letra es el diseño; la fuente es una variante concreta de ese diseño, hoy normalmente un archivo. Arial es un tipo de letra y Arial Bold en formato TTF es una fuente.
Las serif tienen pequeños remates en los extremos de los trazos, como Times New Roman. Las sans serif o de palo seco no los tienen, como Helvetica o Arial.
No hay uno solo. Son más legibles los tipos con altura de la x generosa, formas bien diferenciadas y buen espaciado, usados a buen tamaño y con buen contraste.
No. Muchas fuentes gratuitas solo permiten uso personal. Para uso comercial busca licencias libres como la SIL Open Font License o compra la licencia adecuada.
Lo recomendable es uno o dos: uno para titulares y otro para el texto, con pocas variantes cada uno. Más tipos restan coherencia y aumentan el tiempo de carga.
WOFF2. Es el formato comprimido para la web recomendado por el W3C y compatible con todos los navegadores actuales.
Fuentes consultadas
Sobre el autor
Marketing, SEO y desarrollo con IA
Especialistas de appyweb en SEO, publicidad, desarrollo web y automatización con IA.
Ver perfil y artículos →