Tipografía responsiva: elige la fuente más adecuada para tu web

Si estás buscando una fuente para tu página web responsiva, seguramente encontrarás cientos de familias tipográficas en Internet. Teniendo en cuenta que el diseño web está compuesto aproximadamente en un 95% de tipografía, hemos creado una serie con los fundamentos necesarios sobre tipografía responsiva. Mientras que la última parte de esta serie se centra en la implementación técnica de la tipografía en el diseño responsivo con CSS, en esta segunda parte te indicamos dónde obtener fuentes web gratuitas y la mejor manera de aplicarlas.

Fuentes web gratis para tu web responsiva

Las familias tipográficas son una parte fundamental del diseño responsivo, pues están basadas en gráficos vectoriales escalables. Cuando se carga una página web, un servidor se encarga de descargar las fuentes para que estas puedan ser convertidas y visualizadas correctamente en el navegador web del usuario. La tipografía responsiva, por su parte, se adapta automáticamente a los requerimientos específicos de cada navegador para una mejor visualización.

Varias plataformas de Internet ofrecen fuentes web que pueden ser descargadas, tanto de pago como gratuitas. Dentro de los proveedores de pago más reconocidos están Typekit o Fontspring, que cuentan con una amplia gama de fuentes conocidas y, entre ellas, varias clásicas. Igualmente, es posible decidirse por alguna de las ofrecidas por los proveedores gratuitos, como son: Google Fonts, Adobe Edge Web Fonts, Font Squirrel o DaFont. Sin embargo, no todas las fuentes disponibles son las más apropiadas para la mayoría de los proyectos. Algunas son demasiado informales o poco comunes y, por lo tanto, solo son recomendables para propósitos muy específicos y otros no tienen caracteres especiales como la eñe, las tildes o la diéresis. Además, el tamaño de los caracteres varía normalmente entre una fuente y otra. Es importante prestar atención a este tipo de fuentes y asegurarse de adoptar la que incluya los caracteres necesarios. Como ejemplo te presentamos algunas de las Google Fonts más prácticas y versátiles dentro del diseño web responsivo.

Las tipografías online de Google Fonts

La plataforma Google Fonts es utilizada por muchos diseñadores web como fuente de tipografía web responsiva. Desde su lanzamiento en 2010, esta web ha tenido como objetivo poner a disposición de los usuarios fuentes web de código abierto (en total, más de 700) para ser utilizadas con fines personales o comerciales. Así, todas las fuentes pueden ser descargadas y su código puede ser implementado en cualquier página web.

Open Sans

“Open Sans”, con su clásica y simple apariencia, es una fuente sans serif muy popular. Fue diseñada por Steve Matteson y está optimizada para impresión, para páginas web y para dispositivos móviles.

Lato

“Lato” es otra fuente muy popular sin serifa. Fue desarrollada por Łukasz Dziedzic con el apoyo de Google.

Roboto

“Roboto” fue utilizada por primera vez como fuente para el sistema operativo Android y ha sido desarrollada continuamente desde entonces. Es también una fuente web sans serif y está compuesta por letras relativamente finas, lo que permite utilizar una mayor cantidad de caracteres por línea, a diferencia de fuentes más gruesas.

Source Serif Pro

“Source Serif Pro” fue diseñada por la compañía de software Adobe Systems. Esta tipografía con serifa puede ser utilizada como complemento para la fuente sin serifa “Source Sans Pro” y la de monoespaciado “Source Code Pro”, ambas ofrecidas por Adobe de forma gratuita.

Playfair Display

Si quieres usar una fuente elegante con serifas, la fuente web “Playfair Display” es una buena opción. Además, es posible elegir entre seis estilos diferentes.

Integrar tipografías online desde Google Fonts

Muchas fuentes web se encuentran en las bases de datos de múltiples proveedores. Por ejemplo, las familias tipográficas mencionadas anteriormente se encuentran tanto en Google Fonts, como en Adobe Edge Web Fonts y Font Squirrel. A continuación, presentamos cómo insertar la fuente “Open Sans” desde Google Fonts.

  • Introduce “Open Sans” en el campo de búsqueda y haz clic en el botón con la flecha “Quick-use”.
  • A continuación, aparecerán los diferentes estilos de fuente, entre los cuales deberás elegir tu o tus favoritos. Aquí también puedes especificar si deseas utilizar, además, caracteres no latinos.
  • Adicionalmente, se mostrará un código para el <head> de tu página web, así como uno para el documento CSS.
  • Para integrar “Open Sans” en HTML, se añade <head> en el respectivo código (que también contiene un enlace a Google Fonts). La implementación se verá así:
>!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Cómo insertar Google Fonts en mi página web</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
  </head>
  <body>
  </body>
</html>
  • El siguiente código define la fuente para CSS:
body {
font-family: 'Open Sans', sans-serif;
font-size: 100%
}

Como ves, la inserción de fuentes desde el servicio de Google Fonts es muy sencilla. Además de esta variante, también es posible utilizar la regla @import en CSS así como JavaScript.

Opciones para lograr una web con tipografía responsiva

Existe una amplia gama de familias tipográficas para páginas web responsivas. Como diseñador web es posible conseguir fuentes web de código abierto en plataformas como Google Fonts, Adobe Edge Web Fonts y Font Squirrel, por mencionar algunas. Sin embargo, también es importante tener en cuenta que fuentes como “Open Sans”, “Roboto” o “Lato” son muy populares y, por lo tanto, son usadas muy a menudo en Internet. Como consecuencia, quien quiera tener una fuente única o personalizada, deberá invertir cierta cantidad de dinero. Una opción más económica es la de conseguir una tipografía de código abierto e individualizarla, proceso que seguramente tomará algo de tiempo, pero no implicará ningún gasto. Por otra parte, la integración de una tipografía online en la propia página web responsiva es sencilla y rápida, características que tendrán un impacto positivo en la experiencia de usuario de los visitantes de tu web.