Guía sobre cómo elegir la mejor fuente

Familias y tipos de letra

Cuando oyes hablar de «diseño web», ¿en qué piensas? ¿En el diseño de un sitio web? ¿En los diferentes estilos, colores y fondos? El diseño web también tiene que ver con los tipos de letra y con cómo éstos encajan para que el sitio tenga un aspecto armónico. Hablemos de letras y signos.

Tipos de letra

Las fuentes se dividen en diferentes clases, tipos de letra y familias. Hay tres tipos generales, clasificados según su uso.

Fuentes web

Son las fuentes que se ven en las aplicaciones y sitios web. Google Fonts y Adobe Fonts (antes conocido como Typekit) ofrecen una amplia variedad de ellas.

Fuentes de sistema

Suelen aparecer en programas del ordenador y en aplicaciones de dispositivos móviles.

Fuentes variables

Son conjuntos de fuentes que contienen diferente grosor y anchura (distancia entre letras). Se utilizan hoy en día porque adaptan automáticamente sus propiedades.

Ejemplo de cómo una fuente variable puede adaptarse a un espacio determinado

Tipos de letra y familias tipográficas

Un tipo de letra describe cómo están diseñadas las letras. Incluye variaciones de grosor (fino, negrita), inclinación (cursiva) y anchura (condensada).

Una familia de fuentes, como Arial, puede tener varios tipos de letra que tienen un nuevo nombre de fuente, por ejemplo, Arial Black y Arial Narrow.

Las familias de fuentes están resaltadas en azul y sus tipos de letra con fondo blanco; se dan ejemplos de fuentes sans serif y serif.

En general, se pueden clasificar las familias de fuentes en tipografías: serif, sans serif, display y script. Existen otras derivadas de las mismas. Entre ellas se encuentran slab serif, moderna, monoespaciada o no proporcional, por mencionar algunas.

Serif, como Times New Roman, es la clásica que tiene su origen en las impresiones de los periódicos.

Una serif es un pequeño trazo unido a una letra que sigue en paralelo a la línea del texto. Por ello, las fuentes serif son más fáciles de leer para el ojo.

Sans serif

De esta familia, las más conocidas por usted son probablemente Arial y Calibri. Son fuentes claras, sin adornos ni serifas.

Script

Parece una escritura a mano. Las fuentes son juguetonas, como la Snell Roundhand o la Edwardian.

Display

Las fuentes, como Cooper Black o Fat Face, son atrevidas y poco convencionales. Por ejemplo, verá mezcladas las mayúsculas y las minúsculas, y las dimensiones de las letras (alto y ancho) invertidas.

Tendencias y otras elecciones con efecto duradero

¿Qué crees que es un buen tipo de letra? ¿Recuerdas cuando garabateaste unas notas en un papel y luego no podías entender tu letra? Obviamente, nadie quiere ponerse a descifrar un mensaje.

Por eso, las fuentes deben ser:

• aptas para todas las dimensiones de los medios, en impresión y digital, sin perder calidad
• legibles en cuanto a tamaño y diseño de letra
• compatibles con otras familias de fuentes

Un sitio web debe mostrar un máximo de tres fuentes diferentes que vayan bien juntos y se adapten a la longitud de línea necesaria. No es necesario que procedan de la misma familia tipográfica, pero deben ser claramente legibles en todas las pantallas y quedar bien con cualquier color. Sus tipos de letra deben ser igualmente legibles.

Fuente clásicas y versátiles que nunca pasarán de moda:

• Arvo
• Roboto
• Lato
• Merriweather
• Montserrat
• Open Sans
• Times New Roman
• Playfair Display

Fuentes en la creación de páginas web

¿Qué fuentes ofrece el editor de tu sitio web?

Las plantillas que un proveedor de creación de sitios web te proporciona para crear un blog, tienda online o sitio web personal están diseñadas de tal manera que las fuentes coincidan con el tema de la plantilla. Dentro de ella, tienes una selección distinta de fuentes para elegir.

En el editor de Webnode, encontrarás los principales tipos de letra en los apartados de la línea de navegación.

Por cierto, los tipos de letra más usados en Webnodes son:

• Montserrat, Roboto, u Open Sans de la familia sans serif
• Playfair Display, Pt Serif, o Merriweather de la familia serif

Para cambiar de una vez todos los tipos de letra para todo tu sitio web, suele ser posible hacerlo desde los ajustes de diseño del editor. Aquí puedes cambiar la combinación de fuentes y familias de fuentes.

Ejemplos de la combinación de diferentes fuentes en el editor de Webnode

Las combinaciones de fuentes están automáticamente «estéticamente bien emparejadas». Se complementan de tal manera que coinciden con el fondo de la imagen y el diseño del sitio. Así, son la guinda del diseño web.

Tendencias

La World Wide Web comenzó con fuentes sans serif. Básicamente, porque las pantallas de entonces no tenían una resolución tan nítida como para resaltar los tipos de letra escritas a mano y otras experimentales. Ahora, la creatividad nos rodea. No existe ninguna fuente «incorrecta».

La tipografía web experimenta un renacimiento. Google fonts es una fuente para que los diseñadores sigan desarrollando diferentes tipos de letra.

En 2020, las fuentes sans serif dominaban. Las letras de carácter más expresivo, como Goldplay y Versus, estaban en auge. Este año, la tendencia va hacia la solidez y claridad. Sin embargo, sans serif es tendencia en el mundo digital. Todo el mundo escribe con sans serif porque tiene las siguientes características geométricamente claras:

• Negrita
• Nítidas
• Útiles
• Sólidas
• Limpias
• Buen uso del espacio

Para elegir una fuente

