Ligaduras y florituras tipográficas con Css: font-variant y font-feature-settings 12.1.16
Todos los secretos de las ligaduras y florituras Css (ligaturas o ligas) tipográficas y los glifos alternativos de las fuentes. Relación de los descriptores y páginas de ejemplo.
Ligaduras y florituras tipográficas con 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.
Tal 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
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.
smcp
mayú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).
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:
| Feature | IE10 | IE11 | Chrome | Firefox | Safari | Opera |
|---|---|---|---|---|---|---|
font-feature-settings | Sí | Sí | Sí | Sí | No | Sí |
Ligatures (liga) | Sí | Sí | Sí | Sí | Sí | Sí |
Swashes (swsh) | Sí | Sí | Sí | Sí | No | Sí |
Old style numerals (onum) | Sí | Sí | Sí | Sí | No | Sí |
Contextual alternates (calt) | Sí | Sí | Sí | Sí | Sí | Sí |
Small caps (smcp) | Sí | Sí | Sí | Sí | No | Sí |
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:
Lecturas complementarias
Puedes ampliar información sobre estos temas en los siguientes enlaces de páginas de reconocido prestigio:
- CSS Fonts Module Level 3
- font-feature-settings en MDN
- La especificación OpenType
- Todos y cada uno de los descriptores posibles
- 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.
 tipográficas y los glifos alternativos de las fuentes. Relación de los descriptores y páginas de ejemplo.){kind=link}
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
seria bueno un ejemplo en codepen, el concepto lo entendi pero los ejemplos hacen falta
ResponderEliminarHola Daniel
EliminarEsos ejemplos (en codepen) que echas en falta creo que están cubiertos y suplidos en los dos enlaces del apartado "Juega en línea con ligaturas Css".
Especialmente en el segundo, donde sólo es cuestión de marcar o desmarcar opciones.
Un saludo