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:
common-ligatures
. Se suele observar en valores como fi
, fl
, ff
...discretionary-ligatures
. Se suele observar en valores como ch
, sp
, st
...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:
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);
}
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:
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.
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