Typetester är ett verktyg för att jämföra olika typsnitt för rubriker eller brödtext. Visar de vanligaste typsnitten på olika operativsystem samt alla som är installerade på din dator. Perfekt för att ta fram egna font-family-uppsättningar. Väl ett perfekt typsnitt bland dina egna och hitta några vanligare varianter som ser okej ut.

Font tester gör nästa samma sak. Inte lika snygg och tydlig som Typetester, men med lite fler inställningar. Visar dessutom hela teckenuppsättningen precis som i Character Map på Windows – något som kan vara bra för macanvändare som saknar ett lika praktiskt verktyg.

Typedia är ett uppslagsverk för typsnitt som alla kan vara med och editera. För varje font visas bakgrundsinformation, exempel på användning, liknande typsnitt och länkar till mer information och inköpsställen.

WhatTheFont hjälper dig identifiera ett typsnitt. Ladda upp en bild på en bit text och få reda på vilket typsnitt det är. Brukar fungera ganska bra om man har en tydlig exempelbild.

Identifont hjälper också till med identifieringen av typsnitt. Svara på en rad frågor om hur olika tecken ser ut och få reda på vilka typsnitt det kan handla om. Ju fler frågor du svarar på desto exaktare resultat får du.

Font Matrix är den mest kompletta listan över vilka typsnitt som följer med vilka operativsystem och program som jag har sett. Visar olika varianter av Mac OS X, Windows, Office och Adobes CS-paket. Bra för dig som vill prova något annat än de “websäkra” fonterna, men ändå arbeta med typografi som en betydande del av besökarna kommer att se.

PXtoEM konverterar fontstorlekar mellan px, em, pt, och procent (givet vissa grundförutsättningar). Praktiskt för den som är mer bekväm mad fasta storlekar som px, men ändå behöver använda em eller procent.

Typechart visar en rad exempel på hur de “websäkra” fonterna kan användas på ett snyggt sätt. Om du hittar något som du vill använda kan du enkelt kopiera css:n.

Föreläsningen går igenom en rad typografiska frågor utan något inbördes sammanhang:

• Korrekt användning av speciatecken som citattecken (“ och ”, inte “), talstreck (—, inte -) och multiplikationstecken (×, inte x eller *).
• Möjligheten att anpassa visningen av specialtecken genom att innesluta dem i span-elementet och ange särskilda typsnitt där de ser bättre ut.
• Hur man skapar ett vertikalt flyt genom att anpassa vertikala marginaler efter typsnittsstorleken.
• Traditionell formatering av listor (med ordningstalen hängande ute i vänstermarginalen).
• Hur ett gridsystem kan skapas genom att utgå från ett typografiskt grundmått (som 1 em) samt det gyllene snittet (egentligen approximationen 2:3.
• Varför de flesta standardgrupper av typsnitt för att ange font-family i css är fel och hur man gör bättre val.

Helt klart värt att lyssna på även om jag tycker att de börjar med detaljer och först i mitten kommer in på mer centrala frågor. Eftersom det bara finns ljudupptagning så underlättar det att ta en titt på presentationsmaterialet som finns på en separat sida tillsammans med en del vidareläsning.

Jag har redan börja fundera på vilka typografiska förändringar jag ska göra här på bloggen…

För mig är inte den stora vinsten minskningen av filstorleken, den största anledningen till optimering är att kortare stilmallar leder till bättre överblick och mindre letande när man arbetar med dem. Det förutsätter givetvis en bra struktur på reglerna och kommentarer där de behövs – se därför till av avmarkera remove comments och välja Leave my layout alone om du använder CSS Tweak.

För en repetition av kortversionerna rekomenderar jag Roger Johanssons guide Efficient CSS with shorthand properties.

Efter en del kompromissande nöjde jag mig med denna variant (bara print-stilmall, välj print preview för att se den). Förutom förenklingen (gråskala, ingen bakgrund, inga skuggor, ingen ram) så valde jag att ta bort siffrorna i staplarna. De verkade inte gå att göra tillräckligt ljusa för att synas mot de mörka staplarna, men om man nöjer sig med ramar istället för bakgrund för staplarna så är det inte några problem att visa dem. Kanske skulle det vara en bättre lösning (ingen informationsförlust), men jag ville se om det gick att få samma grafiska stil på diagrammet vid utskrift som på skärmen.

Exemplet är än så länga bara testat i Firefox 2 och Internet Explorer 7.

För den som gör speciella printstilmallar så är webbläsarnas egna regler för vad som ska visas lite irriterande. Som flera tidigare har påpekat borde den bästa lösningen vara att webbläsarna litar på att de som har specificerat media="print" vet var de gör. En stilmall specificerad för ett speciellt medium borde alltid ha företräde framför webbläsarnas egna räddningsförsök (men givetvis stå tillbaka för en lika specifik användarstilmall).