Archivo de la etiqueta: tipografía

Aplicación para el diseño de tipografías: Prototyp-0 de Byte Foundry

El trabajo de diseño tipográfico es una disciplina que siempre me ha maravillado y que, como no ejerzo, me trae un cierto halo de misterio y creatividad desbordante. En definitiva, parece que requiere mucho tiempo y conocimiento por parte de los diseñadores que se aventuran. Sin embargo hoy Yannick Mathey ha venido a ponernos la miel en los labios con lo fácil que podría ser.

La aplicación Prototyp-0 está concebida para el dibujo de caracteres. Yannick Mathey (Byte Foundry) la diseñó para solventar una necesidad propia y cuenta con un proceso automatizado que acelera el proceso de creación, generando así en un tiempo muy corto un gran número de fuentes tipográficas completas. Para que coincida con el criterio del creador, la aplicación permite configurar una veintena de parámetros. Igualmente puedes aplicar dichos parámetros para trabajar una sola letra o en secuencia: tus ajustes se verán reflejados instantáneamente en todos los glifos. Asimismo, Yannick Mathey propone el uso de sus marcadores de la aplicación para “proyectar la parte más creativa y experimental del usuario con idea de descubrir nuevas e inesperadas formas“.

Esto abre un sin fin de posibilidades para los diseñadores tipográficos —ya sean expertos o recién iniciados— que quieran esbozar ideas; diseñadores gráficos que deseen jugar con las tipos para el desarrollo de logotipos, etc. No puedes perderte el video de la muestra:

Font generator / processing : prototyp-0 from yannick mathey on Vimeo.

Por qué sí puedes usar Garamond en la web

Garamond

David Kadavy escribió hace unos días un interesante artículo donde explicaba las complicaciones de usar una tipografía tan conocida como Garamond en nuestro diseños web. Extrapolando el mensaje de su artículo, se reformula la pregunta: ¿es recomendable usar tipografías con serifa en la Web?

El motivo que me anima a escribir este artículo es intentar completar el artículo de Kadavy con algunos detalles sobre metodología de trabajo. Si bien es cierto que existen una serie de normas que todos debemos acatar independientemente del medio, un diseñador web no debería trabajar la tipografía tal y como lo hace un diseñador gráfico.

Cuando un diseñador gráfico elabora un diseño para la imprenta se enfrenta a una serie de problemas que están íntimamente relacionados con la labor física y mecánica de la imprenta. Sin embargo, un diseñador web no debería entender la tipografía como algo estático, fijo, ni siquiera físico. Un diseñador web debe considerar la tipografía como un elemento dinámico en cuerpo y forma que depende del dispositivo del usuario. Esta es la diferencia, por lo tanto, entre un diseñador gráfico y un diseñador web que trabajan con la tipografía:

  • El diseñador gráfico entenderá la elección tipográfica como un ideal inamovible y procurará que ésta llegue al usuario, intentando solventar todos los inconvenientes técnicos sin dejar de vigilar la legibilidad de la misma.
  • El diseñador web debería entender la elección tipográfica como un conjunto de posibilidades condicionado por el dispositivo con el que navega el usuario.

Por ello, la cuestión de la tipografía en la web no se ha de reducir a serifa sí, serifa no. La cuestión es tomar como epicentro del diseño al mismo usuario, que condicionará el resultado gráfico final:

  1. Las tipografías deberán tener tamaño porcentuales en relación al tamaño de la pantalla y así mismas (%, em, small, medium, large, etc)
  2. Podemos forzar la elección de un juego tipográfico (Google Font Directory, @font-face), pero ser flexibles con los cambios en nuestro diseño, según el dispositivo de navegación, nos asegurará una audencia mayor
  3. La elección no se ha de limitar a un único juego tipográfico. Podemos agrupar posibilidades dependiendo de las tipografías con las que cuente el usuario en su dispositivo
  4. Las hojas de estilos deberán detectar el dispositivo y ofrecer una alternativas tipográfica en relación al medio utilizado.

En relación a este último punto, podemos ayudar a usuarios cuyo dispositivo tenga una pantalla de menor tamaño (dispositivo móvil, principalmente) —donde leer un texto con serifa es, obviamente, una dificultad—. Para ello debemos detectar los medios a través de los que accede un usuario a nuestro sitio:

 

