soy Kseso y esto EsCSS

CSS & Variable Fonts & Lista de lecturas

Introducción a las variable fonts: qué son, qué promesas traen consigo, el complemento de nuevas propuestas de CSS y lista de lecturas de artículos sobre el tema.

CSS & Variable Fonts & Lista de lecturas

Por Kseso ✎ 2

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 ellos apenas varíe.

Estas características básicamente serían (no sólo) las que actualmente son controladas por las propiedades CSS:

  • font-weight: trazo más o menos grueso (desde `thin´a `extra black bolder´ o de 100 a 900)
  • font-stretch: desde `ultra-condensed´ a `ultra-expanded´ pasando por los intermedios o valores numéricos en %
  • font-optical-sizing [CSS fonts level 4]
  • font-synthesis [CSS fonts level 4]

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

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...

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.

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

Live Font Interpolation on the Web por Andrew Johnson en alistapart.com

Live Font Interpolation on the Web
Ilustración de Andrew Kuhar en AlistApart.com

CSS Fonts Module Level 4

CSS Fonts Module Level 4

Century Expanded

Variable Fonts on the Web

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

Origen vídeo: webkit.org

Introducing OpenType Variable Fonts

Introducing OpenType Variable Fonts por John Hudson en medium.com

los 3 ejes de las variables fonts
Espacio de diseño de una fuente variable en 3 ejes.
Origen imagen: John Hudson en Medium

Variable Fonts: the Future of (Web) Type

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

variable font on 2 axes
Variable font en dos ejes
Ilustración de CJ Dunn

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

Un ejemplo del uso de variable fonts
Un ejemplo del uso de "variable fonts"
Ilustración de Erik van Blokland

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 Don Kseso Kseso

Comentarios: 2

  1. Vengo siguiendo tu blog, y debo agradecerte mucho todo él trabajo realizado en él. Tu blog me ha enseñado muchas cosas con las que he podido ganarme él pan. Además lo tienes muy chulo con todo ese uso de svg e investigación. Solo eso agradecerte.

    Saludos.

    ResponderEliminar
    Respuestas
    1. Las gracias a ti, Lionel.

      Me alegra saber que de cuando en vez el blog es de alguna utilidad.

      Un saludo

      Eliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap