La anatomía de la tipografía web

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

Los diseñadores web deben ocuparse principalmente de dos tipos de aspectos tipográficos esenciales:

• 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 tus 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 la 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.

seguir leyendo en Tuts+