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

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.

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

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 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 explica el tracking en general; para mayúsculas en concreto, usa estos puntos de partida.

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 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.

.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;
}

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 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 robusta ayuda en ambos casos. Jerarquía de texto en publicaciones para redes sociales muestra cómo encajan los niveles.

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.