Medidas tipográficas en la web

Autores: Miguel Catopodis y Mauro Gullino.

Texto seleccionado para la publicación del V Congreso Internacional de Tipografía, Valencia, España (2012)

 

Introducción

La desaparición del cuerpo físico de la tipografía, a partir de los sistemas de fotocomposición y la posterior irrupción de la tecnología digital, generó una serie de interrogantes que atañen a la tipometría en torno a las dimensiones ópticas reales de la letra, así como en los modos de asignar tamaño y medir la tipografía. Tras la desmaterialización del tipo metálico, no existe un elemento corpóreo como el que antes determinaba el cuerpo del carácter tipográfico. En el contexto actual, cobra especial relevancia el tamaño visual de la tipografía.

Durante su fase de diseño, las fuentes digitales recurren al espacio eme como valor de referencia para otorgar dimensiones a los nuevos caracteres. No obstante, el punto en su versión Postscript, sigue siendo la unidad de medición más frecuente. De algún modo, el punto Postscript alcanzó la categoría de unidad estándar. Usuarios profesionales y no especializados recurren a ella al componer todo tipo de textos. En la Web, además del punto, la tipografía puede ser medida por medio de otras unidades, como veremos más adelante. El avance de la tecnología en las pantallas también condiciona las formas de medición del cuerpo tipográfico y cuestiona el concepto mismo de tamaños, distancias y unidades.

 

Unidades y medidas tipográficas en la Web

Aproximadamente el 95% de la información en la Web es escritura en su forma visual, es decir, tipografía. No obstante, en sus orígenes, las tecnologías Web presentaban posibilidades muy limitadas en comparación a la tipografía del mundo impreso. Las distintas plataformas y las tensiones entre fabricantes de hardware y de software hacían impensable un sistema de medición tipográfico homogéneo y confiable.

Las primeras versiones del estándar HTML[1] (Hyper Text Markup Language, en castellano, Lenguaje de Marcado de HiperTexto) contemplaban aspectos muy básicos de la tipografía, limitando severamente las posibilidades de composición tipográfica. El estándar CSS (Cascading Style Sheets o, en castellano, Hojas de Estilo en Cascada) ha representado un gran avance en las capacidades tipográficas de la tecnología Web, que además mejoran con cada nivel de CSS que es lanzado.

CSS es un estándar [2] que define la presentación gráfica de documentos HTML y XML a partir de una serie de reglas. Definen, por ejemplo, cómo se va a visualizar el texto en cierta pantalla, la paleta cromática o cómo debe imprimirse el documento. Cada nuevo nivel de CSS (desde CSS1 hasta CSS3, al momento de escribir este texto), permite incorporar operaciones cada vez más sofisticadas.

¿Para qué sirven las CSS en relación a la tipografía[3]? Permiten, por ejemplo, seleccionar una familia tipográfica determinada; una unidad de medición; un rango de variables; un ancho de caja de texto; alinear dicho texto a la izquierda, a la derecha, centrado o justificado; manejar el interlineado; alterar los espacios de interletra o interletrado; aplicar sangrías; definir colores, etcétera[4].

Una decisión tipográficamente importante al momento de maquetar[5] una página es la elección adecuada de la unidad de medición que van a aplicar las CSS. En un sentido vertical, los elementos de un documento HTML se encuentran relacionados por su ubicación dentro del árbol del documento (ver más abajo). En un sentido horizontal, los distintos documentos HTML que componen un sitio web se ven afectados por una serie de estilos CSS que los modifican simultáneamente. La selección de las unidades de medición afectarán la escalabilidad de la maqueta en el futuro.

Las CSS permiten definir el tamaño de la tipografía mediante parámetros de altura o ancho. Para ello puede emplear diversas unidades. Las más frecuentes son: píxeles (px), puntos (pt), porcentajes (%) y emes (em); de manera ocasional pueden aparecer las picas (pc) y las ex (ex). Existen dos tipos de unidades de medida en CSS: relativas y absolutas. Las unidades absolutas son valores que se encuentran anclados a valores fijos, del mundo físico. Las unidades relativas especifican una longitud que se calcula a partir de otra dimensión. Las unidades relativas en la Web son eme (em), ex (ex) y porcentaje (%); las unidades absolutas son pixel (px), punto (pt), pica (pc), centímetro (cm), milímetro (mm) y pulgada (in). Analicemos estas unidades.

