Millora la llegibilitat amb CSS



La llegibilitat és un conjunt de característiques que fan que un text o tipografia sigui més fàcil de llegir. Aquesta propietat es pot millorar amb diverses tècniques. Avui em centraré amb la propietat CSS text-rendering, que va introduir Firefox3.0 i que ara també usen els sistemes basats en webkit (Safari i el gran Chrome).

imatge CSS

Com tota propietat CSS podem donar-li diferents valors, per tal de que actuï d’una o altra manera:

  1. optimizeLegibility: Dóna prioritat a la llegibilitat del text. Habilita kerning i lligadura de tipografia.
  2. auto: Per defecte usa el valor anterior per a lletres menors de 10px i el següent per a majors.
  3. optimizeSpeed: Dóna prioritat a la velocitat amb la qual es mostrarà el text.
  4. geometricPrecision: Dóna prioritat a la geometria del text.

Per tant la podem usar tal i com utilitzem qualsevol propietat CSS i podem jugar amb les diferents prioritats per tal de trobar un bon equilibri a la web. Per exemple:

  1. #id_element, .classe_element{
  2. text-rendering: auto;
  3. }

Un cop més, i com normalment ens té acostumats, és una propietat que no funciona amb Internet Explorer de Microsoft. Esperem que mica en mica el món web es vagi unificant i es segueixin els estàndards que es van marcant.

Tags: , , ,

Articles relacionats

Esborrar nodes del DOM en PHP

Mozilla presenta WebAPI

OOCSS (2a part), profunditzant en els widgets

La setmana a Twitter

OOCSS, Object-Oriented CSS