Basta de hechos. Es tu turno. ¿Cómo decides cuál es la mejor fuente para contar tu propia historia?

El significado de las fuentes

Familias de fuentes y sus caracteres típicos.

Las fuentes transmiten un estado de ánimo. Tienen personalidad. Las fuentes escritas a mano, como script, presentan elegancia y pasión. Debido a sus largos trazos, líneas redondeadas y adornos en forma de arco, son más decorativas. Si Cenicienta pudiera bailar un tipo de letra, sería la escritura al estilo script. Si un restaurante francés con estrella Michelín sacara un nuevo plato, debería presentarse con la fuente script también.

Las fuentes que se utilizan a modo de presentación son como un camaleón, ya que pasan de ser divertidas a ser únicas o juguetonas. El tipo de letra que aparece en la caja de judías Jelly Belly sabe cómo atraer a la esquina correcta de las tiendas de caramelos.

Los tipos de letra modernas son elegantes y atrevidos. Reconocerás la fuente Futura en la marca de moda de alta gama Dolce & Gabanna, así como en su cuenta de PayPal.

Debido a la herencia de las impresiones de los periódicos, las fuentes script simbolizan tradición, confianza y respeto. La famosa revista de moda Vogue utiliza Bodoni, un tipo de letra script. Apple bautizó originalmente «Think different» en la misma familia de fuentes.

Por otro lado, la fuente sans serif Trade Gothic es utilizada por Nike o Helvetica para The North Face. Una fuente sans serif transmite estabilidad, fuerza, claridad y limpieza, lo que suele ser adoptado por las empresas deportivas.

¿Empiezas a entender los pequeños matices entre los tipos de letra? ¿Qué familia tipográfica te parece mejor? Una buena manera de empezar es aclarar cuál es tu misión y qué representa tu negocio. Si tienes un sitio personal o un blog, inclínate por una fuente que represente mejor tus características.

Una elección correcta para tu marca

La mayoría de las veces, 2 o 3 tipos de letra diferentes guían de mejor forma al visitante a través de las secciones de tus páginas. Gracias a ellas, será como leer los capítulos de un libro. Será más claro cuando una nueva sección comience con un título en una fuente más llamativa o decorativa y termine con un texto de tamaño normal.

Los distintos tipos de letra también te permiten destacar distintos contenidos o cambiar el tono de voz, por ejemplo, si quieres citar a alguien o llamar la atención sobre nuevas ofertas. Los tipos de letra te ayudan a diferenciar mejor los productos de tu tienda electrónica para los clientes.

Elige el tipo de letra adecuado para ti y tu marca, respondiendo a las siguientes preguntas:

• ¿Quién es mi público y qué es importante para él?
• ¿Existe un tipo de letra que se relacione con las expectativas de mis clientes?
• ¿Funcionará el tipo de letra con el contexto en el que se verá?
• ¿Qué tipo de letra capta la personalidad de mi marca?
• ¿Funcionarán mis colores con el tipo de letra seleccionado?

Por ejemplo, si tu sitio web complemente tu canal de YouTube y tienes muchas miniaturas en una página que redirigen a tus vídeos, o igualmente si eres un artista y tienes muchas imágenes. En este caso, tu público está mirando tu contenido en lugar de leerlo. Por lo tanto, tu fuente no debe distraer del contenido visual.

Si eres un abogado o un consultor, es posible que quieras transmitir confianza y responsabilidad. Un tipo de letra emotivo estaría fuera de lugar en este caso.

Un tipo de letra también debe ser compatible con todos los navegadores. Examina tu elección de fuente y la accesibilidad en los navegadores utilizados en varios dispositivos antes de tomar tu decisión.

El mayor paso en falso

La mezcla de muchas familias de fuentes de diferentes caracteres y tipos de letra puede arruinar el fondo y el contexto.

Por último, saber lo que hay que evitar a veces es más fácil que recordar qué es lo que hay que hacer. Aquí están los puntos más importantes al elegir el tipo de letra:

¡Respeta las familias!

No uses más de 3 tipos de familias de fuentes diferentes. Limítate a una, aunque puedes variar su tipo de letra. Una familia de fuentes como Helvetica, Verdana, Open Sans ya tiene suficientes variaciones tipográficas para distinguir las secciones de tu texto.

No todas las combinaciones quedan bien

Puedes hacer combinaciones. Pero ten cuidado al experimentar con caracteres opuestos, como Times New Roman y Edwardian Script. Chocarán mcuho.

Resaltar texto

Limita los tipos de letra con adornos y complejos para resaltar los títulos. No los utilices tampocos para párrafos enteros.

Espacios

No seas tacaño con los tamaños. Un buen tamaño de letra accesible que toda la gente pueda leer es de 16pt. Si te quedas por debajo de ese tamaño, excluirás a las personas con menos visión para leer tu página.

Textos largos

Evita las frases largas o los tipos de letra con mucho espacio en blanco entre las letras. Normalmente, en las plantillas de los creadores de sitios web, el diseño está codificado de tal manera que los saltos de línea se aplican cuando sean necesarios.

Por último, aunque hayas elegido el mejor tipo de letra para tu sitio web, asegúrate de que todo el texto esté bien alineado. Alinear correctamente significa establecer un texto bien centrado o bien alineado a la derecha en una página. Si presentas textos con párrafos que comienzan en la parte superior central y luego sigue en la inferior derecha, el lector tendrá problemas para leer tu página. Ordena tu texto. Utiliza espacios en blanco para darle un respiro al visitante.

Si el diseño web es algo que te interesa, el artículo sobre diseño web te ayudará a conseguir que tu sitio web tenga un aspecto impresionante.