Redeseño HA! (Parte 2 — Tipografía)

Segundo post, dunha serie escrita en tempo real, sobre o redeseño da web historia-arte.com

Ver versión traducida a español

A tipografía é a base de calquera proxecto de deseño gráfico, máis importante que calquera outro aspecto como a cor, formas, iconas e incluso o espazo en branco. Na web, onde a maioría da información que se consume é textual, a súa importancia é primordial. Por iso quixen comezar este proceso de redeseño definindo un novo sistema tipográfico que estableza a base de todo o que veña a continuación.


Recolección

O primeiro paso foi facer unha pequena recolección do que hai actualmente, analizar todos os formatos que se están usando, as necesidades que hai e usar esta información para definir unhas novas bases tipográficas sólidas. O resultado deste traballo de recolección está resumido mais ou menos así:

Algunhas mostras tipográficas da web actual, agrupadas por xerarquía

HA! emprega dúas tipografías, unha de pau seco xeométrica (Geomanist) e outra con serifa (PT Serif). Existen 8 tamaños distintos de texto: 13.4px, 14.4px, 16px, 20px, 24px, 28px, 32px e 48px.

En xeral o uso que se fai da PT Serif está destinado a textos longos e entradiñas principais, mentres que a Geomanist emprégase para todo o resto: títulos, subtítulos, elementos de navegación, etc. Aínda que atopei varias incoherencias, como algúns textos de navegación que usan PT Serif.

Aínda que o texto usa a PT Serif, as negriñas estan en Geomanist

Outro detalle que decidira no seu día foi o uso da Geomanist para as negriñas dentro dun texto con PT Serif. O motivo principal foi que as negriñas da PT Serif apenas se percibían, sobre todo cando o texto estaba en cor clara sobre fondo escuro.


Novas tipografías

Gustaríame manter esta dualidade de serifa/pau seco, pero cambiando as familias tipográficas. Para a serifa estiven buscando algo un chisco menos clásico e que cumprise as seguintes características:

  • Altura do x grande, que sexa moi lexible en pantalla.
  • Cunhas certas proporcións xeométricas, para que combine ben coa tipografía de pau seco que tamén é xeométrica.
  • Versión negriña contrastada, para non ter que usar a tipografía de pau seco, como se facía ata agora.

Estiven mirando varias opcións, comparándoas e probando como se vían nos distintos dispositivos. Quería que o proceso contase cun certo repouso, xa que moitas veces unha opción pode parecer ideal un día e ao día seguinte, vela con novos ollos e non convencer. Durante varios días mantiven unha páxina web onde se podía ver unha mostra das distintas opcións. Cada vez que tiña acceso a un dispositivo conectado a internet (un móbil, un ordenador, etc), o primeiro que facía era visitar esa páxina para comprobar como se vían as letras nesa pantalla.

A tipografía seleccionada foi a Solitas Serif. Ao poder usar a versión regular gratuitamente permitiume probala uns días antes de comprar o resto de variantes necesarias (italic e bold). Ademais naquel momento coincidiu que estaba rebaixada un 60% na sección de Ofertas especiais de MyFonts. Casualidade? non o creo…

Solitas Serif, elegante elección para textos

Para a tipografía sen serifa, a idea inicial era seguir empregando a Geomanist, pero revisando o resto de catálogo de atipo, atopeime con Archia que seguía sendo xeométrica pero de formas máis arquitectónicas e bastante máis personalidade.

Archia, a tipografía que non pasa desapercibida

Creando unha escala

Os 8 tamaños distintos que había parecíanme excesivos, así que mellor definir un novo sistema de tamaños. Cada proxecto require dun método distinto. Google emprega unha escala de 12, 14, 16, 20 e 34 píxeles no seu Material Design. IBM usa unha escala algo máis complexa no seu sistema Carbon e Apple ten un avanzado sistema dinámico que depende de moitas variables como o tamaño de dispositivo, preferencias de usuario ou tipografía usada.

Para o proxecto HA! pensei en usar unha escala tipográfica modular, concretamente decidinme por seguir a proporción áurea, como homenaxe a este número máxico presente na natureza, no deseño e por suposto na arte. Este método de traballar coa tipografía non é nada novo. Tim Brown xa escribiu sobre el hai uns anos poñendo como exemplo precisamente a proporción áurea, e creou esta utilísima calculadora en liña para axudarnos a facer as contas. Existe tamén outras opcións como Type Scale que resulta especialmente útil se vas a usar Google fonts.

A tipografía que usei para o novo sistema de deseño foi a Archia partindo de 1em (o equivalente a 16px) como unidade base. Os tres seguintes valores na escala modular áurea son 1.61em, 2.61em e 4.23em.

Para a Solitas Serif creei unha escala paralela, partindo dun tamaño un pouco máis grande (1.3em), xa que é a tipografía para textos longos e precisa dun tamaño máis cómodo para facilitar a lectura. O resto de tamaños tamén seguen a mesma proporción áurea. Este tratamento especial para esta tipografía deixa ver que no deseño tampouco debemos obsesionarnos polas matemáticas e que moitas veces é preciso realizar correccións e intervencións humanas.

En pantallas pequenas, como as dun móbil, esta escala tipográfica non funciona tan ben, xa que os valores altos son demasiado grandes. É necesario unha proporción máis reducida, polo que usei a terceira maior, ou o que ven sendo o mesmo: 1.25. A modo gráfico, podemos ver o resultado na seguinte imaxe:

Comparación das escalas das dúas tipografías e a súa aplicación nos distintos tamaños

Interpolación

Podemos facer que a transición entre a escala para tamaños pequenos e grandes se realice suavemente por medio dunha interpolación, grazas a unha técnica chamada CSS locks que Tim Brown nos explica neste artigo. Este método é un pouco complexo tecnicamente pero o resultado, tamén visible nesta páxina, ben vale a pena:

Interpolación da nova escala tipográfica de HA!

Nun futuro poderemos conseguir o mesmo efecto máis facilmente cando inclúan font-min-size e font-max-size na próxima versión de CSS, permitindo poder establecer un tamaño de letra proporcional sen saírse duns límites mínimos e máximos.

E para concluír

Aínda que estas escalas están creadas a partir da tipografía, a idea é que os tamaños non se empreguen unicamente para texto, senón que sirvan para o resto de elementos da interface como botóns ou espazos en branco. Unha das vantaxe de usar esta metodoloxía é a súa escalabilidade, permitindo en calquera momento introducir novos valores no noso sistema no caso de seren necesarios. Precisamos un tamaño máis grande? Podemos calcular facilmente o seguinte valor da nosa escala.

Ata aquí todo o traballo realizado en torno a tipografía e os tamaños que sentarán as bases do novo sistema de deseño.