Comprender las fuentes web y aprovecharlas al máximo

Thierry Blancpain es diseñador de marca e interacción en Informal Inquiry en la ciudad de Nueva York y cofundador de Grilli Type, una fundición tipográfica suiza. Si bien este artículo se aplica generalmente a todas las fuentes web, las fuentes Grilli Type se utilizan en todo momento como ejemplos de los conceptos, particularmente aquellas que demuestran características OpenType.

Usar sus propias fuentes en lugar de las del sistema es cada vez más fácil, pero aún es un campo en evolución. En esta publicación repasaremos los diferentes tipos de formatos de fuente y cubriremos consejos y mejores prácticas para ellos. También profundizaremos en funciones más detalladas para aquellos de ustedes que quieran subir de nivel y aspirar a perfeccionar el oficio con conceptos y consideraciones avanzadas al usar fuentes web. Al final, es de esperar que se siente preparado no sólo para utilizar fuentes web, sino también para aprovecharlas al máximo.

¡Aquí vamos!

Formatos de fuente

Cuando compra una licencia de fuentes web, recibe un paquete de archivos de fuentes que normalmente incluyen al menos algunos de los siguientes formatos:

• Embedded OpenType (EOT): EOT es un formato heredado desarrollado por Microsoft. Las versiones anteriores de Internet Explorer requieren EOT para representar sus fuentes web. EOT a menudo se entrega sin comprimir, por lo que si no necesita compatibilidad con un navegador como IE8 o inferior, es mejor que lo omita.
• TrueType (TTF): TTF es un formato de fuente desarrollado por Microsoft y Apple en los años 1980. Los archivos TTF modernos también se denominan fuentes TrueType OpenType. TTF puede resultar útil para ampliar la compatibilidad con algunos navegadores antiguos, especialmente en dispositivos móviles, si lo necesita.
• Formato de fuente abierta web (WOFF): WOFF se desarrolló en 2009 como un formato contenedor para fuentes TrueType y OpenType. Comparte los archivos y es compatible con todos los navegadores modernos.
• Web Open Font Format 2 (WOFF2): WOFF2 es una actualización del formato WOFF original. Desarrollado por Google, este se considera el mejor formato del grupo porque ofrece tamaños de archivo más pequeños y mejor rendimiento para los navegadores modernos que lo admiten.

Si se dirige principalmente a usuarios con navegadores modernos, puede salirse con la suya con un método de uso progresivo @font-faceque solo sirve para los formatos WOFF y WOFF2 . Estos ofrecen la mejor compresión y le permiten manejar menos archivos en su código. Y si la máquina de un usuario es tan antigua que no admite ninguno de estos formatos, de todos modos puede ser mejor simplemente ofrecerle una fuente del sistema por razones de rendimiento.

Si desea ampliar el soporte lo más posible, agregue archivos EOT y TTF a la mezcla. Las fuentes SVG también se han utilizado habitualmente para ampliar la compatibilidad del navegador, pero en Grilli Type ya no ofrecemos fuentes SVG porque traen consigo una serie de desventajas. Google Chrome, por ejemplo, incluso ha eliminado por completo la compatibilidad con este formato.

Incrustar fuentes web

Usamos @font-facepara incluir fuentes en CSS.

Este es el nivel más profundo de soporte, incluidos todos los formatos de archivos de fuentes que hemos discutido hasta ahora:

@font-face {  font-family: FontName;  src: url('path/filename.eot');  src: url('path/filename.eot?#iefix') format('embedded-opentype'),    url('path/filename.woff2') format('woff2'),     url('path/filename.woff') format('woff'),    url('path/filename.ttf') format('truetype');}

Podemos reducir un poco las cosas si solo pretendemos admitir navegadores modernos:

@font-face {  font-family: FontName;  src: url('path/filename.woff2') format('woff2'),     url('path/filename.woff') format('woff');}

Una vez declarada y definida la fuente, podemos utilizarla en nuestros elementos. Por ejemplo:

body {  font-family: 'FontName', Helvetica, Arial, sans-serif;}

Alojamiento de fuentes web

