I CSS3 kan man välja vilket typsnitt som helst till texter och rubriker. Det innebär att man i CSS länkar in ett typsnitt på samma sätt som man länkar in en bakgrundsbild.

Först ställer man in vad den ska heta och vart fonten ligger:

@font-face {
   font-family: Anivers;
   src: url('fonts/Anivers.otf') format("opentype");
}

Sedan kallar man på typsnittet på samma sätt som man gör i CSS2:

.min_klass  {
   font-family: Anivers;
}

Anivers – det perfekta typsnittet för rubriker?

Jag har testat ett stort antal typsnitt för att få rubrikerna att se så lättlästa och tilltalande ut som möjligt. Efter en del letande hittade jag ett mycket trevligt typsnitt. Det heter Anivers och är gratis att ladda ner. Ett exempel där det används på rubriker är på inspectelement.com.

Typsnittet finns på josbuivenga – Anivers. Vill man inte registrera sig och istället ta en genväg, går det också ladda ner typsnittet från inspectelement.com.

Den här artikeln innehåller både information och tjänster för att underlätta bruket av typsnitt, främst i webbmiljö. Har du någon värdefull relevant information som inte tas upp i den här artikeln? Lämna en kommentar.

Typsnitt med stilmallar (CSS)

Är du nybörjare och vill lära dig allt om typsnitt med CSS, läs på W3Schools.

Alla egenskaper på en och samma rad

Man kan skriva in en ny rad för varje egenskap men man kan spara både tid och plats genom att skriva in allt på en och samma rad.

h1 {
   font: bold 14px/18px Arial;
}

Ovan visas h1-taggen med fet stil, 14 pixlar hög,  ett radavstånd på 18 pixlar samt att den tillhör Arial-familjen.

Standard-typsnitt

Som webbdesigner kan man ibland bli frustrerad över begränsningen som finns i HTML / CSS när det gäller valet av fonter. Det går att använda vilka typsnitt som helst, men de valda typsnitten visas bara om typsnittet finns installerat på användarens datorn. Därför kan det vara bra att veta vilka typsnitt som folk i allmänhet har installerade på sin dator för att få webbplatsen att se likadan ut på alla datorer.

Windows XP standard-typsnitt

De flesta använder idag Windows och har man många typsnitt installerade kan det vara svårt att veta vilka som var installerade från början.

wpdfd.com har gjort en utmärkt lista över de typsnitt som finns förinstallerade på Windows XP. Eftersom listan är skapad som en bild kan man se hur dessa typsnitt ser ut även om man inte skulle ha dessa installerade.

Vanliga typsnitt på Windows och OSX

Om man inte är nöjd med tjänsten ovan så kan man prova Ampsoft – Common Fonts istället. I mitten på sidan finns de vanligaste typsnitten listade, både i normal och fet stil. Dessa står som text och vill man som Windows-användare se hur typsnitten ser ut i OSX så finns det skärmdumpar längre ner på sidan för olika operativsystem med olika konfigurationer.

Ersätt typsnittet med Flash

sIFR

sIFR är en metod för skapa texter och rubriker för webbplatser, i andra typsnitt än de som följer med datorn.

En fördel med metoden är att om Javascript eller Flash saknas så visas de standard-typsnitt som finns på datorn. Det innebär att metoden är helt sökmotorvänlig.

Nackdelen är att sIFR kräver att både Javascript och Flash är installerat på surfarens dator för att det ska fungera.

WP sIFR – WordPress plugin

Använder du WordPress kan du prova WP sIFR plugin, vilket gör det hela betydligt enklare. Det är bara att installera och sedan aktivera den sIFR-font som ska användas.

Inga programmerings-kunskaper krävs men det kan vara bra att ha använt stilmallar (CSS) tidigare.

sIFR med Font Burner

För att förenkla skapandet av kod för sIFR finns Font Burner. Det hela sker i tre steg:

1. Hitta ett typsnitt.
2. Kopiera den inbäddade koden.
3. Klistra in koden på din webbplats.

Font Burner finns också som plugin till WordPress och heter Font Burner Control Panel.

Fonter / typsnitt till sIFR

• Isare – sIFR Flash Fonts Library
• sIFRvault

Ersätt typsnittet med Javascript och PHP

