Características personalizadas

Ciertas tipografías tienen una serie de características avanzadas que pueden existir o no, dependiendo de la tipografía. Dichas características permiten realizar variaciones en las tipografías como las siguientes:

Característica	Descripción
Ligadura	Unión visual de 2 carácteres. Muy usada en programación, matemáticas e idiomas.
Posicionamiento	Colocación de carácteres de forma similar a los subíndices o superíndices.
Mayúsculas/Minúsculas	Variaciones relacionadas con las mayúsculas y minúsculas.
Variaciones	Se trata de grupos de variaciones visuales con un propósito concreto.

Veamos detalladamente cada una de estas características:

• Ligaduras: Es posible activar una características llamada ligadura que no es más que la unión de ciertos carácteres cambiando su aspecto visual. Esto se puede hacer con la propiedad font-variant-ligatures , y dependiendo del valor específico, activaremos uno u otro tipo de ligadura. Existen las siguientes:

  • Ligaduras normales: Se indica con el valor common-ligatures . Se suele observar en valores como fi , fl , ff ...
  • Ligaduras discrecionales: Se indica con el valor discretionary-ligatures . Se suele observar en valores como ch , sp , st ...
  • Ligaduras históricas: Se indica con el valor historical-ligatures . Se aplican para mostrar ligaduras heredadas de escritura manual.

• Posicionamiento de carácteres: Es posible activar una variación para indicar texto como subíndice o superíndice, similar a como se hace con las etiquetas HTML <sub> y <super> .

• Mayúsculas y minúsculas: Es posible realizar ciertas variaciones como versalitas o similares, aplicadas sólo a minúsculas, sólo a mayúsculas o a ambas.

• Variaciones numéricas: Con la propiedad font-variant-numeric podemos establecer ciertas variaciones como representar números con estilo antiguo, diferentes proporciones, como fracciones "gráficas" o incluso indicar que el cero tenga una raya o no.

• Variaciones alternativas: Con la propiedad font-variant-alternates se pueden indicar una o múltiples variaciones visuales, donde se pueden mencionar las siguientes:

  • historical-forms: Muestra glifos históricos (heredados de épocas pasadas)
  • stylistic(id): Muesta características de estilo alternativas de forma individual.
  • styleset(id): Muestra un conjunto de características de estilo alternativas (creados para trabajar juntos).
  • character-variant(id): Muestra ciertas variaciones en carácteres concretos.
  • swash(id): Muestra decoraciones artísticas en los carácteres como adornos tipográficos.
  • ornaments(id): Muestra glifos con adornos en lugar del caracter predeterminado.
  • anotation(id): Muestra formas notacionales de glifos (glifos abiertos, cajas redondeadas, etc...)

Variaciones en tipografías

Estas características pueden ser activadas o desactivadas desde CSS, por medio de una de las siguientes propiedades (o de forma alternativa, utilizando una propiedad a bajo nivel que veremos más adelante):

Propiedad/Valores	Significado
font-variant-ligatures	Establece un estilo de ligadura
normal | none | common-ligatures | no-common-ligatures | discretionary-ligatures | no-discretionary-ligatures | historical-ligatures | no-historical-ligatures | contextual | no-contextual
font-variant-position	Establece estilo subscript (subíndice) o superscript (superíndice)
normal | sub | super
font-variant-caps	Establece una variación de versalitas
normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps
font-variant-numeric	Establece variaciones numéricas
normal | lining-nums | oldstyle-nums | proportional-nums | tabular-nums | diagonal-fractions | stacked-fractions | ordinal | slashed-zero
font-variant-alternates	Establece variaciones visuales
normal | historical-forms | stylistic(id) | styleset(id) | character-variant(id) | swash(id) | ornaments(id) | annotations(id)
font-variant-east-asian	Permite controlar los glifos de textos orientales
normal | jis78 | jis83 | jis90 | jis04 | simplified | traditional | full-width | proportional-width | ruby
font-kerning	Indica quién debe ajustar el kerning
auto | normal | none

Ten en cuenta que en la mayoría de ellas, se puede utilizar la regla @font-feature-values para personalizar como utilizar la característica en cuestión (la cuál debe existir y estar definida en la tipografía). Veamos un ejemplo:

@font-feature-values 'bookmania' {
    @swash {
        flourish: 1;
    }
}

.texto-alternativo {
    font-variant-alternates: swash(flourish);
}

Características a bajo nivel

La propiedad font-feature-settings es una propiedad a bajo nivel para indicar como debe comportarse una tipografía respecto a sus características especiales. Sólo debe usarse cuando no nos sirva otra propiedad con la que modificar dicha característica, la cuál normalmente se encuentra en la lista del apartado anterior.

La sintaxis de esta propiedad es la que podemos ver a continuación (se pueden combinar varias características separando por comas):