Una de las formas más flexibles de cargar fuentes web es alojarlas usted mismo. Eso significa que usted aloja los archivos en su propio servidor y sus fuentes siempre estarán disponibles cuando un visitante accede a su sitio web sin dependencia de terceros. Por lo general, no se requieren códigos de seguimiento ni JavaScript para cargar archivos de fuentes autohospedadas. Muchas fundiciones tipográficas pequeñas ofrecen fuentes como descarga directa para que puedan autohospedarse y en Grilli Type estamos convencidos de que es la mejor manera de ofrecer fuentes.

Mientras que algunas funciones de tipo ofrecen autohospedaje (con y sin restricciones y requisitos engorrosos), otras solo ofrecen soluciones alojadas, lo que significa que alojan los archivos en su nombre. Algunos de los más conocidos incluyen Hoefler Co., Font Bureau y Typotheque. Font Bureau y Typotheque ofrecen sus fuentes en ambas formas a diferentes precios.

Asegúrese de saber cómo se ofrecen las fuentes web de una fundición tipográfica antes de comprar una licencia, porque la diferencia en el alojamiento y los términos de uso pueden afectar la forma en que se implementan. Obtenga lo que tenga más sentido para usted y se ajuste a sus necesidades, y asegúrese de utilizarlo legalmente y de acuerdo con el acuerdo de licencia de la fundición.

Funciones tipográficas avanzadas

Echemos un vistazo a algunas de las funciones más avanzadas de las fuentes web.

Espaciado y kerning

Hay dos configuraciones dentro de los archivos de fuentes que definen el espacio entre caracteres:

1. letter-spacing:Esto se define como cojinetes laterales en el lado izquierdo y derecho de cada carácter.
2. font-kerning:Esto se refiere a ajustes específicos entre los dos personajes.

El espaciado no se puede desactivar en absoluto, porque de lo contrario el motor de representación de texto (su navegador) no sabría qué hacer con estas letras. El kerning, por otro lado, está desactivado de forma predeterminada en los navegadores y usted debe activarlo en su CSS.

¡Es más fácil controlar el kerning de lo que piensas! A continuación se explica cómo activarlo en todos los navegadores que lo admiten:

p {  font-feature-settings: "kern" 1;  font-kerning: normal;}

Si no utiliza algo como Autoprefixer para ayudar a administrar la compatibilidad del navegador en CSS, entonces querrá escribir manualmente los prefijos del proveedor del navegador para esta configuración para extender la compatibilidad del navegador a versiones anteriores:

/* All vendor prefixes for `font-feature-settings` */p {  -moz-font-feature-settings:    "kern" 1;   -ms-font-feature-settings:     "kern" 1;   -o-font-feature-settings:      "kern" 1;   -webkit-font-feature-settings: "kern" 1;   font-feature-settings:         "kern" 1;  font-kerning: normal;}

Funciones avanzadas de tipo abierto

Acabamos de hablar sobre cómo usar el font-feature-settingsatributo para controlar el kerning, pero también se puede usar para controlar otras funciones OpenType disponibles en las fuentes web. La cantidad de funciones admitidas ha ido creciendo con el tiempo y el almanaque es un buen lugar para consultar lo que es posible con OpenType.

Las funciones OpenType son realmente interesantes porque abren un montón de posibilidades para controlar fuentes sin tener que servir varios archivos para obtener el mismo efecto. Al mismo tiempo, vale la pena señalar que las características que admite un archivo de fuente OpenType dependen del diseñador de la fuente y que no todas las fuentes admiten las mismas características.

Para ilustrar cómo se pueden encadenar funciones avanzadas de OpenType, el siguiente código activaría los caracteres numéricos de una fuente habilitada para OpenType que admite números de estilo antiguo ( onum) y números proporcionales ( pnum), además habilitaría el interletraje y activaría un conjunto estilístico específico. incluido en la fuente:

.my-element {  font-feature-settings: "onum" 1, "pnum" 1, "kern" 1, "ss01" 1;}

El font-feature-settingsatributo se puede utilizar para activar alternativas estilísticas, ligaduras discrecionales, diferentes tipos de figuras disponibles en una fuente, versatilidad y otras cosas útiles. Tipofonderie tiene una buena descripción general de estas funciones avanzadas, incluidos ejemplos.

