Skugga dina fonter och öka läsbarheten

Det här med fonter/typsnitt är alltid kul och som jag skrivit om tidigare så finns det idag mycket större möjligheter till att använda fler fonter än systemets egna. Dock skapar det även problem. Olika läsare och operativ system har en tendens till att rendera ut fonterna på olika sätt vilket kan skapa pixliga kanter och leder till sämre läsbarhet. Vad exakt det beror på diskuteras fortfarande vilt.

pixliga fonter

Olika läsare och operativsystem renderar ut olika resultat

Behöver vi verkligen offra läsbarheten?

Nej, det finns en lösning på detta. Du behöver inte leva med dålig läsbarhet bara för att du vill använda dig av roligare fonter. Lösningen är måhända inte den snyggast med den funkar bra. Enda som du behöver göra är att lägga till en pixels skugga på texten i CSS:en för att skapa smidigare fonter och bättre läsbarhet.

fonter med skugga

Det är inte magi, det är CSS.

Hur gör du detta i CSS:en? Jo, såhär:

h1 { /* Your selector */
      	font-family:"Some Custom Font", serif;
        text-shadow:0 0 1px transparent;
        /* Or, if you need to apply a 0px hard shadow,
         * you can use multiple text shadows */
        text-shadow:0 0 0 #f00, 0 0 1px transparent;
      }

 

Det kommer självklart att komma lösningar på detta i framtiden som gör att man kommer att slippa detta specialfix. IE9 visar (ryktesvis) på en mycket bättre hantering av fonter och font-smoothing i CSS3 kommer att vara ett alternativ också. Men fram tills dess så testa gärna ovanstående skugglösning.

Tack till David Legget för detta.

Related Posts Plugin for WordPress, Blogger...