Eme (em): Un espacio eme es un valor utilizado en la tipografía tradicional cuyo medida es idéntica al cuadratín, de hecho ambos conceptos se pueden utilizar como sinónimos. Se trata de una superficie cuadrada cuyos lados miden el cuerpo de la fuente. Equivale al tamaño predeterminado en el navegador del usuario. También puede responder al tamaño de lo que se da en llamar el elemento padre[6]. Por ejemplo, si el tamaño del cuerpo tipográfico por defecto es de 12 puntos, entonces 1 eme equivale a 12 puntos. Si utilizáramos un cuerpo de 2 emes, que supone decir un 200%, generaríamos un cuerpo de 24 puntos. Si en cambio fuera de 0,5 eme (1/2 cuadratín), entonces dicha fuente se visualizará en 6 puntos, la mitad del cuerpo de referencia. Los emes se establecen en unidades decimales, por ejemplo, 0,5 eme ó 1,2 eme.

Píxel (px): La unidad básica de medición en Internet es el píxel. Es una unidad absoluta pero ajustada al dispositivo[7]. En el estándar CSS3 se define cómo debe calcularse el tamaño del pixel de referencia según cada dispositivo en particular. Las pantallas están determinadas por una retícula de píxeles, de modo que el píxel físico utilizado anteriormente es el módulo mínimo que estructura el contenido de la pantalla, en contraposición a este píxel de referencia de CSS3. Las computadoras portátiles, tabletas, eBooks y teléfonos inteligentes ofrecen, de acuerdo al modelo y el fabricante, resoluciones de pantalla que igualan e incluso superan largamente la densidad de píxeles de las computadoras de escritorio (96 dpi). Por esta razón, la unidad pixel ha sido redefinida en el nivel 3 de CSS.

Ex: Está definida por la altura de x de la fuente seleccionada por defecto. Es similar al eme, por tratarse de una unidad relativa, pero se define como el ratio, es decir, la proporción que ocupa el tamaño de la altura de x. De no ser posible determinar la altura de x de una fuente, el navegador otorgará un valor de 0,5. Es importante tener presente las notables diferencias entre las alturas de x. A modo de ejemplo, la x de Centaur dará una proporción de 0,36 ex mientras que Didot puede llegar a un ratio de 0,46 ex[8]. Esta unidad de medida es desaconsejada ya que su cálculo es defectuoso en muchos navegadores y fuentes. Es interesante destacar que existe una regla CSS que permite expresar la relación cuerpo/altura de x: “font-size-adjust”, de manera que si el navegador sustituye una fuente por no estar disponible en el sistema puede recalcular y ajustar el “font-size” aplicado para que se conserve la altura de x. Esto permite mantener el tamaño óptico de los textos en caso de que la fuente especificada no se encuentre y deba reemplazarse.

Porcentaje (%): se trata de una unidad relativa. El cuerpo que se define en porcentaje se calcula en referencia al elemento padre. Se expresa en valores enteros. El tamaño por defecto de la fuente tipográfica es igual al 100%. Así, si el 100% se refiere a un cuerpo de 10 puntos, el 110% va a remitir a un cuerpo de 11 puntos. A la inversa, un 90%, dará en este caso un cuerpo de 9 puntos. La unidad porcentaje es similar a la unidad eme porque permite escalar todos los textos de la página al modificar los valores del elemento padre que actuan como cuerpo de base desde el cual se deducen los demás.

Punto (pt): en Internet esta unidad equivale a 1/72 de pulgada. 12 de estos puntos componen una pica, mientras que 6 picas equivalen a una pulgada. Son unidades que derivan de la tradición tipográfica o bien de sistemas de medición ya establecidos, adaptadas al medio digital.

 

CSS y tipografía

Las CSS definen propiedades y valores que son las que posibilitan la manipulación de la tipografía en pantalla. La propiedad que define el tamaño tipográfico es “font-size”.

body {

font-size: 12 pt;

}

h1 {

font-size: 1.5 eme;

}

Este ejemplo contiene dos bloques de reglas CSS. En el primer caso, el tamaño de la tipografía para el elemento <body> se determina en 12 puntos. En el segundo bloque, la tipografía de los títulos <h1> del documento se setean en 1,5 eme, lo que se traduce como 18 puntos. Es de destacar que todos los títulos se colocan en la sección body, por lo que body “es padre” de todos los títulos (y de todas las otras etiquetas) y actúa como referencia para los cálculos de las dimensiones relativas.

 

Resultados de la investigación

El presente trabajo busca determinar el tamaño tipográfico según parámetros externos al dispositivo, es decir pertenecientes al mundo físico, en distintas plataformas (Microsoft Windows y Mac OSX) y con distintos navegadores web. Para ello se realizaron mediciones en distintas pantallas y se analizaron las unidades de medición de CSS de acuerdo a las consecuencias que generan dichas reglas CSS en la imagen generada por cada navegador. Tiene como objeto explorar, por un lado, el impacto real de las reglas CSS sobre el cuerpo tipográfico real en combinación con las distintas plataformas y pantallas. Por otro lado, exploramos la capacidad de los navegadores en uso actualmente (2012) para escalar la tipografía según la unidad de medida determinada en CSS. De esta manera revisamos las recomendaciones acerca de la dicotomía entre unidades absolutas y relativas.

