---
title: "CSS: Cómo activar conjuntos estilográficos en fuentes para sitios web"
description: "¿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..."
url: https://dev.adammartin.es/micro-pildora/css-como-activar-conjuntos-estilograficos-en-fuentes-para-sitios-web/
date: 2025-01-23
modified: 2026-08-04
author: "Adam Martin"
type: micro-pildora
lang: es
---

# CSS: Cómo activar conjuntos estilográficos en fuentes para sitios web

¿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:

CSSp {
font-family: "NombreDeLaFuente";
font-feature-settings: "ss01" 1, "ss02" 1; /* Activa conjuntos estilísticos */
font-variant-alternates: stylistic(ss01); /* Alternativa moderna */
}

```
p {
  font-family: "NombreDeLaFuente";
  font-feature-settings: "ss01" 1, "ss02" 1; /* Activa conjuntos estilísticos */
  font-variant-alternates: stylistic(ss01); /* Alternativa moderna */
}
```

1. **`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).
2. **`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`:

CSSp {
font-family: "NombreDeLaFuente";
font-feature-settings: "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

1. **Compatibilidad:** Asegúrate de que la fuente que usas en la web soporte las características OpenType que necesitas.
2. **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:

CSS@font-face {
font-family: "NombreDeLaFuente";
src: url("ruta-a-la-fuente.woff2") format("woff2");
}

p {
font-family: "NombreDeLaFuente", sans-serif;
font-feature-settings: "ss01";
}

```
@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](https://caniuse.com/?search=font-feature-settings), 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!