Tipografía Web: ¿En búsqueda de la fuente ideal para tu sitio web?

7 min.
perfect-web-typography

Un tipo de letra adecuado hace que tu sitio web no solo sea visualmente mucho más interesante. Los tipos de letra influyen de forma decisiva en los lectores y determinarán si ciertas secciones de texto se ignorarán o serán leídas. En este post te mostraré cómo encontrar la fuente perfecta para tu sitio web.

Una buena tipografía es el resultado de años de estudio de fuentes y del diseño. Sin embargo, unos cuantos consejos básicos pueden ayudarte a entrenar el ojo y a utilizar la fuente apropiada para tu proyecto web.

Mejores prácticas, consejos y directrices en el diseño web

El diseño web es algo más que estética. Igual de importantes son factores como una buena UX, accesibilidad y tu estrategia de SEO. En este artículo te muestro las mejores prácticas para lograr que sitios web sean exitosos y tus usuarios estén satisfechos.

Érase una vez un sitio web...

O, en otras palabras, lo que ocurre cuando cargas un sitio web sin CSS (hojas de estilo en cascada). Hace unos cuantos años, los sitios web se representaban con las fuentes integradas en el sistema operativo. Estos se siguen cargando hoy en día si no se puede acceder a la fuente. El primer sitio web creado sigue en línea hoy en día y tiene el mismo aspecto que cuando se puso en marcha en diciembre de 1990:

Tipografía Web: ¿En búsqueda de la fuente ideal para tu sitio web?
El primer sitio web existente

La forma en que se muestra el sitio web en tu navegador no depende del sitio web, sino del sistema operativo que estés utilizando y en si has hecho cambios en la configuración por defecto.

Para usuarios de Windows, la tipografía Serif se muestra por defecto en Times New Roman. En Mac OS X, la fuente por defecto es Times o Times Roman. Arial es utilizada por Windows como fuente Sans Serif. Mac OS X utiliza la fuente Helvetica por defecto.

Zach Leatherman ha desarrollado un proyecto en el que ha probado varios sistemas operativos y sus fuentes correspondientes. La herramienta Font Family te ofrece una interesante visión de las fuentes de reserva así como su aspecto final. 

Georgia y Verdana

A mediados de la década de los 90, a las fuentes estándar se unieron Georgia y Verdana, diseñadas por Matthew Carter especialmente para la web. La construcción de buenos sitios web con una escasa selección de cinco fuentes dio lugar a un hábito discutible por necesidad: así fue como se incorporaron las diferentes tipografías, que no solían existir en la web, como archivos de imagen.

Las desventajas de esto son obvias:

  • La representación adecuada en diferentes dispositivos conlleva un minucioso trabajo tedioso.
  • Las palabras no pueden descubrirse o traducirse usando la función de búsqueda.
  • Además, cada cambio de texto supone un enorme gasto adicional.

Diseñando para lo desconocido

Afortunadamente, la tecnología ha madurado mucho más desde entonces. A pesar de ello, también es necesario un conocimiento fundamental del ámbito técnico. Porque es importante entender lo que sucede en tu sitio web si la fuente deseada no está disponible. Las razones al respecto son varias. Por ejemplo, una mala conexión a internet que hace que tu archivo CSS se cargue lentamente y con retraso.

A diferencia del diseño gráfico, en la web es mejor un tipo de letra malo (inapropiado) que ninguno.

Por tanto, mientras debates sobre el tipo de letra que se adaptará mejor visualmente a tu sitio, también hay que plantearse algunas cuestiones técnicas básicas:

  • ¿Se mostrará tu texto aunque no se cargue el archivo CSS? 
  • ¿Es tu sitio todavía legible en las tipografías Serif estándar y Sans Serif? 
  • ¿Proporcionas un tipo de letra alternativo? ¿Cómo se muestra? ¿Puedes hacer alguna otra configuración que te dé más control sobre tus fuentes de reserva?

En primer lugar, lo más importante es que el contenido pueda ser mostrado. La legibilidad en general es tu prioridad a la hora de elegir la tipografía. 

Robin Rendle ofrece algunos principios base interesantes sobre FOUT vs. FOIT (cuando se carga la fuente) en su artículo Loading Web Fonts with the Web Font Loader.

