Las mejores webfonts: por qué es tan im­po­r­ta­n­te la ti­po­gra­fía web

Para los di­se­ña­do­res web nunca ha sido tan fácil utilizar una ti­po­gra­fía atractiva en los proyectos web. Gracias a las modernas webfonts, estos pro­fe­sio­na­les no tienen que poner prá­c­ti­ca­me­n­te límites a su crea­ti­vi­dad. Con la co­m­bi­na­ción adecuada de ti­po­gra­fías, que formen parte de las web safe fonts, puedes generar en los lectores una buena impresión y reflejar el carácter de tu página. Descubre qué son las webfonts y las razones que explican la im­po­r­ta­n­cia de la la ti­po­gra­fía web.

Con el término webfont se hace re­fe­re­n­cia a la ti­po­gra­fía di­gi­ta­li­za­da que pueden in­te­r­pre­tar los na­ve­ga­do­res actuales. Estas fuentes están pensadas sobre todo para su uso en do­cu­me­n­tos HTML o XHTML, esto es, para su uso en la Web. Las webfonts se pueden vi­sua­li­zar in­de­pe­n­die­n­te­me­n­te del sistema operativo utilizado, pues cuando se accede a una página web no se cargan de forma local sino desde un servidor web externo. Para ello, basta con integrar las webfonts deseadas con la ayuda de la regla CSS @font-face y es­pe­ci­fi­car­las en la pila de fuentes.

Desde que en CSS2 se in­tro­du­je­ra @font-face, desde un punto de vista técnico es posible integrar cualquier tipo de fuente en una página web. En el pasado, los di­se­ña­do­res de páginas web solo disponían de una reducida selección de fuentes estándar, entre las que se en­co­n­tra­ban Arial o Times New Roman. En este contexto, se acuñó el término web safe fonts, que en un inicio servía para describir las fuentes estándar que permitían una pre­se­n­ta­ción web sin di­fi­cu­l­ta­des.

En la ac­tua­li­dad, el gran abanico de web safe fonts di­s­po­ni­ble permite a los di­se­ña­do­res cumplir con mayor facilidad con los re­qui­si­tos de diseño co­r­po­ra­ti­vo. Es por ello por lo que este tipo de fuentes son una de las bases para im­ple­me­n­tar es­tra­te­gias de marketing globales. Además, se co­n­s­ti­tu­yen como un elemento casi in­di­s­pe­n­sa­ble para la presencia web exitosa de una empresa.

En este cuadro resumen se muestra cla­ra­me­n­te la im­po­r­ta­n­cia de elegir el formato adecuado, si bien ninguno de los formatos garantiza al 100 % que las webfonts elegidas vayan a funcionar en el di­s­po­si­ti­vo el usuario. Por ejemplo, los di­s­po­si­ti­vos móviles con una versión antigua del navegador no son co­m­pa­ti­bles con el formato es­ta­n­da­ri­za­do WOFF (Web Open Font Format) y su sucesor, WOFF2.

Aún más co­m­pli­ca­do resulta trabajar con Internet Explorer. Las distintas versiones del navegador de Microsoft dan soporte pri­n­ci­pa­l­me­n­te al formato EOT (Embedded OpenType), que, por otra parte, no es co­m­pa­ti­ble con ningún otro navegador.

Los formatos TTF (TrueType Format) y OTF (OpenType Format) son los que ofrecen mayor co­m­pa­ti­bi­li­dad.

Ca­te­go­rías y áreas de apli­ca­ción de las webfonts

Una ti­po­gra­fía define al conjunto de ca­ra­c­te­res creados siguiendo el mismo concepto de diseño. Se habla de familia ti­po­grá­fi­ca cuando en una misma ti­po­gra­fía existen variantes que se di­fe­re­n­cian, por ejemplo, en la anchura las líneas o en el espaciado. Por ejemplo, las ti­po­gra­fías Segoe UI, Segoe Light y Segoe Semibold pe­r­te­ne­cen a la misma familia ti­po­grá­fi­ca.

