7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. Typography

Servicios de fuentes web: lo bueno, lo malo y lo feo

Scroll to top
Read Time: 9 mins

Spanish (Español) translation by Esther (you can also view the original English article)

En este artículo echaremos un vistazo a algunos de los servicios de fuentes web más populares, comparando las características entre ellos y hablando de algunas de las banderas rojas que implica trabajar con fuentes reales en la web.

Somos un grupo afortunado, nosotros los diseñadores web del presente. Los diseñadores web de antaño han luchado durante mucho tiempo con una frustrantemente pequeña selección de fuentes, las fuentes de sistemas seguros para la web que fueron probadas para el uso en pantalla. Sabes sus nombres. Georgia, Times New Roman, Arial, Verdana... casi todos ellos nos hacen temblar un poco.

Pero ya no. ¡La fuente de la 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 es la licencia de fuentes para su uso en la web. Cada vez más fundiciones suministran fuentes con licencia para su uso en línea, pero alojar las fuentes usted mismo y asegurar la compatibilidad entre dispositivos y navegadores puede ser otro mundo de dolor por sí mismo.

Ahí es donde entran los servicios de fuentes web. Manejan la mayor parte del trabajo de licenciamiento y hospedaje, dejándote hacer lo que mejor sabes hacer: construir sitios web increíbles y hermosos.


La tecnología

Hablaré de tres de los servicios de fuentes web más populares aquí. A saber, Typekit

Fontdeck

y las fuentes web de Google.

Todos estos servicios alojan tus fuentes en sus propios servidores y gestionan todas las tonterías de licencia que van con ellas, para que puedas conectarte y jugar sin preocupaciones.

Estos servicios no usan todos la misma técnica para incrustar fuentes. Tanto Fontdeck como Google Web Fonts te permiten usar una etiqueta para coger las fuentes directamente para usarlas en tu sitio, mientras que Typekit tiene un enfoque diferente. El kit de mecanografía requiere que incluya un fragmento de JavaScript en tu sitio, el cual toma los recursos necesarios para ti al momento de la ejecución.

Usar una etiqueta tiene un par de beneficios obvios. Por un lado, este método no requiere que el usuario tenga activado el JavaScript. Además, el script que el código de Typekit genera resultará en al menos 2 peticiones http adicionales, una para otro script, y una segunda para el archivo CSS capturado por dicho script. Esto es algo que Fontdeck y Google no tienen que sufrir.

Sin embargo, Typekit tiene una ventaja significativa al utilizar un script en lugar de las viejas clases de CSS, las clases wf-*.

Oda a las clases de wf-*.

Cuando tu sitio solicita fuentes de los servidores de Typekit a través de su código JavaScript, sucede algo ligeramente maravilloso: el script agregará clases al elemento html de tu sitio, dependiendo del estado de la solicitud de fuentes.

Las clases son wf-loading, wf-activo y wf-inactive. ¿Qué significa esto para nosotros? Bueno, estas clases pueden ayudarnos a prevenir FOUT, el destello de texto sin estilo que aparece cuando nuestras fuentes web se están cargando. Al estilizar nuestras páginas apropiadamente cuando se cargan las fuentes, podemos prevenir el efecto de sacudida que FOUT puede tener para nuestro usuario. Mira esta página para un ejemplo, mientras las fuentes se están cargando, una clase de wf-loading se aplica a la etiqueta html.

Usando CSS, podemos ocultar todo el contenido y mostrar una animación de carga para dejar claro al usuario que algo está pasando. Una vez que las fuentes han terminado de cargarse, podemos gradualmente desvanecer nuestro contenido de nuevo a la vista. Las fuentes web de Google también te permiten usar un script si quieres aprovechar las ventajas de estas clases. De hecho, el script que se encuentra detrás de estas clases fue un esfuerzo de colaboración entre Google y Typekit.


Los costos

Cada uno de estos servicios adopta un modelo de precios diferente. Las fuentes web de Google son completamente gratuitas. Incluso puedes descargar las fuentes para uso local en tus ordenadores, lo que es genial si intentas crear una marca consistente con la tipografía.

Typekit tiene varios niveles de precios diferentes, que van desde un plan gratuito hasta 99 dólares al año. El plan gratuito tiene un número limitado de fuentes, permitidas en un solo sitio web, y requiere que muestre una insignia de Typekit en tu sitio web. Todos los planes pagados te permiten quitar esta insignia, y te permiten usar crear más sitios web y usar más fuentes cuanto más pagues. Para obtener más información sobre sus planes de precios, consulte su sitio web.

Fontdeck adopta un método de precios diferente. Cobran por cada fuente, y las fuentes (en el momento de escribirlas) tienen un precio que va desde los 2,50 dólares al año, pero normalmente cuestan alrededor de 7,50 dólares al año.


Lo feo

Una de las principales preocupaciones cuando se utilizan fuentes web es cómo aparecen en la gran variedad de dispositivos, navegadores y plataformas. Desafortunadamente, no hay forma de asegurar que nuestros sitios web se vean exactamente igual en un dispositivo que en otro, aunque sabemos que eso está bien. Aún así, podríamos asegurarnos de lo bien que se renderizarán las fuentes.