Typsnitten som finns på datorn laddas in från början och sedan ersätts de med hjälp av Javascript. Det gör att om Javascript inte är aktiverat visas de lokalt installerade typsnitten istället. Även sökmotorer och textläsare kommer då utan problem kunna läsa dem.

Facelift

Facelift är ett populärt skript som har många exempel, utförlig dokumentation och ett forum. De har också en blogg där man kan följa utvecklingen.

Använder du WordPress så kan du istället använda ett plugin som kallas för Facelift Image Replacment.

Andra metoder

• Typeface
• TTFTitles WordPress Plugin

Förhandsgranska texten i realtid

CSS Type Set

Det kan vara smidigt att ha något verktyg för att testa olika text-attribut och hur de påverkar helheten. CSS Type Set har ett både enkelt, effektivt och snyggt verktyg.

Man skriver in den text man vill använda. I mitt fall har jag använt en dummy-generator för att skapa texten, som också beskrivs i den här artikeln. Man behöver inte klicka på ”Generera” som på många andra tjänster, utan texten förändrar sig direkt när man ändrar på någonting.

Andra tjänster

• CSS Type
• Type Tester
• Font Tester
• CSS TXT

Bläddra bland typsnitt

På webben

My Fontbook

Det finns många program för att lista fonterna som ligger på hårddisken. Att visa typsnitten direkt i webbläsaren kan vara smidigt. Man slipper då installera ett program för det. My Fontbook har just en sådan tjänst.

Tjänsten är enkel att använda och ser ut att ha tagit inspiration från OSX, men tjänsten fungerar lika bra i Windows.

Font Shaker

Ett annat sätt att visa typsnitten som ligger på hårddisken är att köra Font Shaker. Likt My Fontbook får man upp alla typsnitt som är installerade. Skillanden är att den här tjänsten är byggd i Flash och visar upp typsnitten i 3D.

Andra Tjänster

• Font Picker
• Flipping Typical

I ett vanligt program

Trivs man bättre med att lista fonterna genom ett installerat program listar jag här några stycken som fungerar bra (i Windows).

• AMP Font Viewer
• The Font Thing
  

Portaler med typsnitt

Dafont

En av världens mest populära webbplatser för typsnitt är Dafont. Det är en mycket lättnavigerad webbplats och det kommer hela tiden in nya typsnitt. Det finns möjlighet att testa sin egen text med de typsnitten som finns.

Vill man förlita sig på den stora massan så finns det en topp 100-lista. För att hitta ett specifikt typsnitt kan man använda deras sökfunktion.

Urbanfonts

En uppstickare som kommer starkt är Urbanfonts. En av de stora skillnaderna mot Dafont är att Urbanfonts använder sig av Ajax i stor utsträckning. Det gör att sidan inte behöver laddas om igen ifall man ändrar några inställningar. Även här finns möjligheten testa sin egen text med valt typsnitt.

Andra portaler

• Font Squirrel

Generera dummy-text

Som webbdesigner så finns det situationer då man behöver text för att testa hur den kommer bete sig tillsammans med exempelvis en stilmall. Att skriva ihop en tillfällig text om ingenting är ofta slöseri med tid.

Lorem Ipsum

Lorem Ipsum är en bra metod för att generera en dummy-text. Här är ett exempel på hur texten kan se ut:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius nisl eu ligula. Sed tincidunt, arcu in pellentesque euismod, arcu odio tincidunt neque, ut imperdiet eros arcu a velit. Proin magna. Nam nibh.

Dummy Lipsum – Firefox tillägg

Använder du Firefox kan du istället installera  Dummy Lipsum. Den genererar dummy-text på samma sätt som

Lorem Ipsum, men det går snabbare att komma åt, då den läggs till i navigeringsfältet.

Andra dummytext-generatorer

• Lorem Ipsum
• Malevole

Konvertera pixlar till em

Många webbdesigners använder sig av pixlar när de sätter storlek på typsnitten i stilmallen. Många vet hur stor en pixel är och av den anledningen är det lätt att göra det till en vana. Vissa webbläsare kan inte skala om storleken på texten om den angetts i pixlar så därför är det rekommenderat att den skrivs till formatet ”em”.

Em Calculator och PXtoEM

En bra tjänst för att konvertera pixlar till em är Em Calculator. En annan tjänst är PXtoEM. De är väldigt olika så det kan finnas fördelar att prova båda.

Övrigt

