Tipografía Web: Cómo encontrar la fuente ideal para tu sitio web

7 min.
perfect-web-typography

Un tipo de letra adecuado hace que el sitio web tu no sólo sea visualmente mucho más interesante. Los tipos de letra influyen de forma decisiva en que las secciones de texto se ignoren o se lean. En este post te mostraré 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 ayudarle a entrenar tu ojo en consecuencia 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. Al menos igual de importantes son: una buena UX, accesibilidad y SEO. En este artículo le mostraré 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, 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 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: Cómo encontrar la fuente ideal para tu sitio 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, la fuente por defecto es Times o Times Roman. Arial es utilizada por Windows como fuente Sans Serif. Mac OS X utiliza Helvetica como fuente por defecto.

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, 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 cuestionable por necesidad: Así, se incorporaron como archivos de imagen fuentes que no solían existir en la web.

Las desventajas de esto son obvias:

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

Diseñar 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 el sitio web tus si la fuente deseada no está disponible. Esto puede tener varias razones. Por ejemplo, una mala conexión a Internet, que hace que el archivo CSS tu se cargue con retraso.

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

Así pues, mientras se debate sobre qué tipo de letra es la que mejor se adapta visualmente a tu sitio , también hay que plantearse algunas cuestiones técnicas básicas:

  • ¿Se mostrará el texto tu aunque no se cargue el archivo CSS? 
  • ¿Es tu sitio todavía legible en serif y sans serif estándar? 
  • ¿Suministran un tipo de letra alternativo? ¿Cómo se muestra? ¿Puede hacer alguna otra configuración que le dé 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 a la hora de elegir 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 tu Font?

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 el ordenador. Por tanto, es imposible saber cuáles están disponibles, o no. 

Para no tener que mostrar nuestras páginas 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 saltan las restricciones que tenemos al utilizar fuentes estándar. Se amplía la selección de fuentes disponibles.

Probablemente las más conocidas son Google Fonts (gratuitas) y Adobe Fonts (de pago). Sin embargo, hay otros proveedores. Especialmente en España , las directrices de protección de datos más estrictas suelen llevar a la búsqueda de una alternativa a Google. No sólo se ofrecen fuentes para incrustar, sino también plataformas que alojan las fuentes de tu para usted, de modo que la creatividad de tus no tiene límites. Por supuesto, el requisito previo es que usted posea los derechos o licencias.

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

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 se vuelve demasiado cansado, el visitante dejará de leer tus sitio . 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 legible 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: Cómo encontrar 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: Cómo encontrar 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 interlineado describe la distancia general entre las letras, 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: Cómo encontrar la fuente ideal para tu sitio web
Artículo: Tipografía en 60 segundos

Un espaciado uniforme hace que su 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;}

Terminales, ascendentes y descendentes

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

Tipografía Web: Cómo encontrar la fuente ideal para tu sitio web
Fuente:
Tipografía web profesional

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

Tipografía Web: Cómo encontrar 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 fuentes con serifas, 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 los párrafos, y son más apropiadas para los titulares.

Tipografía Web: Cómo encontrar la fuente ideal para tu sitio web
Fuente:
Tipografía web profesional

Negrita y cursiva

A la hora de 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 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: Cómo encontrar la fuente ideal para tu sitio web
Tipografía Web: Cómo encontrar 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 el sitio web tu . Dado que la elección suele ser más complicada y hay que tener más en cuenta, 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

En lo que respecta a 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: Cómo encontrar la fuente ideal para tu sitio web
Utilice el mismo tipo de letra para el cuerpo y los títulos
  1. Combine una fuente Serif y una Sans Serif, por ejemplo Baskerville y Open Sans:
Tipografía Web: Cómo encontrar 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

Otra cuestión importante que he dejado completamente de lado es el uso de los colores. Dependiendo de si el tipo tu está sobre un fondo claro u oscuro, naturalmente tendrá un aspecto diferente. Además, puede 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 un color, tenga en cuenta la guía de estilo y la marca de tus .

Además de analizar otros sitios web, también es una 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

tu Preguntas: 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 boletín.

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

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