dimarts, 24 d’agost del 2010

Implementant altres tipus de lletra en la web: Google Font API

Google Font API que es una col·lecció de fonts gratuïtes que es poden utilitzar via web.
La col·lecció de tipus de lletra de moment encara és una mica reduïda, però, esperem que s'anirà ampliant.
La forma d'utilitzar-la la trobem detallada a Google Labs

Cal tenir en compte algunes coses:
  • El fet d'utilitzar aquestes o d'altres API no implica poder utilitzar la tipografia que vulguem de forma gratuïta, ja que moltes tenen llicència i s’han de pagar per a poder-les utilitzar legalment. A més a més, moltes fonts considerades “lliures” tenen restriccions d’ús en projectes comercials.
  • Algunes fonts no disposen de caràcters especials, accents, etc. Per tant alhora de escollir-les cal revisar-les o només utilitzar-les per llocs web molt concrets.
  • També s'ha de tenir en compte l'atribució de la font, un exemple d'una llicència de font per a web: "Attribution: You must attribute the work in the manner specified by the author or licensor (but not in any way that suggests that they endorse you or your use of the work)."
Read more ...

dimarts, 10 d’agost del 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





  • Read more ...

    dissabte, 7 d’agost del 2010

    WCAG 1.0 i 2.0.

    La interessantíssima validació d'accessibilitat de les WCAG 2.0 que fa el TAW.

    Les tasques de validació i informes sobre accessibilitat web es poden enriquir amb la validació de les WAGC 2.0

    És de molta ajuda la barra d'eines Web developer que incorpora el Firefox que permet en un clic fer una analisi de codi CSS i HTML i poder comprovar insitu el codi resultant.

    Quan accedim a la pàgina del TAW per poder fer una validació online se'ns ofereix la possibilitat de validar seguint les normes de la WCAG 1.0 o 2.0.

    La validació 1.0 es centra en les ja conegudes pautes d'accessibilitat al contingut de la web i ens ofereix un llistat dels problmes i punts d'atenció de la validació automàtica i manual.

    La validació 2.0 segueix preceptes de la web 2.0 en quan a continguts, es a dir, aquest ha de ser perceptible, operable, comprensible i robust.


    En una primera vista resum en ofereix en forma de mini llistat els problemes i advertències trobades així com els criteis de comprovació manual.

    La validació té més vistes, Vista marcada, Detall, Llistat.
     
    La vista Detall i la vista Llistat són les millors.

    La vista Detall ens informa punt per punt de les pautes i de de les tècniques que cal emprar per satisfer cada punt en tots els criteris.
    També ens analitza el codi HTML i CSS

    La vista Llistat ens mostra els resultar en format de taula on d'una manera molt visual podem comprovar:
    El nivell d'accessibilitat al que pertany cada pauta, el resultat (si hi ha problemes o no, si reuqereix de revisió manual, impossible realitzar validació automatica, No aplicable), els nombre d'errors, ect.)
    Read more ...

    dijous, 5 d’agost del 2010

    Generadors de quadrícules (Grids) per disseny i prototipus web

    ZURB CSS Grid Builder és un generador de quadrícules flexible per a la creació ràpida de prototipus web.
    A més genera també el codi css del prototipus amb els hacks pel navegador tossut.




    Amb netProtozo Grid Generator  també podem generar una quadrícula que s'ajusti a les necessitats del nostre web.


    Al blog Sfaranda trobem per decarregar un psd amb el sistema de quadrícula ja creat i a punt per fer servir en els nostres dissenys.
    Descarregar el psd.
    Read more ...