100 puntos a saber sobre...
Desarrollo de una web de diseño eco

En este módulo, descubriremos los distintos tipos de fuente que se pueden utilizar para el diseño de un proyecto web y cómo pueden influir en la sostenibilidad de un sitio web.

Tres tipos de fuente:

Fuentes del sistema
Son fuentes que vienen instaladas por defecto en todo tipo de dispositivos (Mac o PC). Las más conocidas son las fuentes Arial y Times New Roman.

Fuentes web
A diferencia de las anteriores, las fuentes web tienen la particularidad de estar alojadas en línea, por lo que ofrecen una mayor variedad de fuentes.

Fuentes web personalizadas (DIY)
Este tipo de fuentes ofrece a los diseñadores la posibilidad de crear sus propias fuentes web. Al igual que las anteriores, también están alojadas en línea.

El tipo de fuente afecta al rendimiento de la web y a su impacto medioambiental principalmente a través de su tamaño. En la próxima lección veremos en detalle cómo están relacionados.

Como las fuentes web ofrecen una gran paleta para el diseñador, echemos un vistazo a los conjuntos más populares de estas fuentes.

Las opciones de fuentes web más populares

Adobe Typekit
Las fuentes Typekit no son gratuitas. La suscripción varía entre 25 €/año para una cuenta personal y entre 40 € y 400 €/mes para cuentas profesionales.
El diseñador web tiene acceso a una gran variedad de fuentes con un tamaño de descarga de 11Kb. Tienen la ventaja de incidir menos en el peso de la página que las Google Fonts.

Google Fonts
Los más o menos 600 caracteres de las Google Fonts están a disposición de los usuarios de forma gratuita. Además, su tamaño de descarga es de unos 28Kb. Al crear tu sitio web, si eliges una fuente del catálogo de Google, sólo se descargará una vez en las páginas almacenadas en caché. De este modo, Google se asegura de que las fuentes se muestren rápidamente.

Fuentes web personalizadas (DIY)
Las fuentes DIY no son gratuitas. Ten en cuenta que la versión no optimizada tiene un tamaño de descarga elevado, de 30,5 KB. En cuanto a la versión optimizada, el tamaño del archivo es menor y requiere menos peticiones HTTP.
Para optimizar el rendimiento de las fuentes DIY se recomienda:

• Reducir el tamaño de descarga de la fuente elegida y así hacerla más ligera. Se recomienda utilizar un servicio como Font Squirrel.
• Cargar las fuentes web sólo en navegadores de ordenadores y no de teléfonos móviles.