Debido a que font-feature-settingsse utiliza para configurar muchas funciones OpenType a la vez, no es posible definir una única configuración de manera diferente ya que las otras opciones no se heredarán. Sería necesario volver a definir todas las funciones para cambiar la configuración de los elementos secundarios.

Dejar espaciado y espaciado entre palabras

CSS ha soportado durante mucho tiempo los atributos letter-spacingy . word-spacingCuando se usan correctamente, ambos brindan bastante control sobre dos aspectos muy importantes de cómo se verá su tipo.

Como sucede con todo lo relacionado con la tipografía, es conveniente aprender a evaluar distintas opciones, tanto funcionales como visuales, y tomar decisiones en función de la impresión que se tenga. Los distintos contextos pueden requerir distintas necesidades de espacio.

En tamaños más pequeños, la mayoría de las tipografías se beneficiarán de un espaciado un poco más amplio entre caracteres y palabras. En contextos más grandes, como los encabezados, las tipografías pueden beneficiarse de un espaciado más estrecho. En cualquier caso, las decisiones correctas requieren atención y su mejor criterio en función de los resultados.

Descubrí que letter-spacingambos word-spacingfuncionan mejor usando emunidades para los valores. Eso permite que el espaciado se ajuste fluidamente según el tamaño de fuente del elemento al que se aplican. El siguiente ejemplo le dará a su contenido un poco más de espacio para respirar con tamaños de fuente más pequeños:

p {  font-size: 12px;  letter-spacing: 0.015em;  word-spacing: 0.001em;}

Representación de fuentes

El uso de textos en pantalla plantea preguntas importantes sobre cómo se representan. Las fuentes generalmente se diseñan en forma de 1000 units tallcuadrícula, o incluso más grandes, pero luego se muestran en un tamaño parecido a un 16pxtamaño de fuente. En una interacción entre dispositivo, pantalla y software, esta reducción en la resolución y la fidelidad requiere algo de inteligencia para hacer que la letra pequeña sea legible y atractiva. Nuevamente, sea observador, pruebe en muchos navegadores y use su mejor criterio para utilizar los mejores métodos para aumentar la legibilidad.

Reticente

Cada sistema operativo trata las fuentes de forma diferente. En MacOS, las características inteligentes están en el sistema operativo (y por lo tanto pueden evolucionar con el tiempo), mientras que las fuentes en sí pueden ser tontas. Históricamente, en Windows, se suponía que las características inteligentes debían estar incluidas en el software de fuentes y que el sistema debía usar esas características para decidir cómo se debía representar una fuente en diferentes tamaños.

Esas características se denominan sugerencias. La información de sugerencias incorporada en los archivos de fuentes puede indicarle a una computadora que los dos trazos de un carácter "H" deben tener el mismo ancho de línea, o que el espacio por encima y por debajo de la barra transversal debe permanecer aproximadamente igual en tamaños más pequeños.

Las sugerencias son un tema muy complejo y complicado, pero lo importante es que la misma fuente en el mismo tamaño puede visualizarse de manera diferente, incluso en la misma computadora, dependiendo de muchos factores, incluida la pantalla, el navegador e incluso el color de la fuente y el fondo.

Microsoft ofrece una guía sobre el tema de las sugerencias. Aunque se publicó inicialmente en 1997, sigue siendo una buena lectura porque explora el tema en profundidad.

Suavizado de fuentes

Si bien la información de sugerencias incluida en los archivos de fuentes se ignora en su mayoría en MacOS, navegadores específicos ofrecen cierto control adicional sobre la representación de fuentes.

p {  -webkit-font-smoothing: antialiased; /* Chrome, Safari */  -moz-osx-font-smoothing: grayscale; /* Firefox */}

El uso de estas propiedades CSS permite obtener textos más nítidos y finos en MacOS e iOS. Pero tenga cuidado: esto también puede generar problemas de renderización, especialmente si ya está utilizando una fuente o un grosor de fuente finos.

Ambos antialiasedson grayscaleútiles principalmente para equilibrar la representación de las fuentes cuando se usa texto claro sobre fondos oscuros, ya que de lo contrario se representarían mucho más audaces.

La font-smoothingpropiedad y sus valores no están en camino de convertirse en una característica CSS estándar, así que úsela con precaución y quizás solo en contextos donde sepa que necesita apuntar a un navegador y contexto específicos.

