# Texto en mayúsculas: cuándo ayuda y cuándo perjudica

[Canonical HTML page](https://gradiently.design/es/guide/all-caps-typography)

Las mayúsculas dan autoridad a una etiqueta y peso a un titular, y convierten un párrafo en un muro. Aquí verás dónde se ganan su sitio, cuánto espaciarlas y cómo componerlas bien en la web.

## The short version

- El texto en mayúsculas funciona mejor en etiquetas cortas, sobreetiquetas, botones y titulares de pocas palabras.
- Las letras mayúsculas tienen todas la misma altura, así que las palabras en mayúsculas pierden el contorno variado que ayuda a reconocerlas con rapidez.
- Las mayúsculas necesitan más espaciado entre letras: de 0,08em a 0,12em en etiquetas pequeñas y de 0,01em a 0,03em en titulares grandes.
- En la web, escribe el texto en minúsculas normales y aplica las mayúsculas con CSS text-transform, para que al copiar, traducir o leer con lector de pantalla se usen las palabras naturales.
- Los pasajes largos, el texto corrido y todo lo que ya sea ruidoso deben quedarse en minúsculas normales.

El **texto en mayúsculas** ayuda cuando es corto: una sobreetiqueta sobre un titular, una etiqueta, un botón, una fecha o un titular de dos o tres palabras. Perjudica cuando se alarga. Las mayúsculas tienen todas la misma altura, así que una palabra en mayúsculas se vuelve un rectángulo liso en lugar de una forma reconocible, y una frase entera se lee más despacio y suena a grito. Usadas con brevedad y con un poco más de espaciado, las mayúsculas aportan orden y autoridad; usadas para todo, aplanan la jerarquía.

## Por qué cuesta más leer en mayúsculas

Las minúsculas tienen ascendentes (b, d, h, k) y descendentes (g, p, y). Juntos dan a cada palabra un contorno distintivo, y los lectores con práctica lo usan para reconocer palabras conocidas sin deletrearlas. En mayúsculas todas las letras se sitúan entre las mismas dos líneas. El contorno se convierte en una caja y el lector tiene que fijarse más en cada letra. En dos o tres palabras no pasa nada. En un párrafo cansa.

Una publicación vertical donde el titular, la fecha y los detalles están en mayúsculas y compiten por la atención

Todo en mayúsculas: nada destaca porque todo grita.

La misma publicación con solo la fecha en mayúsculas pequeñas y el titular y los detalles en minúsculas normales

Las mayúsculas se reservan para la pequeña sobreetiqueta. El titular y los detalles se leen más rápido en minúsculas normales.

## Cuándo funcionan las mayúsculas

- **Sobreetiquetas y antetítulos**: una pequeña categoría o fecha sobre el titular, como *NOVEDAD* o *EPISODIO 12*. Las mayúsculas indican al lector que es una etiqueta, no contenido.
- **Navegación y botones**: palabras cortas y fáciles de escanear, donde cada elemento es del mismo tipo.
- **Titulares cortos de una a tres palabras**: *REBAJAS*, *YA ABIERTO*, *AGOTADO*. La forma del bloque pasa a ser parte del diseño.
- **Logotipos y marcas denominativas**: muchos logotipos potentes están en mayúsculas, donde la palabra se ve como una imagen fija en lugar de leerse.
- **Etiquetas de datos y encabezados de tabla**: encabezados cortos en mayúsculas sobre las columnas las distinguen de los valores que hay debajo.

## Cuándo perjudican las mayúsculas

### Evita las mayúsculas en

- Texto corrido y párrafos
- Titulares de más de unas cuatro palabras
- Todos los encabezados de una página a la vez
- Tipografías script y decorativas
- Mensajes que deben sentirse tranquilos o amables
- Textos legales y condiciones

### Quedan bien en mayúsculas

- Sobreetiquetas y etiquetas
- Botones y navegación
- Titulares de una a tres palabras
- Tipografías sans y slab robustas
- Rebajas, aperturas y avisos urgentes
- Encabezados de tablas y gráficos

Las tipografías script merecen una advertencia especial: sus mayúsculas están diseñadas para empezar palabras, no para ir juntas, y una palabra en mayúsculas script suele ser casi ilegible. El tono también cuenta. Las mayúsculas suenan fuertes, lo que va bien con unas rebajas y estropea una disculpa. Si dudas entre estilos de mayúsculas para titulares en general, [frase con mayúscula inicial frente a cada palabra en mayúscula](https://gradiently.design/es/guide/title-case-vs-sentence-case) explica las opciones más discretas.

## Cuánto espaciado entre letras necesitan las mayúsculas

Las fuentes se espacian pensando en las minúsculas. Las mayúsculas puestas una al lado de otra, con sus lados rectos y sus formas anchas, se ven apretadas con el espaciado por defecto. Abrir el tracking da a cada letra su espacio y facilita escanear la palabra. Cuanto más pequeño es el texto, más espacio necesita. [Espaciado entre letras](https://gradiently.design/es/guide/letter-spacing) explica el tracking en general; para mayúsculas en concreto, usa estos puntos de partida.

| Uso | Tamaño | Espaciado entre letras |
| --- | --- | --- |
| Etiqueta o sobreetiqueta diminuta | De 11 a 13 px en pantalla, de 28 a 32 px en una publicación de 1080 px | 0,08em a 0,12em |
| Botón o navegación | 14 a 16 px | 0,04em a 0,08em |
| Subtítulo en mayúsculas | 18 a 24 px | 0,04em a 0,06em |
| Titular grande en mayúsculas | 48 px en adelante | 0,01em a 0,03em |
| Palabra de exhibición enorme | 120 px en adelante | 0 a 0,02em, revisa los pares a ojo |

Valores de partida en em, para que el espaciado escale con el tamaño. Ajústalos a ojo según tu fuente.

Las mayúsculas grandes pueden necesitar también kerning manual en pares incómodos como AV, LT y TY, donde el hueco por defecto se ve demasiado ancho. [Tracking frente a kerning](https://gradiently.design/es/guide/tracking-vs-kerning) explica la diferencia entre ambos ajustes.

## Usar text-transform uppercase en CSS

Escribe las palabras en minúsculas normales en tu HTML y aplica las mayúsculas con CSS. Así, al copiar, en los resultados de búsqueda y en las herramientas de traducción se usa texto natural, y evitas que un lector de pantalla trate una palabra escrita en mayúsculas como una sigla y la deletree. Además, te permite cambiar de opinión más tarde sin reescribir nada.

```css
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  font-weight: 600;
  /* Raise hyphens, brackets and colons to suit capitals, if the font has it */
  font-feature-settings: "case" 1;
}

/* Small capitals: lowercase letters drawn as smaller capitals */
.label {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.06em;
}
```

La característica `case` eleva la puntuación para que quede centrada respecto a las mayúsculas. `all-small-caps` ofrece una alternativa más discreta a las mayúsculas completas.

Define también el atributo `lang` de la página. `text-transform` sigue las reglas de cada idioma, lo que importa en palabras como la i con punto del turco, y la [referencia de MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) detalla cómo se trata cada idioma. Las etiquetas traducidas suelen ser más largas que en inglés, y las mayúsculas las ensanchan aún más, así que deja espacio en botones y pestañas.

## Mayúsculas en publicaciones sociales

En un móvil, las mayúsculas a tamaños pequeños pueden resistir mejor que las minúsculas pequeñas, porque sus formas son más simples. Eso las hace una buena opción para los detalles diminutos de una publicación: una fecha, un nombre de usuario, el número de página de un carrusel. Para el titular, usa mayúsculas solo si es muy corto; si no, las minúsculas normales se leen más rápido en el instante en que alguien repara en una publicación. Una [fuente para titulares](https://gradiently.design/es/guide/headline-fonts) robusta ayuda en ambos casos. [Jerarquía de texto en publicaciones para redes sociales](https://gradiently.design/es/guide/text-hierarchy-social) muestra cómo encajan los niveles.

Una story vertical con YA ABIERTO en mayúsculas grandes, una pequeña sobreetiqueta en mayúsculas y una línea de detalle en minúsculas normales

Dos palabras que funcionan en mayúsculas, con los detalles más largos en minúsculas normales debajo.

En Gradiently, el Designer escribe por ti los titulares y los detalles y los compone en tu Mark, y cada palabra sigue siendo editable en el Studio después. Tinta automática mantiene las etiquetas pequeñas en mayúsculas tan legibles como el titular al elegir tipografía clara u oscura para cada línea a partir de la paleta del Mark.

## FAQ

### ¿Es más difícil de leer el texto en mayúsculas?

Si pasa de unas pocas palabras, sí. Las mayúsculas comparten una altura, así que las palabras pierden su contorno reconocible y cuestan más de leer.

### ¿Cuánto espaciado entre letras deben tener las mayúsculas?

Alrededor de 0,08em a 0,12em en etiquetas pequeñas, de 0,04em a 0,06em en subtítulos y de 0,01em a 0,03em en titulares grandes.

### ¿Escribo en mayúsculas o uso text-transform uppercase?

Usa `text-transform: uppercase` sobre texto en minúsculas normales. Así, al copiar, traducir o leer con lector de pantalla se usan las palabras naturales.

### ¿Los titulares en mayúsculas parecen un grito?

Los largos, sí. De una a tres palabras en mayúsculas transmiten seguridad; una frase entera suena a grito.