Rediseño HA! (Parte 2 — Tipografía)
Traducción al español del segundo post, escrito en tiempo real, sobre el rediseño de la web historia-arte.com. Ver la versión original en gallego
La tipografía es la base de cualquier proyecto de diseño gráfico, más importante que cualquier otro aspecto como el color, formas, iconos e incluso el espacio en blanco. En la web, donde la mayoría de la información que se consume está en formato textual, su importancia es primordial. Por eso decidí empezar este proceso de rediseño definiendo un nuevo sistema tipográfico que establezca la base de todo lo que venga a continuación.
Recolección
El primer paso fue hacer una pequeña recolección de lo que hay actualmente, analizar todos los formatos que se están usando, las necesidades que hay y usar esta información para definir unas nuevas bases tipográficas sólidas. El resultado de este trabajo de recolección está resumido más o menos así:
HA! utiliza dos tipografías, una de palo seco geométrica (Geomanist) y otra con serif (PT Serif). Existen 8 tamaños distintos de texto: 13.4px, 14.4px, 16px, 20px, 24px, 28px, 32px e 48px.
En general el uso que se hace de la PT Serif está destinado a textos largos y entradas principales, mientras que la Geomanist se utiliza para todo lo demás: títulos, subtítulos, elementos de navegación, etc. De todas modos encontré varias incoherencias, como algunos textos de navegación que usan PT Serif.
Otro detalle que había decidido en su momento fue el uso de la Geomanist para las negritas dentro de un texto con PT Serif. El motivo principal fue que las negritas de la PT Serif apenas se percibían, sobre todo cuando el texto estaba en color claro sobre fondo oscuro.
Nuevas tipografías
Me gustaría mantener esta dualidad de serifa/palo seco, pero cambiando las familias tipográficas. Para la serifa estuve buscando algo un poco menos clásico y que cumpliese las siguientes características:
- Altura de la x grande, que sea muy legible en pantalla.
- Con unas ciertas proporciones geométicas, para que combine bien con la tipografía de palo seco que también es geométrica.
- Versión negrita contrastada, para no tener que usar la tipografía de palo seco, como se hacía hasta ahora.
Estuve mirando varias opciones, comparándolas y probando cómo se veían en los distintos dispositivos. Quería que el proceso tuviese un cierto reposo, ya que muchas veces una opción puede parecer ideal un día y al día siguiente, al verla con otros ojos, no acabar de convencer. Durante varios días mantuve una página web donde se podía ver una muestra de las distintas opciones. Cada vez que tenía acceso a un dispositivo conectado a internet (un móvil, un ordenador, etc), lo primero que hacía era visitar esa página para comprobar como se veían las letras en esa pantalla.
La tipografía seleccionada fue la Solitas Serif. Al poder usar la versión regular gratuitamente me permitió probarla unos días antes de comprar el resto de variantes necesarias (italic y bold). Además en aquel momento coincidió que estaba rebajada un 60% en la sección de Ofertas especiales de MyFonts. Casualidad? no lo creo…
Para la tipografía sin serifa, la idea inicial era seguir empleando la Geomanist, pero revisando el resto de catálogo de atipo, me encontré con Archia que seguía siendo geométrica pero de formas más arquitectónicas y bastante más personalidad.
Creando una escala
Los 8 tamaños distintos que había me parecían excesivos, así que mejor definir un nuevo sistema de tamaños. Cada proyecto requiere de un método distinto. Google utiliza una escala de 12, 14, 16, 20 y 34 píxeles en su Material Design. IBM usa una escala algo más compleja en su sistema Carbon y Apple tiene un avanzado sistema dinámico que depende de muchas variables como el tamaño del dispositivo, preferencias del usuario o tipografía usada.
Para el proyecto HA! pensé en usar una escala tipográfica modular, concretamente me decidí por seguir la proporción áurea, como homenaje a este número mágico presente en la naturaleza, el diseño y por supuesto en el arte. Este método de trabajar con la tipografía no es nada nuevo. Tim Brown ya escribió sobre el hace unos años poniendo como ejemplo precisamente la proporción áurea, y creó esta utilísima calculadora online para ayudarnos a hacer las cuentas. Existen también otras opciones como Type Scale que resulta especialmente útil si vas a usar Google fonts.
La tipografía usada para el nuevo sistema de diseño fue Archia, partiendo de 1em (o equivalente a 16px) como unidad base. Los tres siguientes valores en la escala modular áurea son 1.61em, 2.61em y 4.23em.
Para la Solitas Serif creé una escala paralela, partiendo de un tamaño un poco más grande (1.3em): al ser la tipografía para textos largos, necesita un tamaño más cómodo para facilitar la lectura. El resto de tamaños también siguen la misma proporción áurea. Esta pequeña excepción nos enseña que en el diseño tampoco nos debemos obsesionar demasiado con las matemáticas y que en ocasiones es necesario realizar correcciones e intervenciones humanas.
En pantallas pequeñas, como las de un móvil, esta escala tipográfica no funciona tan bien, ya que los valores altos son demasiado grandes. Es necesario una proporción más reducida, por lo que usé la tercera mayor, es decir: 1.25. A modo gráfico, podemos ver el resultado en la siguiente imagen:
Interpolación
Podemos hacer que la transición entre la escala para tamaños pequeños y grandes se realice suavemente por medio de una interpolación, gracias a una técnica llamada CSS locks que Tim Brown nos la explica en este artículo. Este método es un poco complejo técnicamente pero el resultado, también visible en esta página, bien vale la pena:
En un futuro podremos conseguir el mismo efecto más fácilmente cuando se incluyan font-min-size y font-max-size en la próxima versión de CSS, permitiendo poder establecer un tamaño de letra proporcional sin salirse de unos límites mínimos y máximos.
Y para concluir
Aunque estas escalas están creadas a partir de la tipografía, la idea es que los tamaños no se utilicen únicamente para texto, sino que sirvan para el resto de elementos de la interfaz como botones o espacios en blanco. Una de las ventajas de usar esta metodología es su escalabilidad, permitiendo en cualquier momento introducir nuevos valores en nuestro sistema en caso de ser necesarios. Necesitamos un tamaño mas grande? Podemos calcular fácilmente el siguiente valor de nuestra escala.
Hasta aquí todo el trabajo realizado en torno a la tipografía y los tamaños que sentarán las bases del nuevo sistema de diseño.
