Fuentes web de H&FJ una guía de campo

Desde que Hoefler y Frere-Jones anunciaron su incursión en el mundo de las fuentes web, Internet ha estado desbordando la alegría de los diseñadores y tipógrafos de todo el mundo. Finalmente, una de las fundiciones de tipos más populares del mercado ha lanzado su tan esperado competidor a los servicios de fuentes web de los últimos tiempos.!


Ya puede ver el nuevo servicio en uso en sitios como Rdio, el sitio web de Jessica Hische y CSS-Tricks. Pero, ¿qué significa esta nueva oferta para ti y para mí? Bueno, tanto los diseñadores como los desarrolladores tienen mucho que esperar en el servicio. Miremos más de cerca.


Una breve historia de tipo

Primero refrescemos nuestras mentes con una breve lección sobre la evolución del tipo en la web. En los días de CSS 2, (OK, entonces no ese muy atrás) nuestra selección para tipografías compatibles con la web fue algo limitada. Pudimos utilizar una pequeña selección de fuentes compatibles con la web que seguramente estaban en (casi) todos los dispositivos en los que se veía la página (Verdana, Arial, Georgia y Times New Roman) o seleccionamos una fuente, como Helvetica eso sería "mejor visto" en plataformas específicas. No es ideal. Y luego estaban las técnicas de reemplazo de imágenes, donde creamos imágenes del texto con la fuente que teníamos a nuestra disposición y reemplazamos las cadenas de texto utilizando CSS. Finalmente, estaba Sifr; Una técnica que utiliza Adobe Flash para reemplazar texto. Ambas técnicas de reemplazo eran inaccesibles, un dolor para implementar y una experiencia desagradable en todas las plataformas.

Poco sabíamos, una especificación para real Las fuentes web estaban en marcha: @ font-face. Aquellos de ustedes que estén familiarizados con @ font-face sabrán que no es la cosa más fácil de implementar en el mundo, por lo que recurrimos a los servicios de fuentes web de alta calidad como Google Web Fonts, Typekit y Fontdeck para que hagan el trabajo duro por nosotros. Estos servicios, junto con el nuevo servicio de H&F, manejan el alojamiento, las licencias y las optimizaciones de las fuentes web. Sin embargo, cada servicio no es sin compromiso; todos estos servicios carecen de un control preciso sobre las fuentes que recibimos. Cosas como ligaduras, pequeñas mayúsculas y otras características de OpenType son a menudo difíciles de implementar sin afectar seriamente el rendimiento de las fuentes.

Esta es la mejor parte. H&FJ ha creado un servicio de fuentes web para tipógrafos y desarrolladores por igual..


Precios

Vamos a sacar la parte difícil del camino. El servicio cloud.typography de H&FJ comienza en $ 99 por año. Ese precio te compra 250,000 páginas vistas cada mes. Por $ 50 más, obtienes 1 millón de visitas a la página, y por $ 299, obtienes el doble de eso..


Cada uno de estos planes también le ofrece cinco familias de fuentes gratuitas, una ganga si considera que estas familias de fuentes de alta calidad cuestan solo $ 200, así como todas sus compras anteriores de la fundición, dominios ilimitados, hasta diez proyectos. ”, Entrega SSL, y 1gb de ancho de banda de desarrollo. Hay planes más grandes disponibles, así como proyectos adicionales..


Ofertas de fuentes

La biblioteca de H&FJ es pequeña en comparación con Typekit, pero elevan el nivel de calidad. La fundición ofrece más de treinta familias, diez de las cuales han sido completamente rediseñadas, rediseñadas y optimizadas para su uso en dispositivos web y de pantalla. Un número considerable de estas familias tienen conjuntos extendidos, que incluyen variantes condensadas y expandidas, pesos desde ultra livianos a ultra negros, mayúsculas, ligaduras, swashes y juegos de caracteres internacionales. Básicamente, obtienes algunas fuentes de alta calidad..

Las primeras cinco familias que elija son completamente gratuitas, y después de eso, las familias tienen un precio individual. Todas las licencias de escritorio también vienen con una licencia de uso web, por lo que puede traer tipos de letra H&FJ adquiridos anteriormente, así como obtener una gran cantidad de licencias de escritorio y web para una marca unificada. Quizás el tipo de letra más emocionante disponible es Gotham, considerado por muchos como el antepasado más refinado de Proxima Nova..

Hay algunas diferencias sutiles entre Gotham y Proxima Nova; a saber, el espaciado y ancho de letras más generosos de Gotham, y la cursiva alternativa "a" de Proxima Nova.

ScreenSmart

Un aspecto importante de las fuentes web es cómo se desempeñan en los dispositivos de pantalla. Se necesita mucha optimización para asegurarse de que las fuentes, en particular las diseñadas originalmente para uso de impresión, tengan un buen rendimiento en las pantallas. H&FJ ha hecho todo lo posible por optimizar algunas de sus tipografías, a menudo rediseñando completamente familias y personajes para asegurarse de que se vean sobresalientes en la pantalla y en la web..

Sentinel (arriba) y Sentinel Screensmart (abajo) ambos a 18px. La altura más alta de x y las letras más anchas en la versión screensmart lo hacen ideal para tamaños más pequeños y copias de cuerpo..

El proceso de optimización se ha puesto "ScreenSmart" por la fundición. Desde su página web:

Las fuentes ScreenSmart están diseñadas para texto web. Concebido desde el principio como familias de fuentes para la pantalla, están diseñados para las propiedades naturales de los píxeles y están diseñados para ofrecer resultados precisos en todo el mundo..

