Ti­po­gra­fía re­s­po­n­si­va: elige la fuente más adecuada para tu web

Si estás buscando una fuente para tu página web re­s­po­n­si­va, se­gu­ra­me­n­te en­co­n­tra­rás cientos de familias ti­po­grá­fi­cas en Internet. Teniendo en cuenta que el diseño web está compuesto apro­xi­ma­da­me­n­te en un 95% de ti­po­gra­fía, hemos creado una serie con los fu­n­da­me­n­tos ne­ce­sa­rios sobre ti­po­gra­fía re­s­po­n­si­va. Mientras que la última parte de esta serie se centra en la im­ple­me­n­ta­ción técnica de la ti­po­gra­fía en el diseño re­s­po­n­si­vo con CSS, en esta segunda parte te indicamos dónde obtener fuentes web gratuitas y la mejor manera de apli­car­las.

Las familias ti­po­grá­fi­cas son una parte fu­n­da­me­n­tal del diseño re­s­po­n­si­vo, pues están basadas en gráficos ve­c­to­ria­les es­ca­la­bles. Cuando se carga una página web, un servidor se encarga de descargar las fuentes para que estas puedan ser co­n­ve­r­ti­das y vi­sua­li­za­das co­rre­c­ta­me­n­te en el navegador web del usuario. La ti­po­gra­fía re­s­po­n­si­va, por su parte, se adapta au­to­má­ti­ca­me­n­te a los re­que­ri­mie­n­tos es­pe­cí­fi­cos de cada navegador para una mejor vi­sua­li­za­ción. Varias pla­ta­fo­r­mas de Internet ofrecen fuentes web que pueden ser de­s­ca­r­ga­das, tanto de pago como gratuitas. Dentro de los pro­vee­do­res de pago más re­co­no­ci­dos están Typekit o Fo­nts­pri­ng, que cuentan con una amplia gama de fuentes conocidas y, entre ellas, varias clásicas. Igua­l­me­n­te, es posible decidirse por alguna de las ofrecidas por los pro­vee­do­res gratuitos, como son: Google Fonts, Adobe Edge Web Fonts, Font Squirrel o DaFont. Sin embargo, no todas las fuentes di­s­po­ni­bles son las más apro­pia­das para la mayoría de los proyectos. Algunas son demasiado in­fo­r­ma­les o poco comunes y, por lo tanto, solo son re­co­me­n­da­bles para pro­pó­si­tos muy es­pe­cí­fi­cos y otros no tienen ca­ra­c­te­res es­pe­cia­les como la eñe, las tildes o la diéresis. Además, el tamaño de los ca­ra­c­te­res varía no­r­ma­l­me­n­te entre una fuente y otra. Es im­po­r­ta­n­te prestar atención a este tipo de fuentes y ase­gu­rar­se de adoptar la que incluya los ca­ra­c­te­res ne­ce­sa­rios. Como ejemplo te pre­se­n­ta­mos algunas de las Google Fonts más prácticas y ve­r­sá­ti­les dentro del diseño web re­s­po­n­si­vo.

La pla­ta­fo­r­ma Google Fonts es utilizada por muchos di­se­ña­do­res web como fuente de ti­po­gra­fía web re­s­po­n­si­va. Desde su la­n­za­mie­n­to en 2010, esta web ha tenido como objetivo poner a di­s­po­si­ción de los usuarios fuentes web de código abierto (en total, más de 700) para ser uti­li­za­das con fines pe­r­so­na­les o co­me­r­cia­les. Así, todas las fuentes pueden ser de­s­ca­r­ga­das y su código puede ser im­ple­me­n­ta­do en cualquier página web.

Existe una amplia gama de familias ti­po­grá­fi­cas para páginas web re­s­po­n­si­vas. Como diseñador web es posible conseguir fuentes web de código abierto en pla­ta­fo­r­mas como Google Fonts, Adobe Edge Web Fonts y Font Squirrel, por mencionar algunas. Sin embargo, también es im­po­r­ta­n­te 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 co­n­se­cue­n­cia, quien quiera tener una fuente única o pe­r­so­na­li­za­da, deberá invertir cierta cantidad de dinero. Una opción más económica es la de conseguir una ti­po­gra­fía de código abierto e in­di­vi­dua­li­zar­la, proceso que se­gu­ra­me­n­te tomará algo de tiempo, pero no implicará ningún gasto. Por otra parte, la in­te­gra­ción de una ti­po­gra­fía online en la propia página web re­s­po­n­si­va es sencilla y rápida, ca­ra­c­te­rí­s­ti­cas que tendrán un impacto positivo en la ex­pe­rie­n­cia de usuario de los vi­si­ta­n­tes de tu web.