Cómo elegir tipografías para una página web sin adivinar
La mayoría de las guías sobre cómo elegir tipografías para una página web te entregan una galería de fuentes bonitas y te desean suerte. Ese es el lugar equivocado para empezar. Una tipografía no es decoración. Es lo que tu cliente lee antes de decidir si te llama, te reserva o cierra la pestaña. Elige mal y un negocio sólido se ve amateur. Elige bien y un pequeño taller local parece tener un equipo de diseño detrás.
Esta guía es para el dueño que no es diseñador y no quiere convertirse en uno. Aprenderás a elegir tipografías que se lean claro, carguen rápido, encajen con el tipo de trabajo que haces y aguanten en la pantalla del teléfono. Más o menos la mitad de lo que sigue funciona sin importar con qué herramienta construyas tu sitio.
Empieza por la tarea, no por el aspecto
Antes de mirar una sola fuente, ten claro qué tiene que hacer la tipografía. Una fuente que se ve encantadora en un póster puede ser miserable de leer en un párrafo largo. Divide tu pensamiento en dos tareas.
- La tarea de titular. El texto grande de la parte superior de una página: el nombre de tu negocio, tu promesa principal, tus títulos de sección. Este texto puede cargar personalidad porque la gente lo lee en ráfagas cortas.
- La tarea de cuerpo. Los párrafos, las descripciones de servicios, la letra chica. Este texto tiene un deber por encima de todo, que es ser fácil de leer sin esfuerzo para alguien que ojea desde el teléfono en su hora de almuerzo.
Casi toda página web buena resuelve estas dos tareas con un máximo de dos tipografías. Una para titulares, una para cuerpo. A veces una sola familia bien construida hace ambas. En el momento en que recurres a una tercera o cuarta fuente, la página empieza a sentirse como una nota de rescate recortada y tu credibilidad cae.
Las cinco cosas que de verdad importan
Lo bonito es subjetivo. Estas cinco cualidades no lo son. Juzga cada tipografía contra ellas.
1. Legibilidad en tamaños pequeños
Lee un párrafo completo de texto real en el tamaño en que de verdad aparece el cuerpo, cerca de 16 a 18 píxeles. No juzgues una fuente por su nombre mostrado en grande. Vigila las letras que se emborronan juntas, una minúscula que se ve apretada, o números que tienes que entrecerrar para ver. Una fuente con una minúscula más alta, lo que los diseñadores llaman una altura de x generosa, tiende a mantenerse legible cuando se encoge.
2. Una separación clara entre letras parecidas
Algunas fuentes dibujan una I mayúscula, una l minúscula y el número 1 casi idénticos. En una página llena de números de teléfono, precios y direcciones, eso es un problema real. Escribe la cadena Il1 y O0 y confirma que puedes distinguirlas al instante. Los sitios de servicios para el hogar viven y mueren por que un número de teléfono se lea bien.
3. Suficientes pesos para armar una jerarquía
Un peso es el grosor de los trazos. Quieres al menos un regular y un negrita, e idealmente un medio en medio. Los pesos son cómo haces que un titular se sienta importante y una leyenda se sienta discreta sin cambiar de fuente. Una tipografía que trae un solo peso te va a encajonar rápido.
4. Cursivas reales, no una inclinación falsa
Las buenas fuentes incluyen una cursiva dibujada para el énfasis. Las fuentes más baratas o gratis a las apuradas la fingen inclinando las letras rectas, lo que se ve un poco raro aunque el lector no sepa por qué. Si planeas enfatizar palabras, confirma que exista una cursiva verdadera.
5. Sobrevive en un teléfono
Más de la mitad del tráfico de un negocio local viene de un teléfono sostenido a la distancia del brazo bajo mala luz. Sea lo que sea que preselecciones, mírala en un teléfono de verdad antes de comprometerte, no solo en tu laptop. Una fuente que se siente elegante en una pantalla grande puede volverse fina y tenue en una chica.
Serif o sans serif: una forma simple de decidir
No necesitas la historia completa de la tipografía. Necesitas una sola lectura honesta del sentimiento que quieres.
- Las fuentes serif tienen piecitos en los extremos de los trazos. Se leen como establecidas, cuidadosas y tradicionales. Le quedan a un despacho de abogados, un contador o una empresa de restauración que quiere señalar décadas de experiencia.
- Las fuentes sans serif no tienen piecitos. Limpias y sencillas. Se leen como modernas, directas y cercanas. Le quedan a la mayoría de los servicios para el hogar, estudios de bienestar y cualquier cosa que quiera sentirse actual y sin rodeos.
- Las fuentes de tipo caligráfico y decorativo imitan la escritura a mano o se inclinan fuerte hacia un ánimo. Úsalas solo para un logo o algún titular ocasional, nunca para párrafos. Son el condimento, no el plato.
Un patrón confiable para un negocio local: una sans serif para todo, en dos o tres pesos. Es difícil hacerla ver mal. Si quieres más carácter, combina una serif para titulares con una sans serif para el cuerpo, o al revés. Ese contraste se lee como intencional.
Cómo combinar dos tipografías sin un título en diseño
Combinar fuentes suena a arte oscuro. En su mayoría son dos reglas.
- Combina por contraste. Junta dos fuentes que difieran con claridad, como un titular sans serif en negrita sobre un cuerpo serif. La diferencia debe ser obvia. Dos fuentes que solo difieren un poco parecen un error en lugar de una elección.
- Combina por familia. Muchas fuentes modernas vienen como una familia con una serif y una sans serif que combinan hechas para convivir. Usar dos miembros de una familia es la combinación más segura del mundo porque alguien ya hizo la parte difícil.
En caso de duda, no combines. Una fuente fuerte en varios pesos le gana a una combinación torpe cada vez.
Una prueba rápida: tapa las fuentes y pide a un amigo que describa el negocio en tres palabras solo por las formas. Si las palabras coinciden con cómo quieres que te vean, elegiste bien.
Las partes que nadie les cuenta a los dueños de pequeños negocios
Aquí es donde la mayoría de los consejos sobre fuentes se detienen y donde los sitios se caen en silencio. Estos puntos rara vez aparecen en las guías populares, y importan tanto como el aspecto.
La velocidad de carga es parte de la elección
Cada fuente personalizada es un archivo que el teléfono de tu visitante tiene que descargar antes de que aparezca el texto. Carga cuatro fuentes, o una fuente en ocho pesos, y agregas un retraso real. El texto lento te cuesta visitantes que se van antes de que la página se asiente, y arrastra hacia abajo cómo te posicionan los buscadores. Dos reglas te mantienen a salvo: usa no más de dos familias de fuentes, y carga solo los pesos específicos que usas. Si no estás usando el peso fino o el extra negro, no los envíes.
Configura una fuente de respaldo para que el texto nunca desaparezca
Mientras una fuente personalizada se descarga, el navegador necesita algo que mostrar. Si no le dices qué, los visitantes pueden quedarse mirando un espacio en blanco por un instante. La solución es nombrar una fuente de respaldo común del mismo estilo, para que las fuentes normales del sistema rellenen por la fracción de segundo antes de que llegue la tuya. Es un ajuste pequeño con un efecto enorme en qué tan rápido se siente una página.
El contraste y la accesibilidad no son opcionales
Una fuente puede ser perfecta y aun así ilegible si está en gris pálido sobre blanco, muy pequeña o demasiado apretada. Apunta a un contraste fuerte entre el texto y el fondo, mantén el texto del cuerpo en un tamaño cómodo, y dale aire a los párrafos con un espaciado de línea generoso. Esto no es solo cortesía con los clientes mayores o con quien tiene baja visión. También es cómo evitas perder a alguien que simplemente no quiso esforzar la vista. El texto claro es buena educación y buen negocio al mismo tiempo.
Revisa la licencia antes de enamorarte
Si descargas una fuente de un lugar cualquiera, quizá no tengas derecho a usarla en un sitio comercial. Quédate con bibliotecas que sean gratuitas para uso comercial, como Google Fonts, o con fuentes que hayas licenciado correctamente. Un aviso legal sobre una tipografía es un dolor de cabeza que ningún negocio local necesita.
Prueba con tus propias palabras
El texto de muestra es una trampa. Una fuente puede verse maravillosa deletreando el alfabeto y luego tropezar con el nombre real de tu negocio, tu ciudad o tu servicio más largo. Pega tus titulares reales, tu número de teléfono real, tu párrafo más largo, y el nombre de calle complicado de tu dirección. Juzga la fuente con las palabras que tus clientes de verdad van a leer.
Cómo elegir tipografías para una página web en siete pasos
Si quieres un plan en lugar de un sermón, haz esto en orden.
- Decide el sentimiento en una palabra: establecido, moderno, cálido o premium.
- Elige una sans serif que se lea limpia en tamaños pequeños y tenga al menos tres pesos.
- Decide si de verdad necesitas una segunda fuente. A menudo no.
- Si la necesitas, agrega una fuente de titular que contraste, o usa un miembro de la misma familia.
- Carga solo los pesos que usas, y nombra una fuente de respaldo del sistema.
- Pega tu contenido real y léelo en un teléfono.
- Revisa el contraste y el tamaño para alguien que no está mirando con esfuerzo.
Sigue esos siete pasos y quedarás por delante de la mayoría de tus competidores locales, que suelen aceptar el valor por defecto que les entregó su creador de sitios.
Cuando prefieres no juguetear con nada de esto
Muchos dueños leen todo lo anterior y piensan: dirijo una cuadrilla de techado, no quiero audicionar fuentes. Es justo. Este es un lugar donde un enfoque hecho por ti se gana su lugar. Saynovo le construye a un negocio su propia página web y define un sistema de tipografías que le encaje como parte de esa construcción, así que la combinación de titular y cuerpo, los pesos y las fuentes de respaldo quedan resueltos en lugar de quedar como tarea. Si más adelante decides que los títulos se sienten muy formales o muy llamativos, lo dices en palabras sencillas y la tipografía cambia, sin menús de fuentes. Para los dueños que quieren un aspecto cuidado sin aprender tipografía, dejar que la combinación se decida por ti elimina un paso que hace tropezar a muchos sitios pequeños.
La versión corta
Saber cómo elegir tipografías para una página web se reduce a unas cuantas revisiones honestas en lugar de gusto. Resuelve la tarea de titular y la tarea de cuerpo con dos fuentes como máximo. Prueba la legibilidad en tamaños reales, en un teléfono real, con tus palabras reales. Carga solo lo que usas y configura una fuente de respaldo para que nada desaparezca. Mantén el contraste fuerte para que todos puedan leer, y confirma que tienes permiso de usar la fuente. Haz eso y tu tipografía hará su trabajo en silencio, que es quitarse del camino y dejar que un cliente decida contratarte.
Fuentes que vale la pena leer después:
- Choosing Web Fonts, a Beginner's Guide de Google Design
- How to Choose Website Fonts de Squarespace
- How To Choose The Right Font For Your Website de CareerFoundry
- How to Choose the Best Fonts for Your Website de Wix