Características personalizadas

Activar características especiales en tipografías


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
Características de ligaduras
"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
Características numéricas
"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
Características de posición
"sups" 1 Superíndices font-variant-position super
"subs" 1 Subíndices font-variant-position sub
Características de mayúsculas/minúsculas
"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
Características alternativas
"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 install github.com/ConradIrwin/font/cmd/font@latest   # 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.

¿Quién soy yo?

Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.

Puedes encontrar más sobre mi en Manz.dev