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

Best Practices, 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 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:

Fuente web
El primer sitio web

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í:

¿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í.

"*"indica que los campos son obligatorios

Me gustaría suscribirme a newsletter para estar informado sobre nuevos artículos del blog, ebooks, funciones y noticias sobre WordPress. Puedo retirar mi consentimiento en cualquier momento. Ten en cuenta nuestra Política de privacidad.
Este campo es de validación y no debe modificarse.

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.

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

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

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:

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

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:

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

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

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)

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á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:
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 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 este aspecto

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

tu Preguntas: La fuente perfecta

¿Qué preguntas tienes sobre la tipografía en la web? No dudes en utilizar la función de comentarios. ¿Quieres estar informado de los nuevos artículos sobre diseño y desarrollo web? Entonces síguenos 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á. Los campos obligatorios están marcados con *.