Para estos fines se utilizó un documento HTML diseñado específicamente, que permite visualizar una misma palabra con un mismo cuerpo tipográfico determinado por distintas unidades CSS (el documento utilizado para el desarrollo de las pruebas puede encontrarse online en: www.maurogullino.com.ar/tipometria). El documento presenta una serie de caracteres, con el tamaño tipográfico indicado en CSS en unidades absolutas (píxeles, puntos o milímetros) y relativas (em). Este documento fue visualizado en distintos navegadores y dispositivos, a los fines de medir el tamaño óptico generado y, a su vez, de analizar la capacidad del navegador para escalar los textos en estudio.

En este sentido, la experimentación confirmó nuestra hipótesis inicial respecto al desajuste existente entre el puntaje otorgado a la tipografía en la definición CSS del documento web y la visualización efectiva de dicha tipografía, la que muestra una serie de variaciones en función del dispositivo, el navegador y el sistema operativo utilizado. En la tabla que se desarrolla en el siguiente punto pueden encontrarse los resultados de tales mediciones. Los tamaños efectivamente observados en pantalla se ven alterados, en mayor o menor medida, debido al dispositivo de visualización. No sólo el tamaño óptico discrepa con el declarado en las reglas CSS sino que existe una dispersión entre las distintas pantallas, lo que llevaría a relativizar el funcionamiento de tales unidades de medición.

Asimismo, la recomendación habitual que sostenía que las unidades relativas son más efectivas ha perdido vigencia ya que durante la experimentación se ha testeado también la capacidad que tienen los navegadores de escalar el contenido del documento web, a través de la interfaz que le ofrece al usuario (generalmente en un ítem del menú denominado “zoom”). En este caso, hemos constatado que la tipografía se escala de manera proporcional e idéntica indistintamente de la unidad de medición indicada. Arribamos a esta conclusión al utilizar un documento con diferentes unidades de medida en variados navegadores, lo que ha podido dar un panorama de las capacidades técnicas de los navegadores actualmente en circulación.

La desaparición del cuerpo físico de la tipografía, primero a causa de las técnicas de fotocomposición y luego debido a la tecnología digital, llevaron a un replanteo de la tipometría tradicional. Ya no existe el soporte metálico que antes determinaba el cuerpo total de un carácter, es decir, parámetros mediante los cuales era posible medir el tamaño de una letra. Lo que se puede medir al ingresar en la segunda década del siglo XXI es lo que se deja ver y ya no el cuerpo de un tipo metálico ausente. De alguna manera, el resultado de nuestra experimentación en entornos digitales pone de manifiesto una complejización en el área de estudio que abarca la tipometría. Las diversas propuestas que tendieron a optimizar aspectos del sistema tipométrico, tales como las de Séamas Ó Brógain, Ernest Hoch o Walter Tracy, en realidad aplican al ámbito de la tipografía impresa y no contemplan las especificidades surgidas en los ultimos años del entorno Web. De esta manera, se déjà planteada la necesidad de ampliar el debate tipométrico, para así dar cabida a la tipografía de los nuevos medios.

 

Mediciones realizadas

En el siguiente cuadro se presentan los resultados que arroja nuestra experimentación:

 

Sistema operativo Navegador Pantalla Tamaño físico de la pantalla Resolución Tamaño
tipográfico
visible
Diferencia con CSS indicado (12pt)
Windows Firefox 10.0.2 LCD externo 19 1280 x 1024 12,5 +4,2%
Windows Chrome 17.0 LCD notebook 15,4 1280 x 800 11,5 -4,2%
Windows Internet Explorer 8.0 LCD notebook 15,4 1280 x 800 11,5 -4,2%
Windows Opera 11.61 TV LCD 32 1920 x 1080 15,8 +32%
Windows Firefox 3.5.5 LCD netbook 8 y 5/8 1024 x 600 8,5 -29%
Mac OS Safari 4.0.5 LCD IMac 24 1920 x 1200 11,8 -1,7%
Mac OS Firefox 11.0 LCD IMac 24 1920 x 1200 12 0%
Mac OS Safari 3.0.4 LCD IBook 12,1 1024 x 768 10,8 -10%
Mac OS Firefox 3.6.28 LCD IBook 12,1 1024 x 768 10,7 -10,8%

El tamaño físico de la pantalla se expresa en pulgadas medidas diagonalmente, la resolución en ancho y alto en pixeles, y el tamaño visible en puntos pica computacional (o punto Postscript).

 

Observaciones finales

El grado de refinamiento tipográfico en la Web es cada vez mayor gracias a los esfuerzos de quienes definen los estándares CSS y de los actores del campo tipográfico que instan al W3C a avanzar en esta dirección. El nivel de control que se posee actualmente sobre la tipografía en documentos web se acerca, aunque lentamente, al del medio impreso tradicional.

