dimarts, 10 d’agost de 2010

Tipografia per pantalles

Quan vam parlar de la llegibilitat en pantalles es vam centrar en els aspectes que cal tenir en compte per tal de millorar la lectura i l'escaneig de la informació en una pàgina web.
El fet d'utilitzar un o altre tipus de lletra, és un altre aspecte important que té a veure amb factors culturals, estètics i/o tecnològics.
Culturals perquè en el premsa escrita estem acostumats a llegir textes escrits amb tipus de lletra serif (Times, Georgia) i en web normalment sempre s'obta per tipus de lletra sans-serif.
Tecnològics per que els tipus de lletra serif necessiten de més píxels per ser mostrats.
Estètics per que per gustos colors (com se sol dir).

Classificació dels tipus de lletra per forma.

Una forma de classificar els tipus de lletra és segons tinguin o no «serifes». S'entén per serifes, o rematats, les petites línies que es troben en les terminacions de les lletres, principalment en els traços verticals o diagonals. La utilitat de les serifes és facilitar la lectura, ja que aquestes creen en l'ull la il·lusió d'una línia horitzontal per la qual es desplaça la vista al llegir. Les lletres sense serifes o de pal sec, són aquelles que no duen cap tipus de terminació; en general són considerades inadequades per a un text llarg ja que la lectura resulta incòmoda doncs existeix una tendència visual a identificar aquest tipus de lletres com una successió de pals verticals consecutius. Per aquesta raó, les lletres amb serifes (anomenades també romanes) s'utilitzen en la premsa escrita, revistes i llibres, així com en publicacions que contenen textos extensos.
Les lletres sense serifes o de pal sec són usades en titulars, rètols, anuncis i publicacions amb textos curts. En la web, les lletres de pal sec s'han convertit també en l'estàndard per a l'edició ja que per la resolució dels monitors les serifes acaben distorsionant la font. Això es deu al fet que les corbes petites són molt difícils de reproduir en els píxels de la pantalla.
És cert que els navegadors moderns cada cop tracten millors els tipus de lletra serif, sobretot, i és força sorprenent, l'Internet Explorer 8.
Gràcies a API's i generadors varis poden utilitzar més tipus de lletra pel web que les ja existents de sistema.


Combinacions de tipus de lletra en el disseny web.

Sempre s'aconsella no barrejar tipus de lletra en el disseny web, però no deixa de ser un recurs gràfic força usat el fet de fer anar un tipus de lletra serif per títols i/o encapçalaments i un tipus de lletra sans-serif pels continguts.

Al web Bon fx hi ha un interessantíssim article sobre la combinació dels 19 tipus de lletra més utilitzats per dissenyadors.
El llistat de les fonts combinades:
Helvetica / Garamond
Caslon / Univers
Frutiger / Minion
Futura / Bodoni
Garamond / Futura
Gill Sans / Caslon
Minion / Gill Sans
Univers / Caslon
Bodoni / Futura
Myriad / Minion
Avenir / Warnock
Caslon / Franklin Gothic
FF Din / Baskerville
Trade Gothic / Clarendon
Baskerville / Univers
Akzidenz Grotesk / Garamond
Clarendon / Trade Gothic
Franklin Gothic / Baskerville
Warnock / Univers

Un apunt més. Gran article sobre tipografia i llegibilitat en pantalles.


En continuarem parlant...



  • Helvetica / Garamond







  • Caslon / Univers







  • Frutiger / Minion







  • Futura / Bodoni







  • Garamond / Futura







  • Gill Sans / Caslon







  • Minion / Gill Sans







  • Univers / Caslon







  • Bodoni / Futura







  • Myriad / Minion







  • Avenir / Warnock







  • Caslon / Franklin Gothic







  • FF Din / Baskerville







  • Trade Gothic / Clarendon







  • Baskerville / Univers







  • Akzidenz Grotesk / Garamond







  • Clarendon / Trade Gothic







  • Franklin Gothic / Baskerville







  • Warnock / Univers








  • Helvetica / Garamond







  • Caslon / Univers







  • Frutiger / Minion







  • Futura / Bodoni







  • Garamond / Futura







  • Gill Sans / Caslon







  • Minion / Gill Sans







  • Univers / Caslon







  • Bodoni / Futura







  • Myriad / Minion







  • Avenir / Warnock







  • Caslon / Franklin Gothic







  • FF Din / Baskerville







  • Trade Gothic / Clarendon







  • Baskerville / Univers







  • Akzidenz Grotesk / Garamond







  • Clarendon / Trade Gothic







  • Franklin Gothic / Baskerville







  • Warnock / Univers