Krypton Solid

Los buenos, los malos y los grandes ejemplos de tipografía web

Los buenos, los malos y los grandes ejemplos de tipografía web

La elección de tipos de letra es una parte integral de cada proyecto de diseño web. Con miles de tipos de letra disponibles en servicios de alojamiento como Typekit, así como una colección de fuentes gratuitas disponibles en constante mejora, nunca ha habido un mejor momento para ser un diseñador web obsesionado con la tipografía.

Se podría argumentar fácilmente que nada afecta más a un diseño que la tipografía. Y una buena tipografía comienza con la elección de un tipo de letra adecuado. Pero, ¿puede ser malo tener demasiadas opciones? Con más opciones, tenemos más oportunidades de tomar malas decisiones.

Otras lecturas en SmashingMag:

En este artículo, revisaremos una colección de hermosos sitios web y analizaremos el impacto que las opciones de tipografía de sus diseñadores han tenido en los diseños generales. Criticaremos tanto lo bueno como lo malo. Por supuesto, el tipo es subjetivo, así que tome cualquier crítica con un grano de sal. ¡Vamos a profundizar en!

Hotel Vesper

Pantalla de dominio, una tipografía con curvas y ornamentada del diseñador tipográfico con sede en Nueva Zelanda Kris Sowersby, hace una hermosa combinación con Proxima Nova en Hotel Vespersitio web. Aunque Proxima Nova puede ser una de las fuentes web más utilizadas de los últimos años, combinarla con algo menos utilizado, como Domaine Display, puede hacer que un diseño se sienta distintivo y fresco.

También me encanta cuando una marca puede usar una fuente web para su logotipo. Hace feliz al lado del desarrollador de mi cerebro saber que un logotipo se puede diseñar con CSS, leer con un lector de pantalla y escalar hacia arriba y hacia abajo, todo sin necesidad de cargar una imagen.

Dragone

Ver el tipo de letra en contraste con texturas preciosas como esta me hace lamentar que el «diseño plano» sea una tendencia tan predominante. DragoneEl sitio web se siente como una pintura, y la elegante Pantalla Playfair es el tipo de letra perfecto para este look. Las cursivas de Playfair Display son especialmente hermosas, y este sitio web las presenta de manera destacada. El clásico sans geométrico Futura también se utiliza, proporcionando una base sólida junto a la extravagante pantalla Playfair.

02-dragone-opt

A veces, cuando el texto se coloca encima de imágenes como esta, la legibilidad se ve afectada. Sin embargo, los diseñadores de este sitio web han tenido mucho cuidado para garantizar un contraste adecuado oscureciendo las fotos lo suficiente para que el tipo se destaque.

Mi único detalle es el uso de Playfair Display para el texto del cuerpo: una pantalla de alto contraste no está diseñada para pasajes largos de texto. Dicho esto, la cantidad de copia en este sitio web es bastante mínima, por lo que no representa un gran peligro para la lectura. Georgia es una cara tradicional con características similares, por lo que podría haber servido como un compañero de fuente de cuerpo más legible para Playfair Display.

Romain Balcerak

Texto Tiempos es otro tipo de letra del prolífico Kris Sowersby. Está emparejado aquí con Centinela, a serif losa de Hoefler & Co. Apercu, un peculiar grotesco de Fundición de colofón, también se agrega a la mezcla.

03-romain-balcerak-opt

El uso de tres tipos de letra a veces puede resultar un poco excesivo, pero Romain Balcerak se adhiere a un sistema consistente, que mantiene unido el diseño. El texto de Tiempos está en negrita para los títulos; Sentinel siempre se pone en cursiva para los subtítulos; y Apercu se usa para el cuerpo del texto en todas partes.

Activos de rieles

Adelle Sans y Whitney son dos sans-serif con características algo similares, ambos son grotescos con un sesgo humanista. La combinación de dos tipos de letra similares es definitivamente poco ortodoxo. Casi parece que el diseñador no pudo elegir entre los dos y, por lo tanto, decidió usar ambos.

04-carriles-activos-opt

En cuanto a los delitos tipográficos, consideraría que éste es menor. Su uso es consistente: Adelle Sans para títulos y Whitney para todo lo demás. Y con tipos de letra tan bien diseñados como estos, es difícil que un diseño se vea mal.