Cada tipo de fuente para la web está indicado para un propósito diferente. Al elegir un tipo de letra se debe prestar atención a dos aspectos: la le­gi­bi­li­dad del texto y su impacto emocional, aunque el medio también juega un aspecto fu­n­da­me­n­tal. Por ejemplo, las fuentes con serifas o trazos de pie están pensadas para facilitar la lectura de textos pequeños en papel, lo que para la lectura en un monitor no suele ser pre­ci­sa­me­n­te la mejor opción.

Las ca­ra­c­te­rí­s­ti­cas pre­se­n­ta­das de las distintas webfonts son solo un breve resumen. En la práctica, utilizar una ti­po­gra­fía web im­pre­vi­s­ta es, a menudo, la mejor es­tra­te­gia para di­fe­re­n­ciar­se de la co­m­pe­te­n­cia. Así, para encontrar una webfont adecuada para tu web, es fu­n­da­me­n­tal:

• Co­n­si­de­rar el tema y el público objetivo: una co­m­bi­na­ción vi­sua­l­me­n­te atractiva de di­fe­re­n­tes tipos de fuente no sirve de nada si estas no son co­n­grue­n­tes con el tema de la página web. Lo más re­co­me­n­da­ble siempre es utilizar fuentes con y sin serifa. Las fuentes ma­nu­s­cri­tas so­r­pre­n­den y dan una impresión de mo­vi­mie­n­to.
• Centrarse en la fu­n­cio­na­li­dad (es­pe­cia­l­me­n­te para webs con una gran densidad textual): además de la le­gi­bi­li­dad, hay que tener en cuenta a aquellos usuarios que accederán a la web desde sus di­s­po­si­ti­vos móviles y que se­gu­ra­me­n­te ne­ce­si­ta­rán una fuente que no prolongue in­ne­ce­sa­ria­me­n­te los tiempos de carga.
• Limitar el número de web safe fonts uti­li­za­das: se ha co­m­pro­ba­do que utilizar dos ti­po­gra­fías di­fe­re­n­tes suele ser de gran ayuda. Una fuente para títulos y otras marcas ti­po­grá­fi­cas es­pe­cia­les y otra fuente para el cuerpo del texto.
• Buscar fuentes que logren un buen contraste: la in­ter­ac­ción entre fuentes con y sin serifa es un buen ejemplo de ello. Sin embargo, recuerda co­m­bi­nar­las de forma armoniosa: si las distintas ti­po­gra­fías web no coinciden en el estilo, se crea una tensión que no pasa des­ape­r­ci­bi­da a los lectores. Si los dos tipos de fuentes son muy similares, también se genera un impacto negativo en el lector.

Si en los inicios de Internet la di­fi­cu­l­tad residía en crear una página web de forma creativa a pesar de las escasas fuentes exi­s­te­n­tes, en la ac­tua­li­dad el desafío es otro: los di­se­ña­do­res web tienen que mantener la visión general del abanico de webfonts di­s­po­ni­bles para, fi­na­l­me­n­te, se­le­c­cio­nar una o varias fuentes que se adapten al proyecto que se está llevando a cabo.

Por ello, hemos re­co­pi­la­do a co­n­ti­nua­ción algunas de las mejores y más conocidas web safe fonts:

Arial, una ti­po­gra­fía sin serifa, es una de las fuentes estándar de los sistemas ope­ra­ti­vos de Microsoft desde Windows 3.1. Por ello, desde el principio se ha utilizado Arial como webfont tanto en títulos como en párrafos. Sin embargo, más re­cie­n­te­me­n­te, esta ti­po­gra­fía clásica se ha empezado a usar cada vez más como segunda opción.

Opciones de descarga:

• fo­nts­fo­r­web.com
• fontsfree.pro

