¿A quién no le ha pasado que el diseñador te llama de urgencia y te dice que la tipografía necesita una configuración especial para asignas los conjuntos estilográficos para la página web y que ya han empezado a modificarlo en todos lados? A mi, nunca. Hasta ahora. No sabía ni que se podía hacer en la web, siempre he pensado que era más para el mundo de impresión y diseño.
Para el que no entienda lo que es un conjunto estilográfico son aquellas pautas para modificar la fuente que usamos para que uno o varios elementos se muestren de forma diferente a la de por defecto. Quizás es una «a» minúscula tiene rabito y queremos quitárselo (esta fuente no tiene…) o queremos que la «y», «g» o «p» tenga un acabado más en el baseline a que sobresalga. El mundo tipográfico, señor@s.
Lo que te comentan es una configuración relacionada con las opciones tipográficas OpenType, que permiten modificar el estilo de los caracteres de una fuente, como alternar formas de letras específicas o activar ciertos conjuntos estilísticos. Estas mismas características pueden aplicarse en la web utilizando CSS siempre que la fuente utilizada soporte OpenType.
Por ejemplo, puedes usar la propiedad CSS font-feature-settings para activar estas opciones:
p {
font-family: "NombreDeLaFuente";
font-feature-settings: "ss01" 1, "ss02" 1; /* Activa conjuntos estilísticos */
font-variant-alternates: stylistic(ss01); /* Alternativa moderna */
}font-feature-settings: Permite controlar características OpenType específicas. Por ejemplo:"ss01"activa el conjunto estilístico 1."onum"activa números proporcionales."zero"usa el «Slashed Zero» (cero con barra).
font-variant-alternates: Es una forma de usar un alias más semántico para algunas opciones estilísticas.
Ejemplo práctico
Si quieres usar «Alternate a (straight tail)» que podría corresponder al conjunto estilístico ss01:
p {
font-family: "NombreDeLaFuente";
font-feature-settings: "ss01";
}¿Qué es eso de ss?
Pues creo que se refiere a stylographic style y justamente coincide con el orden que está definido en la fuente. Es posible que esto sea una coincidencia en mi fuente, pero es una forma de ir probando poco a poco hasta encontrar cuál es la que quieres si no tienes documentación.
Es posible que un grupo / conjunto modifique uno o varios elementos, así que ten cuidado: el primer grupo que elijas no tiene por qué ser válodo. Prúebalo en un componente donde tengas todo el abecedario escrito para ver lo que cambia.
Consideraciones a tener en cuenta
- Compatibilidad: Asegúrate de que la fuente que usas en la web soporte las características OpenType que necesitas.
- Fuente personalizada: Si estás utilizando una fuente personalizada, puedes incluirla en tu proyecto web con
@font-face.
Ejemplo de integración de una fuente personalizada:
@font-face {
font-family: "NombreDeLaFuente";
src: url("ruta-a-la-fuente.woff2") format("woff2");
}
p {
font-family: "NombreDeLaFuente", sans-serif;
font-feature-settings: "ss01";
}Con un 98% de compatibilidad de navegadores, será muy pocos casos en los que tu diseñador de confianza te llame para criticar que algo no se ve bien. ¡Busca fuentes de este tipo y prueba!