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í:
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.
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…
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.
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:
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:
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.
