Tamaño de fuente en móvil: por qué el texto del cuerpo no es de 12px y qué tamaños usar
El texto del cuerpo en un móvil es de 17 pt en iOS y 16 sp en Android. Doce es un pie de foto y 11 es el mínimo. Pon los inputs a 16 px para que Safari no haga zoom y deja que el texto crezca. Incluye los 11 tamaños de iOS.
El texto del cuerpo en un móvil no es de 12 px. El tamaño de cuerpo por defecto de Apple es de 17 puntos y el de Material es 16. Doce es un pie de foto, y una pantalla escrita en pies de foto es una pantalla que la gente mira entrecerrando los ojos. Abajo tienes las cuatro reglas y el conjunto completo de tamaños de iOS para sacarlas.
Por qué el 12 px aparece una y otra vez
Los mockups se dibujan en un monitor grande, con el diseño ampliado para que quepa. A esa distancia el 12 se ve ordenado y el 17 se ve estridente. Así que los tamaños se eligen por lo pulcros que quedan en el marco, y el marco no es el teléfono.
Luego el teléfono se sostiene a la distancia del brazo, bajo el sol, por alguien que camina. Esos mismos 12 px ahora son pequeños, deslumbrantes y se mueven. Pulcros en el archivo, cansados en la mano.
La solución es dejar de elegir tamaños a ojo. Ambas plataformas publican una escala tipográfica, y los tamaños que contiene se probaron en dispositivos reales a distancias de lectura reales. Toma tus números de ahí.
Arreglo 1: cuerpo a 17
Cuerpo a 12 pt
17 pt, Body de iOS
En iPhone el estilo Body por defecto es de 17 pt con 22 pt de interlineado. En Android, Body Large de Material es de 16 sp con 24 sp de interlineado. En la web, el valor por defecto del navegador es 16 px. Tres plataformas, tres unidades distintas y una sola respuesta: el texto de cuerpo vive entre 16 y 17.
Los textos largos son los que más exigen esta regla. Una etiqueta de una línea puede ser pequeña y sobrevivir. Un párrafo que alguien tiene que leer hasta el final, no. Si la pantalla tiene un párrafo, debe ir en tamaño de cuerpo, y la línea extra que genera es el precio de que te lean.
Arreglo 2: nada por debajo de 11
Doce no está prohibido. Tiene nombre: Caption 1. Está pensado para la letra pequeña bajo una foto o una marca de tiempo, texto al que se le permite pasar desapercibido. El texto de cuerpo no es eso.
Once es el mínimo. Caption 2 en iOS es de 11 pt, y es el estilo de texto más pequeño que ofrece Apple. El estilo más pequeño de Material, Label Small, también es de 11 sp. Cuando ambas plataformas se detienen en el mismo número, un diseño que baja de ahí escribe un texto que ningún sistema escribiría.
Usa los estilos pequeños solo para información secundaria: marcas de tiempo, unidades, líneas legales, la etiqueta diminuta bajo un icono de pestaña. Si es información que alguien necesita para actuar, no es un pie de foto.
Arreglo 3: inputs a 16
Input a 15 px
Input a 16 px
Esta es una regla web, y sorprende porque nada en el campo parece estar mal. Safari en iOS hace zoom en un input de texto cuando su tamaño de fuente es menor de 16 px. A 16 px o más, no. El zoom no se deshace solo, así que la persona tiene que hacer pellizco para alejar antes de ver el resto del formulario.
La solución es una línea de CSS, y no debería ser "desactivar el zoom" en la etiqueta viewport. Bloquear el zoom le quita una herramienta a quien la necesita. Mejor fija el tamaño de letra del input.
Arreglo 4: deja que crezca
Altura fija
Las líneas se parten
Tu 17 es un punto de partida, no una promesa. La gente sube el tamaño de texto en Ajustes, y iOS les permite ir mucho más allá del valor por defecto hasta sus tamaños de accesibilidad, donde Body llega a 28 pt en el primer paso y a 53 pt en el mayor. Los usuarios de Android hacen lo mismo con la escala de fuente.
Prueba tus pantallas en los tamaños más grandes antes de lanzarlas. Busca tres cosas: texto cortado con puntos suspensivos, texto que se solapa con su vecino y una etiqueta de botón que ya no cabe. La cura es siempre la misma. Deja que la línea se parta, deja que la fila crezca y deja de fijar alturas.
En la web la misma idea significa dimensionar el texto en rem en lugar de px, para que siga el ajuste de tamaño de texto del propio navegador. WCAG pide que el texto pueda redimensionarse hasta un 200 por ciento sin perder contenido ni función.
Los 11 tamaños de texto de iOS
| Estilo | Tamaño / interlineado (pt) | Úsalo para |
|---|---|---|
| Large Title | 34 / 41 | La parte superior de una pantalla principal |
| Title 1 | 28 / 34 | Pantallas de sección |
| Title 2 | 22 / 28 | Subsecciones |
| Title 3 | 20 / 25 | Títulos de tarjetas y grupos |
| Headline | 17 / 22 | Títulos de fila, seminegrita |
| Body | 17 / 22 | Párrafos y texto de lectura |
| Callout | 16 / 21 | Texto de apoyo |
| Subhead | 15 / 20 | Líneas secundarias bajo un título |
| Footnote | 13 / 18 | Notas y metadatos |
| Caption 1 | 12 / 16 | Letra pequeña |
| Caption 2 | 11 / 13 | El mínimo |
Estos son los tamaños con el ajuste de texto Large por defecto de iOS. Solo existen once por una razón: una escala corta es fácil de tener en la cabeza y fácil de mantener coherente en todas las pantallas.
Los equivalentes de Android son Body Large a 16 / 24 y Label Small a 11 / 16 en Material 3.
Pásale esto a tu desarrollador
:root {
--text-body: 1.0625rem; /* 17 px, iOS Body */
--text-callout: 1rem;
--text-footnote: 0.8125rem;
--text-floor: 0.6875rem; /* 11 px, never lower */
}
body { font-size: var(--text-body); line-height: 1.3; }
/* 16 px or more stops iPhone Safari zooming into the field */
input, select, textarea { font-size: 1rem; }
En iOS, usa los estilos de texto del sistema (.body, .footnote) para que Dynamic Type funcione gratis. En Android, define el texto en sp, no en dp, para que siga el ajuste de escala de fuente.
FAQ
¿Cuál es el tamaño de fuente mínimo para una app móvil?
11, en ambas plataformas. Caption 2 en iOS es de 11 pt y Label Small en Material 3 es de 11 sp. Cualquier cosa que la gente necesite leer para actuar debería ser mucho más grande.
¿Qué tamaño de fuente debe tener el texto del cuerpo en iPhone?
17 pt. Es el valor por defecto del estilo Body de iOS, con un interlineado de 22 pt, y crece cuando la persona aumenta su tamaño de texto.
¿Qué tamaño de fuente debe tener el texto del cuerpo en Android?
16 sp. Es Body Large en Material 3, con un interlineado de 24 sp.
¿Son 12px demasiado pequeños para el texto del cuerpo?
Para el texto del cuerpo, sí. Corresponde al estilo Caption 1 de iOS, pensado para la letra pequeña. El texto de lectura debería ir entre 16 y 17.
¿Por qué mi página hace zoom cuando toco un input en iPhone?
Safari en iOS hace zoom en los inputs de texto cuyo tamaño de fuente es menor de 16 px. Pon el input a 16 px o más y se detiene.
¿Debería dejar que el texto escale con el ajuste del sistema?
Sí. La gente sube su tamaño de texto en Ajustes por buenas razones, así que diseña filas y botones que se partan y crezcan en vez de cortar el texto.
Fuentes
- Apple Human Interface Guidelines, Typography: los estilos de texto de iOS en el tamaño Large por defecto, en puntos. Body 17/22, Callout 16/21, Subhead 15/20, Footnote 13/18, Caption 1 12/16, Caption 2 11/13, Large Title 34/41, Title 1 28/34, Title 2 22/28, Title 3 20/25, Headline 17/22. Body es 28/34 en el primer tamaño de accesibilidad y 53/62 en el mayor.
- Material Design 3, Typography: Body Large 16/24 sp, y Label Small 11/16 sp como el estilo más pequeño.
- CSS-Tricks, 16px or Larger Text Prevents iOS Form Zoom (Chris Coyier, 2021): Safari en iOS hace zoom en inputs de 15 px o menos, no en los de 16 px o más.
- WCAG 2, 1.4.4 Resize Text: el texto puede redimensionarse hasta un 200 por ciento sin pérdida de contenido ni función.
- Las muestras de esta página están escritas en Inter con los tamaños de Apple, no en SF Pro de Apple. El texto de la tarjeta y de la fila de ejemplo está inventado para esta página.
- Publicado por primera vez como carrusel en UX Brainy.
Want type that stays readable on every phone and every text size setting? Our team designs and builds mobile UI with the type scale decided once.
Get Started
