5 populares parejas de fuentes para web de Google fonts

5 Populares Parejas De Fuentes Para Web De Google Fonts

Parejas de fuentes para web de Google fonts

Fuentes para web de Google fonts. La selección de fuentes complementarias nunca es una tarea fácil para los diseñadores web. A veces es difícil saber por dónde empezar. Si tienes problemas para crear una buena combinación de fuentes para el cuerpo y el encabezado de tu sitio web, o si sólo quieres dar un pequeño empujón en la dirección correcta, aquí tienes 5 combinaciones populares que se ven muy bien juntas.

Work Sans y Roboto (fuentes para web de Google fonts)

Work Sans y Roboto

Estas dos fuentes se llevan de maravilla. Work Sans es una fuente hecha específicamente para ser usada en tamaños grandes y medianos. Y aunque su amplio espaciado entre letras lo hace inadecuado como fuente de cuerpo, es perfecto para encabezados. Mientras tanto, Roboto fue diseñada para parecer natural y legible. Es una fuente extremadamente popular y práctica, y una que combina bien con la apariencia llamativa pero elegante de Work Sans.

Source Serif Pro y Source Sans Pro

Source Serif Pro y Source Sans Pro

¿Buscas algo un poco más sofisticado? Estas dos fuentes fueron creadas en el mismo proyecto para complementarse mutuamente. Source Serif Pro añadirá un toque de estilo a tus encabezados, mientras que Source Sans Pro, hecha con interfaces de usuario en mente, ofrece una experiencia racionalizada y fácil de leer.

Playfair Display y Montserrat

Playfair Display y Montserrat

Playfair Display se hizo con los tipos de letra tradicionales de finales del siglo XVIII en mente. Como fuente de visualización se ve mejor en los encabezados, donde añadirá un aspecto elegante y atemporal a tu sitio web. Y fusionado con la fuente de cuerpo de Montserrat, que se inspiró en los letreros de principios del siglo XX en Buenos Aires, lograrás una combinación sorprendentemente sinérgica.

Poppins y Raleway

Poppins y Raleway

Poppins es una agradable fuente geométrica basada en círculos y curvas. Funciona bien como fuente de encabezado y cuerpo debido a su versátil y hermoso diseño. Raleway, mientras tanto, está diseñada como una fuente de gran tamaño. A pesar de esto, funciona muy bien como una fuente de cuerpo con Poppins. Pruébalo; ¡te sorprenderá este improbable combinación!

Libre Baskerville y Lato (fuentes para web de Google fonts)

Libre Baskerville y Lato

Estas dos fuentes funcionan juntas porque contrastan bien. Libre Baskerville es una fuente alta y elegante con serifas, mientras que Lato es sans serif, moderna y diseñada para dar una sensación cálida y amigable. Ambas le darán mucha personalidad a tu sitio.

Combinando las mejores fuentes

Encontrar fuentes que funcionen bien juntas es un arte en sí mismo. Es importante que el encabezado y el cuerpo de las fuentes sean compatibles, ya que elegir las correctas conducirá a un diseño más armonioso. Estas 5 combinaciones de fuentes son un buen punto de partida.

Y lo mejor es que, con las fuentes de Google, son todas gratuitas y fáciles de importar a tu sitio. Empieza a usar tu combo favorito en tu proyecto actual de inmediato!

Generadores gratuitos para diseñadores web

Generadores gratuitos para diseñadores web

 

Conoce estos generadores gratuitos para diseño web

Generadores gratuitos para diseñadores ¿Está buscando una manera de abandonar la rutina y tener más tiempo para el diseño y la creatividad de tu diseño web?

La dura realidad es que cada proyecto implica tareas aburridas y mundanas que hay que hacer si o si. Pero esto no significa que debas aburrirte hasta la muerte, hay una salida. Utiliza la ayuda de servicios y generadores online creados específicamente para situaciones como UPNG, Lists o Font Generator. Todas estas pequeñas herramientas realizan esas tediosas tareas.

UPNG (Generador gratuito para imagenes png)

