CSS Variable Fonts. Obertura en ES y lista de lecturas 7.2.18

CSS Variable Fonts. Obertura en ES y lista de lecturas

Artículo publicado originalmente en Febrero de 2017 . Actualizado un año después, Febrero de 2018, con info y artículos más concretos en cuanto a su uso y cómo hacerlo. También en cuanto a su soporte en el momento de la actualización.

El relativo nuevo concepto variable fonts no hace referencia al tamaño de los textos que suele encomendarse a la propiedad CSS font-size. Para ello hace ya tiempo que se usan expresiones del tipo responsive typography [1] o similares.

La diferencia sustancial está que mientras el responsive typography se centra en el tamaño de los textos en cuanto al tamaño de los mismos (font-size), la idea tras las variable fonts es actuar sobre características de cada glifo o carácter de la tipografía usada sin que el espacio ocupado por cada uno de los glifos apenas varíe y que todas las posibles variaciones de la fuente estén en el mismo archivo.

Esto quiere decir que lo primero para poder usar una tipografía variable es que haya sido diseñada como tal y que su archivo ('nombre.ext') contenga las nuevas características. Por lo tanto, con viejas tipografías no será posible a no ser que sean rediseñadas.

Las características de las variable fonts básicamente serían no sólo las que actualmente son controladas por CSS mediante los descriptores tradicionales:

• font-weight: trazo más o menos grueso (desde `thin´a `extra black bolder´ o de 100 a 900 con valores intermedios)
• font-stretch: desde `ultra-condensed´ a `ultra-expanded´ pasando por los intermedios o valores numéricos en %
• font-variant
• ... otros más

Los nuevos documentos del consorcio introducen y definen otros descriptores nuevos para controlar desde CSS las novedades de estas tipografías. Algunas de ellas relativas a:

• Al control de su renderizado
• Recursos utilizados (@font-face, font-family, el descriptor src...
• Nuevas propiedades para controlar el 'kerning' font-kerning, las ligaduras font-variant-ligatures,super/subíndices font-variant-position...
• Las variaciones de resolución font-optical-sizing, paleta de colores font-palette...
• Y especialmente un nuevo descriptor: font-variation-settings para definir todas estas opciones en una sóla declaración:

  el { font-variation-settings: "wght" 850, "wdth" 100, "ital" 1; }

Este nuevo descriptor, font-variation-settings admite múltiples valore separados por comas. Y cada valor define un aspecto y su valor particular:

• wght = font-weight de 1 a 999
• wdth = font-stretch tanto en el eje X como en el Y
• opsz = font-optical-sizing
• slnt = font-style: oblique de -90º a 90º (por defecto inclinada 20º)
• ital = font-style: italic

Pero con una diferencia muy importante respecto a cómo actúan las propiedades de CSS actualmente: el doble eje.

Doble eje en las "variable fonts"

Las variable fonts introducen en la tipografía web el uso del doble eje (X o width axis e Y o weight axis) sobre los que se puede actuar o bien por separado o conjuntamente.

Un ejemplo: hoy por hoy si decides usar una variante "en negrita" el aumento del grosor se realiza en todo el contorno del carácter. Sim embargo con las variables fonts puedes elegir ese mismo comportamiento o que su grosor sólo aumente en el eje X o en el Y. Y lo mismo para cualquiera de todas las posibles variaciones de la tipografía.

Funcionamiento de las "variable fonts"

¿Y todo esto cómo se consigue? Sencillo. Es trabajo encomendado a la propia tipografía (su diseño y desarrollo). Piensa en qué ocurre ya con algunas fuentes diseñas específicamente para SO´s y su comportamiento. Como por ejemplo la San Francisco, la nueva fuente del sistema de OS: modern system fonts.

En palabras de Roel Nieskens en uno de los artículos que reseño más adelante:

Variable fonts can programmatically generate the exact variation you need, and will be able to respond on the fly to factors that influence readability — things like viewport size, viewing distance, contrast, ambient light, and user preferences.

¿Ventajas?

Si a estas características de las variable fonts unes las novedades de CSS en el manejo de los textos en la web como font-display (propuesta de Tab Atkins, artículo en css-tricks) o las mencionadas anteriormente el futuro en este campo también promete ser de lo más interesante.

¿Que si merecen la pena? Hoy por hoy y a la espera de ver cómo evolucionan las variable fonts y su disponibilidad las promesas son notables:

• "Responsive typography" real.
• Menos recursos usados.
• Velocidad de carga.
• Adiós a efectos no deseados como FOUT o FOIT.
• Prescindir de APIS de terceros o fallbacks para el manejo de la tipografía.
• Otros...

¿Inconvenientes?

Dejando aparte cuestiones técnicas (calidad y número de archivos tipográficos disponibles) la principal una que tan sabiamente me hizo ver Abel Sutilo aka @abelsutilo en esta conversación vía tuits:

A día de hoy veo Variable Fonts como una oportunidad de negocio para diseñadores de tipografías que quieran meterse más en el negocio del diseño web. Paquetitos a precio razonable en los principales catálogos :)

Y es que parece que las variabe fonts hayan surgido más como un producto que como solucción a alguna necesidad real, extendida y apremiante.

Soporte o dónde poder usarlas

• Sí:
  últimas versiones estables de Chrome y Safari.
  Firefox Nightly y Firefox Developer Edition.
  Última estable de Firefox abilitando su 'flag'.
  Edge anunció su próximamente.
  Illustrator y Photoshop desde las versiones de 2017

Lista de lectura sobre las "variable fonts"

A continuación una pequeña selección de artículos para ampliar el concepto, lo que hay tras y las posibilidades que prometen las variable fonts y su uso en la web.

Live Font Interpolation on the Web

Y para empezar nada mejor que el artículo que acuñaba el término variable fonts en A List Apart: Live Font Interpolation on the Web por Andrew Johnson.

CSS Fonts Module Level 4

El documento del consorcio sobre el tema que nos ocupa: CSS Fonts Module Level 4

One File, Many Options: Using Variable Fonts on the Web

Artículo de obligada lectura de Ollie Williams en css-tricks.com publicado el 29 de Enero de 2018

How to Use Variable Fonts on the Web

Artículo de Anna Monus en tutsplus.com publicado el 8 de Enero de 2018

How to use variable fonts in the real world

Artículo que explica en detalle los códigos necesarios para usar las variable fonts por Richard Rutter en medium.com el 25 de Enero de 2018.

Variable Fonts on the Web

Variable Fonts on the Web por Myles Maxfield en webkit.org

Introducing OpenType Variable Fonts

Introducing OpenType Variable Fonts por John Hudson en medium.com

Variable Fonts: the Future of (Web) Type

Variable Fonts: the Future of (Web) Type por ROEL NIESKENS en typographica.org

Variable fonts, a new kind of font for flexible design

Variable fonts, a new kind of font for flexible design por Tim Brown en blog.typekit.com

Kseso

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso