¿Cuáles son las fuentes que puedo usar en una página web?

Cuando nos adentramos por primera vez en el diseño de páginas web, nos topamos con una gran cantidad de condicionamientos técnicos. Entre ellos, podemos encontrar el empleo de las fuentes tipográficas.

Para aquellos que vienen de otras disciplinas del diseño, este tema les puede resultar algo incómodo, pero es importante que lo entiendan cuento antes y sepan con qué opciones cuentan antes de hacer su prototipo web.

El principal problema es que no todas las fuentes las podemos usar en una web, y no se trata sólo de una cuestión de legibilidad -ese es otro tema-, sino de rendimiento, condiciones técnicas y legales. 

Vamos a separar en dos los aspectos que afectan a la utilización de fuentes en el diseño y desarrollo web:

Rendimiento

Todos los ingredientes que utilizamos para desarrollar una web suponen peso añadido. Pasa con todo, cuantas más imágenes, efectos gráficos y recursos utilicemos, la carga de la página se hace leeeeenta.

Una web con poco peso es más óptima, y no sólo a los usuarios le va a parecer que funciona mucho mejor, sino que a Google también le va a gustar más (y esto es esencial para cualquier site). Además, es más respetuosa con el medio ambiente al consumir menos.

Todo esto nos supone limitar la cantidad de familias y/o estilos que debemos aplicar desde la fase de prototipado. Es decir, que lo ideal sería usar un par de fuentes con un estilo cada una, contrastando con serifa y sin serifa. O también sería una buena opción utilizar una misma fuente con un par de estilos, contrastando grosores como light y bold.

Hay que estirar la variedad jugando con otros recursos que no implican carga adicional, como el uso de mayúsculas, de minúsculas o del tracking. Podemos encontrar algunas ideas de combinación de fuentes en fontpair. La extensión de Chrome What the Fonts también nos puede ser de gran ayuda, pues con esta herramienta podemos averiguar qué fuentes están usando otras páginas webs.

Variedad

No todas las fuentes que tenemos en nuestro ordenador podemos usarlas para una web. Esto se debe a que una página web se interpreta en el navegador del usuario, lo que en la práctica se traduce en que para que sea visible para el usuario tendremos o bien que utilizar aquellas fuentes que por lo general tienen instaladas todos los sistemas (y que, por tanto, van a cargar en el navegador de la mayoría de ordenadores) o bien tendremos nosotros que proporcionar las fuentes al proyecto, a esa página web, vía desarrollo.

Veamos entonces qué opciones tenemos:

Fuentes del sistema

Las fuentes del sistema, para agilizar la carga de la página, es la mejor opción. Cuando las aplicamos, el ordenador de cada usuario será el que proporcione la fuente. Como son del sistema deben verse prácticamente igual en más de un 90% de los casos; pero tampoco hay seguridad total: cuando se aplica la fuente desde CSS, se pone la elegida como primera opción; en caso de que no encontrase esa fuente en el sistema, se señala una segunda parecida si la hubiese, y para terminar, si el sistema siguiera sin encontrar ninguna de las opciones planteadas, se le indica que debe buscar una sustituta con serifa o sin ella.

Por ejemplo, si queremos emplear un aspecto de sin serifa utilizando Arial sería algo así:

font-family: Arial, Helvetica, sans-serif;

En el caso de querer una tipo con serifa podríamos usar, por ejemplo, una Georgia:

font-family: Georgia, serif;

Incluso, contamos en el sistema con algunas fuentes monoespaciadas:

font-family: 'Courier New', Courier, monospace;

Pero usar sólo fuentes del sistema nos deja muy poca variedad, por lo que es normal combinarlo con alguna fuente más personalizada.

Google Fonts

Google es una de las empresas que más ha hecho por los diseñadores web, lanzó Google Fonts en 2010 con muy poquitas familias, y en la actualidad cuenta con más de mil… y sigue aumentando.

Su uso para un desarrollador es muy sencillo: eliges la fuente, sus estilos, y simplemente aplicas el código HTML y CSS que te proporciona la página. Además, para la fase de prototipado podemos descargarnos la familia completa y así probar todas sus combinaciones antes de decantarnos por una combinación en concreto.

Estas fuentes suelen cargar muy rápido, y no sólo por los servidores de Google, porque muchas de ellas ya se encuentran en el caché del navegador al ser muy utilizadas en Internet. Si nos preguntamos cuáles son las más utilizadas, encontraremos un ranking actualizado por el propio Analytics de Google.

De todas formas, como señalábamos anteriormente, si usamos muchas fuentes y estilos distintos la página irá más lenta. Una recomendación sería emplear una fuente personalizada para los títulos más visibles, e intentar que los párrafos y otros encabezados menos importantes vayan con fuentes del sistema.

Licencias

Aunque la opción más recomendada para usar fuentes personalizadas es Google Fonts, puede que ya tengamos una fuente pensada para nuestro proyecto que no se encuentre entre las opciones a elegir, o que el proyecto venga condicionado por un manual de marca que incluya una tipografía específica.

En ese caso tenemos que atender a la licencia de uso de la fuente. Estas licencias pueden variar: algunas son gratuitas si no son para uso comercial, otras pueden pedir que se acredite, y también nos podemos encontrar con otras condiciones de uso. Otras fuentes directamente son de pago.

Las licencias de fuentes de pago suelen estar relacionadas con el uso que se vaya a hacer de ellas: cuantas más aplicaciones hagan uso de la fuente, más aumenta el precio de la licencia. Se podría decir que alquilamos su utilización.

En el ejemplo de la imagen de abajo se pagaría por el uso en web de un solo estilo de Helvética. Además, aumentaría su precio según las visitas. Esta opción no tiene sentido para proyectos freelance o de poca envergadura.

Para este tipo de proyectos, de corto alcance o de presupuesto limitado, existen alternativas como Fontshare, donde encontraremos licencias gratuitas para web.

En ambos casos, de pago o gratis, se nos proporcionan el archivo .woff de la fuente, que tendremos que aplicar a nuestro proyecto usando la regla CSS @font-face.

@font-face {
  font-family: <un-nombre-de-fuente-remota>;
  src: <origen> [,<origen>]*;
  [font-weight: <peso>];
  [font-style: <estilo>];
}

Conclusiones

Lo más importante que debemos tener en cuenta a la hora de hacer la propuesta gráfica de nuestra web es asegurarnos que las fuentes que utilicemos se van a poder implementar en el desarrollo. Además, debemos minimizar la cantidad de estilos y familias para mejorar el rendimiento.

Mi recomendación personal es que, para la mayoría de proyectos, os fijéis principalmente en las opciones de Google Fonts, porque combinan comodidad con un excelente rendimiento, y además son de libre uso.

1 comentario en “¿Cuáles son las fuentes que puedo usar en una página web?”

Dinos lo que piensas

Tu email no se mostrará ;)