La tipografía de sitios web solía ser una práctica de diseño más desconcertante que en la actualidad. El complicado proceso de decorar una página web con fuentes personalizadas alguna vez requirió convertir e incrustar archivos de fuentes para alojarlos en el servidor del usuario, y la elección de las fuentes disponibles se limitó a la propia colección del usuario o al conocimiento de la tipografía fuera de las fuentes estándar del sistema.

Como resultado, la mayoría de los sitios web parecían casi idénticos en el formato de su contenido, que se basaba en muchas fuentes seguras para la web mundanas y usadas en exceso .

Todo eso cambió en 2010 con el lanzamiento de Google Fonts , un proyecto de código abierto que permite una implementación mucho más fácil de fuentes personalizadas en sitios web.

La instalación de estas fuentes en su propio sitio web es, afortunadamente, un proceso rápido y fácil, pero debe tener en cuenta que no todas las combinaciones de fuentes en la biblioteca de Google son una receta para el éxito tipográfico.

Sin embargo, con las combinaciones de fuentes adecuadas y las consideraciones de uso, su marca en línea puede irradiar profesionalismo, belleza y facilidad de lectura sin la necesidad de costosas fuentes personalizadas. En este artículo, te mostraré cómo lograr todo esto.

 

diseño web grafico avila

1. Open Sans Condensed + Open Sans

Aquí hay una combinación fácil que funciona de maravilla para casi cualquier uso aplicable. Open Sans es una de las fuentes más versátiles de toda la colección de fuentes de Google, si no la más . Es extremadamente fácil de leer en grandes bloques de texto, sin dejar de ser lo suficientemente llamativo para los titulares.

Sencillo. Sofisticado. Familiar. ¡No te puedes equivocar!

No puedo prever ningún escenario en el que Open Sans sea ​​una mala elección. A menos que esté buscando específicamente una fuente serif, creo que esta servirá perfectamente para la mayoría de las empresas, blogs, páginas de destino o aplicaciones web.

 

diseño web grafico madrid

2. Oswald + EB Garamond

Oswald es una gran fuente para titulares sin importar el peso de la fuente o el uso de mayúsculas. Su naturaleza condensada lo ayuda a captar la atención y resaltar, pero también lo convierte en un texto agradablemente único como fuente principal del cuerpo.

EB Garamond es una elegante actualización de la fuente clásica de Garamond. Instantáneamente reconocible y de apariencia atemporal, esta fuente irradia una profesionalidad distintiva en su tipografía.

Esta combinación funciona bien para los profesionales que tratan con clientes de alto nivel, como abogados, agencias inmobiliarias o incluso boutiques exclusivas. La versatilidad de Oswald y el aspecto clásico de EB Garamond lo convierten en un excelente texto de descripción de producto donde es importante enfatizar un artículo de primera calidad.

 

diseño web avila

3. Montserrat + Merriweather

Montserrat es una de las favoritas entre los diseñadores por su versatilidad y simplicidad, y Merriweather combina maravillosamente con su estilo contrastante y su fácil legibilidad. Siéntase libre de intercambiarlos como titulares o como texto de párrafo; ¡ambos funcionan muy bien!

Esta combinación particular es un buen equilibrio de diseño moderno y clásico. Como tal, su variedad de usos podría respaldar muchos tipos de negocios. Personalmente, creo que estas fuentes funcionarían bien para cualquier tipo de fuente de noticias en línea o agencia editorial.

 

diseño web madrid

4. Roboto Thin + Roboto Regular

Extremadamente versátil con una amplia gama de pesos de fuente, prácticamente no hay limitación para el uso de la fuente. Moderno y geométrico, pero de alguna manera amigable y confiable, Roboto es una maravilla de forma y función.

Aquí hay otra combinación para la que sería difícil encontrar un mal uso. Si bien Roboto funciona para casi cualquier cosa, creo que es particularmente bueno para las nuevas empresas tecnológicas, las pequeñas empresas modernas o cualquier tipo de marca con miras al futuro.

 

diseño web escorial

5. Losa Raleway + Roboto

