Un tipo de letra adecuado hace que el sitio web tu sea mucho más interesante, no sólo visualmente. Los tipos de letra influyen de forma decisiva en el hecho de que se ignoren o se lean las secciones de texto. 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, unos cuantos consejos básicos pueden ayudarte a entrenar tu tu ojo en consecuencia y a utilizar la fuente adecuada para el proyecto web tu .

El primer sitio web ...

O bien: Qué ocurre cuando cargas un sitio web sin CSS. En el pasado, los sitios 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:

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 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 te ofrece una interesante visión de las fuentes de reserva, y su aspecto final. 

Georgia y Verdana

A mediados de los años 90, 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 visualización adecuada en diferentes dispositivos puede degenerar en un minucioso trabajo de detalle.
• Las palabras no pueden descubrirse ni traducirse mediante 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. Sin embargo, aquí también es necesario un conocimiento fundamental del ámbito técnico. Es importante entender lo que ocurre en tus si 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 .

A diferencia del diseño gráfico, en la web se aplica lo siguiente: un tipo de letra malo (inadecuado) es mejor que no tener ningún tipo.

Por lo tanto, mientras consideras qué tipo de letra es la que mejor se adapta visualmente a tu sitio , también hay que plantearse cuestiones técnicas básicas:

• ¿Se muestra el texto tu aunque el archivo CSS no esté cargado? 
• ¿Es tu sitio todavía legible en serif estándar y sans serif? 
• ¿Suministran un tipo de letra alternativo? ¿Cómo se muestra? ¿Puedes hacer otros ajustes que te den más control sobre los tipos de letra fallidos 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 da unos fundamentos 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 sobre este tema aquí:

• https://www.filamentgroup.com/lab/font-events.html
• https://css-tricks.com/almanac/properties/f/font-size-adjust/

¿De dónde viene realmente tu Font?

Ahora que te has ocupado de los antecedentes técnicos y de las fuentes de reserva, queda un aspecto muy importante. En concreto, de 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 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 recurrimos más a los servicios de fuentes web. La ventaja es obvia: se eluden las restricciones que tenemos al utilizar fuentes estándar. La elección de los tipos de letra disponibles ha aumentado.

Las más conocidas son Google Fonts (gratuitas) 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 las fuentes de tu por ti, así que no hay límites para la creatividad de tus . El requisito previo es, por supuesto, que poseas los derechos o licencias.

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

Elementos de diseño de las fuentes

Para decidirte por una fuente adecuada, debes conocer algunas características de las tipografías. Básicamente, se puede decir que los párrafos deben estar formados por fuentes fáciles de leer. Si se vuelve demasiado cansado, el visitante dejará de leer tus sitio . La información que presentas no será consumida. 

Otro aspecto es prestar atención a cómo cambia el tipo de letra 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 puedes fijarte y que te ayudarán a elegir la fuente adecuada.

altura 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ñ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.

Aperturas

Las aberturas 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 interletraje como la distancia entre determinadas letras. Este espacio puede ser mayor que entre otros debido a la forma natural de las letras:

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

.kerning {font-kerning: normal;}

.spacing {letter-spacing: 0.1em;}

Terminales, ascendentes y descendentes

Los terminales se encuentran en las letras a, ä, c, f, j, r e y:

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

Se aplica lo siguiente: cuanto más discretos sean, menos adecuados son para su uso con textos pronunciados. Las terminaciones, ascendentes y descendentes son especialmente pronunciadas en los tipos de letra con serifa, por lo que durante mucho tiempo se consideraron un compromiso seguro para las secciones de texto más largas.

Contraste

Los tipos de letra con mucho contraste (izquierda) son menos adecuados para tamaños de letra pequeños, como los utilizados en los párrafos, y son más apropiados para los titulares.

Negrita y cursiva

Cuando elijas las fuentes de tus , debes asegurarte también 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)

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

Puedes 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

Hay 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

Hay dos procedimientos sencillos que puedes seguir para las combinaciones de fuentes. 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 peso, el espaciado de las letras y el tamaño, por ejemplo Lato:

2. Combina una fuente con serifa y otra sin serifa, por ejemplo Baskerville y Open Sans:

También hay una herramienta online que te 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 tu está sobre un fondo claro u oscuro, naturalmente tendrá un aspecto diferente. También puedes crear variaciones de fuentes tomando la misma fuente y no sólo mostrándola en diferentes pesos, sino también en diferentes colores. Al elegir el color, no ignores 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. Te darás cuenta rápidamente de que ciertos emparejamientos de fuentes se repiten siempre aquí y que hay pocas novedades. Sin embargo, según el proyecto y los requisitos, puede ser necesario recurrir a lo conocido en lugar de ser especialmente innovador; puedes encontrar más detalles en este artículo.

Otros recursos sobre el tema

• Más información sobre la teoría del color: https://rb001.dev.360vier.net/blog/webdesign-development/web-design-principles/
• Todo sobre la tipografía web profesional: https://prowebtype.com/
• Fuentes variables para el diseño responsivo: https://alistapart.com/blog/post/variable-fonts-for-responsive-design/