Miten optimoida luettavuutta tekstin renderoinnin avulla
Turvattomampi näkökulma web-suunnittelulle tulostetuille suunnittelijoille on typografisen kontrollin pysyvä puute.
Huolelliset typografiset valinnat ovat laatutyön tunnusmerkki ja tämän verkon laadun puute ei koskaan lakkaa jarruttamaan niille meistä, jotka tietävät, mitä etsimme.
Onneksi valvonnan taso, jota meillä on, kasvaa koko ajan, ja tukea entistä kehittyneemmälle typografiselle renderoinnille kasvaa. Vaikka ei todellakaan ole mahdollista tarjota sellaista hoitoa, että Illustratorin kaltaiset sovellukset - mikäli jokainen kirjain voidaan tarvittaessa muokata - on laadukkaita työkaluja. Yksi vähiten tiedoksista on tekstin renderointiominaisuus.
Et löydä tekstin renderointiominaisuutta CSS-määrityksissä, koska se ei ole teknisesti CSS, se on SVG-ominaisuus, vaikka sitä käytetään aivan kuten CSS-ominaisuuden. Tärkeintä on, että yhdellä CSS-rivillä voimme poistaa muutamia jokia ja muita puutteita tekstistämme.
Teksti-renderointiominaisuudella on neljä asetusta:
- auto: selaimen avulla voit valita itse asetukset
- optimizeSpeed: keskittyy nopeuteen
- optimizeLegibility: keskittyy edistyneeseen renderointiin
- geometrinen tarkkuus: tarkka renderointi
Valitettavasti selaimen oletusarvon "auto" käyttö suosittelee yleensä pikemminkin nopeutta kuin luettavuutta - mikä viittaa siihen, että kehittäjät viimeistelevät standardin suunnittelijoiden sijaan.
Koska useimmat meistä eivät tuota sivuja, jotka ovat riittävän suuria perustelemaan optimointivaiheasetuksen tarve, me vain todella kiinnostaisimme optimoidaLegibility (vaikka geometrinen tarkkuus on hyödyllinen tietyissä fonteissa).
CSS-koodi on seuraava:
.myClass { text-rendering: optimizeLegibility; }Tässä on suora vertailu optimizeSpeed ja optimizeLegibility, kuten voit nähdä, jos tarkastelet tarkasti, on olemassa kaksi merkittävää parannuksia paremmin luettavassa versiossa: "ffi" merkkiä ensimmäisellä rivillä on korvattu oikein ligature, ja karsinta on on parantunut koko, mikä on erityisen merkittävää viidennellä rivillä, jossa "V": n ja e: n välinen tila on korjattu.
Karsintaparannukset näkyvät helpommin näissä peiteissä:
Chrome-Mac
Chrome-Windows
Firefox Mac
Firefox-Windows
Internet Explorer 9 Windows
Safari Mac
Selainta tuetaan tällä hetkellä epäjohdonmukaisesti, mutta tekstin esittäminen epäonnistuu selaimissa, jotka eivät tue sitä, joten se on hyvin käyttökelpoinen juuri nyt.
Käytätkö CSS-tekstisi renderöintiominaisuutta? Olisiko joku muu kuin kirjoittaja huomaamaan eron? Kerro meille mielipiteesi kommentteihin.
Esitetty kuva / pikkukuva, hienosäätää kuvaa kautta Shutterstock.