Precaución: optimizar la legibilidad

A menudo nos encontramos con este atributo al solucionar problemas de uso de fuentes en los sitios web de clientes de Grilli Type:

p {  text-rendering: optimizeLegibility;}

Entre otras cosas, activa el kerning, que en algún momento fue muy útil, pero que ya no es necesario (como se muestra arriba). Además del kerning, también activa todo tipo de ligaduras, incluidas las extravagantes que pueden estar presentes en los archivos de fuentes.

Aunque existen algunos casos de uso para esto, no utilices esta función si no sabes exactamente qué hacer con ella. Es probable que ni siquiera la necesites.

Recursos de fuentes web

Si está listo para profundizar en las fuentes web, aquí hay algunos recursos recomendados que puede utilizar para obtener más información:

• OpenType CSS Sandbox de Clagnut por Richard Rutter: un excelente lugar para probar las funciones OpenType y armar fácilmente el código CSS requerido.
• Manual de fuentes web de Bram Stein: este es el libro electrónico más detallado que pueda leer sobre fuentes web, representación de fuentes y rendimiento de fuentes.
• Copiar y pegar carácter: este es un excelente sitio web que te permite acceder a prácticamente cualquier carácter especial que puedas usar.
• Uso de @font-face mediante : este artículo incluye fragmentos para declarar fuentes web según la compatibilidad de los distintos navegadores.

Consideraciones avanzadas sobre fuentes web

Para aquellos que están listos para subir de nivel a técnicas más avanzadas, aquí hay aún más consideraciones a tener en cuenta:

Subir fuentes con licencia a Github

Si envía un proyecto a un repositorio público y utiliza archivos de fuentes que tiene licencia, asegúrese de que las fuentes o el directorio que las contiene estén incluidos en su .gitignorearchivo para que no se carguen. Esto evitará que otros tomen y utilicen sus archivos de fuentes, y puede evitar que usted incumpla los términos de uso de las fuentes con licencia que, por lo general, tienen restricciones de uso y uso compartido.

.DS_Store  path/to/web/fonts/folder/*

Tácticas de carga de fuentes

Cargar fuentes web puede ser tan fácil como usarlas, @font-facepero eso no necesariamente ofrece el mejor rendimiento posible. Por ejemplo, abre la posibilidad de un destello de texto sin estilo (FOUT), que podría considerarse una mala experiencia de usuario en algunos casos. “A Comprehensive Guide to Font Loading Strategies” de Zach Leatherman cubre eso y los métodos para mejorar la experiencia de carga que te harán muy feliz a ti y a tus usuarios.

Archivos de fuentes codificados en Base64

En algunos casos excepcionales, codificar las fuentes base64dentro de su CSS será una buena idea, pero, por lo general, no lo es y, por no mencionar, podría romper el acuerdo de licencia de su fuente en el proceso. Asegúrese de proceder con mucha precaución y lea los términos de uso de su fuente al considerarlo base64.

Decoración de texto CSS

El W3C está trabajando en un borrador de nuevos controles para la decoración de texto, que trata principalmente sobre cómo hacer que el subrayado de texto sea mejor y más sencillo en CSS. ¡Todavía no se puede usar en todos los navegadores, pero échale un vistazo!

Fuentes variables

En 2017, se lanzó la especificación de fuentes OpenType 1.8.2, que permite lo que se denomina fuentes variables. Esta nueva versión de OpenType permitirá la inclusión de múltiples estilos de fuente en un solo archivo de fuente, lo que reducirá las solicitudes del servidor y los tamaños de los archivos de fuentes web. Dependiendo de las elecciones del diseñador tipográfico, también puede permitir el uso de pesos arbitrarios entre los pesos y anchos de fuentes existentes, entre otras cosas. Axis Praxis es un buen sitio web para jugar con algunas fuentes de prueba existentes; sin embargo, necesitarás una versión reciente de Safari o Chrome para hacerlo.

Terminando

¡Cubrimos mucho en este artículo! Con suerte, ahora comprende bien los diferentes archivos de fuentes que existen, cómo trabajar con ellos y todas las sorprendentes y poderosas formas en que se pueden diseñar las fuentes utilizando métodos probados y verdaderos y funciones de vanguardia.