Por suerte, nuestros servicios de fuentes web saben que esto es algo importante. Todos ellos proporcionan capturas de pantalla de cómo la fuente se renderiza en todos los navegadores populares, incluyendo IE6 y superiores, Google Chrome, Safari, Firefox y Opera. En términos generales, las fuentes web se prestan bien en todos los casos. Algunas caras ligeras pueden parecer dentadas en Windows, pero eso es solo gracias al motor de renderizado de fuentes de Windows, no hay mucho que podamos hacer allí.

Cortesía de Tipo de representación en la web de Typekit

Una cosa que hay que tener en cuenta cuando se usan fuentes web en tus sitios es la propiedad de renderizado de texto CSS. Esta propiedad te permite emplear características OpenType como ligaduras y bordados, pero a un gran coste. En los navegadores WebKit en distribuciones Linux, y en Chrome en Windows con algunas fuentes, el uso de esta propiedad puede resultar en algunos efectos secundarios extraños cuando se trata de elementos de texto en línea.

Con esto en mente, es probablemente una buena idea mantenerse alejado de esta propiedad (actualmente experimental). Además, por el lado bueno, Firefox no solo implementa la propiedad correctamente, sino que también tiene activadas las ligaduras y el bordado permitidas por defecto.


Usando los servicios

Por lo tanto, sabemos acerca de los diferentes servicios y las diferencias entre cómo funcionan, así como algunas de las banderas rojas involucradas en el uso de fuentes web en nuestros sitios, pero ¿cómo empezamos a usarlas realmente?

Una herramienta particularmente útil para ensuciarse las manos con las fuentes web es Typecast.

Typecast proporciona una forma de probar todas las fuentes web disponibles de todos estos servicios en un entorno web real, donde también se puede añadir CSS personalizado, definir anchos para los elementos, todo el kit y el caboodle. El CSS que Typecast produce para su uso en tu propio sitio es menos que deseable, tamaños de fuente, alturas de línea y márgenes establecidos en píxeles, no ems. Pero sigue siendo una herramienta increíblemente útil para ver cómo se verán estas fuentes en la web real.

Si te falta inspiración sobre cómo usar las fuentes web, el blog Typekit siempre está repleto de sitios inspiradores, así como de algunas ideas fascinantes sobre la tecnología que hay detrás de las fuentes web. También hay sitios web como las Lost World's Fairs, Just My Type (de tu servidor) y Good Web Fonts donde se puede 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. (Se podría decir que me encantan estas cosas.)

Cuando se trata de usar realmente los servicios, no podrían ser más sencillos. Las fuentes web de Google son muy sencillas: busca una fuente que te guste, has clic en "uso rápido" y selecciona las fuentes y las variaciones que necesites. Obtendrás un enlace que puedes usar en tu sitio web o en tu archivo CSS a través de @import, o un fragmento de javascript que puedes usar para aprovechar las clases "wf-*".

Fontdeck te permite probar la fuente en unos pocos ordenadores antes de comprarla para tu uso generalizado en tu sitio web. Simplemente selecciona la fuente que te guste, y te darán un enlace que puedes usar en los sitios web. Pruébalo en algunos ordenadores añadiendo sus direcciones IP al sitio de Fontdeck, y una vez que estés contento con él, simplemente compra la fuente para un uso ilimitado.

Typekit tiene un plan gratuito que te permite utilizar una biblioteca bastante extensa de fuentes de forma gratuita, con la condición de que muestres una insignia en tu sitio que anuncie el hecho de que estás usando Typekit. En realidad no es una pequeña insignia de mal aspecto, pero si quiere que desaparezca, tendrás que pagar por un plan.

El plan Portafolio es increíblemente extenso, con pocas limitaciones, y tiene un precio razonable de $49.99 por año, o si tienes Adobe Creative Cloud, obtienes el plan Portafolio incluido. Para utilizar Typekit en tu sitio, solo tienes que crear un "kit", una colección de fuentes para utilizar en los dominios que especifiques. Copia el fragmento de javascript en tus sitios web, añade algunas fuentes al kit, selecciona los pesos y las variaciones que necesites, y recuerda pulsar "publicar kit". A veces los servidores de Typekit pueden tardar un poco en reflejar los cambios, así que dale unos minutos antes de refrescar tu sitio.

Desde julio de 2012 los Typekit ofrecen una mejor incrustación de JavaScript.

Este nuevo método de incrustación aumenta el rendimiento, ofrece URLs relativas al protocolo y carga asíncrona opcional (oficial). La carga asíncrona permite que las fuentes se introduzcan en una página, sin bloquear la cola de otros activos en caso de que surjan problemas.


Conclusión

Con un poco de suerte, ya tienes suficiente información sobre los servicios de fuentes web como para sumergirte y tomar una decisión. ¿Cuál de estos sistemas y características prefieres? ¿Tienes experiencia con alguno de los servicios? ¿Consejos e indicaciones que te gustaría compartir? ¡Hazlo saber en los comentarios!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.