Javier Castellanos
Portfoli digital
,

Tipus de lletres utilitzades


Objectiu

Documentar quines tipografies utilitza el portfoli, justificar-ne l’elecció amb criteris de llegibilitat, jerarquia i coherència amb la imatge corporativa, i explicar-ne la combinació.

Pas 1: Obrir els estils tipogràfics

A Aparença > Editor > Estils > Tipografia es veuen les lletres que s’apliquen al text, als títols i als enllaços del tema Unibiz.

Editor de estilos, apartado Tipografía: fuente Host Grotesk con 12 variantes

Tipografia triada

El tema té registrada com a font predefinida la família Host Grotesk, una lletra de pal sec (sans-serif) moderna. L’he triat pels criteris següents:

  • Llegibilitat: les lletres de pal sec es llegeixen bé en pantalla, també en mides petites i en mòbil.
  • Coherència: fer servir una sola família a tot el lloc dóna un aspecte uniforme. La combinació no depèn de barrejar fonts, sinó de jugar amb els pesos i les mides d’una mateixa família.
  • Imatge corporativa: el portfoli té un estil tecnològic (fons fosc, colors cian, violeta i rosa). Una grotesca moderna encaixa amb aquesta imatge.

He comprovat al tema que només es registra aquesta família, en sis pesos (300 Light, 400 Regular, 500 Medium, 600 SemiBold, 700 Bold i 800 ExtraBold) i amb la versió cursiva de cadascun. Per això no hi ha una barreja de dues fonts: la combinació es fa amb els pesos. Els títols grans van en pesos alts (700-800) per destacar, i el text de lectura en pes regular (400), de manera que es distingeix la jerarquia sense perdre la coherència.

Tema:            Unibiz 1.0.9
Famílies:        1  (Host Grotesk)
Pesos normals:   300, 400, 500, 600, 700, 800
Pesos cursiva:   300, 400, 500, 600, 700, 800

Jerarquia visual

La jerarquia es crea amb la mida, el pes i el color, no amb fonts diferents. El títol de la portada és molt gran, en negreta gruixuda (pes 800) i amb degradat de colors, de manera que és l’element que es veu primer. Els títols de les entrades van en blanc, les dates en lletres petites, majúscules i separades, i els paràgrafs en un gris blavós més suau. El text del tema també disposa de mides predefinides (petita, mitjana, gran…) que s’adapten a l’amplada de pantalla.

Comprovació a tot el lloc

Es visiten la portada, una entrada i una categoria per comprovar que la mateixa tipografia i la mateixa jerarquia es repeteixen arreu.

Portada completa del portfolio: cabecera, cifras de PageSpeed, secciones, últimas entradas y banner final

Resultat final

El portfoli utilitza una tipografia coherent, llegible i adaptada a la imatge corporativa, amb una jerarquia visual clara a tot el lloc.


jcastellanos Avatar

Cada mòdul, un professor

Passa el cursor o toca un mòdul per conèixer qui l'imparteix.

OC

Programació i Web

Oscar Cascan