font-size

Uno de los valores más importante en la accesibilidad web son las medidas. Por ejemplo, el valor de la propiedad font-size se puede declarar de varias maneras: Mediante porcentaje y mediante unidades de longitud.

Carlos Leopoldo nos dice esto:

Las unidades que tenemos disponibles son:

  • Unidades de longitud
    • Unidades absolutas [in (pulgadas), cm (centímetros), mm (milímetros), pt (puntos), pc (picas) y px (pixeles).
    • Unidades relativas (em y ex).
  • Unidades de porcentaje (%).

¿Por qué no debemos utilizar unidades absolutas? Las unidades absolutas como px (pixeles), cm (centímetros), pt (puntos), permiten un control exacto de la apariencia de la página, siempre y cuando, claro está, que esta se visualice en el entorno preciso para el que fue diseñada (lo cuál le quita accesibilidad a la página). Por ejemplo, la unidad px tiene un valor diferente dependiendo de la resolución de la pantalla y el tipo de computadora del usuario. Así, normalmente un sistema operativo Windows mantiene una equivalencia de 96px por pulgada, y un Macintosh 72px por pulgada. Si utilizamos pt (puntos) en lugar de px (pixeles) el tamaño del punto depende de la resolución de la pantalla del usuario. Puedes ver un ejemplo de esto en el siguiente enlace.

La mejor opción es em. De todas estas unidades la que yo les recomiendo son las relativas en especial em anteriormente la unidad em era el equivalente a la altura de la M mayúscula. Sin embargo actualmente es igual a la altura de la letra del elemento en el que se usa. Con este tipo de medidas el autor mantiene un control relativo ya que, en relación con el tamaño de fuente por defecto del usuario, puede especificar cuanto mas grande o mas pequeña se ha de visualizar la letra de la página. Ademas la unidad em puede utilizarse para cualquier propiedad CSS que admita medidas (márgenes, sangrías…) lo que permite un diseño proporcionado al sistema del usuario.

En webstudio.cl, nos dan estas razones:

  • pt (puntos) es una unidad de medida eminentemente tipográfica, sin embargo no es apropiada para la pantalla, por varias razones, entre ellas el hecho de que no es proporcional, pese a que browsers modernos realicen un escalamiento proporcional (Mozilla, Opera). Adicionalmente, un punto no siempre es exactamente equivalente a un píxel: en Windows un punto se traduce a 1.3 píxeles y en Mac el equivalente es uno a uno, por lo que los resultados en diversas plataformas son imprecisos. En conclusión, es mejor utilizar esta unidad de medida para especificar hojas de estilo especiales para impresión.
  • px (píxeles) es una unidad de medida absoluta y mapeada directamente a la resolución del monitor. Si bien es posible (y aconsejable) escalarla.
  • em es una medida inherentemente tipográfica y proporcional, y es la más apropiada para la pantalla.
  • % (porcentaje) es una unidad de medida relativa que se ajusta perfectamente al uso en monitor, pero que puede llevar a ciertas impresiciones conceptuales. Prefiero utilizar porcentajes para especificar bloques en lugar de textos.

El blog Vagabundia también explica muy bien estos conceptos.
También podremos obtener alguna tabla para ver el valor aproximado de los píxeles en EMS. Una tabla que convierte los puntos en píxeles, en Ems y en %., aunque esto depende del sistema operativo, navegador, etc, nos servirá un poco de guía.
PXtoEM es otra herramienta que nos permitirá convertir las unidades de medida en CSS, de unidades absolutas a unidades relativas (de PX a EM).

Su funcionamiento es sencillo, y aquí se explica paso a paso:

  1. En la tabla de la izquierda seleccionamos el tamaño del cuerpo del tipo de letra en la tabla. El tamaño por defecto son 16 px:
  2. px-em-convertir-1

  3. En la tabla pulsamos en cualquier tamaño de texto, por ejemplo, 15px y nos da su respectiva conversión:
  4. px-em-css-2

  5. En la columna de la derecha nos dará los cálculos:

px-em-css

Si pulsamos sobre el botón de conversión nos proporcionará el resultado de dicha conversión.

Hay dos botones en la parte superior muy curiosos:

  • Get CSS“, nos proporciona la creación del código CSS, que se puede personalizar a nuestro gusto.
  • 3. Learn“, nos proporciona una pequeña explicación sobre las fuentes.

Actualización: JHMorales nos expone un método recomendado para no liarse al convertir desde px a EM. Consiste en insertar en la etiqueta body este código:

body {

font-size: 62.5%;

}

De esta forma 1px equivaldrá a 1 EM, y a su vez, 1.4 EM equivaldrán a 14px.
Vía | Cosas Sencillas