UPNG (Generador gratuito para imagenes png)

UPNG se ocupa de la tarea más trivial que existe – minimiza las imágenes en formato PNG. Reduce y optimiza las imágenes tratando de encontrar un equilibrio óptimo entre la calidad y el tamaño. Como resultado, no verás mucha diferencia entre la imagen original y su versión minimizada; pero tu página web se cargará más rápido.

POPULATE (Generador gratuito de textos ficticios)

POPULATE (Generador gratuito de textos ficticios)

Populate te proporciona textos ficticios para tus bocetos. A diferencia de Lorem Ipsum, estos trozos de texto son legibles y comprensibles, y parecen contenido real. Cubre 10 categorías populares: negocios, comunicación, diseño, alimentación, finanzas y otras.

Font Generator (Generador gratuito para combinar fuentes)

Font Generator (Generador gratuito para combinar fuentes)

Como su nombre indica, Font Generator es una herramienta que funciona con fuentes. Mezcla y combina fuentes de la enorme base de datos de Google y ofrece a los usuarios combinaciones únicas. Simplemente especifica las fuentes de inicio para el título, los detalles y el cuerpo (o utiliza una función aleatoria) y la herramienta generará variaciones.

Fontjoy y Mixfont (Generadores gratuitos para combinar textos)

Fontjoy (Generadores gratuitos para combinar textos)

Como ya hemos hablado de los generadores de fuentes, aquí tienes dos más. Aquí tienes varias soluciones interesantes: Fontjoy y Mixfont. Ambas te permiten combinar diferentes tipos de letra para encontrar los que mejor se adapten a sus necesidades.

Mixfont (Generadores gratuitos para combinar textos)

Mixfont sólo muestra las opciones seleccionadas, mientras que Fontjoy permite bloquear las fuentes y probarlas utilizando tu propio texto.

Generadores gratuitos para títulos

Otras herramientas útiles para tratar con la tipografía son Bungee y Long shadow generator. Estas dos herramientas transforman títulos y eslóganes en piezas que llaman la atención.

Bungee (Generador  gratuito para títulos)

Bungee (Generador  gratuito para títulos)

Bungee es una herramienta online para crear tipografías con un estilo propio de la moda. Tiene una docena de magníficos tipos de letra que se pueden ajustar con precisión para conseguir un resultado espectacular. Puedes establecer texto, tema, color, fondo, letras alternativas y orientación.

Long shadow generator (Generador  gratuito para títulos)

Long shadow generator (Generador  gratuito para títulos)

Long shadow generator es un pequeño patio de recreo donde se puede experimentar con las sombras de texto. Modifica los aspectos principales y copia el código resultante para aplicarlo al título deseado.

Responsive Font Calculator (Generador  gratuito para títulos)

Responsive Font Calculator (Generador  gratuito para títulos)

El último en esta subsección es Responsive Font Calculator. Es para aquellos que se preocupan por el aspecto responsive de la tipografía en un sitio web. Esta pequeña calculadora proporciona una propiedad calc() apropiada que fuerza al texto a escalar suavemente y con gracia.

Generadores gratuitos para colores

Otra parte muy importante donde los generadores son verdaderos salvavidas es en los colores. Las paletas de colores mal elegidas pueden alterar la armonía de un proyecto e incluso transmitir el mensaje equivocado. Evita esto y prueba Random Material Palette Generator o Coolors.

Random Material Palette Generator

Random Material Palette Generator

La primera solución se basa en los principios del diseño de Material Design. Ofrece diferentes variantes de bonitos esquemas de tres tonos. Puedes aplicar la solución generada al texto, la imagen, una plantilla de tarjeta o una plantilla vertical para evaluar su utilidad.

Coolors (Generador gratuito de color)

Coolors (Generador gratuito de color)

Coolors es una herramienta profesional que genera paletas de colores de cinco tonos y te permite ajustar la saturación, el brillo, el tono y la temperatura. El resultado está disponible en cuatro formatos populares: PNG, SCSS, PDF y SVG.

