perfect-web-typography

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

Un tipo de letra adecuado hace que el sitio web tusea mucho más interesante, no sólo visualmente. Los tipos de letra influyen de forma decisiva en que las secciones de texto se ignoren o se lean. En este artículo te muestro cómo encontrar la fuente perfecta para el sitio web tu.

Una buena tipografía es el resultado de años de estudio de las fuentes y el diseño. Sin embargo, algunos consejos básicos pueden ayudarle a entrenar tusu ojo en consecuencia y a utilizar la fuente adecuada para el proyecto web tu.

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

El diseño web es algo más que estética. La buena UX, la accesibilidad y el SEO son al menos igual de importantes. En este artículo te muestro las mejores prácticas para lograr sitios web exitosos y usuarios satisfechos.

El primer sitio web ...

O bien: qué ocurre cuando se carga un sitio web sin CSS. En el pasado, las páginas web se mostraban con los tipos de letra integrados en el sistema operativo correspondiente. Estos se siguen cargando hoy en día si no se puede acceder a la fuente. El primer sitio web sigue en línea hoy en día y tiene el mismo aspecto que cuando se puso en marcha en diciembre de 1990:

Fuente web
El primer sitio web

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

Para los usuarios de Windows, las fuentes con serifa se muestran por defecto en Times New Roman. En Mac OS X, sin embargo, es Times o Times Roman. Arial se utiliza en Windows como fuente Sans Serif. Mac OS X utiliza aquí la Helvética.

Zach Leatherman ha desarrollado un proyecto en el que ha probado varios sistemas operativos y las fuentes correspondientes. La herramienta Familia de fuentes le ofrece una interesante visión de las fuentes de reserva, y su aspecto final. 

Georgia y Verdana

A mediados de la década de 1990, a las fuentes estándar se unieron Georgia y Verdana, que Matthew Carter diseñó 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 cuestionable por necesidad: Así, se incorporaron como archivos de imagen fuentes que no solían estar disponibles en la web.

Las desventajas de esto son obvias:

  • La presentación adecuada en diferentes dispositivos puede degenerar en un minucioso trabajo de detalle.
  • Las palabras no pueden ser descubiertas o traducidas usando la función de búsqueda.
  • Además, cada cambio de texto representa un enorme esfuerzo adicional.

Diseñar para lo desconocido

Afortunadamente, la tecnología ha madurado mucho más desde entonces. No obstante, también es necesario un conocimiento fundamental del ámbito técnico. Es importante entender lo que sucede en tussi la fuente deseada no está disponible. Esto puede tener varias razones. Por ejemplo, una mala conexión a Internet que provoque un retraso en la carga del archivo CSS tu.

Al contrario que en el diseño gráfico, en la web se aplica lo siguiente: un tipo de letra malo (inadecuado) es mejor que ninguno.

Por lo tanto, al tiempo que se considera qué tipo de letra será la más adecuada para el aspecto visual de tusitio , también hay que plantearse cuestiones técnicas básicas:

  • ¿Se muestra el texto tuaunque no se cargue el archivo CSS? 
  • ¿Es tusitio todavía legible en serif y sans serif estándar? 
  • ¿Suministran un tipo de letra alternativo? ¿Cómo se muestra? ¿Puede hacer otros ajustes que le den más control sobre las fuentes de reserva de tu?

En primer lugar, es importante que el contenido se muestre en absoluto. La legibilidad general es lo más importante en la elección de la tipografía. 

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

Puede encontrar más información sobre este tema aquí:

¿De dónde viene realmente tuFont?

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

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

Las más conocidas son Google Fonts (gratuita) y Adobe Fonts (de pago). Sin embargo, hay otros proveedores. En Alemania, en particular, las directrices de protección de datos más estrictas hacen que la gente busque con más frecuencia una alternativa a Google. No sólo se ofrecen fuentes para incrustar, sino también plataformas que alojan fuentes de tupara usted, por lo que no hay límites para la creatividad de tus. El requisito previo es, por supuesto, que usted posea los derechos o licencias.

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

Consentimiento*
Este campo es de validación y no debe ser modificado.

Elementos de diseño de las fuentes

