Para mejorar el aspecto y la funcionalidad de tu sitio web, una herramienta útil, versátil, online y gratuita es Google Fonts
Te explico.
A modo de resumen, se trata de una biblioteca de fuentes gratuitas y de código abierto que ofrece más de 1000 opciones tipográficas para tus proyectos web. Desde ella puedes elegir la fuente que mejor se adapte a tu estilo y personalidad o a la necesidad de tu web o empresa y aplicarla fácilmente a tu página con solo unas líneas de código. Además, Google Fonts te ofrece una serie de ventajas que te harán la vida más fácil como diseñador o desarrollador web que te voy a resumir en dos puntos (el creativo y el técnico).
(https://www.awwwards.com/las-20-mejores-tipografias-de-google-fonts.html)
Creatividad, diseño de calidad, gratuito y revisado por tipógrafos profesionales.
Desde su página web nos encontramos como primer punto con la calidad de las fuentes que ofrece, creadas y revisadas por expertos en tipografía, que cumplen con unos estándares de calidad y accesibilidad excelentes.
Con un alto nivel de legibilidad, consistencia y compatibilidad con diferentes dispositivos y navegadores y una variedad gráfica y estilística envidiable a otras opciones (como a la biblioteca de Adobe Fonts, por ejemplo…). Entre toda la variedad de estilos, encontramos desde los más clásicos y elegantes hasta tipografías contemporáneas, creativas y en tendencia. Puedes encontrar fuentes para todo tipo de proyectos, desde textos informativos hasta para diseño puro de identidad y marca, carteles o cositas sencillas como invitaciones. Además, muchas de las fuentes de Google Fonts tienen diferentes pesos, estilos y variantes, lo que te permite personalizar aún más tu diseño de forma sencilla.
Así con Google Fonts han surgido herramientas online que facilitan la vida de los diseñadores, que ofrecen representaciones visuales de como poder combinar toda la biblioteca de fuentes disponibles para jugar con su compatibilidad visual, como por ejemplo la que nos ofrecen desarrolladores desde sus páginas para ver representaciones como Fontpair* , Fontjoy** o Brandmark desde su apartado Font Generator***.
Al final del artículo te resumo cada una de estas páginas, para que vayas a sabiendas.
Otro punto a favor es su compatibilidad con servicios de terceros. (Si, aquí se mezclan el punto de creatividad con el de funcionalidad, pero ahora entenderás que es el puente que unirá el siguiente apartado).
Por ejemplo, puedes usar el plugin de Google Fonts para WordPress, que te permite cambiar la fuente de tu sitio web desde el panel de administración, sin necesidad de tocar el código o la integración con otras herramientas: Google Fonts se integra perfectamente con otras herramientas de diseño y desarrollo web, como Adobe Photoshop, Adobe Illustrator, Figma, Sketch, Canva, etc. Así, puedes usar la misma fuente en tus diseños y en tu sitio web, y mantener la coherencia visual y la identidad de tu marca. Además, Google Fonts también se integra con todo su universo de servicios, entre ellos por ejemplo Google Docs, Google Slides o Google Sheets, lo que te permite crear documentos, presentaciones y hojas de cálculo con la fuente que quieras.
(fonts.google.com)
Función o cómo Google ha conseguido facilitar la vida a desarrolladores web con Google Fonts.
El rendimiento de las fuentes y las facilidades que el gigante de Mountain View da a los desarrolladores es arrolladora.
Se cargan rápidamente en tu sitio web, gracias a que se alojan en los servidores de Google (no hay mucho más de añadir), con lo que nos aseguramos que estas, a la hora de implementarlas en nuestro sitio web, gocen de la máxima velocidad y compatibilidad. Aparte, nos aseguramos de que la tipografía cumple con los estándares necesarios y exigibles en términos de seguridad en línea, y así evitar cualquier tipo de problema, falla o hueco que nos ponga en peligro tanto a la web como al servidor donde acabemos alojando la misma.
La facilidad de uso que proporciona a desarrolladores es envidiable, ya que solo tienes que seguir unos sencillos pasos para integrarlas en tu sitio web. Por ejemplo, viajas en el extenso mundo de tipografías que Google Fonts te ofrece y en algún momento haces “match” y empieza la diversión. Pues entre toda la amalgama has de elegir la variante tipográfica, el idioma necesario (o idiomas) y cuales gruesos quieras (además sin límite, punto a favor). Pues a continuación copias el código que te proporciona Google Fonts y lo pegas en el archivo HTML o CSS de tu sitio web o proyecto. Así de simple, y esto que solo estamos hablando de integración en código frontend.
Otra de las ventajas es que Google Fonts es compatible con todos los navegadores y dispositivos existentes y actualizados (y si no, poco tardan en compatibilizar sus servicios), ya que usa formatos de fuentes universales, como WOFF, WOFF2 y EOT. Esto significa que no tienes que preocuparte por la compatibilidad de las fuentes, ya que se verán igual en todos los navegadores, dispositivos y pantallas, sin importar el sistema operativo o la resolución de la pantalla desde la que se visualice. Además, Google Fonts también ofrece fuentes con soporte para múltiples idiomas, incluyendo alfabetos no latinos, como el árabe, el chino, el hebreo, el japonés, el coreano, etc.
Como punto extra y importante, las fuentes de Google Fonts se optimizan para reducir el tamaño de los archivos y el consumo de datos, lo que mejora el rendimiento de tu sitio web y la experiencia de los usuarios. Esto a los desarrolladores web les gustará y sabemos que este punto es corto, pero es muy importante matizarlo.
Como ves, Google Fonts es una herramienta imprescindible para el diseño y el desarrollo web, ya que te ofrece una gran variedad de fuentes gratuitas y de calidad, que puedes usar y personalizar fácilmente, y que mejoran el rendimiento y la compatibilidad de tu sitio web.
Si quieres saber más sobre Google Fonts, puedes visitar su página web, donde encontrarás toda la información y los recursos que necesites. También puedes consultar el blog de Google Fonts, donde encontrarás las últimas novedades, consejos y tutoriales sobre Google Fonts, además este mismo se actualiza periódicamente e incluso puedes ir al FAQ para resolver otras dudas que no hayamos comentado en este post.
Las páginas que comentamos:
*Fontpair: desde fontpair.co encontramos el sitio web que te ayuda a encontrar y combinar fuentes para tus proyectos de diseño. Te ofrece visualizar las fuentes gratuitas y combinaciones de fuentes que provienen de Google Fonts, por lo que las puedes usar para trabajos de clientes. Fontpair.co también te permite editar el texto y el tamaño de las fuentes, bloquear las que te gusten y filtrar las combinaciones por categorías como serif, sans-serif, cursiva y más. Es una herramienta muy práctica para los diseñadores que quieren crear cualquier aplicación sea física o online y visualizar cómo se complementan entre sí.
**Fontjoy: fontjoy.com es el sitio web que te ayuda a elegir y visualizar tipografías para tus proyectos de diseño. Puedes generar combinaciones de fuentes con un solo clic, usando la inteligencia artificial para encontrar las mejores opciones. También puedes ajustar el grado de similitud o contraste entre las fuentes, bloquear las que te gusten y editar el texto para ver cómo queda. Es una herramienta muy útil para los diseñadores que quieren crear diseños web, logos, carteles, presentaciones y más con la amalgama de fuentes que ofrece Google Fonts.
***Brandmark: brandmark.io/font-generator/ es una herramienta web que te ayuda a generar combinaciones de fuentes para tus proyectos de diseño. Puedes elegir entre todas las fuentes del gran servicio de Google y ver cómo quedan en diferentes contextos y opciones al ver una representación de las mismas funcionando en una simulación de una página web o entrada de un post. También puedes obtener el código CSS para usar las fuentes en tu sitio web. Es una forma fácil y rápida de encontrar las fuentes perfectas para tu diseño.
Web y bibliografía:
Google.es
fonts.google.com
fontjoy.com
brandmark.io/font-generator/
fontpair.co
developers.google.com
Estudios curriculares CFGS Gráfica Interactiva
domestika.org/es/blog/980-fontjoy-una-web-para-combinar-tipografias
cevagraf.coop/blog/font-pair-emparejar-fuentes/
thetypefac.es/combinaciones-tipograficas/
awwwards.com/las-20-mejores-tipografias-de-google-fonts.html
erraticgenerator.com/blog/use-google-fonts-for-machine-learning-part1/
