El diseño web cumplió su mayoría de edad el día en que los webfonts ingresaron al uso generalizado. Antes de ese punto, es discutible que fuéramos menos diseñadores que ingenieros.
Sin embargo, el entusiasmo con el que hemos aprovechado las opciones de fuentes en el diseño web ha llevado a una desconcertante variedad de opciones; tanto es así que muchos diseñadores optan por el camino de menor resistencia, permitiendo que el deseo de una implementación simple dicte su tipografía.
Si sabes lo que estás buscando, todas las opciones son simples. En este artículo, le proporcionaremos los conocimientos que necesita para tomar decisiones informadas al elegir entre la tecnología de fuentes.
Vamos a ilustrar estas opciones centrándonos en la mejor manera de ofrecer un tipo de letra clásico de todos los tiempos, Garamond.
Después de exaltar las virtudes de los webfonts, la primera opción que consideraremos no utiliza webfonts en absoluto. El apilamiento de fuentes es una técnica CSS en la que se especifican una serie de retrocesos comenzando con su primera opción y terminando con una solución general.
Hay muchos recursos de apilamiento de fuentes en línea, pero uno de mis favoritos es cssfontstack.com, es un gran punto de partida para una pila de fuentes, pero ten en cuenta que la mayoría de las veces necesitarás aportar algo de experiencia.
De acuerdo con cssfontstack.com, Garamond está disponible como fuente de sistema en 49.91% de los Mac y 86.47% de los equipos de Windows. Eso es bastante bueno, pero no lo suficientemente bueno. Aquí está la pila de fuentes sugeridas que cubre todas las bases:
font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;La pregunta es, ¿cómo podemos mejorar esto?
Bueno, sabemos que hay numerosas versiones de Garamond disponibles, por lo que podemos agregar una variación en el segundo espacio como un pequeño compromiso.
En segundo lugar, no estoy de acuerdo con que Baskerville o Times sean sustitutos adecuados de Garamond, así que vamos a soltarlos. Hoefler Text funciona bien en lugar de Garamond, por lo que puede quedarse. Necesitamos agregar serif como último recurso, pero como la mayoría de los sistemas usan Times como su serif predeterminado, vamos a ubicar a la muy superior Georgia para cualquiera que se esté escapando por las grietas.
Nuestra pila final de fuentes modificadas se ve así:
font-family: Garamond, "Adobe Garamond Pro", "Hoefler Text", Georgia, serif;La mayoría de los espectadores van a ver a Garamond, algunos otros verán un compromiso razonable y una pequeña minoría obtendrá su fuente serif predeterminada.
El apilamiento de fuentes es gratuito, de lejos la solución más rápida, y dependiendo de la tipografía elegida puede ser muy efectiva; en el caso de Garamond hay un buen argumento para llamar a este 'trabajo hecho'.
Sin embargo, hay un problema importante con el apilamiento de fuentes, especialmente con un tipo de letra como Garamond: hay tantas versiones piratas en circulación que es imposible saber qué tipo de letra se llama "Garamond" en el sistema del usuario, no solo no podemos estar seguros el diseño es consistente con nuestras expectativas, la escala de la fuente puede ser radicalmente diferente de la versión de nuestro diseño. (Técnicamente, no hay nada que impida que una copia de Arial se renombre como "Garamond", en cuyo caso nuestra pila de fuentes usaría eso).
El apilamiento de fuentes es, por lo tanto, una excelente copia de seguridad, y se debe considerar su uso en conjunto con todas las soluciones a continuación, pero es menos que ideal como solución principal.
Google Fonts es, para muchos diseñadores, el punto en el que finalizan su búsqueda. Por un total de $ 0, puede cargar fácilmente los sitios web en su sitio usando CSS.
El único inconveniente es que la cantidad de tipos de letra que se ofrecen es extremadamente limitada. Los tipos de letra como Roboto y PT Sans deben su popularidad tanto a su disponibilidad gratuita en Google Fonts, como a sus cualidades de diseño.
Actualmente, la única variación de Garamond disponible en Google Fonts es EB Garamond, un intento de abrir la fuente del tipo de letra Garamond. Pero el defecto con esta versión es que solo hay un peso y un estilo disponibles; no hay negrita o cursiva. El diseñador Georg Duffner ha hecho generosamente disponible su trabajo en progreso en Bitbucket pero no está listo para producción.
Google Fonts es una excelente solución de presupuesto e ideal para situaciones en las que puede estar pagando la factura en lugar de su cliente. Ser capaz de especificar tus fuentes en CSS es tan simple como puede ser.
El gran defecto de Google Fonts es que a pesar de su comercialización, hay muy pocas opciones. Si estás buscando una fuente web de Open Sans, estás en el lugar correcto, pero si quieres una fuente como Garamond, que no es muy oscura, es un lavado de cara.
El autohospedaje es un enfoque muy poco apreciado para los webfonts. Su principal atractivo es la capacidad de subconjunto de fuentes, una opción tan atractiva que casi todos los servicios de transmisión intentan emularla.
Si tiene una copia de escritorio de Garamond en su sistema, ábrala y verá una cantidad desconcertante de caracteres. Subconjunto de una fuente es el proceso de eliminar caracteres no esenciales que resultan en un tamaño de archivo más pequeño y una entrega más rápida.
Por supuesto, los caracteres que requiera dependerán del sitio que esté construyendo: si está construyendo una guía turística de Dubrovnik probablemente necesite caracteres cirílicos serbios; Si está reproduciendo los trabajos recopilados de Shakespeare, es poco probable que necesite un símbolo @.
Para subconjunto de una fuente, necesitará un software de edición de fuentes. Hay muchas opciones disponibles de la libre FontForge a la prima FontLab Studio. Para producir una versión de subconjunto de la fuente, simplemente seleccione un glifo que no desea, y bórrelo, luego guarde el archivo en su carpeta de proyecto. (¡Tenga cuidado de no sobrescribir el archivo de fuente original!)
El archivo .ttf completo para Adobe Garamond Pro es 606 Kb. Reducirlo a los caracteres latinos básicos y la puntuación lo reduce a 56 Kb. Multiplique eso en varios pesos y estilos y ahorrará un par de Mb en descargas para sus usuarios.
La mayoría de los archivos de fuentes que ha instalado serán TrueType (.ttf) con un poco de OpenType (.otf). Puede guardarlos en su servidor y especificarlos en su CSS.
La compatibilidad con los formatos de archivo .ttf y .otf es generalizada en todos los navegadores modernos, excepto IE (incluso la última versión) y algunos navegadores móviles (incluidas las versiones heredadas de iOS Safari).
Para aumentar su cobertura, necesitará varios formatos adicionales. .eu funciona para IE, .woff funcionará para la mayoría de los navegadores y es el formato preferido del W3C, .svg funcionará en navegadores heredados. Hay una serie de servicios web que generarán estos formatos para usted desde su archivo .ttf, uno de los más populares. Font Squirrel's.
La desventaja de la conversión de fuentes de escritorio para su uso en línea es doble: en primer lugar, casi con certeza no tiene licencia para hacerlo; y en segundo lugar, las fuentes de escritorio casi siempre están optimizadas para imprimir, simplemente no se procesan bien en la pantalla.
Las fundiciones de fuentes finalmente se han despertado al hecho de que hay un gran mercado para webfonts. Como resultado, no solo han reforzado sus licencias, sino que también están trabajando para optimizar sus catálogos de respaldo para pantallas.
Las fundiciones que suministran webfonts dedicados proporcionan todos los formatos requeridos, con calidad comprobada y listos para cargar en su servidor. Además, aún puedes subconjuntar un archivo y no dependes del tiempo de actividad de un servidor externo.
Hay numerosos lugares donde puedes comprar webfonts, dos de los jugadores clave en el campo son FontShop.com y MyFonts.com .
Volviendo a nuestro dilema de Garamond, podemos ver que MyFonts tiene una serie de versiones diferentes de Garamond en oferta. Podemos licenciar Adobe Garamond en varios pesos, restringido a 250,000 páginas vistas, por alrededor de $ 180.
FontShop también tiene disponible una cantidad de versiones de WebFont de Garamond. URW Garamond Web proporciona todo el peso y el estilo que podamos desear, todos con una generosa cantidad de 500,000 visitas por mes. Además, FontShop tiene un dedicado subconjunto para optimizar tus compras de fuentes nuevas y brillantes Lamentablemente, usted paga una prima por todo esto, alrededor de $ 680 para la familia completa de fuentes.
El autohosting permite subconjuntos. Garantiza que tenga el control de la entrega de la fuente y evita cualquier tipo de dependencia de los servidores de terceros.
Además, si está comprando un webfont profesional, puede esperar que la calidad sea extremadamente alta.
El alojamiento autónomo también atrae a aquellos de nosotros que preferimos "poseer" nuestras fuentes en lugar de alquilarlas. Por supuesto, en términos legales hay muy poca propiedad en absoluto, pero una tarifa única se sienta más cómodamente que una suscripción para muchas personas.
El único inconveniente del autohospedaje es el precio sustancial. No solo tendrá que pagar por la fuente, sino que también deberá tener en cuenta los costos de hosting y ancho de banda en sus cifras.
Al igual que Google Fonts, los servicios de fuente web entregan fuentes a nuestros navegadores a través de CSS simple. A diferencia de Google Fonts, hay un gran rango para elegir.
Hay varios proveedores diferentes para elegir, y particularmente me gusta Hoefler & Frere-Jones. nube.tipografía Servicio. Sin embargo, como ocurre con muchos proveedores más pequeños, su utilidad depende totalmente de la disponibilidad del tipo de letra que está buscando. La fuente más cercana que Hoefler & Frere-Jones puede suministrar es Hoefler Text, sin embargo, si pagamos una prima no deberíamos comprometernos.
El jugador más grande en streaming de webfont es Adobe Typekit . La calidad de sus fuentes es muy alta, la implementación es simple, y lo más importante es que tienen un gran catálogo para elegir.
Typekit ofrece una gama de suscripciones que van desde $ 24.99 por año por 50,000 visitas por mes, hasta $ 99.99 por año por 1,000,000 visitas por mes. Sin embargo, si es miembro de Creative Cloud, el Plan de cartera está incluido en su suscripción; lo que significa que para la mayoría de los diseñadores web, Typekit es una solución gratuita.
Una búsqueda rápida nos dice que hay varias versiones de Garamond, que incluyen Propio de Adobe, disponible en Typekit. Y, también hay una función de subconjunto muy limitada que nos permite reducir un poco el tamaño del archivo.
Los servicios de transmisión de Webfont ofrecen una gran variedad de fuentes de excelente calidad, que son fáciles de agregar a su sitio.
En el caso de Typekit, si ya eres miembro de Creative Cloud, el acceso gratuito hace que esta sea una opción aún más atractiva. Sin embargo, si no es miembro, se enfrenta a una opción entre pagar una suscripción sustancial y vincularse a Adobe.
Mi preocupación principal con cualquier servicio de transmisión es que depende por completo del rendimiento de un servidor externo. Si su servidor falla, también lo hace una parte sustancial de su marca.
Al igual que con tantas cosas, la respuesta es: depende de su proyecto. Pero hay algunas decisiones que podemos tomar basadas en nuestra prueba de Garamond:
El apilamiento de fuentes es una copia de seguridad sin costo, proporciona una solución en la marca siempre y cuando desaparezcan los archivos de fuentes o los servicios de transmisión se ejecuten lentamente. Siempre debe implementarse en cualquier sitio, pero confiando en él, incluso para algo tan común como Garamond es potencialmente peligroso.
Si la fuente que está buscando está disponible para transmitir de forma gratuita, ya sea a través de Google Fonts o, por ejemplo, si tiene una suscripción a Creative Cloud, entonces esta es una buena opción. Como tengo una suscripción a Creative Cloud, me sentiría tentado por esta ruta, aunque la falta de subconjuntos reales sería una preocupación.
Si tiene el presupuesto, entonces auto-hosting de un webfont profesional es la mejor opción. El costo relativamente modesto, cuando se compara con la fotografía de archivo, se justifica fácilmente por la gran velocidad que proporciona el ajuste de subconjunto de velocidad.
En una industria en la que estamos minificando los archivos JavaScript para ahorrar unas pocas Kb, afeitar cientos de veces esa cantidad de un solo archivo es una obviedad.
Imagen / miniatura destacada, descargar imagen a través de Shutterstock.