Lo hemos dicho antes y lo volveremos a decir (prometido): el diseño web es 99% tipografía.
Al fin y al cabo, si el contenido es el rey, la forma en que lo presentas cobra una importancia increíble. Y cuando lo haces bien, te aseguras de que todo ese gran contenido que publicas no solo sea semánticamente potente, sino también visualmente impactante.
Con esto en mente, aquí tienes una pequeña muestra de sitios web #MadeInWebflow que presentan su tipografía —y su contenido— bajo la luz perfecta.
Nota: siempre que ha sido posible, he enlazado las tipografías utilizadas en estos sitios a sus páginas de Google Fonts (que puedes usar en cualquier plan de Webflow). Cuando no ha sido posible, he enlazado a Typekit (disponible en planes Pro y superiores). Y cuando ninguna de las dos opciones era posible, a MyFonts o al sitio de la fundición tipográfica.
Portafolio de Kele Dobrinski
Tipografías: Voga y Brandon Grotesque
Refinado, elegante pero ultramoderno, el sitio web del portafolio de Kele combina la tipografía Voga de alto contraste, al estilo Bodoni, con la fuente sans-serif supermoderna Brandon Grotesque, logrando un efecto fantástico.
Todo comienza en la sección principal del sitio, donde la elegante Voga aparece en minúsculas amigables, mientras que Brandon se utiliza en mayúsculas para desempeñar una especie de función de metadatos.
Más abajo en la página, Voga aparece en mayúsculas en los títulos destacados, con Brandon también en mayúsculas debajo, seguido de una línea gruesa y estilizada. Las elegantes tipografías y el amplio espacio en blanco refuerzan maravillosamente el aire de alta costura de las fotografías.
Las entradas individuales del portafolio mantienen la Voga grande y llamativa junto a la discreta Brandon, pero aquí Brandon asume otro papel: servir como cuerpo de texto en un gris pálido de gran tamaño. El gris es un poco claro, pero eso realmente hace que los enlaces resalten, así que es posible que haya sido intencional.
Kele completa el sitio con una foto conmovedora que hace un uso hermoso de la tipografía, con un humilde "Hola" que prácticamente rebosa energía positiva.
Gaffa Creative Precinct
Tipografías utilizadas: Lato y Libre Baskerville
Gaffa Creative Precinct traslada al mundo web un espacio artístico australiano único de forma impresionante, con mucho espacio en blanco, un cuerpo de texto minimalista en Libre Baskerville y la popular Lato desempeñando diversas funciones de metadatos e interfaz.
A pesar de que Lato resulta familiar para cualquiera que trabaje en tecnología —al fin y al cabo, es la tipografía de la marca Slack—, conserva una flexibilidad impresionante y una sensación de frescura, especialmente cuando se usa en mayúsculas (como en Gaffa) o en sus hermosas cursivas. Al ver páginas de exposiciones como “Albesence”, es fácil sentir que Lato debería usarse en la señalización de museos de todo el mundo.
El cambio a Libre Baskerville (una de las muchas versiones renovadas de una fuente clásica) añade un toque de respetabilidad y clasicismo al sitio, recordándonos el trabajo intelectual que conlleva el arte.
El texto completamente justificado rara vez funciona en la web, pero Jimmy Makes Things, la agencia detrás del sitio de Gaffa, lo logra con columnas bien equilibradas y una cuidadosa atención al tamaño de la fuente.
No envidio a nadie que intente crear un sitio web para una galería de arte. El mundo del arte siempre está en equilibrio sobre la estrecha línea entre el progresismo vanguardista y el refinamiento de clase alta, y no debe ser fácil expresar eso en la web. Afortunadamente, Gaffa lo hace con creces.
Plantilla CMS Wider
Tipografías: Raleway, Abril Fatface, Merriweather
Wider, de Pablo Ramos, se encuentra entre las más populares de nuestras plantillas CMS premium, y no es difícil ver por qué. Las fotos con filtros marcados, los titulares dramáticos y los toques de colores brillantes sobre un fondo por lo demás monocromático crean un sitio web casi hipnótico.
Y gran parte del mérito se debe a las elecciones tipográficas. Con grandes titulares en la negrita y alto contraste de Abril Fatface; etiquetas de metadatos/UI en la ágil Raleway; y el cuerpo de texto en la legible pero elegante Merriweather, la plantilla simplemente grita: ¡esto fue hecho por y para creativos!
La plantilla también cambia un poco las cosas al usar ocasionalmente la sans-serif Raleway para el cuerpo del texto. Es una buena forma de añadir interés.
Una cosa a tener en cuenta: puede ser complicado combinar dos fuentes diferentes de la misma familia (es decir, dos sans o dos serif), y se podría argumentar que Abril y Merriweather juntas es un poco arriesgado.
Plantilla Architect
Tipografías: Raleway, Open Sans
La elegante y flexible Architect, de Nicolas Kayser, combina magníficas fotos de edificios modernos masivos con la peculiar y delgada Raleway, incorporando la similar pero más neutral Open Sans para contenidos más extensos.
Debido a que Raleway es tan esbelta, es perfecta para titulares y otros elementos tipográficos de gran tamaño como los avances, tal como se ve a continuación en las tarjetas de Proyectos.
Para el cuerpo del texto, la plantilla cambia a la increíblemente popular Open Sans, cuya sensación profesional pero cercana encaja a la perfección con la estética general del sitio. Aunque, si yo usara esta plantilla, definitivamente aumentaría el tamaño de la fuente un par de puntos.
Combinaciones de Google Webfonts por Timothy Noah
Tipografías: varias
Si alguna vez te quedas atascado buscando una buena combinación de fuentes para darle vida al contenido de tu sitio, podrías hacerlo mucho peor que visitar el sitio web de Timothy Noah sobre Combinaciones de Google Webfonts.
Inspirado en otros sitios populares, el trabajo de Noah ofrece una excelente muestra de lo que puedes lograr con la tipografía en Webflow usando solo Google Fonts.
El sitio hace un trabajo brillante combinando fuentes serif y sans-serif modernas, y añade algunas ideas para detalles tipográficos como subtítulos y líneas divisorias. Es una herramienta muy útil para cualquier diseñador web, sin importar su nivel, pero será especialmente valiosa para quienes están empezando.
Empieza gratis
Crea sitios web personalizados y escalables, sin escribir código. Empieza a construir en Webflow.
Portafolio de Riaz Farooq
Tipografías: Montserrat, Maisonneue
Creado por el experto de la comunidad de Webflow Arthur James, el portafolio de Riaz Farooq es extremadamente ligero en texto, pero aun así hace un trabajo interesante con la tipografía.
Todo comienza con el logotipo personal de Farooq, que consiste en un cuadrado de letras estilizadas sobre varias imágenes de su trabajo y de él mismo.
La información de contacto aparece en una barra de navegación que comienza en la parte inferior de la pantalla, pero se fija en la parte superior a medida que haces scroll...
Y te encuentras con unas letras enormes, a menudo dispuestas con delicadeza, que sirven como adelantos de los proyectos del portafolio de Farooq. Cada letra de gran tamaño te ofrece una pequeña ventana a lo que hay detrás, que luego se revela un poco más al pasar el cursor y aún más al hacer clic. Es un modelo de interacción deliciosamente creativo.
Una historia de Silicon Valley
Tipografías: Raleway, Oswald
Cuando estás metido hasta el cuello en la segunda ola de la revolución tecnológica liderada por Silicon Valley (como yo), es fácil olvidar que esta revolución es solo la expresión actual de una historia en constante desarrollo.
La línea de tiempo interactiva de João Paulo Teixeira profundiza en esa historia con un diseño hermoso, de estilo editorial, que aprovecha Raleway al máximo. Mientras que Architect destaca la delicadeza flexible de los pesos más ligeros de Raleway, este sitio utiliza la negrita, más amigable y juguetona, para darle una personalidad auténtica.
Teixeira también hace un uso excelente de la gran y llamativa Oswald en números de gran tamaño y colores brillantes que contrastan a la perfección con los fondos vívidos de cada década.
Portafolio de Justin Schueler
Tipografías: Proxima Nova, Livory
En una época en la que todos se preguntan si el diseño web ha muerto por falta de creatividad, resulta muy refrescante descubrir algo un poco diferente. Como el portafolio de Justin Schueler: precioso, sencillo y centrado en la tipografía.
Probablemente estés acostumbrado a ver las letras amigables de Proxima Nova en el cuerpo de texto de Smashing Magazine, pero adquieren un aire totalmente nuevo cuando se usan en mayúsculas, como en los diversos encabezados de Justin. Incluso los encabezados funcionan de forma distinta aquí: no gritan desde la página, sino que la estructuran sutilmente.
El sitio se apoya principalmente en la hermosa Livory, una fuente con remates de HVD, los creadores de Brandon Grotesque. Como estamos tan acostumbrados a ver portafolios llenos de imágenes gigantescas y espectaculares, es muy refrescante ver una fuente con remates utilizada para plasmar de forma directa la experiencia y los conocimientos de un diseñador.
Sitio web de la agencia Composite Co.
Tipografías: Akkurat Pro, Apercu Mono
Hablando de portafolios minimalistas, conoce a Composite Co., una agencia de diseño web que utiliza Webflow de forma extensiva en sus proyectos para clientes.
Este equipo de dos personas (Christian Dutilh y Jacob Weinzettel) entiende claramente el poder de un texto sencillo y directo combinado con un amplio espacio en blanco. De alguna manera, esta combinación hace que frases que ya has escuchado antes, de una forma u otra —como "Diseñamos cosas que cautivan y atraen a personas reales"—, vuelvan a cobrar sentido de repente.
Al igual que Justin, Composite Co. también plasma sus habilidades y experiencia en una lista de texto sencilla, esta vez escrita en Apercu Mono. Es genial ver una tipografía que suele relegarse a la programación o a intentos de imitar manuscritos a máquina desempeñando un papel tan importante en un sitio.
Hablando de frescura: ¡me encantan los titulares con sangría francesa en las páginas de proyectos individuales!
Portafolio de Jonathan Patterson
Tipografías: Quebec Serial, Source Sans Pro
Hay muchas cosas que me encantan del increíble portafolio de Jonathan Patterson, pero hoy voy a deshacerme en elogios por los enormes titulares que aparecen en todas las páginas de su sitio que no son del portafolio.
Compuestos en lo que parece ser el peso Heavy o Black de Quebec Serial, subrayados con una línea delicada y cargados con la voz única de Jonathan, no me canso de ver estos titulares.
Especialmente cuando añades los diversos objetos (soldaditos de juguete, palomitas, fichas de Scrabble) que puedes mover por la página con el cursor. Es una interacción pequeña y esencialmente trivial, pero añade un toque de alegría increíble.
También me encanta el uso que hace Jonathan de Source Sans Pro, la primera familia tipográfica de código abierto de Adobe. Es una sans elegante y llena de personalidad que combina de maravilla con la poco vista Quebec. Y cuando ves dos fuentes sans serif combinadas con tanta eficacia, sabes que estás ante el trabajo de un diseñador con talento.
¿Qué tipo de inspiración quieres ver a continuación?
Queremos que este tipo de publicaciones sean habituales en el blog de Webflow, así que si te gustaría inspirarte con algo en particular, ¡cuéntanoslo en los comentarios!