¡Es nuestro amigo Roboto de nuevo! Esta vez, sin embargo, estamos viendo la variación serif, Roboto Slab . Es una fuente que es tan versátil como su prima, pero un poco más clásica en estilo. Cuando se combina con el distintivo y audaz Raleway , tenemos una combinación increíble de tipografía limpia y refinada.

Raleway es una de esas fuentes que grita sofisticación. Cuando se usa como un título en mayúsculas, creo que funciona muy bien para artículos de lujo como joyas, ropa de diseñador o productos de comercio electrónico de lujo similar. Roboto Slab lo apoya bien con un texto descriptivo simple y accesible.

Ambos también funcionan indistintamente. Pruebe diferentes variaciones de peso para ambas fuentes en los titulares y el texto del cuerpo y vea qué combinación captura mejor su marca.

 

diseño web galapagar

6. Playfair Display + Source Sans Pro

Según su diseñador, Playfair Display se inspiró en las formas de las letras de la 18 ª siglo durante la transición de púas a plumas con punta de acero. No es de extrañar entonces que esta fuente irradie el encanto del viejo mundo pero con un toque moderno.

Source Sans Pro empuja las cosas un poco más hacia el futuro, creando una combinación intrigante que es ornamentada sin dejar de ser utilitaria.

Playfair Display agrega un toque personal a algo como un lema o descripción de producto. Si tiene la oportunidad de usar su símbolo comercial o de moneda, verá de inmediato por qué es la elección perfecta para un producto o servicio centrado en el lujo y las apariencias. Source Sans Pro mantiene el texto basado en una presentación moderna y limpia.

 

diseño web grafico

7. Fjalla One + Noto Sans

Puede que Fjalla One no sea la tipografía más versátil, pero una cosa que hace muy bien es crear titulares que exigen atención. Pequeñas o grandes, en minúsculas o en mayúsculas, esas letras son hipnóticas sin importar lo que hagas con ellas.

Noto Sans tiene como objetivo ser una fuente verdaderamente universal donde, sin importar el idioma, se pueda mostrar sin errores de formato para usuarios de todo el mundo. Apropiadamente, la estética de la fuente es tan versátil como su utilidad.

Los blogs o las páginas de destino serían excelentes para esta combinación, o cualquier cosa con textos largos que requieran subtítulos visibles para dividir el contenido. La adaptabilidad universal de Noto Sans también lo convierte en una buena opción donde llegar a una audiencia internacional es una prioridad.

 

diseño web grafico madrid

8. Alegreya + Lato
Alegreya tiene un cierto atractivo que me parece muy “terrenal” y amistoso. No hay ninguna pretensión sobre su personalidad; lo que ves, es lo que tienes.

Lato podría darle a Open Sans una carrera por su dinero como el campeón de las fuentes para todo uso en la biblioteca de Google.

Juntos forman una combinación divertida, fácil de leer y pragmática.

 

diseño web collado villalba

9. PT Sans Narrow + PT Sans

Otra versión moderna del estilo del Viejo Mundo, PT Sans y sus hermanos, PT Sans Narrow , hacen una declaración inmediata e inconfundible cuando se combinan.

Cualquiera de las fuentes funciona igual de bien como título o cuerpo de texto; el emparejamiento particular que elija dependerá de la naturaleza de sus palabras, aunque tiendo a preferir PT Sans Narrow en ráfagas más cortas.

Concebido como una “herramienta muy importante para las comunicaciones digitales modernas”, parece más adecuado, aunque ciertamente no se limita a, utilizar estas fuentes para nuevas empresas tecnológicas, aplicaciones de software u otros negocios digitales.

 

diseño web grafico

10. Amatic SC + Josefin Sans

Bien, este definitivamente es más alegre. Obviamente, esta combinación no funcionará para todos, pero la naturaleza caprichosa de Amatic SC y Josefin Sans crea algo que seguramente se destacará, ¡siempre y cuando tenga cuidado!

Si eres un artista, actor , músico o animador de espíritu divertido, esta fuente podría ser esencial para capturar tu personalidad única. Dependiendo del tono general y el tema, esta combinación también podría funcionar para un blog de nicho.

Un consejo: no utilice Amatic SC como texto principal. Volverás locos a tus lectores.

Volver a graficofajardo.es