Lo que Arial re­pre­se­n­ta en el sistema operativo Windows, lo fue Helvetica (también Neue Hass Grotesk) durante un largo periodo para los di­s­po­si­ti­vos de Apple. Las líneas y formas claras definen a esta ti­po­gra­fía sin serifa, que otras muchas empresas también han usado como estándar durante mucho tiempo. Con motivo del 50° ani­ve­r­sa­rio de Helvetica, el cineasta y artista Gary Hustwit le rindió homenaje a la ti­po­gra­fía en el do­cu­me­n­tal homónimo “Helvetica”.

Opciones de descarga:

• da­fo­n­t­free.io
• boldfonts.com

Palatino es una ti­po­gra­fía con serifa de estilo antiguo, conocida sobre todo por su uso en impresión. Sin embargo, como webfont ligera y abierta se presenta como una opción in­te­re­sa­n­te para textos de blogs y las revistas online. La fuente, que se publicó en 1948, debe su nombre al calígrafo italiano Gia­m­ba­t­ti­s­ta Palatino.

Opciones de descarga:

• da­fo­n­t­free.io
• da­fo­n­t­fa­mi­liy.com

La familia ti­po­grá­fi­ca Ba­s­ke­r­vi­lle tiene su origen en 1754 y se define como un tipo de letra de tra­n­si­ción. Su creador fue el tipógrafo inglés John Ba­s­ke­r­vi­lle. La co­m­bi­na­ción de fuertes co­n­tra­s­tes en el trazo, ejes de sombra ve­r­ti­ca­les y serifa marcadas en ho­ri­zo­n­tal fue co­n­si­de­ra­do un hito técnico que ya se imitó con fre­cue­n­cia durante la propia vida de Ba­s­ke­r­vi­lle.

Opciones de descarga:

• cu­fo­n­fo­nts.com
• cdnfonts.com

La ti­po­gra­fía sin serifa Century Gothic fue diseñada por Monotype Co­r­po­ra­tion en 1991. Pri­n­ci­pa­l­me­n­te se basa en la ti­po­gra­fía Twentieth Century (al­te­r­na­ti­va a Futura), pero a di­fe­re­n­cia de esta se ca­ra­c­te­ri­za (entre otras cosas) por un ancho de letra más homogéneo. Century Gothic se utiliza sobre todo como web safe font en títulos y su­b­tí­tu­los.

Opciones de descarga:

• fo­nts­fo­r­web.com
• free­fo­nts­fa­mi­ly.com

In­tro­du­ci­da en 2007 por Windows Vista, la ti­po­gra­fía para web Consolas está concebida para entornos de de­sa­rro­llo y si­tua­cio­nes en las que se necesite un tipo de letra mo­noe­s­pa­cia­da, es decir, una fuente con un ancho fijo en sus ca­ra­c­te­res. En los proyectos web, Consolas sirve para la pre­se­n­ta­ción de fra­g­me­n­tos de código.

Opciones de descarga:

• bestfonts.pro
• download-free-fonts.com

La familia ti­po­grá­fi­ca Garamond se usa desde el siglo XVI. Gracias a su excelente le­gi­bi­li­dad, esta ti­po­gra­fía con serifa se encuentra entre las fuentes más im­po­r­ta­n­tes y uti­li­za­das en imprenta. Como webfont, Garamond es una buena al­te­r­na­ti­va a la clásica Times New Roman, debido a sus bordes suaves y re­do­n­dea­dos.

Opciones de descarga:

• cu­fo­n­fo­nts.com
• fo­nts­fo­r­web.com

En 1994, Matthew Carter diseñó para Microsoft la ti­po­gra­fía de anchura variable Georgia. Desde un principio, el objetivo era conseguir que en las pantallas de ordenador la vi­sua­li­za­ción del texto fuese más clara y la le­gi­bi­li­dad, óptima. Con la creciente po­pu­la­ri­dad de blogs, la fuente se mudó 10 años después al mundo web.

Opciones de descarga:

• do­w­n­loa­d­fo­nts.io
• cu­fo­n­fo­nts.com