Fuentes y tipografías

Las fuentes (tipografías) también tienen cabida dentro del mundo del CSS. De hecho, son uno de los pilares más importantes del diseño web. La elección de una tipografía adecuada, su tamaño, color, espacio entre letras, interlineado y otras características pueden cambiar, de forma consciente o inconsciente, la forma en la que una persona interpreta o accede a los contenidos de una página web.

Detalles de una tipografía

Existen multitud de características en las tipografías que convendría conocer antes de continuar, por lo que vamos a ver algunas de ellas:

Tipografías con serifa y sin serifa

  • Serifa: Las fuentes o tipografías que utilizan serifa o gracia, son aquellas que incorporan unos pequeños adornos o remates en los extremos de los bordes de las letras. Muchas de estas tipografías suelen terminar en «Serif» (con serifa).

  • Paloseco: Las fuentes o tipografías de paloseco son las opuestas a la anterior: unas tipografías lisas, sin adornos o remates en los extremos de los bordes de las letras. Muchas de estas tipografías suelen terminar en «Sans Serif» (sin serifa).

Tradicionalmente, se han utilizado tipografías con serifa en medios impresos argumentando que dichos bordes ofrecen una mayor legibilidad que las tipografías de paloseco, ya que ayudan a detectar más rápidamente las diferentes letras. Sin embargo, en medios digitales, las tipografías de paloseco son más utilizadas puesto que dan un aspecto más limpio y claro que las tipografías con serifa, y ayudan a que se canse menos la vista del usuario.

  • Monoespaciada: Por otro lado, existe un tipo de fuente denominada fuente monoespaciada, que se basa en que cada una de sus letras tienen exactamente la misma longitud horizontal (ancho). Son muy útiles para tareas de programación o emuladores de terminal, donde se leen mejor líneas con estas características, ya que no queremos que una línea sea más corta dependiendo de su contenido.

Fuente monoespaciada

Propiedades básicas

Existe un amplio abanico de propiedades CSS para modificar las características básicas de las tipografías a utilizar. Aunque existen muchas más, a continuación, vemos las propiedades CSS más básicas para aplicar a cualquier tipo de tipografía:

Propiedad Valor Significado
font-family: fuente Indica el nombre de la fuente (tipografía) a utilizar.
font-size: Tamaño Indica el tamaño de la fuente.
font-style: normal | italic | oblique Indica el estilo de la fuente.
font-weight: peso Indica el peso (grosor) de la fuente.

Con ellas podemos seleccionar tipografías concretas, específicar su tamaño, estilo o grosor.

Familia tipográfica

Empezaremos por la más lógica, la propiedad CSS para seleccionar una familia tipográfica concreta. Con esta propiedad, denominada font-family, podemos seleccionar seleccionar cualquier tipografía simplemente escribiendo su nombre.

Si dicho nombre está compuesto por varias palabras separadas por un espacio, se aconseja utilizar comillas simples para indicarla (como se ve en el segundo ejemplo):

body {
  font-family: Verdana;
  font-family: 'PT Sans';       /* Otro ejemplo */
}

Esta es la forma más básica de indicar una tipografía. Sin embargo, hay que tener en cuenta que estas fuentes sólo se visualizarán si el usuario las tiene instaladas en su sistema. En caso contrario, se observarán los textos con otra tipografía que sí esté disponible en el sistema.

Esto hace que esta tarea se convierta en algo muy complejo, puesto que los diferentes sistemas operativos (Windows, Mac, GNU/Linux) tienen diferentes tipografías instaladas (y carecen de tantas otras). Si además entramos en temas de licencias y tipografías propietarias, que no se permiten utilizar en según que casos, aún se vuelve más complejo.

Consejo: La página FontFamily.io incorpora un sencillo formulario para mostrar información sobre determinadas tipografías y como se mostrarían en diferentes sistemas (Windows, Mac OS, GNU/Linux, Android, iOS, Windows Phone, etc...). Más adelante, veremos la regla @font-face de CSS3, que permite descargar y utilizar fuentes tipográficas sin necesidad de tenerlas instaladas en el sistema, tanto manualmente como haciendo uso de repositorios gratuitos como Google Fonts.