Dólar al día

Voy a hacer una proclamación no muy polémica: Apercu es la fuente más de moda en la web en este momento. Mi proyecto paralelo Typewolf presenta muchos sitios web que usan Apercu; de hecho, es la tercera fuente más popular en el sitio web, y todavía me encuentro con tantos sitios web que usan Apercu que no aparecen en Typewolf. Parece que un puñado de sitios web con este tipo de letra aparecen todos los días.

Opción de 05 dólares al día

Supongo que Apercu y otros similares “extravagantes grotescos”Atraen a los diseñadores porque, después de años de uso de Helvetica en la web, este estilo de tipografía declara con orgullo“ No soy Helvetica ”.

Entonces, Dólar al díaEl sitio web, cuyo diseño podría haberse sentido frío y estéril si estuviera ambientado en Helvetica, se siente instantáneamente divertido, animado y único en Apercu. Por supuesto, cuando todos los sitios web utilizan el mismo tipo de letra, se pierde la frescura. Pero en este momento, Apercu todavía se siente emocionante.

Exploración de nuevas empresas

Exploración de nuevas empresas es un sitio web que tiene muchas cosas buenas a su favor en el departamento de tipografía, pero parece que las cosas de alguna manera no encajaron entre las etapas de diseño y desarrollo.

06-exploración-nueva-empresa-optar

En la primera impresión, la slab serif Jubilat se ve maravilloso junto con Sans abierto en el prominente gráfico del héroe. Una cara de losa cálida y con curvas combinada con una cara humanista sensata crea una marca sólida. Sin embargo, en un examen más detenido, notará que otro sans-serif, Proxima Nova, se utiliza para la navegación. Y luego, debajo, Arial se usa para el cuerpo del texto.

Si ya está importando Open Sans, ¿por qué no utilizarlo también para el cuerpo del texto? Y tiene una amplia gama de pesos. ¿Por qué se necesita una familia tipográfica sans-serif separada para la navegación?

El resto del sitio web parece ser una mezcla aleatoria de Jubilat, Proxima Nova, Open Sans y Arial, sin un uso claro establecido para cada uno. Este tipo de inconsistencia suele ocurrir cuando varios diseñadores están trabajando en un sitio web pero no están en la misma página. La creación de una guía de estilo al principio de un proyecto generalmente evitará que ocurran problemas como este.

Claramente, diseñadores talentosos estaban trabajando en este proyecto, y el sitio web todavía tiene mucho que admirar. Pero sin consistencia, mezclar cuatro familias tipográficas es difícil de lograr.

United Strands

United Strands utiliza un solo tipo de letra, Montserrat, cuyo fuente de código abierto está disponible de forma gratuita en Fuentes de Google. Gran parte de su popularidad se debe a su parecido con dos de las tipografías comerciales más populares de la última década, Gotham y Proxima Nova. Aunque definitivamente tiene cierto parecido con esos dos tipos de letra, creo que se destaca como su propio diseño único, con un carácter distintivo propio.

07-hebras-unidas-opt

La única desventaja de Montserrat es que no tiene estilos en cursiva. Y si configura el texto del cuerpo en una fuente sin cursiva, terminará con cursiva falsa. Sin embargo, la copia en este sitio web es bastante mínima y solo noté algunos casos en los que esto ocurre. Entonces, si bien no es una tipografía «adecuada», no se nota mucho en este caso. De todos modos, las sans-serif suelen manejar mejor las cursivas falsas que las serif.

Dicho esto, los diseñadores hicieron un excelente trabajo en general al aprovechar al máximo un solo tipo de letra con estilos limitados. Los elementos de texto en mayúsculas tienen un espaciado entre letras un poco más ancho de lo normal, lo que siempre es un buen toque; el generoso espacio en blanco le da a la tipografía espacio para respirar y el color llamativo crea un fuerte contraste.

Lluvia noruega

Lluvia noruegaEl sitio web combina el clásico sans-serif geométrico. Avenir con Texto de flete. Avenir fue seleccionado como el fuente favorita entre los principales diseñadores en una encuesta de principios de este año. La palabra «avenir» significa «futuro» en francés – leyenda del diseño tipográfico Adrian Frutiger tomó los principios geométricos detrás de Futura y agregó un toque cálido y orgánico para crear Avenir. No es de extrañar que este sea uno de los favoritos entre aquellos que realmente aprecian la tipografía.

