Una mirada a las experiencias de lectura con grandes tipografías

Todo el mundo tiene su propio gusto culposo cuando se trata del diseño web; para mí, es una tipografía grande. Me gusta leer en la web cuando el contenido se presenta con una tipografía grande y audaz. Si a eso lo combinamos con el color utilizado de manera inteligente, un espacio en blanco suficiente y una tipografía bien diseñada, me encanta. En la inspiración de esta semana se reúnen algunos de mis ejemplos favoritos.

Tamaño de la fuente: 1rem

Si un sitio web va a estar en la lista, el texto del cuerpo debe tener al menos 16px, preferentemente mucho más. Empezaremos en el extremo inferior de la escala con digg, cuyos artículos destacados utilizan 18px abundantes:

En Graphik, los encabezados y el cuerpo utilizan diferentes pesos, aunque los encabezados son ligeramente más oscuros (#191919), muy contrastados en comparación con #232323 que se utiliza para la lectura principal.

Otro ejemplo de 18px (1.125em) es de London’s Royal Drawing School, que utiliza de manera acertada una elegante combinación de fuentes:

La fuente que aquí se utiliza para los encabezados se llama Vinter; Art Deco con personalidad, con trazos modulados fuertemente contrastados (trazos que varían en grosor). Lee más acerca de su diseño en el sitio web de Monokrom.

Fuentes del sistema

Prefiero la audacia de digg a la de The Verge, aunque ésta también aparece en la lista debido a su generoso espacio en blanco y a la atención que se le da al contenido en sí:

En este caso, el texto de cuerpo está a 16.5px en pantallas grandes, y depende de las fuentes del sistema (Helvética, Arial), aunque los encabezados y los bloques de citas usan la fuente Playfair Display. Es una lectura con letra grande, pero siempre podría ser más grande según mi opinión.

The Washington Post también utiliza una fuente del sistema (Georgia 18px) como su caballo de batalla, aunque los encabezados y los pies de foto usan Postoni (una serif condensada, algo que se utiliza en muchos periódicos) e ITC Franklin respectivamente.

Encabezado con impacto

Me quito el sombrero ante Wondersauce, la agencia que está detrás del rediseño de The FADER. ¿Qué tal esto para comunicar una idea en el título de un artículo?

«Nunca hemos interrumpido a los lectores con contenido adicional innecesario o un diseño superfluo. El contenido ha prevalecido como el rey; un rey muy bien vestido». - Wondersauce

¡Hermosa! 120px de una llamativa fuente Neutral naranja (ignoraremos el hecho de que este encabezado está marcado como <div class="bigPinkText">).

El subtítulo también, la fuente Freight Text Pro a 48px es imposible de ignorar. De hecho, estos encabezados son tan enormes que hacen que el cuerpo del texto parezca diminuto, ¡cuando en realidad se muestra a 19,2px (1,2rem) en pantallas grandes!

Edenspiekermann utiliza un enorme fuente a 1.92rem para darnos la bienvenida a su sitio web:

La fuente en cuestión es «Espi»; una versión creada internamente de su propia FF Unit (de Christian Schwartz y Erik Spiekermann) que se encuentra por igual al inicio como una tipografía para pantalla o para el cuerpo. Y no es una sorpresa que, aunque no son una publicación editorial, Edenspiekermann también utilice una tipografía generosamente grande para su blog.

Fácil para los ojos

Un rápido agradecimiento a Jason Pamental por recomendar History of Vietnamese Typography de Donny Trương. Una letra grande para el cuerpo (1.1875em o 19px), combinaciones de fuentes de calidad (échale un vistazo a las ligaduras OpenType), y el contraste apagado entre la letra y el fondo, hacen que estas páginas sean muy fáciles de asimilar.

en Vox se pueden encontrar más colores agradables para la vista, aquí el cuerpo tiene un tamaño de letra robusto de 19.5px (o equivalente). Relaja la vista y lee...

El asunto de las combinaciones de colores nos lleva a nuestro siguiente tema: The Forecaster. Este sitio web fue creado para acompañar un documental sobre el asesor financiero Martin Armstrong y sus predicciones sobre la economía mundial.

Inspirado en el clásico «salmón» que utiliza el Financial Times, este rosa reduce el contraste y mejora la experiencia de la lectura. Sin duda es distintivo, que es uno de los motivos que se atribuyen a la decisión original del FT de imprimir en papel de color. Una teoría quizás más apropiada es que el tinte rosado era más barato, debido a que el papel requería un blanqueamiento menos extenso.

Independientemente de eso, los colores son excelentes y la tipografía es impresionante. El cuerpo es más conservador con 16px, pero los encabezados se estiran para llenar el espacio disponible (utilizando una técnica similar a FitText).

Envato Market

Revisa algunos de los temas que están a la venta en Envato Market y añade una tipografía grande a tu próximo proyecto web:

Para concluir

Como lo señalé al principio; me encanta la tipografía grande. Me gustan los detalles que permite y me gusta cuando los diseñadores consideran al contenido de la lectura como algo de lo más importante. ¡Espero que esta colección te inspire a ser audaz y a pensar en grande!