Para decidirse por una fuente adecuada, debe conocer algunas características de las tipografías. Básicamente, se puede decir que los párrafos deben consistir en fuentes que sean fáciles de leer. Si resulta demasiado cansado, el visitante dejará de leer tussitio . La información que presente 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 fácil de leer en el escritorio puede ser difícil de leer en un formato más pequeño en un teléfono móvil. 

Hay indicadores en los que puede fijarse y que le ayudarán a elegir la fuente adecuada.

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

Altura x

En el siguiente ejemplo puede ver tres ejemplos diferentes. La altura x describe la altura vertical de la letra x. Si es demasiado pequeño, 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, resulta 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 son, más agradable es leer secciones largas de texto con este tipo de letra.

Espaciado de las letras y el interlineado

Mientras que el espaciado de las letras describe la distancia general entre ellas, entendemos el kerning 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?

Un espaciado uniforme hace que su fuente tenga un aspecto más armonioso. Esto facilita la lectura. Ambas pueden ajustarse también mediante CSS si crees que la fuente que has elegido necesita mejorar:

.kerning {font-kerning: normal;}

.spacing {letter-spacing: 0.1em;}

Terminales, ascendentes y descendentes

Los 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

Los ascendentes y descendentes son similares, pero se refieren a las extensiones en f, q y j, por ejemplo:

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

Se aplica lo siguiente: cuanto más discretos son, menos adecuados son para su uso con textos pronunciados. Las terminaciones, los ascendentes y los descendentes son especialmente pronunciados en los tipos de letra con serifa, razón por la cual estos tipos 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 los párrafos, y son más apropiadas para los titulares.

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

Negrita y cursiva

Al elegir las fuentes de tus, también debe asegurarse de que estén disponibles en diferentes pesos y estilos. Esto se debe a que los estilos de letra que no están disponibles pueden ser falseados por el navegador y tener este aspecto:

(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

Basándose en estos criterios, ahora puede buscar la fuente del cuerpo para tu. Dado que la elección suele ser más complicada y hay más cosas que considerar, recomiendo empezar por elegir el tipo de letra del encabezado en función del tipo de letra del cuerpo (y no al revés).

Puede obtener una visión más completa y más explicaciones de los términos aquí: https://www.shillingtoneducation.com/blog/what-is-typography/.

Serif, Sans Serif y Monospace

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

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

Para las combinaciones de fuentes, hay dos procedimientos sencillos que puede seguir. No se trata de una obligación, sino de meras pautas que pueden ayudarte. Especialmente si no tiene mucha experiencia en la combinación de fuentes:

  1. Utilice el mismo tipo de letra para el cuerpo y los títulos, pero cambie el grosor, el interlineado y el tamaño, por ejemplo Lato:
Tipografía Web: ¿En búsqueda de la fuente ideal para tu sitio web?
Utilice el mismo tipo de letra para el cuerpo y los títulos
  1. Combine una fuente con serifa y otra sin serifa, 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 le ayuda a descubrir y probar rápidamente diferentes combinaciones de fuentes: https://fontjoy.com/#.

Conclusión sobre la tipografía en la web

Otro tema importante que he dejado completamente de lado es el uso de los colores. Dependiendo de si tuestá sobre un fondo claro u oscuro, naturalmente tendrá un aspecto diferente. También puede crear variaciones de fuentes tomando la misma fuente y no sólo mostrándola en diferentes pesos, sino también en diferentes colores. A la hora de elegir el color, no hay que ignorar la guía de estilo y la marca de tus.

Además de analizar otros sitios web, también es buena idea fijarse en las tendencias actuales para inspirarse. Rápidamente se dará cuenta de 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; puede encontrar más detalles en este artículo.

Otros recursos sobre el tema

tuPreguntas: La fuente perfecta

¿Qué preguntas tiene sobre la tipografía en la web? No dude en utilizar la función de comentarios. ¿Quiere estar informado de los nuevos artículos sobre diseño y desarrollo web? Entonces síganos en Twitter, Facebook o a través de nuestro Newsletter.

¿Te ha gustado el artículo?

Con tu valoración nos ayudas a mejorar aún más nuestro contenido.

Escribe un comentario

Tu dirección de correo electrónico no se publicará.