Kommer dela med mig av fem favoriter av både vanliga, och en del ovanliga, typsnitt som jag brukar snegla på och använda i olika projekt med font-face. Fler kan hittas hos FontSquirrel där du enkelt kan filtrera vilka typsnitt som får användas fritt och bäddas in i din webbdesign.

1. Walkway

2. Sovereign Regular

3. Chinease Rocks

4. Otari

5. Grov Condensed

Har du andra rekommenderade typsnitt som är lite mer ovanliga? Tipsa gärna om dem!

@font-face med typsnittet GrauBlauWeb

Nåväl, tänkte gå igenom lite snabbt hur du kan lösa snygga fonts för större delen av dina besökare, men även med typografisk fallback för de som inte har stöd för tekniken.

För det första så är det en stor skillnad vi måste reda ut, Internet Explorer stödjer enbart @font-face via sitt egna format .eot (Embeded Open Type) och inte .otf, vilket är det öppna typsnittsformatet, som resten av webbläsarna. Microsoft har därför lagt ut ett uråldrigt verktyg på 20MB som kan konvertera .ttf till oet. Detta känns krångligt eftersom det finns smartare vägar via onlineverktyg.

Verktygen som vi ska användas är först: Online font converter vilket konverterar typsnittet till .ttf, sedan ttf2eot vilket tar hand om den sista konverteringen till .eot. När .eot-filen är redo på din dator så är också du redo att implementera CSSen som krävs för att få det hela att fungera.

@font-face {
    font-family: 'namn';
    src: url('din/katalog/namn.eot');
    src: url('din/katalog/namn.eot?#iefix') format('embedded-opentype'),
         url('din/katalog/namn.woff') format('woff'),
         url('din/katalog/namn.ttf') format('truetype'),
         url('din/katalog/namn.svg#namn') format('svg');
    font-weight: normal;
    font-style: normal;
}

Byt ut “namn” till det du tycker att typsnittet ska heta i CSS-filen, helst och mest logiskt så döper man nog det till typsnittets namn.

.head { font-family: namn, Arial, sans-serif; }

Ovanstående kod är ganska simpel, namn är det namnet du har gett ditt typsnitt, Arial står för din fallback, som kan bytas ut till ett webbsäkert typsnitt som ser ut som det nya typsnittet. En fallback är att rekommendera för att fånga upp de sista 25% av besökarna som inte har stöd för tekniken.

Hoppas du har förstått grunderna i konceptet, det finns mer att läsa på css3.info och w3.org annars.

Svar på frågan: Webbsäkra färger, något man behöver bry sig om?

Fortfarande idag finns det många applikationer inriktade mot webbdesign, grafisk design och ritande som har en färgpalett som heter “websafe colors“. Frågan är varför, eftersom vi knappt behöver bry oss om det i dagens läge?

Anledningen till att just dessa 216 färger kallas webbsäkra är att i urminnes tider så hade inte skärmarna högre färgomfång än 256 färger. Av dessa 256 färger så var en 10-20 stycken reserverade för operativsystemet.

Min första PC köptes 1997, grafikkortet på 4 MB och hade en otrolig färgomfång på cirka 16 miljoner färger. Dessa webbsäkra färger är alltså en kvarleva sedan innan dess.

Kort svar på frågan: Nej, du behöver inte bry dig om webbsäkra färger längre, i princip kommer samma sak snart hända med typsnitt i och med @font-face och CSS3.