Texto y Unidades de Medida en CSS

Tuesday 31 de August, 2004, 10:23

Juan Carlos escribe una nota bien documentada, como es usual, sobre tipografía en el web. Su objetivo es tratar de entender las razones detrás del uso de fuentes con o sin serif, pero un comentario secundario capturó mi atención y no puedo evitar el entrar en detalles sobre esto.

De momento, aunque con poca base científica detrás, yo sigo recomendando escribir el cuerpo de los textos más o menos largos en letra sans serif, preferiblemente Verdana o Arial, y en un tamaño de 12 puntos (mejor puntos que pixels, pues los puntos permiten al usuario modificar fácilmente el tamaño del texto).

Evidentemente lo que ha hecho que mis alarmas suenen es la recomendación de usar puntos por sobre otras unidades de medida. Desde hace bastante tiempo que el tema de las unidades de medida para textos se viene discutiendo con bastante pasión en los círculos de die-hards de CSS. En resumen este asunto se puede resumir en lo siguiente, al menos desde mi perspectiva:

  • pt (puntos) es una unidad de medida eminentemente (tipo)grá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, IE no es capaz de hacerlo, al menos hasta la versión 6.
  • 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.

Para sostener estos argumentos y comprobar cómo se tratan las distintas unidades de medida de texto he publicado una página de prueba con texto en puntos, píxeles, ems y porcentajes. Para nadie será sorpresa que Mozilla maneja las unidades de medida de manera formidable, escalando cada una de ellas de modo apropiado. En IE, en cambio, puntos y pixeles no son escalables.

Comentarios para 'Texto y Unidades de Medida en CSS'

  1. 1URIJuan Carlos García, Tuesday 31 de August, 2004, 10:46

    Como dices definir el tamaño en pixels no permite la escalabilidad, al menos, en IE < 6.

    Luego, para permitir la escalabilidad por parte del usuario el tamaño en pixels no es la mejor alternativa ¿no?.

    Tal vez, mi frase entre paréntesis está incompleta, más que incorrecta, y debería haber dicho “unidades escalables” donde digo “puntos”.

    Obviamente, ese no era el tema de ese post, y veo que da para escribir un rato. En este aspecto, también recogía una recomendación de Nielsen quien, como hemos visto, no es dogma de fe. Queda pendiente una revisión a fondo del tema.

  2. 2URINelson, Tuesday 31 de August, 2004, 15:33

    Antes que todo agradezco que entiendas que mi intención no es robarte el tema ni aprovecharme de la discusión, sino más bien el tomar un asunto que en tu desarrollo sobre el uso de fuentes era secundario. Por lo mismo aproveché la oportunidad para escribir algo que hace rato renía pendiente.

    Ahora, respecto a lo que tú mencionas, exacto, pixel en textos no es recomendable por el problema concreto en Explorer. Pese a esto Zeldman utiliza px, pero provee un método para alternar hojas de estilo. Otras técnicas interesantes están en el artículo de Bojan Mihelac, Power To The People: Relative Font Sizes, en Ala.

    Mi voto en esto va por los ems, voy a preparar una explicación más elaborada sobre esto, que es un tema frecuente en mis clases también.

  3. 3URIMilton Mazzarri, Sunday 26 de September, 2004, 14:05

    Hola Nelson, cuando mencionas en tu artículo que la unidad del porcentaje como una medida relativa puede llevar a ciertas impresiciones conceptuales, ¿cuales serín esas impresiciones?. Recientemente leí en el artículo Common Coding Problems with HTML and CSS - Part One de Community MX que IE tiene ciertos problemas con el tamaño del texto, sobre todo cuando éste es modificado desde el menú Ver, esto ocurre cuando el texto esta predefinido en unidades ems, los autores del artículo proponen como solución a este problema establecer como unidad global el porcentaje en la etiqueta body, posteriormente si se puede utilizar la unidad em en todo el resto de la p´gina.

  4. 4URINelson, Monday 27 de September, 2004, 10:52

    Hola Milton,

    efectivamente exiten algunos problemas particularmente con versiones antiguas de IE, como el tratamiento en IE 3 que convertía 1Em a 1pt. El problema particular que mencionas no lo había observado personalmente, probablemente porque mi conversión al uso exclusivo de ems es más o menos reciente y todavía conviven algunos porcentajes entre medio de mis estilos.

    De todos modos el problema que mencionas se refiere a un error de herencia en el tratamiento de las unidades de medida.

    De todos modos, cuando yo me refería al problema de las impresiciones hablaba más que nada al problema conceptual de usar simultáneamente porcentajes para referirse a proporciones cuando lo usas para especificar anchos, altos y en general para medidas de bloques respecto al tratamiento de fuentes.

  5. 5URIAndres, Friday 4 de November, 2005, 18:59

    Hola a todos los que han hecho comentarios.
    bueno yo estoy en eso de utilizar estas medidas pero hasta como veo no me decido con una de ellas, porque siempre tiene algo de desventaja, ahora quisiera saber algun comentario decisivo sobre este tema