Y en la Hoja de Estilos de dicho medio ofrecer las alternativas tipográficas (u otros valores relacionados con el diseño):

p {font-family: sans-serif;}

Además de todo esto, actualmente el diseñador web cuenta con el apoyo de un gran soporte de la regla @font-face, así como una colección de navegadores para distintos dispositivos que apuestan por un suavizado (antialiasing) a la hora de renderizar CSS.

Por lo tanto, un diseñador gráfico y un diseñador web comparten la raiz de los problemas tipográficos, pero no la metodología de trabajo, ni mucho menos las soluciones, por las condiciones de cada medio.

El futuro de la tipografía en la web

Google Font Directory

Conforme se van asentando las bases de un nuevo modelo de producción de sitios y aplicaciones con la llegada de HTML5, nacen nuevas necesidades a las que grandes empresas como Google, como no, ya tenían previsto dar soporte o van solventando sobre la marcha.

Nuevos recursos, nuevas necesidades

Éste es el caso de nuevas propiedades de las hojas de estilos en cascada de tercer nivel, que desde hace ya aproximadamente un par de años vienen proponiendo soluciones desde el código CSS para problemáticas estrictamente visuales que se han ido asentando en la nueva cultura visual de la web participativa (bordes redondeados, sombras en los elementos, un mayor catálogo tipográfico, etc).

En concreto y actualmente, la regla @font-face —a través de la que el diseñador web puede proponer una mayor riqueza tipográfica para la web— tiene un soporte mayoritario por los actuales navegadores. Pero no todo es jauja. De esta ventaja nacen los siguientes problemas que se han de solventar:

  • Cargar un archivo de fuente aumenta notablemente la tasa de transferencia de un sitio ya que cada visita suma al servidor las peticiones del archivo. Teniendo en cuenta las actuales velocidades de conexión, en principio esto afectaría sólo a sitios con un contrato modesto en su servicio de hospedaje.
  • Al igual que otro tipo de material, los catálogos tipográficos cuentan con licencias y derechos de autor que no siempre promueven la filosofía del Creative Commons

De dónde venimos, a dónde vamos

Teniendo en cuenta estos factores y que anteriormente la regla @font-face tenía un soporte minoritario, dos grandes alternativas han sido hasta ahora sIFR o Cufón. Su continuidad es incierta, pero podríamos teorizar con su paulatino desuso por los siguientes motivos:

  • sIFR depende de Flash —y Flash tiene un futuro incierto—. Además el juego completo de sIFR (archivos css, javascript, actionscript y objetos flash) es tanto o más pesado que embeber el archivo de fuente original.
  • Cufón es menos pesado que sIFR, pero su implementación sigue siendo más tediosa que usar la regla @font-face.

Font Directory: las soluciones de Google y las posibles soluciones de otros

Así pues, es en este justo momento en que @font-face tiene mayor soporte por todos los navegadores y sitios de referencia implementan su aparición (p. ej: Smashing Magazine, algunas plantillas en Tumblr), cuando Google sorprende —no nos extraña, coincidiendo con su evento Google I/O 2010— con Google Font Directory: un catálogo tipográfico libre que podemos utilizar aplicando la regla @font-face sin necesidad de realizar las peticiones del archivo fuente a nuestro propio servidor. Solventando de esta manera las dos limitaciones que señalábamos anteriormente.

Dando un pequeño salto en el futuro y conociendo el rechazo que provoca el esfuerzo de omnipresencia que hace Google por acompañarnos en todas nuestras tareas como diseñadores y desarrolladores —y aún peor: en nuestro momentos de ocio en la red—, no sería de extrañar que algún aventurado emprendedor abra una cuña de mercado dando alternativas a este servicio.

Imaginad una empresa mediadora entre los derechos de autor de los catálogos tipográficos que ofrece servicios premium de gestión de fuentes (un buen catálogo y hospedaje) a desarrolladores; una especie de YouTube de las tipografías. Esta es la primera idea, si hay algún emprendedor en la sala seguro que se le ocurre alguna más.

Conclusiones

En cualquier caso queda patente que la llegada de HTML5 y el soporte total de CSS3 ofrecerán las ventajas que ya hemos releído en infinidad de sitios, abrirán la puerta a nuevos modelos de negocio —o el fomento de algunos ya existentes— y sobre todo enriquecerán el diseño de la red.