Puedes encontrar más información en inglés sobre este tema aquí:

¿De dónde proviene realmente tu fuente?

Ahora que se ha tratado el fondo técnico de la cuestión y las fuentes de reserva, queda un aspecto muy importante: saber desde dónde se carga realmente tu fuente. Como ya hemos dicho, cada sistema operativo tiene sus propias fuentes estándar. Además, cada usuario puede instalar fuentes en el ordenador. Por tanto, es imposible saber cuáles están disponibles o no. 

Para no tener que mostrar nuestras páginas web solo en Arial y Times New Roman, cada vez se recurre más a los servicios de fuentes web. La ventaja es obvia: se saltan las limitaciones que tenemos al utilizar fuentes estándar. Se amplía la selección de fuentes disponibles.

Probablemente las más conocidas son las fuentes de Google (gratuitas) y de Adobe (de pago). Sin embargo, hay otros proveedores. Particularmente en Europa, las directrices de protección de datos más estrictas suelen llevar a la búsqueda de una alternativa a Google. No solo se ofrecen fuentes que pueden insertarse, sino también plataformas que alojan tus fuentes por ti, de modo que tu creatividad no tiene límites. Por supuesto, el requisito previo es que poseas los derechos de autor o licencias.

Smashing Magazine ha probado varios proveedores y expuesto sus experiencias aquí.

Elementos de diseño de las fuentes

Para decidirte por la fuente adecuada, debes conocer algunas características de las tipografías. Básicamente, se suele estimar que los párrafos deben resultar ser fuentes fáciles de leer. Si seguir tus párrafos supone una experiencia difícil para tus lectores, dejarán de leerte. La información presentada no se consumirá. 

Otro aspecto es prestar atención a cómo cambia la fuente cuando se reduce su tamaño. Un tipo de letra que es legible en el escritorio puede ser difícil de leer en un formato más pequeño en un teléfono móvil. 

En este sentido, hay indicadores en los que puedes fijarse y que te ayudarán a elegir la fuente adecuada.

Tipografía Web: ¿En búsqueda de la fuente ideal para tu sitio web?
Artículo: ¿Qué se conoce por tipografía?

Altura de x

En el siguiente ejemplo puedes ver tres ejemplos diferentes. La altura x describe la altura vertical de la letra x. Si es demasiado pequeña, el texto se vuelve más difícil de acceder, especialmente con tamaños de letra más pequeños. Si la altura x es demasiado grande, resultará más difícil distinguir entre mayúsculas y minúsculas.

Tipografía Web: ¿En búsqueda de la fuente ideal para tu sitio web?
Fuente:
Tipografía web profesional

Aberturas

Las aperturas son los huecos que encontramos en las letras. En general, cuanto más generosos sean, más agradable es leer secciones largas de texto con este tipo de letra.

Espaciado en letras e interletraje

Mientras que el "letter-spacing" o esapcio entre letras describe la distancia general entre letras, entendemos el interletraje como la distancia entre determinadas letras. Este espacio puede ser mayor que entre otros debido a la forma natural de las letras:

Tipografía Web: ¿En búsqueda de la fuente ideal para tu sitio web?
Artículo: Tipografía en 60 segundos

Un espaciado uniforme hace que tu fuente tenga un aspecto más armonioso. Esto lo hace más legible. Por cierto, ambas cosas pueden ajustarse mediante CSS, en caso de que tengas la sensación de que la fuente que has elegido aún necesita mejorar:

.kerning {font-kerning: normal;}

.spacing {letter-spacing: 0.1em;}

Astas ascendentes, descendentes y trazos terminales

Los trazos terminales aparecen en las letras a, ä, c, f, j, r e y:

Tipografía Web: ¿En búsqueda de la fuente ideal para tu sitio web?
Fuente:
Tipografía web profesional

Las astas ascendentes y descendentes son similares, pero significan extensiones en, por ejemplo, f, q y j:

Tipografía Web: ¿En búsqueda de la fuente ideal para tu sitio web?
Fuente:
Tipografía web profesional

En estos se aplica lo siguiente: cuanto más discretos son, menos adecuados son para su uso con textos pronunciados. Las fuentes Serif, en particular, están especialmente bien definidas en los terminales, ascendentes y descendentes, razón por la cual estas fuentes se consideraron durante mucho tiempo un compromiso seguro para las secciones de texto más largas.