08-lluvia-noruega

Freight Text tiene un distintivo corte en cursiva que combina muy bien con las líneas limpias de Avenir. De hecho, en este sitio web solo se utiliza el estilo en cursiva de la familia Freight Text. Esto no solo mantiene la coherencia del sistema de tipos, sino que también reduce los tiempos de carga de la página.

La altura de la línea del texto en el pie de página se siente pequeño apretado. Aparte de eso, este es un gran sitio web, con mucha tipografía fina para apreciar.

Pelican Books

Pelican Books‘presenta otro tipo de letra extremadamente popular entre los diseñadores, Brandon Grotesque. Esta es en realidad la versión de texto especial de Brandon Grotesque, llamada Brandon Text. La versión normal de Brandon Grotesque fue diseñada para ser más una pantalla, lo que significa que no es realmente adecuada para pasajes de texto largos. Brandon Text tiene una altura x más alta y está optimizado para el texto del cuerpo.

09-pelican-opt

Curiosamente, este sitio web todavía usa Brandon Text más como una cara para mostrar que para el texto del cuerpo, que se establece en Texto de flete. Brandon Text todavía se ve muy bien en tamaños grandes, pero no es tan encantador como el Brandon Grotesque original porque es más moderado y conservador. Freight Text es una de las serifas más legibles que existen, por lo que es una excelente opción para los pasajes largos de texto en el «Leer en línea» sección. Combinada con la textura sutil del papel, la tipografía realmente te hace sentir como si estuvieras leyendo un libro.

Simplemente chicle

Gracias a las fuentes web, hacer coincidir la tipografía en el empaque físico de un producto con la tipografía en el sitio web del fabricante se está volviendo cada vez más común. Simplemente chicle eligió Gotham como el tipo de letra de su marca, manteniendo su identidad coherente en los canales en línea y fuera de línea.

10-simplemente-chicle-opt

Este sitio web también es un gran ejemplo de cómo un solo tipo de letra es todo lo que se necesita a veces. Al usar los distintos pesos de Gotham y colocar los encabezados en mayúsculas, Simply Gum ha creado una jerarquía clara con un solo tipo de letra.

El logotipo en el encabezado y pie de página son PNG, por lo que pierden la nitidez y la escalabilidad del tipo web. Usar una fuente web para un logotipo no siempre es factible, especialmente si necesita mucho control sobre el kerning; sin embargo, una imagen SVG suele ser mejor que una PNG en este caso porque puede escalar mientras conserva su nitidez.

Terminando

Con suerte, los ejemplos anteriores demuestran cuán grande es el impacto que pueden tener las opciones tipográficas en un diseño. Aquí hay algunas conclusiones clave:

  • Si va a utilizar varios tipos de letra, desarrolle un sistema de tipos coherente y cúmplalo.
  • Al configurar el texto del cuerpo, elija un tipo de letra que venga con estilos de cursiva regular, cursiva, negrita y negrita.
  • Si va a optar por un tipo de letra popular, intente combinarlo con un tipo de letra menos utilizado para que el diseño se sienta distintivo.
  • Cree una guía de estilo desde el principio de un proyecto para garantizar un uso coherente del tipo entre los miembros de su equipo.
  • Utilice tipos de letra contrastantes, en lugar de similares.
  • Evite mostrar caras para el texto del cuerpo. Elija un tipo de letra diseñado para tal fin.
  • No tenga miedo de utilizar una sola familia tipográfica. Puede establecer una jerarquía con diferentes pesos y estilos de la misma familia.
  • Si su logotipo lo permite, elija el tipo web o una imagen SVG para garantizar la nitidez y la escalabilidad.

Manténgase al día con lo último en tipografía web

Si estás tan obsesionado con la tipografía como yo, dirígete a mi proyecto paralelo Typewolf para obtener aún más ejemplos de hermosa tipografía.

Nota tecnica: Estas capturas de pantalla se tomaron en Safari en una Mac. La representación de fuentes varía de un navegador a otro, por lo que sus resultados pueden diferir.

Deja un comentario