Addaw, ir a inicio Donar

Técnica CSS WCAG 2.2

C12Indicar el tamaño de letra en porcentajes

Nombre oficial en el W3C: Usar porcentajes para el tamaño de la fuente

En pocas palabras

Esta técnica define el tamaño de la letra en porcentajes, por ejemplo font-size: 125%, en lugar de en píxeles fijos. El porcentaje se calcula sobre el tamaño del elemento que lo contiene. Así, cuando la persona agranda la letra en el navegador, todos los textos crecen y mantienen sus proporciones.

Por qué es importante

Muchas personas con baja visión o personas mayores eligen en el navegador una letra más grande por defecto. Otras usan el zoom solo de texto.

Si los tamaños están en píxeles fijos, algunos navegadores ignoran ese ajuste y la letra no cambia. Con porcentajes, el texto parte del tamaño elegido por la persona y crece con él.

Cómo se hace

  1. Deje el texto base del body en 100%. Así respeta el tamaño que tiene elegido cada persona.
  2. Defina los demás tamaños en porcentaje: títulos en 200%, notas en 85%.
  3. Recuerde que el porcentaje se suma por herencia. Un 80% dentro de otro 80% da un texto muy pequeño.
  4. Evite alturas fijas en píxeles en las cajas con texto, para que el texto ampliado no se corte.

Cómo comprobarlo

  1. Con las herramientas del navegador (F12), revise los valores de font-size. Deben ir en porcentaje.
  2. En Firefox, active «Ampliar solo el texto» (menú Ver, Zoom) y amplíe hasta el 200 %.
  3. Compruebe que todo el texto crece y que nada se corta ni se solapa.

Ejemplo

Tamaños de letra en porcentaje para una ficha de producto.

body { font-size: 100%; }
h1 { font-size: 200%; }
.precio { font-size: 150%; }
.nota-legal { font-size: 85%; }
Ver el texto completo del W3C (traducción al español)

Esta es una traducción no oficial al español de la técnica C12 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.

Aplicabilidad

CSS

Descripción

El objetivo de esta técnica es especificar el tamaño de la fuente del texto de forma proporcional, para que los agentes de usuario puedan escalar el contenido de manera eficaz. Si se especifica un font-size para el elemento body, todos los demás elementos heredan ese valor, a menos que un selector más específico lo anule.

Ejemplos

Tamaños de fuente en porcentaje con CSS

Este ejemplo define el tamaño de la fuente del elemento strong de modo que su texto sea siempre mayor que el texto que lo rodea, en cualquier contexto en que se use. Suponiendo que los encabezados y los párrafos usan tamaños de fuente distintos, cada una de las palabras resaltadas de este ejemplo será mayor que el texto que la rodea.

<style>
  strong {font-size: 120%}
</style>
<h1>Letting the <strong>user</strong> control text size</h1>
<p>Since only the user can know what size text works for them, 
it is <strong>very</strong> important to let them configure the text size.</p>

Pruebas

Procedimiento

  1. Comprobar que el valor de la propiedad CSS que define el tamaño de la fuente es un porcentaje.

Resultados esperados

  • La comprobación n.º 1 es verdadera.

Recursos

Cómo lo comprobamos en ADDAW

En cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.

Solicitar una auditoría

Basado en la técnica C12 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.