La anatomía de la tipografía web

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Toda característica de la tipografía puede ser referida por un nombre. Ya sea hables de la familia de fuentes en si, o del arreglo de caracteres dentro de un diseño, existe un enorme glosario de términos que ayudan a describir todo de manera apropiada. Demos un vistazo a los elementos de la tipografía que son importantes para ti, como un diseñador web.

Existen dos aspectos esenciales de la tipografía que se refieren de manera directa a diseñadores web:

Aquellos que influyen en la elección de tu tipo de fuente.
Y aquellos que puedes modificar, normalmente a través de CSS.

Por tanto, es muy importante que seas capaz de argumentar tus criterios y decisiones tipográficas ante los clientes o los miembros de tu equipo. Nosotros no nos vamos a ocupar aquí de todas las minucias sobre los remates o florituras decorativas ni sobre los puntuación diacrítica, en su lugar vamos a hablar de la anatomía de la tipografía, ya que esto afecta a los diseñadores web.

El poder esta en tus manos

Ciertas propiedades tipográficas pueden ser manipuladas mediante CSS Por ejemplo, y quizás la mas importante, la fuente (font-family)

Muy a menudo escucharas la discusión sobre la definición de fuente y la familia de fuentes, y es importante entender la diferencia. Una fuente es la colección empacada de caracteres; tradicionalmente bloques físicos usados en imprenta, hoy en día también incluyendo archivos digitales. En si el es mecanismo de entrega.

(Alguna vez has pulsado este tipo de enlace, ¿cierto?)

Una tipografía es lo que el diseñador crea; el diseño. A mí siempre me ha gustado compararlo con la música; compras un CD (vale, esto lo hacíamos hace unos años) porque te proporciona el medio para escuchar la música. Realmente no estás escuchando el CD. De igual manera seleccionas fuentes para usar las tipografías que estas te suministran.

Mediante CSS podemos determinar las familias de fuentes que preferimos, en orden de preferencia. A esto le llamamos pila de fuentes o “font stack”.

También podemos manipular el grosor de la fuente (font-weight) a través de las hojas de estilo. Mediante el grosor definimos la anchura relativa del trazo de un carácter tipográfico.

Muchas fuentes se crean con distintas versiones según su grosor, descritos como light, regular, book y extra-bold, en ocasiones hay incluso más opciones. Concretamente, podemos determinar el grosor de una tipografía usando la escala TrueType, que va de 100 hasta un máximo de 900, siendo 400 lo que normalmente llamamos regular.

Idealmente las fuentes deberían ser producidas en origen con variantes para los grosores, numéricos o por nombre, con el fin de ser controladas a través de CSS: {font-weight: 300;}, {font-weight: bold;}. Cuando una variante de la fuente no está disponible, los navegadores suelen tomar la iniciativa y renderizándola por sí mismos con el grosor adecuado, no obstante los resultados suelen dejar bastante que desear, no son óptimos.

Caja alta (Uppercase) y caja baja (lowercase) hacen referencia a las letras en mayúscula y en minúscula espectivamente. El término caja tiene su origen en los cajetines usados en la impresión con letras de plomo, la caja alta es para las letras mayúsculas, la caja baja hace referencia a… ya te lo puedes imaginar).

Podemos cambiar la caja, en caso de que debamos hacerlo, por medio de CSS usando la siguiente regla {text-transform: uppercase;} por ejemplo.

Ya que estamos con el tema de la caja de los caracteres, en ocasiones cuando uses la caja alta (especialmente con tamaños de letra pequeños) es aconsejable aumentar el espacio entre caracteres para mejorar la legibilidad (tracking). En CSS llamamos a esto letter-spacing y puede expresarse con valores positivos y negativos, normalmente medido en centésimas de un em.

En términos tradicionales, cuando hablamos de letter-spacing estamos haciendo referencia al tracking. El tracking afecta a la densidad del carácter en su conjunto dentro de un línea o bloque de texto dado. El término tiene su origen de nuevo en los tiempos de la impresión tipográfica, concretamente en la fotocomposición, en la que los caracteres se proyectaban sobre una película a través de una lente. El espacio alrededor de cada carácter podía alterarse moviendo un prisma a lo largo de un riel (track), y de ahí viene el término tracking.

La propiedad CSS word-spacing también puede serte útil. Como ya habrás imaginado, al alterar el valor word-spacing modificarás el espacio entre las palabras, acrecentándolo o disminuyéndolo, lo que también tendrá un impacto significativo en la legibilidad del texto.

Juega con distintos valores para el espacio entre letras en el siguiente bloque de texto y observa por ti mismo cómo influye en la legibilidad.

Con frecuencia se confunde tracking con kerning. El Kerning hace referencia al ajuste del espacio entre dos pares de letras concretas (no a todo un grupo de caracteres), y de nuevo, se utiliza para mejorar la legibilidad.

Una fuente proporcionada, en oposición a una fuente monoespacio, cuyo espacio entre caracteres es uniforme, compensará el espaciado entre ciertos pares de letras que necesiten ajustes adicionales para optimizar su legibilidad y aspecto visual cuando coincidan juntas en un texto.

