Tamaño de fuente en Tailwind CSS: texto, zoom y adaptación

El tamaño de fuente en Tailwind CSS se controla con utilidades como text-base y text-xl. Elige un tamaño legible para el diseño más estrecho, acompáñalo de un interlineado deliberado y añade cambios adaptables cuando el contenido los necesite. Comprueba después ampliación, saltos de línea y espaciado personalizado en el navegador antes de dar la tipografía por terminada.

Trabajaremos con un panel ficticio de preferencias de cuenta: título, explicación, campo de correo y acción de guardar. Las clases y pruebas propuestas son ejemplos iniciales, no umbrales universales de accesibilidad. El resultado buscado es contenido legible que soporte cambios, con una revisión que otra persona pueda repetir.

Elige tamaño e interlineado juntos

Empieza por tres funciones: un título que identifica el panel, un texto que explica las consecuencias de un cambio y una etiqueta que identifica el campo. Asigna un tratamiento repetible a cada función. Un panel compacto rara vez necesita todos los peldaños de una escala; demasiados tamaños pueden dificultar la jerarquía y su mantenimiento.

La referencia de tamaños de Tailwind recoge las utilidades y sus interlineados predeterminados. En un tema sin modificar, text-base utiliza 1rem. Su equivalencia habitual de 16px presupone una raíz de 16px; puede cambiar con la configuración personal o del proyecto. Comprueba el estilo calculado antes de convertir esa equivalencia en una regla de documentación.

Para el panel proponemos text-2xl/8 en el título, text-base/6 en el párrafo y text-sm/6 en la etiqueta. Expresan tamaño e interlineado juntos. La documentación de interlineado explica la sintaxis con barra. Con el espaciado predeterminado, /6 produce 1.5rem de altura de línea; no significa multiplicar por seis el tamaño de letra.

Lee el párrafo en varias líneas con la fuente prevista cargada. Revisa tildes, descendentes y enlaces dentro del texto. Si queda apretado, compara otro interlineado manteniendo tamaño y ancho. Así sabes qué ajuste ayuda. Modificar a la vez tamaño, ancho y fuente impide explicar por qué mejora la lectura en esa muestra concreta.

<h1 class="text-2xl/8 font-semibold">Preferencias de la cuenta</h1>
<p class="mt-3 text-base/6">Elige dónde recibir las novedades de tu cuenta.</p>
<label class="block text-sm/6 font-medium" for="email">Correo electrónico</label>

Adapta el texto a los anchos útiles

Toma como punto de partida el diseño más estrecho que deba funcionar. El título debe identificar el panel sin desplazar innecesariamente la explicación y el primer campo. Prueba títulos largos antes de decidir si un tratamiento mayor aporta algo en escritorio. Un breakpoint permite cambiar una regla; no obliga a ampliar todas las funciones tipográficas.

Tailwind aplica las utilidades sin prefijo a todos los anchos y las que tienen prefijo desde el ancho mínimo correspondiente. La guía de diseño adaptable describe este enfoque. En nuestro ejemplo, text-2xl/8 es la base y md:text-3xl/9 cambia el título en el breakpoint md predeterminado. El cuerpo puede conservar text-base/6 en ambos casos.

Revisa el mismo párrafo en anchos estrechos, intermedios y amplios. Limita deliberadamente su contenedor en una pantalla grande para evitar una línea interminable. Ese ancho máximo es una decisión de diseño que debes contrastar con el contenido; no garantiza un número constante de caracteres para todas las fuentes e idiomas que utilice la aplicación.

Compara «Preferencias de comunicación de la cuenta» con el título inglés. Deja que ambos salten de línea y comprueba que el bloque siguiente baja. Evita fijar la altura del título para alinear dos maquetas. Para organizar las tarjetas que lo rodean, consulta la guía de tarjetas adaptables con Tailwind Grid.

<section class="mx-auto w-full max-w-2xl p-6">
  <h1 class="text-2xl/8 font-semibold md:text-3xl/9">Preferencias de la cuenta</h1>
  <p class="mt-3 max-w-prose text-base/6">Elige dónde recibir las novedades de tu cuenta.</p>
</section>

Comprueba ampliación y redistribución

