kaxigt.com

Sedan CSS3 slog igenom med buller och bång använder många egenskapen text-shadow för att lägga en snygg skugga på texten, men det man inte tänker på är att text-shadow också ett ypperligt redskap för att snygga till pixliga typsnitt med.

När vi kommer upp på rubriknivå blir inte alltid typsnittet så snyggt. Jag ser ofta rubriker där typsnittet är gråsvart och bakgrunden vit. Fonten spretar, inte sällan om den är kursiv, och ibland är den så pixlig att det knappt går att urskilja bokstäverna.

Har ni inte också sett det?

Detta är faktiskt lätt åtgärdat förutsatt att man inte vill använda text-shadow för att skugga texten. Anges samma färg på egenskapen text-shadow som bakgrundsfärgen så försvinner nämligen mycket av pixligheten på typsnittet.

Det skulle kunna se ut så här (koden är förenklad):

#selektor {bakground-color:#fff;}
h1, h2, h3 {color:#333; text-shadow:#fff 1px 1px 1px;}

Nu behöver ju inte bakgrunden vara just vit, försök bara att hitta en nyans som bäst överensstämmer med bakgrunden och ange denna som text-shadow och voilá! Typsnittet blir mjukare och mer lättläst – för att inte tala om att det blir snyggare :)