Eso está subestimando su trabajo. La fundición rediseñó sus fuentes. en el navegador, utilizando un conjunto de herramientas basadas en Webkit. Todos los pesos nuevos fueron diseñados específicamente para el uso en pantalla, y cada fuente está optimizada en una variedad de navegadores y plataformas para una legibilidad "de píxel perfecto".


Actuación

Teniendo en cuenta la calidad, y en consecuencia, el tamaño del archivo, de las fuentes, esto es rápido. Cloud.typography utiliza un agente de entrega para manejar las solicitudes de sus fuentes web, detectando los requisitos del navegador y entregando solo las fuentes necesarias para ese navegador. También almacena en caché todos los archivos solicitados, distribuyéndolos a través de un CDN global, lo que significa que la entrega de estos archivos siempre es muy rápida.


El agente de entrega funciona de manera diferente según el estado de su proyecto y sus fuentes. En el modo de desarrollo, los archivos de fuentes se alojan en los servidores de H&F y se distribuyen desde el CDN. Para cada uno de sus proyectos, obtiene 1 GB de ancho de banda de desarrollo por mes; un subsidio bastante sustancial. Cuando cambie al modo de producción, le informará a H&FJ dónde se ubicarán las fuentes en su propio servidor, descargue un archivo zip de gran tamaño y lo pegue en su servidor. Después de eso, no hay necesidad de cambiar el enlace CSS o hacer nada más; el archivo CSS apunta a las fuentes en su propio servidor, pero la red de entrega sigue haciendo un gran esfuerzo para determinar qué fuentes son necesarias, lo que ahorra a su usuario un tiempo de espera muy serio.


Después de cambiar al modo de producción, el único límite es la asignación de vista de página para su plan.

Otra cosa a tener en cuenta sobre el rendimiento de Cloud.typography es el hecho de que no utiliza un cargador de JavaScript como Typekit y Google Web Fonts. Un cargador de JavaScript tiene algunas ventajas obvias cuando se trata de ajustarse dinámicamente a las necesidades del navegador, pero también tiene algunos costos; solicitudes HTTP adicionales, algunos rastreadores de navegador de bajo nivel y un retraso adicional mientras el script agrega el CSS al documento.

Una cosa que realmente me interesó actuó como una mejora de rendimiento bastante sutil. Cuando echa un vistazo a las reglas de CSS para agregar las fuentes a su sitio, Cloud.typography no especifica una, sino que dos nombres de fuentes Por ejemplo, la regla CSS de Hoefler Text se ve así:

familia de fuentes: "Hoefler Text A", "Hoefler Text B";

Al solicitar dos archivos de fuentes, las fuentes se pueden descargar simultáneamente (aunque este no es el caso en todos los navegadores). En teoría, es más rápido descargar dos archivos de 200 kb simultáneamente que descargar un solo archivo de 400 kb. Tanto la fuente A como la B contienen la mitad de los juegos de caracteres, por lo que los caracteres que faltan en el archivo A retroceden y usan el archivo B. Inteligente o qué?

La intención real de dividir archivos de esta manera (dice Reed Reeder de H&FJ) es "evitar el mal uso ocasional de las fuentes", pero no deja de ser interesante.

Dicho todo esto, los archivos de fuentes pueden volverse bastante grandes rápidamente. Las fuentes se agregan a su proyecto por peso / estilo, con cada peso o estilo con un promedio de alrededor de 40kb. Esto significa que si desea una sola familia de fuentes en pesos regulares y en negrita, con cursiva y mayúsculas para cada una de ellas, puede esperar un tamaño total de 320 kb..


Controlar

Cloud.typography ofrece un nivel de control altamente competitivo sobre las fuentes que selecciona. Estas opciones indican claramente un servicio de fuentes web no solo para diseñadores y desarrolladores, sino también para tipógrafos. De forma predeterminada, cualquier familia de fuentes que agregue a un proyecto obtiene los tipos de letra normal, cursiva, negrita y negrita cursiva, con puntuación y kerning estándar.

Aquí es donde se pone interesante (o en el límite obsesivo). Una vez que agregue una familia de fuentes a su proyecto, también puede agregar todos los demás pesos disponibles (hasta nueve) y estilos, mayúsculas, ligaduras contextuales y discrecionales, swashes, diferentes estilos de números, conjuntos de caracteres y puntuación extendidos y signos matemáticos..


No solo eso, sino que también puede definir conjuntos de caracteres personalizados. Por ejemplo, si solo usa un cierto tipo de letra para el logotipo de su sitio, puede decirle a Cloud.typography que solo proporcione los caracteres necesarios, ahorrando algunas descargas serias para los usuarios.

Vale la pena recordar que cada una de las características tipográficas adicionales que agregue agregará más peso a las fuentes, y que el soporte del navegador puede ser un poco irregular, especialmente en el IE antiguo..


Terminando

Con suerte, puede ver que H&FJ ha ido más allá, ofreciendo un control de grano fino sin paralelo sobre las fuentes que elija para sus sitios. Si bien el tamaño de los archivos seguirá aumentando, este nivel de control tiene a los diseñadores de todo el mundo (el suyo realmente incluido) increíblemente emocionado. En todo caso, el lanzamiento de Cloud.typography podría iniciar una evolución en los otros servicios de fuentes web disponibles en la actualidad. ¡Solo podemos esperar y ver! No olvides aprender más sobre el nuevo servicio directamente desde la boca del caballo..