Por ejemplo, cuando la V y la A mayúsculas coinciden juntas suelen necesitar reducir su kerning para contrarrestar el espacio extra visualmente percibido entre ambas.

De nuevo, tenemos que agradecer este concepto a la imprenta tradicional, cuando los tipos eran bloques de plomo. El kern era la muesca en el bloque metálico del carácter, que le permitía encajarlo en su bloque correspondiente. La posición de estas hendiduras macho/hembra evitaban la ubicación errónea unos caracteres junto a otros.

Dicho esto, el kerning es un proceso asociado con la tipografía de imprenta y no se traslada fácilmente a la tipografía web. Existen herramientas JavaScript, como kerning.js, que pueden ayudar a los diseñadores en la manipulación del espacio entre pares de caracteres, pero CSS todavía no a llegado a conseguirlo.

En términos de CSS, se está trabajando en una propuesta para esta propiedad font-kerning, pero incluso ésta es muy limitada en comparación a la precisión que un diseñador tipográfico puede alcanzar.

Ajustar la propiedad (no estandarizada) text-rendering: optimizeLegibility; mejorará las cosas en algunos navegadores modernos, al optimizar el kerning en algunos pares de caracteres bien conocidos por su problemática en este aspecto. Como ocurre con font-kerning, esto no nos ofrece mucho control y por tanto no es muy útil. También activará el uso de ligaduras cuando estas estén disponibles para una fuente dada, lo que me lleva gratamente a…

Las ligaduras llevan el kerning al siguiente nivel, ofreciendo el reemplazo con glifos para ciertos pares de caracteres. En algunos casos, los caracteres no se emparejarán muy bien, con independencia del cuidado con el que se hayan compuesto, en estos casos se puede diseñar una ligadura. Un ejemplo clásico es la letra f junto a la i, cuando van minúsculas.

Aquí tienes un glifo con el que estarás familiarizado; ¿lo reconoces?

El signo " &” era en origen una ligadura, a cuyo uso nos hemos acostumbrado en sustitución de la conjunción copulativa latina "Et" de la cual deriva y que significa “y” en español.

En algunos casos, las ligaduras son necesarias para ciertas rarezas lingüísticas (posiblemente el carácter alemán ß sea el más conocido) y en otras ocasiones se usan solo con fines ornamentales. Hacemos referencia a estas últimas como ligaduras discrecionales, como cuando se encuentran juntas una c y una t.

En los casos en los que tengas control sobre el contenido de una página web, podrías usar Unicode, o entidades HTML para mostrar ligaduras. Por ejemplo, el código Unicode &64257; te proporcionará el par “fi” que acabamos de mencionar. Si prefieres emplear JavaScript para ayudarte con las ligaduras, puede serte útil ligature.js, aunque no es una herramienta a prueba de bombas.

Si vas a usar CSS para estas situaciones, podrías utilizar text-rendering: optimizeLegibility que ya comentamos con anterioridad, o podrías usar las propuestas font-variant-ligatures que actualmente cuentan con distintos valores como common-ligatures, que se aseguran de que las ligaduras se mostrarán siempre que sea posible. La compatibilidad con todos los navegadores no es completa a día de hoy, pero merece la pena estar atento a los progresos.

Decisiones de Maquetación

Como vamos a explicar en un minuto, las proporciones de una tipografía determinada influyen en el espacio vertical percibido entre líneas. Por tanto es aconsejable considerar un ajuste de interlineado (line-height) específico para cada fuente que uses. Si el espacio vertical es deficiente, provocará que el cuerpo del bloque de texto tenga un aspecto abarrotado que dificultará que nuestro ojo identifique el inicio de la línea siguiente.

Si el espacio es excesivo la lectura se tornará igualmente incómoda.

En el diseño web es siempre aconsejable usar unidades de medida relativas, especialmente en lo concerniente a la tipografía. El interlineado siempre debería estar en función del tamaño de la fuente. Si usamos valores en ems para definir el interlineado, este siempre estará relación al tamaño de la fuente. Echa un vistazo a este ejemplo para ver como afecta a la legibilidad el cambio de los valores de la altura de línea o interlineado:

Tradicionalmente llamamos interlineado al espacio entre líneas (no confundirlo con la altura de línea, “line-height” en CSS), llamado así por unas largas piezas metálicas que se usaban en las imprentas de plomo para aumentar o disminuir el espacio vertical entre líneas de texto.

En la actualidad, cuando se calcula la altura de línea, se añade una valor igual a la mitad del interlineado tanto por encima como por debajo de los caracteres. Por ejemplo, un tamaño de fuente de 36px, con una altura de línea de 54px (1,5em) resultará en 9px de espacio añadido bajo los caracteres y 9px por encima (54 - 36 = 18, 18/2 = 9). En efecto, esto centra el texto en su propia línea.