Contraste

Las fuentes con mucho contraste (izquierda) son menos adecuadas para tamaños de letra pequeños, como los utilizados en párrafos, pero más apropiadas para títulos.

Tipografía Web: ¿En búsqueda de la fuente ideal para tu sitio web?
Fuente:
Tipografía web profesional

Negrita y cursiva

A la hora de elegir tus fuentes, también debes asegurarte de que estén disponibles en diferentes grosores y estilos. Esto se debe a que los estilos de fuente que no están disponibles pueden ser falseados por el navegador y entonces pueden tener este aspecto:

(En cada caso, a la derecha, el estilo de letra "falseado" por el navegador)

Tipografía Web: ¿En búsqueda de la fuente ideal para tu sitio web?
Tipografía Web: ¿En búsqueda de la fuente ideal para tu sitio web?
Fuente:
Tipografía web profesional

Según estos criterios, ahora puedes buscar la fuente para el cuerpo de texto de tu sitio web. Dado que la elección suele ser más complicada y hay que tener bastantes aspectos en cuenta, recomiendo empezar por elegir el tipo de letra del encabezado en función del tipo de letra de cuerpo (y no al revés).

Puedes obtener una visión más completa y detallada aquí: https://www.shillingtoneducation.com/blog/what-is-typography/.

Serif, Sans Serif y Monospace

Existe una amplia gama de categorías de fuentes. Las tres más comunes son probablemente

  • Serif, por ejemplo, Times New Roman
  • Sans Serif, por ejemplo, Arial
  • Monospace, por ejemplo, el código fuente

En lo que respecta a las combinaciones de fuentes, hay dos procedimientos sencillos que puedes seguir. No se trata de una obligación, sino de meras pautas que pueden ayudarte. Especialmente si no tienes mucha experiencia en la combinación de fuentes:

  1. Utiliza el mismo tipo de letra para el cuerpo y los títulos, pero cambia el grosor, interlineado y tamaño, por ejemplo, Lato:
Tipografía Web: ¿En búsqueda de la fuente ideal para tu sitio web?
Utiliza el mismo tipo de letra para el cuerpo y los títulos
  1. Combina una fuente Serif y una Sans Serif, por ejemplo, Baskerville y Open Sans:
Tipografía Web: ¿En búsqueda de la fuente ideal para tu sitio web?
Una combinación de fuentes puede tener el siguiente aspecto

También hay una herramienta en línea que te ayudará a descubrir y probar rápidamente diferentes combinaciones de fuentes: https://fontjoy.com/#.

Conclusión

Otra cuestión importante que he dejado completamente de lado es el uso de los colores. Dependiendo de si tu tipo de letra está sobre un fondo claro u oscuro, naturalmente tendrá un aspecto diferente. Además, puedes crear variaciones de fuentes tomando la misma fuente y no solo mostrándola en diferentes espesores, sino también en diferentes colores. Al elegir un color, ten en cuenta la guía de estilo y tu branding.

Además de analizar otros sitios web, también es una buena idea fijarse en las tendencias actuales para inspirarse. Rápidamente verás que ciertas combinaciones de fuentes se repiten siempre aquí y que hay pocas novedades. Sin embargo, en función del proyecto y de los requisitos, puede ser necesario recurrir a lo conocido en lugar de ser especialmente innovador/a; puedes encontrar más detalles en este artículo.

Otros recursos sobre el tema

Tus dudas: La fuente perfecta

¿Qué preguntas tienes acerca de la tipografía web? No dudes en utilizar la función de comentarios. ¿Quieres estar informado/a sobre nuevos artículos sobre diseño y desarrollo web? Entonces síguenos en Twitter, Facebook o a través de nuestra newsletter.

Después de estudiar Diseño para Juegos y Escritura Creativa en Auckland, Sonja Hoffmann se ha especializado en el diseño y desarrollo web. Su labor profesional se enfoca en la gamificación y exploración de la motivación y la experiencia del usuario, junto con su pasión y curiosidad por las tendencias tecnológicas.

Artículos relacionados

Comentarios sobre este artículo

Escribe un comentario

Tu dirección de correo electrónico no se publicará. Los campos obligatorios están marcados con *.