Beneficios que puedes obtener de una tipografía de alta calidad

• Funciones ocultas de las fuentes: ejes variables, glifos alternativos, alternancias estilísticas, swashes, números, versalitas (Small Caps), sustitución contextual

Ejes variables

• Las fuentes OpenType pueden tener uno o más ejes, y es posible cambiar su apariencia modificando los valores de esos ejes
• El eje más común es wght, que ajusta el grosor de la fuente
• Otros ejes comunes son wdth (ancho), slnt (inclinación), ital (itálica) y opsz (tamaño óptico)
• Los ejes pueden manipularse usando propiedades de CSS
• La propiedad font-variation-settings puede causar problemas de herencia, por lo que conviene usar propiedades específicas de CSS cuando sea posible

Glifos alternativos

• Una fuente puede incluir glifos alternativos para ciertos caracteres
• Los glifos alternativos pueden incluir distintos estilos como números, swashes y ligaduras

Alternancias estilísticas

• Las alternancias estilísticas son una función que activa formas alternativas para ciertos caracteres
• salt activa las alternancias estilísticas para todos los caracteres
• Los conjuntos estilísticos como ss01, ss02, etc., reemplazan conjuntos específicos de caracteres
• Las variantes de caracteres como cv01, cv02, etc., reemplazan un solo carácter
• Los glifos alternativos pueden activarse con las propiedades CSS font-feature-settings y font-variant-alternates

Swashes

• Algunas tipografías incluyen swashes que pueden usarse para dar un poco más de personalidad a los títulos
• Los swashes son elementos decorativos que pueden aportar personalidad a los títulos
• Los swashes pueden activarse con font-feature-settings y font-variant-alternates

Números

• Una fuente puede incluir distintos conjuntos de glifos numéricos
• Los números pueden ser lining u old-style, y también tabulares o proporcionales
• Los números tabulares tienen el mismo ancho, mientras que los proporcionales tienen anchos distintos
• Los números lining tienen la misma altura que las mayúsculas, mientras que los old-style tienen una altura similar a la de las minúsculas
• La propiedad font-variant-numeric permite establecer el estilo de números deseado

Versalitas

• Las versalitas son variantes en mayúscula que reemplazan a las minúsculas
• Las versalitas pueden activarse con la propiedad font-variant-caps
• Si la fuente no incluye versalitas, el navegador puede sintetizarlas

Sustitución contextual

• La sustitución contextual es una función que reemplaza automáticamente glifos según los caracteres que los rodean
• Por ejemplo, puede sustituir -> por una flecha o ajustar la posición de @ cuando está entre mayúsculas
• La sustitución contextual viene activada por defecto y puede desactivarse con la propiedad font-variant-ligatures

Resumen de GN⁺

• Las tipografías de alta calidad ofrecen muchas funciones y, si se aprovechan bien, pueden mejorar mucho la calidad tipográfica
• Los ejes variables y los glifos alternativos de las fuentes OpenType son especialmente útiles
• Funciones como la sustitución contextual resultan convenientes tanto para desarrolladores como para usuarios

[halfenif]

Me pregunto por qué es tan difícil dar soporte correcto a las funciones tipográficas

Es un problema que ha acompañado a toda la historia de la humanidad... ¿cuánto no habrá por hacer?

[seunggi]

La renderización de fuentes es difícil

https://faultlore.com/blah/text-hates-you/

[wedding]

Nunca me pude adaptar a las ligatures...

[GN⁺]

Comentarios de Hacker News

• Útil cuando los números necesitan alinearse a lo largo de varias líneas
• También es útil para cosas como relojes o cuentas regresivas
• Es muy molesto cuando la hora en pantalla da saltos
• Si quieres inspeccionar archivos de fuentes, recomiendan usar Wakamai Fondue
• Los números tabulares son una función muy útil
• Google Fonts elimina casi todas las funciones avanzadas de OpenType para reducir el tamaño del archivo
  • Ejemplo: la versión de Inter en Google ofrece 11 funciones, pero la versión completa ofrece 44
• La tipografía de la página es hermosa
• Usar versalitas se ve genial; ojalá más sitios web las usaran
• Revisaron si Berkeley Mono v2 ya salió, pero todavía no se lanza
• El comportamiento del eje wght (peso) es extraño: si bajas el control por debajo de 400, el texto se adelgaza y se comprime, pero si lo subes por encima de 400, el texto solo se vuelve más grueso
• Para usar una fuente distinta en VSCode y dar soporte a comentarios, jsdocs y otros elementos del resaltado de sintaxis, hace falta la extensión vscode-custom-css
  • Ejemplo:

    .mtki {
      font-family: 'IosevkaNFM-ExtraLightItalic', monospace !important;
      font-style: italic !important;
      color: #757575 !important;
    }
    .comment {
      font-family: 'IosevkaNFM-ExtraLightItalic', monospace !important;
      font-style: italic !important;
      color: #757575 !important;
    }
    .comment:not(.punctuation) {
      font-family: 'IosevkaNFM-ExtraLightItalic', monospace !important;
      font-style: italic !important;
      color: #757575 !important;
    }
    

  • La gestión de fuentes en VSCode tiene muchos bugs, así que hace falta bastante experimentación
• Se preguntan por qué es tan difícil dar soporte correcto a las funciones tipográficas
• Si te interesa la tipografía, recomiendan Butterick's Practical Typography
  • Está lleno de consejos prácticos para hacer más bellos los documentos impresos y digitales
  • La licencia de sus fuentes es muy generosa; no hay límite en la cantidad de page views
  • Sus fuentes no son open source, pero son hermosas
  • Compraron las fuentes Valkyrie y Concourse, y Concourse es muy flexible con las alternativas contextuales