Avanzando con la anatomía tipográfica controlada mediante CSS, llegamos a la justificación; es decir, la alineación horizontal del texto. En la siguiente imagen el texto está alineado a la izquierda (“bandera izquierda”), pero podría estar alineado igualmente a la derecha (“bandera derecha”), centrado o justificado (cuando tratamos con bloques de texto más largos que el espacio con el que cuenta la línea). La justificación vía CSS se aplica con la propiedad text-align, por ejemplo {text-align: center;}.

El texto totalmente justificado elimina lo que se conoce como margen variable…

…pero puede causar un efecto indeseado en forma de lo que se denominan “ríos”, huecos que forman canales verticales en el bloque del texto.

En el mundo de la maquetación fluida (fluid layouts), en el que la anchura del cuerpo del texto puede ser difícil de concretar, los textos justificados deberían usarse con mucha cautela.

Seleccionar una Tipografía

Seleccionar una tipografía puede ser complicado. Ya sea que estés buscando una para los titulares, para el cuerpo del texto, para los bloques de citas, etc., hay muchos factores en juego. Veamos algunos aspectos fundamentales de la anatomía de una tipografía a los que vale la pena prestar atención.

En primer lugar, ¿se trata de una tipografía con serifas (serif) o sin serifas (sans-serif)? Las serifas son esos trazos adicionales que rematan los trazos principales de una tipografía. Fuentes como la Arial no tienen estos remates, son por tanto fuentes de “palo” o sans-serif (aquí tienes otra lección de francés…).

Se dice que las serifas ayudan a distinguir mejor las letras y seguir el flujo del texto, haciendo que las palabras se perciban más cohesionadas, lo cual facilita la lectura. Sin embargo, en ocasiones, la forma de los caracteres puede ser tan complicada que acaba fatigando al lector y en consecuencia entorpecer la comprensión del texto. Este tema ha sido muy discutido durante décadas y no se ha presentado nunca ninguna evidencia concreta que demuestre cual de los dos tipos de letra es más legible.

En cualquier caso, en ocasiones las fuentes vienen con una versión serif y otra sans-serif, como la fuente PT de ParaType, así que tendrás la oportunidad de elegir la que más te guste.

Habiendo mencionado la legibilidad lingüística, es oportuno que ahora explique brevemente en qué se diferencia de la legibilidad formal. Usamos el termino legibilidad formal cuando nos referimos a detalles tipográficos; la capacidad de reconocer letras y palabras individuales. La legibilidad lingüística tiene un rol más funcional, está relacionada con la facilidad que tendrá un lector para comprender o asimilar un bloque o fragmento texto.

La legibilidad lingüística es obviamente algo de gran importancia. Por este motivo, es sabio tener en cuenta la altura x. La altura x de un tipo describe la altura de su hojo medio (echa un vistazo a la x de una tipografía concreta), desde su línea de base hasta la parte más alta de sus caracteres en minúscula. Las tipografías con una altura x amplia tienden a ser más legibles, especialmente cuando los tamaños de cuerpo son pequeños.

Una amplia altura x tiene un coste sobre las ascendentes y las descendentes, que son lógicamente en proporción más cortas. Esto puede dar la sensación de un menor espacio entre líneas, algo de lo ya hemos hablado con anterioridad.

No sé cómo he llegado hasta aquí sin definir el trazo de un carácter. Si existe un término que es útil para describir la personalidad de una tipografía, es éste. El trazo de un carácter dado puede ser vertical, horizontal, diagonal, e incluso curvado, y dependiendo del trazo en cuestión podría incluso tener un nombre aún más específico.

Al trazo principal, normalmente rectilíneo y grueso, de un carácter se le denomina asta o fuste, dejando el término trazo a para los trazos secundarios (espolón, oreja, ataque, brazos, panzas, etc.). Al trazo horizontal en la parte superior de la letra “T” mayúscula se le denomina brazo, el que se encuentra uniendo el hueco de la “A” o la “H” mayúsculas es denominado travesaño, y la lista continúa…

Los trazos dentro de la forma de un carácter, particularmente en las tipografías serif, puede variar también en estilo y en grosor; siendo "hairline" el trazo más fino de todos los existentes.

Por tanto, algunos trazos, especialmente los curvilíneos, tendrán un grosor que variable a lo largo de extensión. Llamamos a esto modulación. Esta modulación equilibra el peso en conjunto de un carácter y evita que se produzcan áreas excesivamente pesadas en las uniones de los distintos trazos.

Una mala modulación del trazo dará como resultado un carácter tosco y pesado en comparación con el resto del conjunto. David Kadavy llama a esto equilibrio de mancha y normalmente se toma como criterio para definir la calidad de una tipografía bien diseñada. Echa un vistazo a un bloque de texto, después cierra un poco los ojos para captar la impresión de la mancha general que produce.

Esto es Todo por Ahora

Existen millares de glosarios de términos y adjetivos a los que recurrir para describir adecuadamente los elementos tipográficos. Aquí hemos visto algunos básicos, espero que al menos hayas ampliado tu vocabulario con algunos de ellos. Intenta incorporarlos en tu conversación la próxima vez que introduzcas a algún principiante en tipografía, ¡se quedará muy impresionado!