Un primer y sencillo paso para paliar (en parte) este problema, una buena práctica es añadir varias tipografías alternativas, separadas por comas:

div {
  font-family: Vegur, 'PT Sans', Verdana, sans-serif;
}

Así pues, el navegador busca la fuente Vegur en nuestro sistema, y en el caso de no estar instalada, pasa a buscar la siguiente (PT Sans), y así sucesivamente. Se recomienda especificar al menos 3 tipografías diferentes.

Truco: Como última opción de font-family se recomienda utilizar una palabra clave denominada «web-safe fonts» (fuente segura). Esta fuente segura no es una tipografía concreta, sino una palabra clave con la que se denomina una categoría que indica al navegador que debe buscar una tipografía instalada en el sistema que cumpla con dichas características:

Las palabras clave de fuentes seguras son las siguientes:

Fuente Significado Fuentes de ejemplo
serif Tipografía con serifa Times New Roman, Georgia...
sans-serif Tipografía sin serifa Arial, Verdana, Tahoma...
cursive Tipografía en cursiva Sanvito, Corsiva...
fantasy Tipografía decorativa Critter, Cottonwood...
monospace Tipografía monoespaciada Courier, Courier New...

Tamaño de la tipografía

Otra de las propiedades más utilizadas con las tipografías es font-size, una tipografía que permite especificar el tamaño que tendrá la fuente que vamos a utilizar:

Propiedad Valor Tipo de medida
font-size: xx-small | x-small | small | medium | large | x-large | xx-large Absoluta (tamaño predefinido)
font-size: smaller | larger Relativa (más pequeña/más grande)
font-size: Tamaño Específica (tamaño exacto)

Se pueden indicar tres tipos de valores:

  • Medidas absolutas: Palabras clave como medium que representan un tamaño medio (por defecto), small: tamaño pequeño, x-small: tamaño muy pequeño, etc...

  • Medidas relativas: Palabras clave como smaller que representan un tamaño un poco más pequeño que el actual, o larger que representa un tamaño un poco más grande que el actual.

  • Medida específica: Simplemente, indicar píxeles, porcentajes u otra unidad para especificar el tamaño concreto de la tipografía.

Estilo de la tipografía

A las tipografías elegidas se les puede aplicar ciertos estilos, muy útil para maquetar los textos, como por ejemplo negrita o cursiva (italic). La propiedad que utilizamos es font-style y puede tomar los siguientes valores:

Valor Significado
normal Estilo normal, por defecto. Sin cambios aparentes.
italic Cursiva. Estilo caracterizado por una ligera inclinación de las letras hacia la derecha.
oblique Oblícua. Idem al anterior, salvo que esta inclinación se realiza de forma artificial.

Con la propiedad font-style podemos aplicarle estos estilos. En la mayoría de los casos, se aprecia el mismo efecto con los valores italic y oblique, no obstante, italic muestra la versión cursiva de la fuente, específicamente creada por el diseñador de la tipografía, mientras que oblique es una representación forzosa artificial de una tipografía cursiva.

Peso de la tipografía

Por otro lado, tenemos el peso de la fuente, que no es más que el grosor de la misma. También depende de la fuente elegida, ya que no todas soportan todos los tipos de grosor. De forma similar a como hemos visto hasta ahora, se puede especificar el peso de una fuente mediante tres formas diferentes:

Propiedad Valor Significado
font-weight: normal | bold Medidas absolutas (predefinidas)
font-weight: bolder | lighter Medidas relativas (dependen de la actual)
font-weight: peso Medida específica (número del peso concreto)

Peso de la fuente: font-weight

  • Valores absolutos: Palabras claves para indicar el peso de la fuente: normal y bold. Normal es el valor por defecto.
  • Valores relativos: Bolder (más gruesa) o Ligther (más delgada).
  • Valor numérico: Un número del 100 (menos gruesa) al 900 (mas gruesa). Generalmente, se incrementan en valores de 100 en 100.