Separa la ampliación de texto y la redistribución en el registro de revisión. La primera pregunta si siguen disponibles contenido y acciones cuando crece el texto. La segunda comprueba si la lectura corriente cabe en la presentación estrecha requerida sin desplazarse horizontalmente por cada línea. Una captura móvil atractiva no responde por sí sola a ambas preguntas.

La explicación de WAI sobre ampliación del texto describe el requisito de admitir hasta el 200% sin pérdida de contenido o funcionalidad, con sus excepciones. La de redistribución del contenido contempla lectura vertical en un ancho equivalente a 320 píxeles CSS, salvo partes que necesitan una disposición bidimensional por su uso o significado. Anota qué condición has comprobado.

En este panel, amplía la página al 200% en un navegador compatible e intenta leer la explicación, cambiar el correo y llegar a Guardar. Examina después el caso estrecho por separado. El zoom de página y la ampliación exclusiva del texto pueden afectar de manera distinta al diseño: incluye los mecanismos pertinentes para los navegadores y preferencias que debas admitir.

Si algo desaparece, inspecciona el contenedor antes de reducir la letra. La causa puede ser una altura fija, un panel que recorta contenido o una sola línea forzada. Permite que el párrafo crezca y las acciones bajen. La guía de buscadores y acciones sin desbordamientos desarrolla decisiones relacionadas cuando varios controles compiten por el ancho.

Admite espaciado personal sin perder contenido

Conserva una copia de trabajo para comprobar ajustes personales de espaciado. Aumenta simultáneamente separación de líneas, párrafos, letras y palabras; inspecciona después texto y controles. Buscamos descubrir las partes que presuponen una sola línea o una caja de altura constante. Guarda una captura anterior y otra posterior, junto con la etiqueta que haya causado el problema.

La explicación de espaciado de texto de WAI contempla valores de al menos 1,5 veces el tamaño de letra para interlineado, dos veces después de los párrafos, 0,12 veces entre letras y 0,16 entre palabras. Son ajustes para comprobar adaptación, no valores predeterminados obligatorios. La fuente recoge también las excepciones pertinentes para idiomas y sistemas de escritura.

En el ejemplo, la etiqueta debe conservar su relación con el campo cuando ocupe dos líneas. El párrafo de ayuda tiene que empujar el campo hacia abajo, no taparlo. La acción de guardar debe mostrar su texto completo. Aumentar la altura del panel es aceptable en esta propuesta; esconder la última frase para conservar la silueta anterior impide completar la tarea.

Repite los ajustes en el ancho más estrecho y en otro más amplio. Retíralos después y confirma que el diseño ordinario sigue funcionando. Anota método, navegador, área visible y fallo observado. «Supera la prueba de espaciado» resulta demasiado ambiguo cuando otra persona necesita reproducir las mismas condiciones dentro de unas semanas.

Utiliza la muestra de EmviUI como referencia visual

La muestra real de EmviUI que aparece a continuación presenta caracteres Inter y tratamientos de texto y display con distintos pesos. Ayuda a comparar jerarquías antes de aplicar clases. La web de EmviUI describe un kit editable y un sistema de diseño para Figma con correspondencias Tailwind. Determina la función en el diseño editable y verifica la implementación en el navegador.

La imagen no muestra CSS calculado, tamaño raíz ni comportamiento de un formulario operativo. Sus nombres de muestra no prueban que una clase concreta esté asignada a una capa determinada. La propuesta text-base/6 de esta guía es independiente de la captura. Inspecciona el archivo editable y el tema del proyecto antes de deducir correspondencias a partir de los píxeles.

Selecciona un tratamiento de cuerpo y otro de título para las preferencias. Registra función, clase, interlineado y muestra de contenido más larga revisada. Si necesitas definiciones de texto reutilizables en Figma, consulta la guía de variables tipográficas. Es una tarea de autoría distinta: aquí la aceptación depende de lo que sucede en la interfaz implementada.

Diagnostica el tamaño incorrecto antes de añadir excepciones

