text-transform

text-transform es la propiedad CSS que cambia visualmente las mayúsculas y minúsculas del texto sin tocar el contenido real del HTML. Con text-transform: uppercase, el texto aparece en mayúsculas en la pantalla aunque en el HTML esté escrito en minúsculas. El DOM no cambia: si inspeccionás el código fuente o accedés al texto con JavaScript, ves el texto original. Esta separación entre contenido y presentación es el principio central de la propiedad.

La utilidad de text-transform va más allá de la comodidad de no tener que escribir en mayúsculas: permite mantener el texto del DOM en la forma correcta para accesibilidad, SEO y JavaScript, mientras que la presentación visual responde al diseño. Un titular guardado en minúsculas en la base de datos puede mostrarse en mayúsculas en el encabezado y con la primera letra capitalizada en el breadcrumb — con el mismo contenido y distintas reglas CSS. Los lectores de pantalla leen el texto del DOM, no el texto transformado, lo que es generalmente deseable.

text-transform se hereda. Declararlo en un contenedor lo propaga a todos los hijos hasta que alguno lo cancele con text-transform: none. Esto significa que si un <section> tiene text-transform: uppercase, los encabezados, párrafos y spans anidados también quedan en mayúsculas. En componentes complejos, es común tener que resetear explícitamente con none en hijos que no deben transformarse.

Cómo funciona

El navegador aplica la transformación en la etapa de renderizado del texto, después de resolver el DOM pero antes de pintar. El computed value de text-transform es la keyword declarada, no el texto transformado. El texto resultante ocupa un espacio diferente al original (mayúsculas suelen ser más anchas que minúsculas), lo que puede afectar el layout si el contenedor tiene ancho fijo.

.etiqueta   { text-transform: uppercase;  } /* TODO EN MAYÚSCULAS */
.titulo     { text-transform: capitalize; } /* Primera Letra De Cada Palabra */
.subtitulo  { text-transform: lowercase;  } /* todo en minúsculas */
.reset      { text-transform: none;       } /* sin transformación */

Sintaxis

selector {
  text-transform: uppercase | lowercase | capitalize | none;
}

Valores

uppercase — todo en mayúsculas

Convierte todos los caracteres del elemento a mayúsculas. Es el valor más usado, generalmente combinado con letter-spacing para mejorar la legibilidad de etiquetas y badges.

.label     { text-transform: uppercase; letter-spacing: 0.08em; }
.nav-item  { text-transform: uppercase; font-size: 0.75rem; }
.badge     { text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.1em; }

Cuándo usar: etiquetas de categoría, badges (NUEVO, OFERTA), elementos de navegación en diseños donde las mayúsculas son parte del estilo, logotipos textuales. Combinalo con un letter-spacing suave porque las mayúsculas tienden a quedar apretadas visualmente.

lowercase — todo en minúsculas

Convierte todos los caracteres a minúsculas. Menos frecuente que uppercase; aparece en algunos diseños minimalistas o en contextos donde se quiere uniformidad tipográfica independientemente del contenido.

.firma { text-transform: lowercase; }

Cuándo usar: estilos de diseño que requieren consistencia en minúsculas, independientemente de cómo venga el dato (útil cuando el contenido puede llegar con mayúsculas inconsistentes desde el CMS).

capitalize — primera letra de cada palabra en mayúscula

Convierte la primera letra de cada “palabra” (token separado por espacio) a mayúscula. El resto de los caracteres no se toca.

.nombre-producto { text-transform: capitalize; }

Cuándo usar: títulos de productos, nombres propios en listas, encabezados de sección donde querés capitalización consistente sin depender del dato.

Gotcha de capitalize: no es un title-case semántico. Capitaliza mecánicamente la primera letra de cada token separado por espacio, sin respetar reglas tipográficas. Artículos y preposiciones también quedan en mayúscula: "la casa de papel" → "La Casa De Papel". Para title-case semántico real necesitás JavaScript.

none — sin transformación

El valor inicial. El texto se muestra exactamente como está en el DOM, sin ningún cambio de mayúsculas.

.cuerpo { text-transform: none; } /* cancela herencia */

Cuándo usar: para cancelar un text-transform heredado de un contenedor padre.

Cuándo usar qué

Notas, gotchas e interacción

• El DOM no cambia. text-transform: uppercase no altera el HTML. El texto que copia el usuario, el que indexan los buscadores y el que leen los lectores de pantalla es siempre el del DOM. Es exactamente lo que se quiere: la presentación es CSS, el contenido es HTML.
• capitalize y los artículos. Como se mencionó, capitalize capitaliza cada token separado por espacio sin distinción semántica. No hay forma de decirle “menos los artículos”. Si necesitás Title Case real, hacelo en el servidor o con JavaScript antes de insertar el texto en el DOM.
• Las mayúsculas ocupan más espacio. uppercase en un elemento de ancho fijo puede desbordar si el texto en mayúsculas no entra. Revisá los contenedores con ancho rígido cuando apliques uppercase.
• Combinar con letter-spacing. uppercase y letter-spacing: 0.06–0.1em es una combinación habitual: las mayúsculas sin tracking quedan visualmente densas. Las minúsculas generalmente no necesitan este ajuste.
• text-transform y los pseudoelementos ::before / ::after. Los pseudoelementos heredan text-transform de su padre. Si un elemento con uppercase tiene un ::before con contenido textual, ese contenido también quedará en mayúsculas.
• Accesibilidad. Los lectores de pantalla leen el texto del DOM. Si el DOM tiene "nuevo" y CSS muestra "NUEVO", el lector de pantalla dice "nuevo" (o a veces deletrea las letras individualmente si detecta que está en mayúsculas — comportamiento variable por lector). Para accesibilidad, preferí que el DOM tenga la forma que tiene sentido leer en voz alta.

Vigente / legacy

text-transform existe desde CSS1. Los valores uppercase, lowercase, capitalize y none están disponibles en todos los navegadores modernos. No hay forma legacy.

Aprendelo en el recorrido

Esta propiedad se trabaja en el módulo Tipografía y texto, lección Decoración y transformación.