Tipografías: Unidades de medida / Clasificación y gestión

por Sara en Diciembre 22, 2010

Post 2

Unidades de medida / Clasificación y gestión

Las unidades de medida en tipografía no se emplean de igual manera en el mundo impreso y en el digital. Para tener una buena base, primero nos acercamos al mundo impreso para descubrir que un tipo de letra puede medirse en las siguientes unidades:

• Cícero: Equivale a unos 4,5 mm de altura o 12 puntos Didot.
• Punto Didot: Equivale a 0,375mm de altura.
• Punto DTP: Equivale a 0,352mm. Es la unidad de medida más común.
• Pica: Equivale a 12 puntos DTP.
• Pulgada: Equivale a 25,4mm o 72puntos DTP.
• Milímetro: Equivale a 2,67 puntos Didot.

Para la medición podemos emplear un tipómetro. En el siguiente enlace hay una plantilla disponible por si queremos imprimirnos uno. Lo ideal es hacerlo sobre algún tipo de material transparente. Plantilla de tipómetro.

Con la llegada del ordenador, la autoedición, generalización del uso de Internet y la aparición de las páginas web, era necesario un nuevo sistema de medida que se ajustase a lo que nosotros podemos ver y mostrar por pantalla. Si bien se pueden usar todas las unidades anteriores, se especificaron nuevas unidades de medida relativas y porcentuales. Son mucho más recomendables porque presentan una mayor flexibilidad a la hora de emplearlas. Estas unidades son las siguientes:

• Pixel (px): Unidad relativa a la resolución de salida (resolución de pantalla p. ej.).
• Em (em): Unidad relativa al tamaño de letra empleado.
• Ex (ex): Unidad relativa al tamaño de la X minúscula del tipo de letra que se esté usando.
• % (%): Unidad porcentual basada en el temaño de letra empleado.

Para comprender mejor su uso, veamos un par de ejemplos: Supongamos que en nuestra hoja de estilos CSS hemos definido en la propiedad body un valor de font-size de 10px. Posteriormente definimos un encabezado H1 con un font-size de 2em. ¿Qué conseguimos con ello? Como hemos visto, la unidad Em es relativa al tamaño de letra empleado. Como hemos definido un valor principal  para todo lo contenido en el body de 10px, el texto del encabezado tendrá un tamaño el doble de grande. 2Em equivale a dos veces 10px.

Otro ejemplo: Esta vez no definimos ningún valor en la etiqueta body de nuestro CSS y marcamos un encabezado con un font-size cuyo valor es 150%. Al no definir un font-size en el body, se toma como tamaño de letra base el que venga por defecto en el navegador. El texto que se incluya dentro del encabezado será 1.5 veces mayor que éste ya que hemos marcado su tamaño mediante un valor porcentual del 150%.

También tenemos otra serie de unidades de medida que podemos usar en hojas de estilo CSS con la propiedad font-size:

• xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller.

Se emplean de igual manera pero no ofrecen tanta versatilidad y flexibilidad que las anteriores.

¿Qué unidad de medida es la más recomendable habiendo tantas?

Según la W3C lo más indicado es emplear valores porcentuales o en em de manera que se obtenga una correcta escalabilidad y el aspecto visual permanezca lo más conjuntado posible entre los diferentes navegadores que existen. No obstante por ejemplo si estamos preparando un diseño móvil, cada sistema operativo (Android, IOS, etc…) establecen unos valores diferentes por lo que es mejor usar valores absolutos como los mencionados anteriormente (small, x-small, etc…) Además si estáis empezando os contaré que cada navegador suele ir a su aire e interpretar  los valores de tamaño de una manera diferente. Echad un vistazo a este artículo: How to Size Text in CSS.

Para impresión, evidentemente se recomienda el uso de medidas en puntos o alguna otra medida absoluta. Por tanto, lo ideal es tener siempre una hoja de estilos independiente para cuando se quiera imprimir el contenido de una web. Y ya de paso también os dejo el enlace a una serie de consejos sobre el tema: CSS going to Print.

Y si necesitáis más ayuda sobre este aspecto de las unidades de medida (enfocado principalmente a la web):  Unidades de medida en CSS + Propiedades de las fuentes en CSS + How to Size Text with CSS.