Si text-xl parece menor de lo previsto, inspecciona primero el tamaño calculado y la regla que lo establece. Confirma el elemento seleccionado, la condición adaptable activa y las personalizaciones de la escala. La diferencia con una captura es un síntoma: añadir un valor arbitrario antes de identificar la regla ganadora puede volver menos predecible el siguiente componente.

Si el tamaño coincide pero el aspecto no, compara fuente cargada, peso, interlineado y ancho del contenedor. Mantén el mismo contenido durante esa comparación. Una fuente de sustitución puede producir otros saltos con idéntico tamaño numérico. Anota la causa observada en lugar de atribuir el fallo a Tailwind o al archivo de diseño sin una comprobación controlada.

Si se corta una etiqueta, revisa altura de caja y desbordamiento. Si todo un párrafo resulta demasiado ancho, inspecciona contenedor y saltos. Si solo cambia el resultado en escritorio, revisa reglas de breakpoint. Esta clasificación ayuda a reparar la relación responsable sin convertir un defecto local en una reducción global del tamaño del cuerpo.

Cuando funcione la corrección, aplícala a otro panel con textos distintos. Pide que otra persona repita las pruebas de ampliación y espaciado siguiendo las instrucciones. La decisión compartida está preparada cuando otro consumidor responde de forma predecible y conserva la tarea, no solamente cuando la primera captura se parece a la referencia que querías reproducir.

Registra una comprobación tipográfica repetible

Prepara una tabla breve con muestra de contenido, ancho, ajuste del texto, comportamiento esperado y resultado observado. Incluye el panel inglés habitual, el título español más largo, una etiqueta de dos líneas y un párrafo con enlace. Son casos de prueba propuestos; no representan participantes de investigación ni mediciones de velocidad de lectura.

Entrega una tarea concreta: cambiar el correo de notificaciones y guardar. En cada condición debe ser posible identificar el título, leer la consecuencia, localizar la etiqueta y alcanzar la acción. Si falla un paso, registra el contenido ausente o la acción bloqueada y la corrección mínima de disposición que permita recuperar la tarea.

Guarda la muestra aceptada con la documentación del componente. Revísala cuando cambien fuente, idioma, contenedor o escala. Ajustar un peso puede ser pequeño, pero sustituir la familia o estrechar el panel altera las condiciones que daban sentido a la revisión anterior. Conserva la muestra y su resultado para poder comparar el siguiente cambio con un punto de partida conocido.

Reproduce y corrige una etiqueta recortada

Crea una versión desechable del panel con una etiqueta deliberadamente larga: «Correo electrónico para avisos de seguridad y notificaciones de la cuenta». En este ejercicio, asigna una altura fija a su contenedor y aplica después los ajustes personales de espaciado. Observa si la segunda línea permanece visible o coincide con el campo. Es una prueba propuesta con un defecto introducido a propósito, no un fallo observado en EmviUI.

Describe el problema con un resultado visible: «La segunda línea queda oculta al modificar el espaciado». Anota tamaño calculado, interlineado, altura de caja y regla de desbordamiento. Conserva la clase tipográfica y elimina únicamente la altura fija de la etiqueta en la copia de trabajo. Repite la condición. Si ahora aparece la segunda línea y el campo baja, tienes evidencia de que esa restricción causaba este fallo concreto.

Comprueba también la corrección con una etiqueta corta. Debe admitir ambas muestras sin reservar un hueco vacío inexplicable bajo todos los textos de una línea. Repite después el caso inglés: “Email address used for security and account notifications.” Acepta distinto número de líneas cuando lo necesite el contenido; conserva la relación entre etiqueta, campo y explicación de ayuda.

Compara por último el panel anterior y el corregido en el ancho original y sin ajustes personales. Mantén el cambio mínimo que puedas justificar. Si eliminar la altura revela otra dependencia de alineación en la fila, regístrala y corrige esa relación de disposición. Reducir la fuente para ocultar el síntoma perjudicaría precisamente las condiciones de ampliación y espaciado que debe admitir el panel.

Añade ambas muestras y la condición que ya funciona a la nota del componente. Así, la siguiente persona tendrá una razón reproducible para permitir que crezca la etiqueta. Evitas que esa decisión parezca una excepción arbitraria y desaparezca durante una futura limpieza visual sin que nadie repita la prueba que la justificaba.