OJO: Ten en cuenta que los diferentes pesos de una tipografía son diseñados por el creador de la tipografía. Para poder establecer diferentes pesos y visualizarlos, es necesario que la tipografía disponga de una versión con dicho peso. Esto es algo muy sencillo de ver en tipografías de Google Fonts (junto al nombre del autor).

Instalar tipografías

Sin embargo, las tipografías en CSS2 tenían una gran limitación. Utilizando la propiedad font-family y especificando el nombre de la fuente a utilizar, deberían visualizarse. Pero resulta que no todo era tan bonito como parecía. Fundamentalmente, existían dos problemas principales:

Las fuentes especificadas mediante la propiedad font-family debían estar instaladas en el sistema donde se visualizaba la página web.

En el ejemplo superior y al contrario que Times New Roman o Georgia (las cuales venían de serie en un sistema Windows), la tipografía Vegur no viene instalada de serie en Windows. Así pues, el diseñador (y los usuarios con esa fuente instalada) veríamos la página web con dicha tipografía, pero en el navegador de otro usuario que no la tenga, no se encontraría la fuente y se pasaría a la siguiente alternativa (Times New Roman), y así sucesivamente.

Muchas tipografías genéricas tienen derechos de autor y puede que algunos sistemas no tengan permiso para tenerlas instaladas.

Mientras que las tipografías que vienen en sistemas como Microsoft Windows de serie (Times New Roman, Verdana, Tahoma, Trebuchet MS...) se verían correctamente en navegadores con dicho sistema operativo, no ocurriría lo mismo en dispositivos con GNU/Linux o Mac. Y lo mismo con tablets o dispositivos móviles. Esto ocurre porque dichas tipografías son propietarias y tienen licencias que permiten usarse sólo en dispositivos de dicha compañía.

En definitiva, aunque teníamos los mecanismos, vivimos en un mundo complicado en el que no es tan sencillo establecer una fuente específica para obtener el mismo resultado de diseño en todos los navegadores y sistemas disponibles.

La regla @font-face

Actualmente, todo esto ha cambiado debido a CSS3 y la regla @font-face, la cual permite descargar una fuente o tipografía, cargarla en el navegador y utilizarla en nuestras páginas. Todo ello de forma transparente al usuario.

Veamos como se utiliza:

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'),
       url(opensans.woff2) format('woff2'),
       url(opensans.woff) format('woff'),
       url(opensans.ttf) format('truetype'),
       url(opensans.otf) format('opentype'),
       url(opensans.eot) format('embedded-opentype');
}

La regla @font-face permite crear uno (o varios) bloques donde definir las tipografías a cargar en el documento. En el ejemplo superior vamos a hacerlo con la fuente Open Sans, una tipografía libre creada por Steve Matteson para Google.

Basicamente, abrimos un bloque @font-face, establecemos su nombre mediante font-family y definimos sus características mediante propiedades como font-style o font-weight. El factor clave viene a la hora de indicar la tipografía, que se hace mediante la propiedad src (source) con los siguientes valores:

Valor Significado Soporte
local('Nombre') ¿Está la fuente 'Nombre' instalada en el sistema? Si es así, no la descarga. Todos
url(file.woff2) Formato Web Open Font Format 2. Mejora de WOFF con Brotli. No IE
url(file.woff) Formato Web Open Font Format. Es un TTF comprimido, ideal para web. Bueno
url(file.ttf) Formato True Type. Uno de los formatos más conocidos. Bueno
url(file.otf) Formato Open Type. Mejora del formato TTF. Bueno
url(file.eot) Formato Embedded OpenType. Mejora de OTF, propietaria de Microsoft. Sólo IE
url(file.svg) Tipografías creadas como formas SVG. No usar, considerada obsoleta. Malo

Consejo: Actualmente, una buena práctica es utilizar la expresión local() seguida de la expresión url() con los formatos WOFF2, WOFF y TTF (en dicho orden), dando así soporte a la mayoría de navegadores. Para dar soporte a versiones antiguas de Internet Explorer, podría ser adecuado incluir también el formato EOT.

Google Fonts

En la actualidad, es muy común utilizar Google Fonts como repositorio proveedor de tipografías para utilizar en nuestros sitios web por varias razones:

  • Gratuitas: Disponen de un amplio catálogo de fuentes y tipografías libres y/o gratuitas.
  • Cómodo: Resulta muy sencillo su uso: Google nos proporciona un código y el resto lo hace él.
  • Rápido: El servicio está muy extendido y utiliza un CDN, que brinda ventajas de velocidad.

En la propia página de Google Fonts podemos seleccionar las fuentes con las características deseadas y generar un código HTML con la tipografía (o colección de tipografías) que vamos a utilizar.

No hay que perder de vista el medidor que Google pone a nuestra disposición con el texto «Load Time»; dependiendo del tipo de fuente o cantidad de características seleccionadas, puede resultar una colección de tipografías muy pesadas que ralentizarán nuestra página de forma notable:

Select fonts in Google Fonts

Todo esto nos generará el siguiente código que será el que tendremos que insertar en nuestro documento HTML, concretamente, antes de finalizar la sección <head>:

<link rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700">

Cómo se puede ver el ejemplo anterior, al añadir este código estamos enlazando nuestro documento HTML con un documento CSS del repositorio de Google. Esto hará que incluyamos automáticamente todo el código CSS necesario de @font-face para las características y tipografías escogidas, en este caso la tipografía Open Sans con los pesos 300, 400 y 700.

Si además, añadimos también la familia de tipografías Roboto (con grosor 400) y Lato (con grosor 300 y 400), el código necesario sería el siguiente:

<link rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700|Roboto:400|Lato:300,400">

De esta forma conseguimos cargar varias tipografías desde el repositorio de Google de una sola vez, sin la necesidad de varias líneas de código diferentes, que realizarían varias peticiones diferentes a Google Fonts.

Nota que en este nuevo ejemplo, en caso de no tener instaladas ningunas de las tipografías anteriores, estaríamos realizando 7 descargas: (el css de Google Fonts), (las 3 tipografías con los diferentes pesos de Open Sans), (la de Roboto), (y las 2 tipografías con los diferentes pesos de Lato).

Por último y para terminar, sólo necesitaremos añadir la propiedad font-family:'Open Sans', font-family:'Lato' o font-family:'Roboto' a los textos que queramos dar formato con dichas tipografías. No te olvides de añadir tipografías alternativas y fuente segura para mejorar la compatibilidad con navegadores antiguos.

Atajo para tipografías

Finalmente, algunas de las propiedades más utilizadas de tipografías y fuentes se pueden resumir en una propiedad de atajo, como viene siendo habitual. El esquema es el siguiente:

div {
  font: <style> <variant> <weight> <size/line-height> <family>;
}

Por ejemplo, utilizar la tipografía Arial, con la fuente alternativa Verdana o una fuente segura sin serifa, a un tamaño de 16 píxeles, con un interlineado de 22 píxeles, un peso de 400, sin utilizar versalitas y con estilo cursiva:

div {
  font: italic normal 400 16px/22px Arial, Verdana, Sans-serif;
}

Propiedades avanzadas

Compactación de la tipografía

Con la propiedad font-stretch podemos definir el grado de compactación o expansión de los carácteres de la tipografía, desde valores muy condensados (para ocupar menos espacio) a valores muy expandidos (para ocupar más espacio):

Compactación de la tipografía: font-stretch

Propiedad Valor
font-stretch ultra-condensed | extra-condensed | condensed | semi-condensed | normal
semi-expanded | expanded | extra-expanded | ultra-expanded
font-stretch Tamaño

También se puede especificar el tamaño, por ejemplo en porcentajes. Recuerda que para que la propiedad font-stretch funcione correctamente, la tipografía seleccionada debe poseer una versión «condensada» o «expandida» para así poderla aplicar.