Clasificación y gestión

Además de conocer la anatomía de una letra también es interesante saber que las fuentes se clasifican por categorías con lo que este sistema nos facilita  la tarea de selección. No es lo mismo escoger una fuente para un cartel que anuncie una fiesta de cumpleaños que para un funeral, ¿verdad?

En muchos sitios nos lo ponen realmente fácil. Si nos dirigimos a Dafont o FontSquirrel vemos que todo su catálogo está organizado por categorías. Estas categorías se basan en el aspecto visual de las fuentes lo que nos permite rápidamente escoger una opción que puede adaptarse a nuestras necesidades.

La clasificación principal o básica es distinguir entre fuentes serif y sans serif. La serifa, también conocida como adorno o gracia, es el remate que se añade generalmente en las terminaciones de los caracteres. Un ejemplo de fuente serif es la Times New Roman o la Garamond. Una fuente sans serif carece de estos adornos y también se le conoce como palo seco. Un ejemplo podría ser la Futura, Gill Sans o Frutiger.

Existen otras clasificaciones principales como los tipos de letra manuscritos, los decorativos y los que contienen símbolos. Sobre estos grupos podemos ampliar información en este enlace: Clasificación tipográfica. Pero como ya digo, las maneras de clasificarlas son en algunos casos dispares: Clasificación tipográfica en letrag + Clasificación tipográfica en Wikipedia . Lo que se suele hacer es intercalar en ocasiones la clasificación por época de creación, el objetivo para el que se ha creado o el aspecto visual. Es por ello que difieren (y convergen a la vez) los diferentes sistemas de categorización.

Estos sistemas de clasificación nos pueden ayudar en la tarea de mantener cierto orden en nuestro ordenador con respecto al material tipográfico que tengamos instalado. Aunque la norma habitual es simplemente arrastrar nuevas fuentes a la carpeta de nuestro sistema operativo, lo más recomendable es emplear algún gestor de fuentes para trabajar con mayor comodidad. ¿Acaso es útil tener 600 fuentes instaladas a la vez? No sólo recarga el sistema sino que además es molesto y nos hace perder tiempo a la hora de hacer un –escaneo visual– de lo que tenemos disponible.

Un buen punto de partida puede ser emplear AMP Font Viewer. Es gratuito y apenas consume recursos. También permite activar fuentes temporalmente y está disponible en español. Quizá se pueda echar de menos un sistema de autoactivación y la posibilidad de crearnos nosotros carpetas para gestionar las fuentes. Por eso dí el salto a Suitcase Fusion. No obstante hay muchas más posibilidades. Aquí dejo una comparativa de gestores de fuentes: 25 font Management tools reviewed.

En este segundo post hemos visto las unidades de medida con las que contamos para definir tamaños de una letra, así como su aplicación y peculiaridades en el mundo virtual. También hemos visto que existen diferentes formas de clasificar los tipos de letra y que existen una serie de programas que pueden ayudarnos a mantener orden en nuestro catálogo de fuentes.

Armando Sotoca

Diseñador gráfico y formador de video2brain

  • http://www.miquelperis.com miq

    Hola, post muy interesante y util. Mi pregunta viene despues de pegarse una paliza increible ordenando 5000 tipografias con suitcase fusion 3 y que se jode y las pierdes despues de tantas horas ordenandolo.

    Hay algun gestor que permita que le selecciones las carpetas con las tipografias y te las ordene él mismo automaticamente por alguna clasificación estandar?

    Es decir, se puede evitar ordenar el grueso de tanta tipografia?

    Saludos

  • http://www.criteriondg.info Skeku

    Hola Miq yo particularmente no lo conozco y dudo que exista. Es como pedir un organizador de mp3 que automáticamente organice la música y los hay que lo intentan pero necesitan que los archivos estén correctamente etiquetados. Con esto de las fuentes pasa lo mismo.

    Por si quisieras seguir investigando te dejo este enlace con un artículo que habla sobre gestores de fuentes:

    http://www.smashingmagazine.com/2008/09/05/25-font-management-tools-reviewed/

Publicación anterior:

Publicación siguiente: