Browsing Tag

typografi

webbutveckling

8 praktiska verktyg för webbtypografi

Webbtypografi har länge handlat om att välja mellan Arial eller Verdana, men varför inte utforska de alternativ som faktiskt finns – eller i vilket fall göra det bästa av de begränsade möjligheter som står till buds? Här är 8 verktyg som hjälper dig med typsnitt på webben:

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.

http://www.identifont.com/index.htmlI
webbutveckling

Web Typography Sucks

Nu är inspelningarna från SXSW upplagda och jag har precis lyssnat igenom Mark Boultons och Richard Rutters föredrag om typografi på webben. Hela inspelningen är på 60 minuter varav den sista tredjedelen är i formen av fråga/svar.

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…