Sin embargo debe considerarse que la naturaleza misma de la Web es conceptualmente distinta al medio impreso. En la Web el usuario cuenta con la posibilidad de alterar los tamaños según su voluntad. Incluso la orientación, horizontal o vertical, de la pantalla puede variar en los dispositivos que se manipulan manualmente, como tabletas y teléfonos.

Desde esta perspectiva es posible confiar en que los nuevos desafíos, así como las limitaciones y particularidades del medio, sólo podrán ser resueltas, como siempre, con una dosis de ingenio y buenas decisiones de diseño.

 

Conclusiones

De acuerdo a nuestra investigación surgen 2 importantes conclusiones en relación al cuerpo tipográfico en la Web:

1) No es posible controlar con certeza el cuerpo tipográfico

Ya sea que se utilicen unidades absolutas o relativas, el cuerpo tipográfico se ve afectado por el tamaño de la pantalla del dispositivo que se utiliza. En el caso extremo, el mismo documento presenta cuerpos reales con una diferencia de más de 7 puntos[9], verificados al medir el cuerpo visible en la pantalla.

Debe tenerse en cuenta que el usuario final siempre cuenta con la posibilidad de aumentar o reducir el tamaño óptico de los textos, según su preferencia o necesidades visuales. Esta característica de accesibilidad y usabilidad de la Web determina que, en última instancia, no sea el diseñador quien tenga la decisión final sobre el cuerpo tipográfico observable. Asimismo, habría que considerar que no se trata de una limitación técnica sino de una forma de concebir la Web y el rol del usuario.

Por otra parte, los distintos formatos de pantalla están pensados para funcionar en variadas distancias de lectura, de manera que las pantallas más grandes (donde se demuestra que los caracteres se visualizan a mayor tamaño) son leidos desde una distancia mayor que las pantallas más pequeñas (donde el texto se observa en un tamaño menor). En cierto sentido esto actúa como una compensación, pero de manera no controlable por el diseñador. Así, aparecen discrepancias en los tamaños ópticos de la tipografía aunque se parta del mismo documento.

2) Las unidades absolutas y relativas se escalan correctamente, por igual

La antigua recomendación que sostenía que las unidades relativas son más sencillas de escalar por parte del navegador ha perdido vigencia. Todo texto se escala de igual forma en los navegadores que hemos analizado. Incluso se percibe que los fondos e imágenes se escalan correctamente (aunque este aspecto no forme parte de la presente investigación).

Debe tenerse en cuenta que, más allá de que todas las unidades se escalen correctamente, es preferible la utilización de unidades relativas para el manejo del cuerpo tipográfico. Esto resultará una ventaja para el desarrollador, ya que permitirá adaptar los tamaños en dispositivos problemáticos, sin alterar la estructura de jerarquía visual. Es decir, con sólo modificar el tamaño utilizado como referencia (el del elemento body), todo el documento se adaptará automáticamente. Si utilizamos medidas absolutas, y deseamos agrandar o reducir el tamaño de todos los textos de forma proporcional, nos veremos obligados a modificar todos los valores de manera manual.

 

1 Los orígenes de HTML se remontan a la década de 1990

2 Al igual que muchos otros estándares web, incluyendo HTML, CSS es desarrollado en el contexto de la W3C, un consorcio de empresas y profesionales informáticos. www.w3.org

3I La referencia completa de CSS3 que se encuentra en desarrollo puede ser consultada aquí: http://www.w3.org/TR/css3-fonts/

4 Felici, J. (2011) The complete manual of typography. Adobe Press. Berkeley.

5 La maquetación es la etapa dentro del desarrollo web en la cual el diseño gráfico se traduce a los estándares HTML y CSS, para su visualización y funcionamiento dentro de un navegador web.

6 En los documentos HTML, se define como “padre” a la etiqueta superior a la actual. Por ejemplo, si ubicamos un <strong> dentro de un <p>, dicho p será padre de strong. Suelen representarse los documentos HTML mediante árboles, para esquematizar estas relaciones de filiación entre los elementos.

7 http://www.w3.org/TR/css3-values/#absolute-lengths

8 Haralambous, Y. (2007) Fonts & encodings. O’Reilly. Sebastopol.

9 Véase la tabla con los resultados de nuestras mediciones

 

 

Referencias bibliográficas

Felici, J. (2011) The complete manual of typography. Adobe Press. Berkeley

Haralambous, Y. (2007) Fonts & encodings. O’Reilly. Sebastopol

de Buen Unna, J. (2009) Manual de Diseño Editorial. Ediciones Trea, Gijón

Tracy, W. (1986). Letters of credit. David Godine. Londres

Burnhill, Peter (1996). Type spaces. Hyphen Press. Londres