soy Kseso y esto EsCSS

Ligaduras y florituras tipográficas con Css: font-variant y font-feature-settings

Ligaduras y florituras tipográficas con Css: font-variant y font-feature-settings

·Por Kseso ✎ 2
Ligaduras y florituras Css: font-variant y font-feature-settings
En tipografía una ligadura es un signo formado por la unión de dos o más grafemas que suelen o pueden escribirse también separados. El origen de las ligaduras está en la necesidad de economizar esfuerzo durante la escritura manual, en una época, la Edad Media, en que no existía ninguna forma de mecanización de la escritura.
Origen: Wikipedia

Este artículo está centrado en cómo utilizar en la web estas características tipográficas en base a las "nuevas" propiedades Css recogidas en el documento CSS Fonts Module Level 3 con status CR desde el año 2013.

font-feature-settings: ligatures cssTal como puedes apreciar en la imagen adyacente, dos o más letras pueden ser representadas conjuntamente de una forma más "artística" y un mismo grafo puede ser mostrado de distintas formas en función de ciertas particularidades.

Algunas de estas uniones de caracteres son comunes a todas las tipografías y se utilizan desde siempre en la web. Por ejemplo @ o &. Otras sin embargo requerían de imágenes o de codificación especial, como: Đ đ ƒ Ǽ que se visualizarán o no en función de la tipografía.

Sin embargo desde hace algún tiempo Css ya se ocupó de este aspecto y dispone de algunas propiedades para hacer posible la ligaduras y otras variantes tipográficas.

Novedades en los textos: font-variant

El documento CSS Fonts Module Level 3 recogió esta posibilidad de usar las ligaduras y variantes tipográficas que algunos navegadores ya venían soportando (con su sintaxis privativa y valores dispares) desde hace mucho.

Font-variant

La propiedad Css font-variant ya estaba definida con los valores normal | small-caps | inherit.

El nuevo documento los amplía para controlar una gran variedad de características de las fuentes tipográficas modernas y específicas de ciertos lenguajes.

Utilizando estas características, una sola tipografía puede proporcionar pictogramas para una amplia gama de ligaduras, alternativas contextuales y estéticas, glifos de estilo antiguo, fracciones automáticas, caracteres decorativos y alternativos específicos para un idioma determinado.

font-variant es la forma acortada de las distintas propiedades definidas para el control de estos aspectos de cada archivo tipográfico. Entre otros aspectos/propiedades que engloba están las propiedades Css siguientes:

  • font-kerning para controlar el espacio entre glifos
  • font-variant-position: subíndices o superíndices con los valores normal | sub | super
  • font-variant-caps: texto en letras capitales, con valores posibles: normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps
  • font-variant-numeric: control de la representación de los dígitos (números). Entre otros valores posibles están: diagonal-fractions | stacked-fractions | oldstyle-nums | slashed-zero
  • font-variant-alternates: alterna caracteres con representaciones diferentes (que tienen que estar diseñados en la tipografía). Como por ejemplo: historical-forms | stylistic | swash | ornaments | annotation
  • font-variant-ligatures: Controla el tipo de ligaduras a emplear. Las valores más comunes son: common-ligatures | discretionary-ligatures | historical-ligatures | contextual

Anteponiendo el prefijo no- a cada uno de los posibles valores se anula si ha sido heredado: font-variant-ligatures: no-common-ligatures;. También admiten el valor none cada una de las propiedades individuales. Con el valor font-variant: none se anulan todas.

font-feature-settings

http://2.bp.blogspot.com/-AZ87ojKNcoY/UxUoXnI_rWI/AAAAAAAAI5Y/6ACq9m2aTMM/s1600/ligatures-css_3.jpg
Origen imag

En los archivos de fuentes OpenType todo lo anterior se puede controlar con la propiedad font-feature-settings en aquellos navegadores que la soportan. Con esta propiedad y la gran variedad de valores posibles podremos disponer en la web de todas las características incluidas en el diseño OpenType de la fuente.

La especificación OpenType define numerosas características avanzadas de tipografía que los diseñadores de fuentes pueden implementar. Por ejemplo, el posicionamiento vertical de una fuente, sustituir las formas de glifos por ligaduras, alternativas contextuales, alternativas estilísticas o florituras, o incluir un juego de versalitas, entre otros.

