Propiedad CSS font-variant-caps
La propiedad CSS font-variant-caps permite seleccionar glifos alternativos para versalitas, petite caps y titling caps. Ver valores y ejemplos.
La propiedad CSS font-variant-caps controla el uso de glifos alternativos para letras mayúsculas, como versalitas, petite caps y titling caps. En CSS1 y CSS2 estas se seleccionaban a través de la propiedad más amplia font-variant; en CSS3, font-variant se convirtió en una abreviatura y font-variant-caps se separó como su propia propiedad longhand.
Esta página cubre qué hace cada valor, cuándo utilizarlo, la diferencia entre font-variant-caps y text-transform, y la advertencia de OpenType que determina si se ven versalitas reales o un sustituto.
Los valores disponibles son:
normalsmall-capsall-small-capspetite-capsall-petite-capsunicasetitling-caps
Cuando una fuente incluye glifos de letras mayúsculas en diferentes tamaños, font-variant-caps selecciona los más adecuados. Si una fuente no incluye glifos de versalitas dedicados, el navegador los sintetiza escalando hacia abajo los glifos en mayúscula regulares — por lo que el efecto siempre funciona, pero un resultado sintetizado luce menos refinado que una tipografía de versalitas verdaderamente diseñada.
El renderizado real depende, por lo tanto, de la compatibilidad con las características OpenType de la fuente.
Por qué usar font-variant-caps
Las versalitas son una convención tipográfica, no solo un truco de estilo. Utiliza font-variant-caps cuando quieras:
- Acrónimos y abreviaturas (NASA, HTML, PDF) que mantengan el peso visual del texto en minúsculas circundante en lugar de destacar con mayúsculas de altura completa.
- Subtítulos, líneas de autor o la línea de apertura de un artículo para que se distingan sin cambiar el tamaño o el peso de la fuente.
- Texto legal o encabezados corrientes donde importa un color uniforme y refinado a lo largo de la línea.
A diferencia de text-transform: uppercase, font-variant-caps no cambia el texto subyacente — los lectores de pantalla siguen leyendo el formato original, y el resultado utiliza glifos diseñados específicamente en lugar de mayúsculas agrandadas. Prefiere font-variant-caps siempre que el objetivo sea el estilo tipográfico en texto que ya tiene el formato correcto.
| Valor inicial | normal |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a ::first-letter y ::first-line. |
| Heredable | Sí. |
| Animable | No. |
| Versión | CSS3 |
| Sintaxis DOM | object.style.fontVariantCaps = "petite-caps"; |
Sintaxis
Sintaxis de la propiedad CSS font-variant-caps
font-variant-caps: normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps;Ejemplo de la propiedad font-variant-caps:
Ejemplo de la propiedad CSS font-variant-caps con los valores all-small-caps, small-caps y normal
<!DOCTYPE html>
<html>
<head>
<title>The title of the document </title>
<style>
.all-small-caps {
font-variant-caps: all-small-caps;
}
.small-caps {
font-variant-caps: small-caps;
}
.normal {
font-variant-caps: normal;
}
</style>
</head>
<body>
<h2>Font-variant-caps property example</h2>
<p class="all-small-caps">
The font-variant-caps CSS property controls the use of alternate glyphs for capital letters.
</p>
<p class="small-caps">Small caps!</p>
<p class="normal">Normal caps!</p>
</body>
</html>Resultado
![Propiedad CSS font-variant-caps](https://api.w3docs.com/uploads/media/default/0001/03/ceee914d009da29a1afecc4c3ff8691af0fdd54b.png "Renderizado de la propiedad CSS font-variant-caps con small-caps, all-small-caps y texto normal" =420x)
font-variant-caps vs. text-transform
Es fácil confundir font-variant-caps: small-caps con text-transform: uppercase. Parecen relacionados pero se comportan de manera diferente:
<!DOCTYPE html>
<html>
<head>
<title>small-caps vs. uppercase</title>
<style>
.smallcaps {
font-variant-caps: small-caps;
}
.upper {
text-transform: uppercase;
}
</style>
</head>
<body>
<p class="smallcaps">The agency known as nasa.</p>
<p class="upper">The agency known as nasa.</p>
</body>
</html>En el primer párrafo, las letras minúsculas se muestran como versalitas mientras que el texto original en minúsculas se preserva (un lector de pantalla sigue leyendo "nasa"). En el segundo, todas las letras se fuerzan a mayúsculas de altura completa y el texto renderizado lee "THE AGENCY KNOWN AS NASA". Usa font-variant-caps para el refinamiento tipográfico y text-transform cuando realmente necesites cambiar el formato de las letras.
Valores
| Valor | Descripción |
|---|---|
| normal | No se activa el uso de glifos alternativos. |
| small-caps | Muestra versalitas. Los glifos de versalitas usan la forma de las letras mayúsculas, pero se reducen al tamaño de las letras minúsculas. |
| all-small-caps | Muestra versalitas tanto para letras mayúsculas como minúsculas. |
| petite-caps | Muestra petite caps. |
| all-petite-caps | Muestra petite caps tanto para letras mayúsculas como minúsculas. |
| unicase | Muestra una mezcla de versalitas para letras mayúsculas con letras minúsculas normales. |
| titling-caps | Muestra titling caps. |
Nota: initial e inherit son palabras clave globales de CSS y se pueden usar con cualquier propiedad CSS.
Compatibilidad con navegadores
| Navegador | Compatibilidad |
|---|---|
| Chrome | 48+ |
| Edge | 79+ |
| Firefox | 34+ |
| Safari | 9.1+ |
| Opera | 35+ |
Nota: font-variant-caps forma parte de la abreviatura font-variant. Al usar la abreviatura, incluye explícitamente font-variant-caps para preservar su valor, ya que otros valores de la abreviatura pueden sobreescribirlo.
Propiedades relacionadas
font-variant-caps es una de las varias propiedades longhand que controla la abreviatura font-variant. Las propiedades hermanas permiten ajustar con precisión otras características OpenType:
font-variant-ligatures— controla las ligaduras comunes, discrecionales e históricas.font-variant-numeric— elige entre cifras alineadas/de estilo antiguo, fracciones y ordinales.font-variant-alternates— selecciona alternativas estilísticas y de caracteres que proporciona una fuente.font-feature-settings— la vía de escape de bajo nivel para cualquier característica OpenType mediante su etiqueta de cuatro caracteres.text-transform— cambia el formato real de las letras del texto.