Espero que te sirvan estar herramientas,  pronto volveremos con más, y una recomendación, si te han gustado estas herramientas no olvides ver Bibliotecas Y Herramientas De Animación CSS.

Como la fuente Gotham conquistó el mundo del diseño

Como la fuente gotham conquistó el mundo del diseño

Nacimiento de la Fuente Gotham

Cuando cierro los ojos y pienso en una palabra, me imagino esa palabra con la fuente Gotham. Estoy maldito por la necesidad compulsiva de identificar cada tipo de letra con el que me encuentro, pero incluso si no sufres esta aflicción en particular, si su relación con la tipografía se parece a su relación con el aire, una interacción constante tan perfecta que casi no lo piensa, a menos que suceda algo. Muy mal, ya sabes esta fuente. Si navegas online, has visto una cartelera, has ido a una sala de cine o has caminado por la calle con los ojos abiertos, has visto a Gotham.

Gotham es un tipo de letra diseñado por primera vez en 2000 para GQ y lanzado para uso público en 2002. Una lista abreviada de dónde ha aparecido incluye: Spotify; Netflix; Universidad de Nueva York; Programas de televisión que incluyen CONAN y Saturday Night Live ; películas que incluyen Inception , Moneyball , The Lovely Bones y Moonlight . Si los anuncios en las estaciones de tren y en las paradas de autobús de su ciudad no usan Gotham, probablemente usen un aspecto similar a Gotham.

Gotham está en todas partes , como sugiere el nombre de una de las cuentas de Tumblr dedicadas a rastrear su prevalencia, pero ¿cómo llegó a ser tan ubicuo? ¿De qué manera se adquiere un tipo de letra tan exhaustivamente en tan poco tiempo, y qué les gusta a los anunciantes de todas las industrias?

Una fuente sans serif

Las respuestas más simples son las técnicas. Gotham es un sans serif sans serif sans serif, lo que significa que le faltan los pies pequeños en las esquinas de las letras que se ven en un tipo de letra como Times New Roman y geométricas que aluden a la influencia de las formas básicas en su diseño. Tiene una altura x alta, lo que significa que las letras minúsculas como xey son comparativamente grandes, y sus diferentes pesos (negrita, delgada, mediana, etc.) son muy distintos entre sí. Todo esto es para decir que Gotham se puede leer fácilmente a distancia en una cartelera o cartel, lo que la convierte en una opción natural para la publicidad impresa.

Las raíces de esta tipografía

De hecho, Gotham encuentra sus raíces tipográficas en gran parte de la señalización arquitectónica del siglo 20 que se encuentra comúnmente en la ciudad de Nueva York. Por extraño que parezca, la señalización geométrica en la puerta principal de la Autoridad Portuaria (no es un lugar que muchas personas asocian con la moda) sirvió de inspiración para el creador de Gotham, el titán de la industria tipográfica Tobias Frere-Jones.

“El objetivo era encontrar una voz sencilla, incluso clara”, me dijo Frere-Jones por correo electrónico, “y las letras de la Terminal de autobuses de la Autoridad Portuaria fueron un ejemplo prometedor de esa voz. También me preocupaba hacer nuevos sans geométricos cuando ya hay tantos … esperaba que esta fuente no tipográfica pudiera producir algo memorable en un campo tan abarrotado «.

También está la cuestión del estilo más nebulosa y abarcadora. Gotham ha sido descrito por Frere-Jones como «fresco» y «masculino» (después de todo, estaba destinado inicialmente a GQ ); Michael Beirut, quien diseñó el logotipo de Hillary Clinton 2016, una vez lo describió a Newsweek como una «fuente elegante, intencionalmente no elegante, muy sencilla y sencilla».

¿Una fuente masculina o femenina?

Es difícil desentrañar lo que se refiere a la distinción de una tipografía como “masculina”: En el contexto de GQ , la franqueza y la autoridad sencillas de Gotham ciertamente se pueden leer como masculinas, especialmente en sus pesos más pesados, pero en los pesos más ligeros, combinados con la paleta de colores correcta, se podría leer fácilmente como una tipografía elegante y femenina. ¡Es una fuente que oscila en ambos sentidos!