Ajuste de tamaño

Con la propiedad font-size-adjust podemos ajustar el tamaño de la tipografía indicando la diferencia de tamaño entre la x minúscula y la X mayúscula. Con esta característica, podemos conseguir reducir la proporción de tamaño entre mayúsculas y minúsculas de nuestros textos, si consideramos que no es adecuada:

La propiedad de ajuste de texto: font-size-adjust

Propiedad Valor Significado
font-size-adjust: none | number Ajusta el aspecto de los carácteres (diferencia de tamaño entre x y X)

Por defecto, el valor de esta propiedad es none, que establece el tamaño indicado por el diseñador de la tipografía. Ojo a la compatibilidad, ya que es una característica que aún está en fase experimental:

Modo de aparición

La propiedad font-display nos brinda un mecanismo muy interesante para determinar como queremos que se comporte la tipografía al cargar la página. Cuando cargamos una página con una tipografía que no se encuentra instalada, el navegador debe descargar la tipografía y activarla, tarea que no ocurre instantáneamente, ya que depende de nuestra conexión, del tamaño de la fuente y del sistema utilizado.

En el instante anterior a descargar la tipografía pueden ocurrir varias cosas:

  • FOIT (Flash of Invisible Text): El texto permanece oculto (invisible) al usuario hasta que la tipografía deseada se ha descargado y puede visualizarse.
  • FOUT (Flash of Unstyled Text): El texto permanece sin estilo (con otra tipografía diferente) hasta que la tipografía deseada se ha descargado y puede visualizarse.

Dependiendo del valor de la propiedad font-display podemos modificar dicho comportamiento:

Propiedad Valor Significado
font-display: auto | block | swap | fallback | optional Modo en que se muestra el texto.

Veamos que ocurre con cada uno de los valores indicados (si la tipografía no está descargada):

  • auto: El valor por defecto de la propiedad. El navegador decide que comportamiento aplicar, que suele ser FOIT. Cómo desventaja, en algunos navegadores o situaciones el tiempo de FOIT puede llegar a ser considerablemente alto.

  • block: El navegador mantiene el texto invisible (FOIT) un corto periodo de tiempo, cambiando a modo swap desde que la tipografía deseada está cargada. Sólo usar en pequeños fragmentos de texto como titulares.

  • swap: El navegador muestra inmediatamente el texto con la siguiente tipografía de la lista font-family durante un cortísimo periodo de tiempo, mostrando la tipografía deseada desde que está cargada. Sólo usar en pequeños fragmentos de texto como titulares.

  • fallback: El navegador muestra el texto con la siguiente tipografía de la lista font-family durante un cortísimo periodo de tiempo, mostrando la tipografía deseada desde que está cargada. Si pasa demasiado tiempo sin que la tipografía se cargue, se utiliza de forma definitiva la que se estaba usando. Apropiada para usar en fragmentos largos de texto.

  • optional: El navegador considera opcional el uso de la tipografía deseada si tarda demasiado o cree que hay algún problema en la descarga, utilizando la siguiente tipografía de la lista font-family.

Características personalizadas

Ciertas tipografías tienen una serie de características avanzadas (que pueden existir o no, dependiendo de la tipografía) pudiendo activarlas o desactivarlas. Dichas características, comienzan a poderse utilizar mediante CSS, por medio de una de las siguientes propiedades, o utilizando una propiedad a bajo nivel que veremos más adelante.

Dichas características permiten realizar ciertas variaciones en las tipografías como las siguientes:

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

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, y esta 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 siguiente (se pueden combinar varias características separando por comas):

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

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 (no necesariamente las tiene todas). 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 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 (soportado en la mayoría de los navegadores):

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

Al siguiente esquema:

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.

Manz
Publicado por Manz

Docente, divulgador informático y freelance. Escribe en Emezeta.com, es profesor en la Oficina de Software Libre de la Universidad de La Laguna y dirige el curso de Programación web FullStack de EOI en Tenerife (Canarias). En sus ratos libres, busca GIF de gatos en Internet.