p {
    /* La característica "feat" está activada. */
    font-feature-settings: "feat" 1;
    /* Otra opción equivalente a la anterior. */
    font-feature-settings: "feat" on;
    /* La característica "feat" está desactivada. */
    font-feature-settings: "feat" 0;
    /* Otra opción equivalente a la anterior. */
    font-feature-settings: "feat" off;
}

Sin embargo, la característica «feat» no existe, es sólo un ejemplo teórico. Cada tipografía tiene un cierto número de características especiales (hay tipografías que tienen varias, y tipografías que no tienen ninguna). Veamos una lista de las características que existen:

Valor OTF	Significado	Propiedad equivalente	Valor concreto
"liga" 1	Ligaduras estándar (también clig )	font-variant-ligatures	common-ligatures
"dlig" 1	Ligaduras discrecionales	font-variant-ligatures	discretionary-ligatures
"hlig" 1	Ligaduras históricas	font-variant-ligatures	historical-ligatures
"calt" 1	Ligaduras contextuales alternativas	font-variant-ligatures	contextual
"ordn" 1	Marcas ordinales	font-variant-numeric	ordinal
"zero" 1	Raya del cero	font-variant-numeric	slashed-zero
"onum" 1	Figuras de estilo antiguo	font-variant-numeric	oldstyle-nums
"lnum" 1	Números alineados	font-variant-numeric	lining-nums
"pnum" 1	Números proporcionales	font-variant-numeric	proportional-nums
"tnum" 1	Figuras tabulares (mismo tamaño)	font-variant-numeric	tabular-nums
"frac" 1	Fracciones diagonales	font-variant-numeric	diagonal-fractions
"afrc" 1	Fracciones apiladas	font-variant-numeric	stacked-fractions
"sups" 1	Superíndices	font-variant-position	super
"subs" 1	Subíndices	font-variant-position	sub
"smcp" 1	Versalitas en minúsculas	font-variant-caps	small-caps
"c2sc" 1	Versalitas en mayúsculas y minúsculas	font-variant-caps	all-small-caps
"pcap" 1	Capitaliza minúsculas	font-variant-caps	petite-caps
"c2pc" 1	Capitaliza mayúsculas y minúsculas	font-variant-caps	all-petite-caps
"unic" 1	Versalitas en mayúsculas	font-variant-caps	unicase
"titl" 1	Mayúsculas para titulares	font-variant-caps	titling-caps
"swsh" 1	Decoraciones swash	font-variant-alternates	swash()
"hist" 1	Glifos históricos	font-variant-alternates	historical-forms
"salt" 1	Carácteres con estilos alternativos	font-variant-alternates	stylistic()
"ss01" 1	Conjunto de estilos alternativos	font-variant-alternates	styleset(01)
"ss02" 1	Segundo conjunto de estilos alternativos	font-variant-alternates	styleset(02)
"ss03" 1	Tercer conjunto de estilos alternativos	font-variant-alternates	styleset(03)
"cv01" 1	Estilo alternativo para carácteres	font-variant-alternates	character-variant(01)
"ornm" 1	Adornos como fleurons o dingbats	font-variant-alternates	ornaments()
"nalt" 1	Dígitos circulares, carácteres invertidos...	font-variant-alternates	annotation()
"kern" 1	Kerning de tipografías	font-kerning	normal

Para saber si la tipografía que estamos utilizando posee alguna de estas características especiales, podemos utilizar el comando de terminal font, que lee dicha información de formatos WOFF2, WOFF, TTF u OTF. Dicho comando está programado en el lenguaje de programación Go, por lo que instalarlo es tan fácil como escribir desde una terminal lo siguiente:

go get -u github.com/ConradIrwin/font/cmd/font    # Instalamos "font" (necesitamos Go)
font feature fichero.ttf                          # Leemos las características

Este comando nos mostrará los metadatos de la tipografía, incluyendo los flags de las features (liga, tnum, frac, etc...) que existen y están definidas en la tipografía en cuestión. El soporte actual de dicha propiedad es el siguiente:

Atajo de características

Tradicionalmente, la propiedad font-variant sólo permitía los valores normal o small-caps . Sin embargo, las nuevas propuestas de CSS permiten utilizar esta propiedad como propiedad de atajo para todas las características que hemos visto en el apartado anterior. Por lo tanto, pasamos de este esquema antiguo (soportado en la mayoría de los navegadores):

Propiedad	Valor	Significado
font-variant	normal | small-caps	Indica si utilizar versalitas o no

Al esquema moderno, que es el siguiente:

p {
    /* font-variant: <ligatures> <caps> <numeric> <east-asian> <position> */
}

En él podemos utilizar los valores de cada propiedad individual: font-variant-ligatures , font-variant-caps , etc... en forma de atajo.