Share
En este artículo, analizaremos algunos de los servicios de fuentes web más populares, compararemos las características entre ellos y hablaremos sobre algunas de las señales de alerta relacionadas con el trabajo con fuentes reales en la web..
Somos un grupo afortunado, somos diseñadores web del presente. Los diseñadores web de antaño han luchado durante mucho tiempo con una selección frustrantemente pequeña de fuentes: las fuentes de sistema seguras para la web que fueron probadas y probadas para el uso de la pantalla. Tú sabes sus nombres. Georgia, Times New Roman, Arial, Verdana: casi todos envían un ligero estremecimiento por nuestras espinas.
Pero ya no más. ¡La fuente web está aquí! CSS3 ha traído fuentes web reales a nuestro cinturón de utilidades, con el poder de @ font-face. Pero con esta nueva tecnología viene una responsabilidad abrumadora: el dolor de cabeza que conlleva la licencia de fuentes para su uso en la web. Cada vez más fundiciones están suministrando fuentes con licencia para uso en línea, pero luego alojar las fuentes usted mismo y garantizar que la compatibilidad entre dispositivos y navegadores puede ser otro mundo de dolor por sí solo..
Ahí es donde entran en juego los servicios de fuentes web. Manejan la mayor parte del trabajo de licencias y hospedaje, permitiéndole hacer lo que hace mejor: crear sitios web increíbles y hermosos..
Hablaré sobre tres de los servicios de fuentes web más populares aquí. A saber, Typekit
Fontdeck
y fuentes web de Google.
Todos estos servicios alojan sus fuentes en sus propios servidores y administran todas las tonterías de licencia que las acompañan, por lo que puede conectar y jugar sin preocupaciones..
No todos estos servicios utilizan la misma técnica para incrustar fuentes. Fontdeck y Google Web Fonts te permiten usar una etiqueta para capturar las fuentes directamente para usarlas en tu sitio, mientras que Typekit tiene un enfoque diferente. Typekit requiere que incluyas un fragmento de JavaScript en tu sitio que te permita obtener los recursos necesarios para tu ejecución..
Usar una etiqueta tiene un par de beneficios obvios. Por un lado, este método no requiere que el usuario tenga habilitado JavaScript. Además, la secuencia de comandos que genera el código de Typekit dará como resultado al menos 2 solicitudes http adicionales: una para otra secuencia de comandos y una segunda para el archivo CSS capturado por dicha secuencia de comandos. Esto es algo que Fontdeck y Google no tienen que sufrir.
Sin embargo, Typekit tiene una ventaja significativa al usar un script en lugar de CSS antiguo: el wf- * clases.
Accentsconagua
wf- * clasesCuando su sitio solicita fuentes de los servidores de Typekit a través de su código JavaScript, ocurre algo maravilloso: el script agregará clases al elemento html de su sitio, dependiendo del estado de la solicitud de fuentes..
Las clases son wf-cargando, wf-activo, y wf-inactivo. ¿Qué significa esto para nosotros? Bueno, estas clases pueden ayudarnos a prevenir FOUT: el destello del texto sin estilo que aparece mientras se cargan nuestras fuentes web. Al aplicar el estilo adecuado a nuestras páginas cuando se cargan las fuentes, podemos evitar el efecto discordante que FOUT puede tener para nuestro usuario. Consulte esta página para ver un ejemplo: mientras se cargan las fuentes, se aplica una clase de wf-loading a la etiqueta html.
Usando CSS, podemos ocultar todo el contenido y mostrar una animación de carga para dejarle claro al usuario que algo está sucediendo. Una vez que las fuentes hayan terminado de cargarse, podemos volver a mostrar gradualmente nuestro contenido. Google Web Fonts también le permite utilizar un script si desea aprovechar estas clases. De hecho, el script detrás de estas clases fue un esfuerzo de colaboración entre Google y Typekit.
Cada uno de estos servicios adopta un modelo de precios diferente. Google Web Fonts es completamente gratuito. Incluso puede descargar las fuentes para uso local en sus computadoras, lo cual es excelente si está tratando de crear una marca consistente con tipografía..
Typekit tiene diferentes niveles de precios, que van desde un plan gratuito hasta $ 99 por año. El plan gratuito tiene un número limitado de fuentes, permitido solo en un sitio web, y requiere que muestres un distintivo Typekit en tu sitio web. Todos los planes pagados le permiten eliminar esta credencial y le permiten crear más sitios web y usar más fuentes cuanto más pague. Para más información sobre sus planes de precios, visite su sitio web..
Fontdeck adopta un método de fijación de precios diferente. Se cobran por fuente, con fuentes (en el momento de la escritura) que varían en precio desde $ 2.50 al año, pero generalmente cuestan alrededor de $ 7.50 al año.
Una de las principales preocupaciones al usar fuentes web es cómo aparecen en la gran variedad de dispositivos, navegadores y plataformas. Desafortunadamente, no hay forma de garantizar que nuestros sitios web se vean exactamente iguales en un dispositivo que en otro, pero sabemos que está bien. Aún así, podríamos hacerlo con cierta seguridad sobre qué tan bien se mostrarán las fuentes.
Afortunadamente, nuestros servicios de fuentes web saben que esto es un gran problema. Todos proporcionan capturas de pantalla de cómo se representa la fuente en todos los navegadores populares, incluidos IE6 y versiones posteriores, Google Chrome, Safari, Firefox y Opera. En general, las fuentes web se procesan bien en todos los casos. Algunas caras más claras pueden aparecer irregulares en Windows, pero eso se debe al motor de renderizado de fuentes de Windows, no hay mucho que podamos hacer allí.
Una cosa a tener en cuenta al usar fuentes web en sus sitios es la propiedad de representación de texto CSS. Esta propiedad le permite emplear características de OpenType, como ligaduras y kerning, pero a un alto costo. En los navegadores WebKit en distribuciones de Linux y en Chrome en Windows con algunas fuentes, el uso de esta propiedad puede ocasionar algunos efectos secundarios extraños al tratar con elementos de texto en línea.
Con esto en mente, es probablemente una buena idea mantenerse alejado de esta propiedad (actualmente experimental). Además, en el lado positivo, Firefox no solo implementa la propiedad correctamente, sino que también tiene las ligaduras y el kerning habilitados de forma predeterminada..
Por lo tanto, conocemos los diferentes servicios y las diferencias entre cómo funcionan, así como algunas de las señales de advertencia relacionadas con el uso de fuentes web en nuestros sitios, pero ¿cómo empezamos a usarlos??
Una herramienta particularmente útil para ensuciarse las manos con las fuentes web es Typecast.
Typecast le ofrece una forma de probar todas las fuentes web disponibles de todos estos servicios en un entorno web real, donde también puede agregar CSS personalizado, definir anchos para los elementos: todo el kit y el caboodle. El CSS que Typecast produce para su uso en su propio sitio es menos que deseable: los tamaños de fuente, la altura de las líneas y los márgenes establecidos en píxeles, no en ems. Pero sigue siendo una herramienta increíblemente útil para ver cómo se verán estas fuentes en la web real..
Si se encuentra sin inspiración para utilizar las fuentes web, el blog Typekit siempre está repleto de sitios inspiradores, así como también algunas ideas fascinantes sobre la tecnología que se encuentra detrás de las fuentes web. También hay sitios web como las Ferias del Mundo Perdido, Just My Type (de verdad) y Good Web Fonts, donde puedes ver el verdadero poder y la belleza de las fuentes reales en la web. El sitio web de Elliot Jay Stocks es siempre un sitio web verdaderamente inspirador que también muestra fuentes web. (Podrías decirlo, me encantan estas cosas).
Cuando se trata de usar los servicios, no podrían ser más simples. Google Web Fonts es simplemente plug and play: busque la fuente que le guste, haga clic en 'uso rápido' y luego seleccione las fuentes y variaciones que necesita. Obtendrá un enlace que puede usar en su sitio web o en su archivo CSS a través de @import, o un fragmento de JavaScript que puede usar para aprovechar las clases "wf- *".
Fontdeck le permite probar la fuente en algunas computadoras antes de comprarla para un uso generalizado en su sitio web. Simplemente seleccione la fuente que le guste y le darán un enlace que puede usar en los sitios web. Pruébelo en algunas computadoras agregando sus direcciones IP al sitio en Fontdeck, luego, una vez que esté satisfecho, simplemente compre la fuente para uso ilimitado.
Typekit tiene un plan gratuito que le permite usar una biblioteca bastante extensa de fuentes de forma gratuita, con la condición de que muestre una insignia en su sitio que anuncie el hecho de que está usando Typekit. En realidad, no es un mal distintivo, pero si quieres que desaparezca, tendrás que pagar un plan.
El plan de la Cartera es increíblemente extenso, con pocas limitaciones, y su precio es de $ 49.99 por año, o si tiene Adobe Creative Cloud, puede incluir el plan de la Cartera. Para usar Typekit en su sitio, simplemente cree un "kit" - una colección de fuentes para usar en los dominios que especifique. Copie el fragmento de código de JavaScript en sus sitios web, agregue algunas fuentes al kit, seleccione los pesos y las variaciones que necesita, luego recuerde presionar 'publicar kit'. A veces, los servidores de Typekit pueden tardar un tiempo en reflejar los cambios, por lo tanto, tómelos unos minutos antes de actualizar su sitio..
Desde julio de 2012, Typekit ha ofrecido una mejor incrustación de JavaScript..
Este nuevo método de incrustación aumenta el rendimiento, ofrece URL relativas al protocolo y carga asíncrona opcional (oficial). La carga asíncrona permite que las fuentes se inserten en una página, sin bloquear la cola para otros activos en caso de que surjan problemas.
Con un poco de suerte, ahora está armado con suficiente información sobre los servicios de fuentes web para sumergirse y tomar su propia decisión. ¿Cuál de estos sistemas y características prefieres? ¿Tienes experiencia con alguno de los servicios? ¿Consejos y punteros que te gustaría compartir? Háganos saber en los comentarios.!