Tal vez esa combinación de elegancia y sencillez es el factor más crucial en su ascenso a la prominencia. Gotham es, de muchas maneras, una pizarra en blanco, que se puede usar con estilo en una amplia variedad de contextos, mientras que impregna su entorno con un poco de elegancia «plainspoken» realista.

El fenómeno de Gotham

Pero lo que hace que el fenómeno de Gotham sea extraordinario es la forma en que se ha utilizado en innumerables industrias para innumerables productos y marcas, mientras que trasciende su asociación con cualquiera en particular. Si te mostrara una oración escrita en Jubilat o Myriad Set Pro, las cuales tienen algunas similitudes de construcción de letras con Gotham a pesar de parecer muy diferentes, es probable que las reconozcas como las fuentes utilizadas por Bernie Sanders y Apple, respectivamente.

Pero es probable que no identifiques inmediatamente a Gotham como «la fuente de Obama», o «la fuente de Saturday Night Live » o «la fuente de Spotify», ¿lo harías? En su universalidad, Gotham se resiste a ser encasillado, lo que le permite ser usado por una marca importante después de una marca importante sin volverse obsoleto.

Imitadores y progenitores

En las casi dos décadas desde la llegada de Gotham, el ya bien poblado campo de sans serifs reducido ha visto una explosión en el mundo de la publicidad. Los imitadores de Gotham, incluidos Raleway, Montserrat y Gibson, han asumido el manto de los sans serifs limpios y directos, junto con los progenitores de Gotham como Avenir y Proxima Nova.

«El péndulo nunca se detiene», dijo Frere-Jones. “La ola de sans serifs reducida ya está comenzando a mostrar su edad, y algunas identidades corporativas ya se están alejando de ella. Pero ser limpio y directo nunca pasa de moda, incluso si necesita una nueva expresión «.

Descarga modulo

Las 25 fuentes más principales por los diseñadores

Las 25 fuentes más principales

 

Buscando fuentes he revisado más de 70 entrevistas de diseñadores de renombre mundial como; Erik Spiekermann, Jessica Hische, Michael Bierut, Ellen Lupton, Mark Simonson y Seb Lester, además de propietarios de fundaciones como Font Smith, Type Together y Process Type.

Hemos contado la cantidad de veces que se seleccionó cada tipo de fuente y, aunque las selecciones fueron tan diversas como los diseñadores que se habían entrevistado, encontramos un pequeño consenso sobre las 25 fuentes más principales.

Las fuentes preferidas de los diez mejores diseñadores serán familiares para muchos, pero es de esperar que la lista completa les brinde un trampolín útil para explorar muchas más.

Seleccionar el tipo de fuente correcta hace toda la diferencia para un diseño y comunicación efectiva. Pero con más de 100.000 familias de fuentes para elegir puede ser una tarea desalentadora. Existen algunas guías excelentes sobre cómo elegir y emparejar fuentes, pero para aplicar estos principios es importante estar familiarizado con una amplia gama de tipos de letra de calidad.

Las 25 fuentes más principales por los diseñadores

1. Georgia . Matthew Carter, 1993. Elegido 11 veces.

Originalmente diseñado para mayor claridad en pantallas de baja resolución para Microsoft, es la contraparte de Verdana que también aparece en esta lista. Georgia todavía aparece en millones de sitios web. Es una tipografía robusta pero amigable con una cursiva maravillosamente fluida.
«Un logro técnico magnífico». Jason Santa Maria

2. Gotham. Tobias Frere-Jones, 2000. Elegido 8 veces.

Ocasionalmente conocido como la Helvética del siglo XXI. Gotham se inspiró en la señalización arquitectónica del edificio más antiguo de Manhattan. Originalmente fue encargado por la revista GQ y fue famoso por la campaña presidencial de 2008 de Barack Obama.

3. FF Scala . Martin Majoor, 1990-2004. Elegido 7 veces.