Lek med texter i Wordle

En spännande tjänst är Wordle. Man skriver in den text man vill använda och klickar på en knapp.

Beroende på vilka inställningar man använder får man olika effekter.

Efter lite testande fick jag fram den här vackra skapelsen (till höger).

Slutord

Självklart finns det både mer information och fler tjänster därute. Saknar du någonting? Skriv en kommentar så kikar jag på det.

Jag kommer att hålla liv i den här artikeln och uppdatera den när jag får fatt i fler bra tjänster eller information.

Använd vanliga typsnitt

Det första man bör tänka på är att undvika ovanliga typsnitt, eftersom de flesta inte har det installerat. Här kommer en lista på de typsnitt som finns i Windows XP, där man även får se hur de ser ut (eftersom de visas som bilder). Det är dock inte säkert att Linux och OSX har alla dessa typsnitt som standard.

sIFR – möjliggör ovanliga typsnitt

Om man ändå vill envisas med att använda udda typsnitt som systemet normalt sätt saknar finns det alternativ. Det jag känner till är sIFR som med hjälp av Flash och Javascript skapar texter. Man behöver dock inte ha några kunskaper i något av dessa för att kunna använda det. För den som använder sig av sökmotoroptimering kan jag nämna att texten fortfarande ses som text av webbläsaren vilket gör att den fortfarande är sökbar för sökmotorerna. Saknas Flash eller Javascript för användaren visas texten som med standardtypsnitt.

Stora och små typsnitt

Georgia, är ett relativt snirkligt typsnitt. Typsnitt av den typen lämpar sig bäst i lite större format, som t ex rubriker. För små texter lämpar sig enklare typsnitt för att förbättra läsbarheten. Arial är enligt mig det bästa typsnittet för små eller riktigt små texter på webben, men många föredrar Verdana.

Undvik standard-texter

Något som jag tycker att man ska försöka undvika är standard-texter och standard-färger på text och länkar. Blå och lila länkar (som är standard) kan lätt se lite amatörmässigt ut. Om man beslutat sig för att använda svart text mot exempelvis vit bakgrund så kan ett tips vara att inte sätta färgen till helsvart. Färgen #333333 som är en gråton nära svart kan ge en mjukare och behagligare läsupplevelse.

FontFinder – Ta reda på vad andra använder

Ibland kan man inspireras av andras texter på nätet. Om du använder Firefox så kan i så fall FontFinder vara ett bra tillägg. Du markerar en text, högerklickar och väljer FontFinder. Då visas all den information du kan tänkas behöva om den text du just markerat t ex färg, storlek och typsnitt.

UrbanFonts och DaFont – Bästa fontsidorna

Ska man göra loggor och bilder för webben, kan man behöva lite snyggare typsnitt än vad som finns att tillgå i systemet från början. Då kan UrbanFonts eller DaFont. vara två bra ställen att hitta gratis typsnitt på. Båda sidorna har bra förhandsvisning på sina typsnitt.

Prova först i bildbehandlingsprogram

En tidsbesparning kan vara att prova typsnitt och dess färg i ett bildbehandlingsprogram innan koden skrivs för att se hur de harmonerar med varandra. Mina tips här är bara en fingervisning om vad som skulle kunna vara bra. Låt ögat ha sista ordet!

Lösningen för det är Em. Måttet Em är en relativ storlek, till skillnad från pixlar som är fast. Det innebär att när man byter textstorlek i webbläsaren förändras all den texten som är skriven med Em, till den storlek man har valt.

För webbplatser med besökare som har nedsatt syn, eller av annan anledning vill få texten större, kan Em vara en måttsättning att överväga.

Det kan vara svårt att veta hur man ska få rätt storlek i Em om man inte har erfarenheter av det tidigare. Har man angett storlek i pixlar innan så kan Em Calculator vara till stor hjälp. Det räknar ut det mått man ska använda sig av, från pixlar till Em, beroende på den inmatning man gör.

Det finns inte bara fördelar. Något jag råkat ut för är att måtten plötsligt inte alls har blivit som jag tänkt mig. Problemet har då varit att jag haft flera klasser i varandra och eftersom Em är relativt till vad det varit tidigare, så påverkas det flera gånger.

Min egen webbplats är när detta skrivs inget bra föredömme för just detta, då alla mått är angivna i pixlar.