Cada una de estas características están identificadas con su correspondiente etiqueta o descriptor (ver más abajo) y declarándolos pueden ser activadas.

Nota: recuerda que el estándar de fuentes OpenType se refiere al diseño y creación de la tipografía, no a la extensión del archivo tipográfico con el que debe ser servida la fuente para que cada navegador pueda manejarla.

Sintaxis de font-feature-settings

El valor de la propiedad font-feature-settings está formado por uno o varios descriptores escritos entre comillas y separados por comas.

Los descriptores son abreviaturas que activan y así son mostrados los diferentes glifos o pictogramas y caracteres incluidos en la tipografía elegida.

h1 { -moz-font-feature-settings: "dlig", "ss01"; -webkit-font-feature-settings: "dlig", "ss01"; font-feature-settings: "dlig", "ss01"; }

Nota: en los descriptores utilizo la sintaxis actual soportada por cada navegador. En versiones antiguas ésta era diferente. Sólo a título informativo, unos añadían un 1 "dlig" 1; tras el descriptor (fuera de las comillas y antes de la coma). Otros eran de la forma "dlig=1, ss01=1";.

Anular descriptores

También es posible anular los descriptores heredados por un texto de forma selectiva. Para ello sólo es necesario añadir tras la abreviatura que identifica al descriptor en cuestión (fuera de las comillas y antes de la coma si son varios) el valor 0 (cero) o la expresión off. Depende del navegador y versión.

Descriptores para font-feature-settings

Los descriptores conforma una larga lista. El soporte a cada uno de ellos depende de cada navegador y siempre supeditado a que la fuente en cuestión incluya los glifos para ellos.

Entre otros descriptores para la propiedad font-feature-settings y a modo ilustrativo están:
aalt alterna entre todas las variaciones dispobibles.
dlig ligaduras discrecionales.
hlig ligaduras históricas.
hist formas históricas.
liga ligaduras estándares.
smcpmayúsculas pequeñas (small caps).
onum números con estilo antiguo.
subs formas en subíndice.
sups formas en superíndice.
ss01 a ss20 Conjuntos de estilos (específicos de cada fuente).

font-feature-settings: ligatures css
Diferentes font-feature-settings con la tipografía MEgalopolis Extra

Puedes consultar en este enlace todos y cada uno de los descriptores posibles. Pinchando sobre cada uno tienes la descripción completa de él.

Soporte a font-feature-settings

Los navegadores que dan soporte a esta propiedad (con sus particularidades que vemos a continuación) son:

  • Firefox 4+
  • Chrome
  • IE10
  • Ópera parcial
  • Safari mínimo

Más en detalle y por descriptores, este es el soporte de los navegadores:

FeatureIE10IE11ChromeFirefoxSafariOpera
font-feature-settingsNo
Ligatures (liga)
Swashes (swsh)No
Old style numerals (onum)No
Contextual alternates (calt)
Small caps (smcp)No
Origen de los datos: Dev.Opera

Si necesitas una información más detallada (casi exhaustiva) sobre el soporte de los navegadores y sus versiones a todos y cada uno de los descriptores para font-feature-settings, visita esta página de The State of Web Type

Juega en línea con ligaturas Css

Puedes jugar en vivo (si tu navegador te lo permite) en esta página de ejemplo de mozilla y probar los distintos descriptores del enlace anterior. De ella proviene la imagen inicial del artículo.

Si prefieres mayor variedad de tipografías, en la demo de esta página puedes hacerlo. Usa el inspector de código para ver la diferencia entre el código que muestra y el "interpretado" actual del navegador:

font-feature-settings: Ligatures Css con "Calluna Regular"

Lecturas complementarias

Puedes ampliar información sobre estos temas en los siguientes enlaces de páginas de reconocido prestigio:

  1. CSS Fonts Module Level 3
  2. font-feature-settings en MDN
  3. La especificación OpenType
  4. Todos y cada uno de los descriptores posibles
  5. What is OpenType?

Artículo publicado originalmente el 4 de Marzo de 2014 y actualizado un año después, el 4 de Marzo de 2015.

avatar del Editor del blog

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