Descrita como la «primera fuente seria de texto» de FontShop International, Scala es una super familia, popular entre los diseñadores de libros, que incluye un serif, un sans serif y un diseño de joya decorativa.
«Scala y Scala San son casi perfectas.» John Boardley

4. Futura . Paul Renner, 1927. Elegido 6 veces.

Esta tipografía «moderna» inmortal con sus formas inflexibles se ha convertido en el sans serifs geométrico de referencia durante casi 80 años.
«El futuro de Paul Renner caracterizó su tiempo e influyó en muchos otros diseñadores. Era una tipografía moderna y real, no basada en tipos de letra serif existentes «. Georg Salden

5. Gill Sana . Eric Gill, 1926. Elegido 5 veces.

Un diseño británico por excelencia producido bajo la dirección de Stanley Morison en Monotype. Sigue siendo una de las mezclas más distintivas de formas humanistas y geométricas.

6. Garamond . (Claude Garamond, c. 1480-1561), Elegido 5 veces.

Se han elegido varios derivados del diseño del punzón parisino, que incluyen; ITC Garamond (Tony Stan), Adobe Garamond y Garamond Premier (Robert Slimbach).
«Garamond era el maestro que apreciaba tanto la moderación como la elegancia. De los diversos tamaños romanos y cursivos que cortó, creo que su fuente ‘Vraye Parangonne’ (aproximadamente 18 pt) captura mejor la esencia de su visión. La sutileza de la línea y los detalles son simplemente notables «. Robert Slimbach

7. Caslon . (William Caslon I, 1722) Carol Twombly, 1990. Elegido 4 veces.

El tipo de letra que dio lugar a un refrán de las impresoras » En caso de duda, utilice Caslon». También es una de las favoritas de Benjamin Franklin.

8. Akzidenz Grotesk . H. Berthold, Berthold Type Foundry, 1898. Elegido 4 veces.

El primer tipo de letra sans serif ampliamente utilizada. «El grotesco original y sigue siendo el mejor». Vincent Connare.

9. Gótico alternativo . Morris Fuller Benton, 1903. Elegido 4 veces.

Diseñado para la American Typefounders Company (ATF). Los tres pesos son audaces y estrechos. Usado en el logo de la página de inicio de YouTube.
«Muy bien diseñado y dibujado. Es un estándar que busco en mi propio trabajo » Mark Simonson.

10. Baskerville . John Baskerville, 1757. Elegido 4 veces.

Baskerville diseñó su propia fuente para mejorar sus trabajos impresos y mejorar las fuentes dominantes de William Caslon. Sus fuentes fueron admiradas (notablemente por Giambattista Bodoni y Benjamin Franklin) y criticadas por sus competidores. Baskerville hizo variaciones de su tipografía para usar en diferentes tamaños (ahora conocidos como ‘tamaños ópticos’). Algunas interpretaciones modernas de Baskerville se han reproducido siguiendo los diseños de un tamaño específico, lo que resulta en varias versiones distintas.

11. Chaparral . Carol Twombly, 2000. Elegido 4 veces.

Elegida por Robert Bringhurst, Chaparral se mueve un lugar en la tabla. La cara de texto de «Twombly» que combina la legibilidad de los diseños del siglo XIX con el estilo del siglo XVI.

12. Helvetica . Max Miedinger con Eduard Hoffmann, 1957. Elegido 4 veces.

Helvetica no necesita presentación como el tipo de letra más famosa del planeta, incluso inspiró una muy buena película.
«Puedes decir ‘te amo’ en Helvetica. Y puedes decirlo con Helvetica Extra Light si quieres ser realmente elegante. O puedes decirlo con Extra Bold si es realmente intenso y apasionado, y podría funcionar «. Massimo Vingelli.

13. ITC Franklin Gothic . Morris Fuller Benton, 1902. Elegido 4 veces.

Creado para American Type Founders Company y nombrado en honor a Benjamin Franklin.

14. Meta Serif . Erik Spiekermann, Christian Schwartz y Kris Sowersby, 2007. Elegido 4 veces.

El compañero servil al influyente sans serif de Eric Spiekermann, FF Meta. También está diseñado para funcionar bien con FF Unit y FF Unit Slab.

15. Metro William Addison Dwiggins , 1930. Elegido 4 veces.

Diseñado a partir de una insatisfacción con los serifs san de la época como Futura.

16. Copperplate Gothic . Jackson Burke, 1948/1960. Elegido 4 veces.

Michael Bierut lo describió como «el mejor tipo de letra ‘no me importa’. Sin estilo, sin matices, solo actitud directa, franca, directa «.

17. Adelle . José Scaglione y Veronika Burian, 2009. Elegido 3 veces.

Adelle es una tipografía serif slab concebida para uso editorial intensivo, principalmente en periódicos y revistas, pero su personalidad y flexibilidad la hacen muy adaptable. «Adelle Sans logra capturar una de las emociones humanas más deseadas: la alegría». Nadine Chahine

18. Caecilia . Peter Matthias Noordzij, 1990. Elegido 3 veces.

Una serifa de losas humanista en lugar de geométrica, ayudando a su legibilidad. «Una serifa de losas amistosa que es más contemporánea en su estructura. Es una familia grande y flexible que siempre establece un tono realmente agradable cuando lo uso. «Frank Chimero

19. DIN . Albert-Jan Pool, 1995. Elegido 3 veces.

Este sans geométrico limpio se basa en el tipo de letra estándar alemán, DIN 1451, utilizado para documentos oficiales y letreros de calles, etc. DIN significa Deutsches Institut für Normung (Instituto Alemán de Normalización). La fuente se agregó a la colección de diseño de MoMA en 2011.

20. Fedra Serif . Peter Bilak, 2003. Elegido 3 veces.

Un tipo de letra de texto muy original. Formado por una combinación única de consideraciones tecnológicas, manteniendo formas escritas a mano.
«Una tipografía bellamente diseñada. Un ejemplo muy agradable y contemporáneo de calidad técnica y diseño caritativo. «José Scaglione y Veronika Burian

21. Feijoa . Kris Sowersby, 2007. Elegido 3 veces.

Con el objetivo de crear una sensación de suavidad, Feijoa tiene una ausencia casi completa de líneas rectas. Feijoa evita con éxito la sensación de frialdad que Kris había sentido con algunos tipos de letra digitales anteriores.
«Esas rectas suavemente curvadas y esquinas redondeadas le dan al diseño una hermosa calidad orgánica, casi caligráfica. Sin embargo, no hay nada frívolo en el tipo de letra, todo es funcional y parece muy seguro de sí mismo. «Yves Peters

22. Hoefler Text . Jonathan Hoefler, 1991. Elegido 3 veces.

Diseñado para que Apple demostrara tecnologías de tipo avanzado, reintrodujo las tradiciones de diseño tipo alguna vez esenciales para la impresión fina, como conjuntos de ligaduras, mayúsculas grabadas, adornos y arabescos.

23. Officina . Erik Spiekermann, 1990. Elegido 3 veces.

Una familia emparejada de rostros serif y sans serif, originalmente diseñada como un tipo de letra para correspondencia comercial, pero que tenía una audiencia mucho más amplia y moderna.

24. Quadraat . Fred Smeijers, 1992. Elegido 3 veces.

Una tipografía original que combina elegancia renacentista con ideas contemporáneas sobre la construcción y la forma. El nombre del estudio de diseño de Smeijers en Arnhem, del mismo nombre.
«En mi opinión, uno de los diseños de tfuente más importantes de los años noventa» Yves Peters

25. Sabon . Jan Tschichold, 1964. Elegido 3 veces.

Un tipo de letra serif oldstyle basado en Garamond. Una característica distintiva de Sabon es que los estilos romano e itálico y los pesos regulares y audaces ocupan el mismo ancho.

Háblame ;)
¿Necesitas ayuda?
Hola! Necesitas ayuda? hablemos por WhatsApp :)