Introduktion

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.