Webboken

Typografi på webben

Mer än bara Times New Roman och Arial

Typografi, konsten att sätta stil på text, är ett av de viktigaste momenten i webbutveckling. Innehållet på en sida är det absolut viktigaste, och med bra typsättning kan du lyfta innehållet otroligt högt. Med hjälp av CSS kan du sätta stil på din text på många olika sätt. Syftet är främst att göra texten mer lättläst, men även att få texten att smälta in på rätt sätt med sin omgivning.

Hur lättläst texten är beror bland annat på radhöjden, radernas längd, textens storlek och givetvis typsnittet. Allt detta kan du styra med hjälp av CSS. Vi börjar med att välja typsnitt.

Typsnittet – font-family

För att välja det typsnitt vi vill ha används font-family, t.ex. så här:

p {font-family: Georgia, "Times New Roman", serif;}

Som du ser går det alltså välja flera olika typsnitt på en gång. ”Vad ska det var bra för?”, hör vi dig fråga. Jo, det är så att webbläsaren först försöker använda det första typsnittet, men om det typsnittet inte finns tillgängligt på besökaren dator försöker webbläsare med nästa typsnitt. Om inga typsnitt fungerar används standardtypsnittet, det är därför viktigt att specificera en typsnittsfamilj allra sist, så att webbläsaren kan välja ett lämpligt standardtypsnitt. De typsnittsfamiljer som finns är:

De två sistnämnda används väldigt sällan.

Så, vilket typsnitt ska jag använda?

Först och främst bör du bestämma dig för vilken familj av typsnitt du vill använda. Om det är kod du handskas med så är valet givet: då ska du använda ett monospace-typsnitt. Om det är brödtext så är valet mer komplext, även om det oftast bara står mellan serif och sans-serif, och det finns grupper som propagerar för båda.

Skillnaden mellan serif och sans-serif ligger i detaljerna, serif- har till skillnad mot sans-serif-typsnitt ”tvärstreck” som avslutar tecknen.

Generellt kan sägas att serif-typsnitt är lite elegantare, och ofta används dessa till rubriker, men de går även att använda till brödtext. Vanligast på Internet är dock sans-serif, och då oftast något av typsnitten Verdana eller Arial. (Ja, ”vanligast på Internet” må vara vagt, som vanligt handlar det om egna observationer.) Vad som är lämpligast verkar inte någon komma fram till i någon objektiv mening, det finns åsikter för det mesta som en snabb Google-sökning avsöljar:

När du väl bestämt sig för vilken familj av typsnitt att använda är det dags att välja själva typsnittet. Tyvärr är du lite instängda här, då du måste välja ett typsnitt som besökaren har. Vilka typsnitt besökaren har beror på vilket operativsystem denna använder och vilka typsnitt som installerats manuellt, inget av dem är vidare förutsägbart. De typsnitt som tillhör de s.k. core-typsnitten finns oftast tillgängliga:

CSS3 och framtiden

Det är svårt att förutse vilka typsnitt som kommer finnas tillgängliga, men CSS3 kommer lösa detta problem genom att låta webbläsaren ladda ner typsnitt från webbservern som sedan kan användas på din webbplats. Specifikationen har i skrivande stund följande exempel, där typsnittet Gentium kan hämtas från webbservern:

@font-face {
  font-family: Gentium;
  src: url(http://site/fonts/Gentium.ttf);
}

p {font-family: Gentium, serif;}

font-face är ingen selektor utan snarare en @-regel, och adresser märks upp med url(adress) i CSS. Då detta är en del av CSS3 har inte alla webbläsare stöd för det ännu. Det finns egentligen ingen anledning att inte använda detta ännu, om webbläsaren inte har stöd för denna del av CSS3 kommer den bara ignorera @-regeln och om typsnittet inte hittas när webbläsaren går igenom font-family-listan den används i senare går den bara vidare till nästa typsnitt i ledet.

Textstorlek – font-size, och storlek i allmänhet

Nu när du vet hur du går till väga för att välja rätt typsnitt kan det vara vettigt att även veta hur du gör för att ändra storleken på din text; ett bra sätt att skilja mellan olika typer av text, t.ex. brödtext, rubriker eller fotnoter. Det är egenskapen font-size som styr textstorleken. Det kan tyckas vara ett trivialt problem, men det finns många olika enheter som kan användas för att specificera textstorleken med – och vissa är mer lämpliga än andra.

Det första som bör tas i åtanke är att engelska traditioner snarare än svenska sådana används för decimaltecken. Istället för 3,14 skriver vi 3.14 när vi talar om värden i CSS, punkt istället för kommatecken alltså.

Absoluta och relativa värden

Det finns ganska många sätt att specificera storlek på med CSS, boken Max räckvidd med HTML & CSS ger en ganska bra sammanfattning:

Det finns ett antal olika längdenheter definierade i CSS. De delas in i relativa enheter och absoluta enheter.

De relativa enheterna är em, ex och px.

En em motsvarar den aktuella textstorleken (graden), medan en ex är x-höjden i det aktuella teckensnittet. (Förr motsvarade en em bredden på ett versalt M, därav namnet; och en x-höjd är definierad även i typsnitt som inte innehåller ett gement ”x”.)

En px är en pixel och räknas som en relativ enhet i det här sammanhanget eftersom den inte motsvarar någon exakt fysisk sträcka. CSS-specifikationen ger en lång, komplicerad förklaring av det hela, men kontentan är att en pixel är relativ med avseende på längden hos betraktarens arm(!) och att en standardpixel är ungefär 0,26 mm.

Absoluta enheter är mm (millimeter), cm (centimeter), in (inch, tum), pt (points, punkter) och pc (picas). En tum är 25,4 mm. En punkt är 1/72 tum, eller 0,353 mm, och en pica är 12 punkter = 1/6 tum, eller 4,23 mm.

Det finns som vi ser finns det som sagt många sätt att tala om storlek på, men i de flesta fall nöjer vi oss med att använda em. Alla används iallafall på samma sätt, först ett tal följt av enheten utan mellanrum:

body {font-size: 10px;}
p {font-size: 2.71828em;}
p.look-at-me-text {font-size:33cm;}

Ett specialfall finns dock, och det är om värdet är 0 så behövs ingen enhet (0 cm är ju lika långt som 0 mm som är lika långt som 0 px och så vidare). Detta är dock inte så intressant för just font-size, men för andra egenskaper som även de tar storheter som värde kan det finnas nytta för 0-längder.

Procent

Det går även att ange storlek i procent. Hur procentvärdet tolkas skiljer från egenskap till egenskap. För font-size är det procentdel av det ärvda värdet, så om föräldern till en nod med font-size: 50% har font-size: 20px kommer noden få teckengraden 10px.

Fördefinierade värden

Utöver de sätt vi nämnt finns det även ett antal fördefinierade värden som font-size accepterar:

Dessa kan variera i storlek från webbläsare till webbläsare, men vilket oftast är ganska vettiga värden. Till exempel skulle x-small kunna användas till sidfoten, och x-large till sidans huvudrubrik. Det går även att använda de två relativa värdena smaller och larger för att gå ett steg i listan från det ärvda värdet – om ditt element ärver storleken medium och du sätter font-size till smaller kommer storleken att bli small. (Om det ärvda värdet inte när något ur listan försöker webbläsaren göra ett så naturlig förstoring/förminskning som möjligt.)

Så?! Vilken storlek ska jag använda?

Vi har gått igenom många olika sätt att specificera teckengrad, men vilket ska du använda? Som du sett, i t.ex. webbsidan från kapitel 2, tidigare får texten en standardstorlek om ingen anges. Denna standardstorlek är något som går att ställa in i de flesta webbläsare, t.ex. i Firefox finns det under ”Edit” → ”Preferences” → ”Content” → ”Fonts & Colors” (och även till viss del ”Advanced…”). Det är inte många användare som ändrar denna dock (den är ganska väld dold, som Firefox-exemplet visar, i de flesta webbläsare). Det är inte helt ovanligt att dina besökare inte inser att det är deras rätt att tala om hur webbplatsen ska presenteras för dem. Stilmallen du skriver och associerar din webbplats med ska mer ses som en rekommendation för besökaren att det är såhär du tänkt dig att webbplatsen ska se ut, men om besökaren bara vill ha svartvita färger eller/och alltid använda samma teckensnitt är det upp till denna. (Detta kan göras genom inställningar i webbläsaren, eller skriva en användarstilmall.)

Så vi ska respektera besökarens standardteckengradval genom att använda just denna på all brödtext. Så valet är enkelt för hur vi ska välja teckengrad för bördtexten: gör det inte, valet är redan gjort. Ibland sägs det istället font-size: 1em men det påverkar ju inte storleken något, så det är samma sak. Ett undantag från detta är dock att det i vissa fall är acceptabelt att ha större text än 1em. Det vi har kvar att ändra storleken på är rubriker, menyer, sidfötter och så vidare, saker som inte är brödtexten helt enkelt.

Denna lösning för brödtextteckengraden är inte helt utan problem, i en mejltråd som Care With Font Size länkar till sammanfattar Ian Jacobs problemen med ovanstående lösning. Standardteckengraden kan anses vara onödig stor, bl.a. då användaren kanske är van vid att få sin standardteckengrad respektlöst förminskad av andra webbplatser skrivna av webbutvecklare omedvetna om det som diskuteras här. Om nu användaren tycker att standardteckengraden är det ju bara att förminska den? Fast då kommer webbplatser som använder t.ex. font-size: 0.75em på brödtexten bli svårlästa. Så genom att så många webbplatser gör fel (där såvitt vi kan se enbart ignorans är anledningen) är användaren fast vid att ha kvar standardstorleken. Hur vi än gör blir det aldrig optimalt i alla avseenden, om vi använder font-size: 1em gör vi iallafall som det är tänkt att fungera och kan hoppas på att fler och fler förstår varför detta är det enda rätta.

Om du nu väljer att gå emot oss och använda något annat än font-size: 1em vill vi informera dig om att de flesta webbläsare har 16px som standardvärde, så om du t.ex. anger font-size: 0.75em så resulterar det i en teckengrad på 12px och så vidare. Detta är ett antagande du får göra då, men användarna kan fortfarande ha ändrat detta (och återigen: du struntar i deras önskemål!).

Användaren kan även i efterhand göra justeringar på teckengraden genom att hålla in ctrl och skrolla alternativt ctrl++ och ctrl+-. Att detta kan göras måste tas i åtanke när du senare bygger en design för webbplatsen, men just nu påverkar detta inte oss.

Radavstånd – line-height

Radavståndet definieras som avståndet mellan en rads baslinje (dvs. den linje bokstäverna ”sitter” på) och nästa rads baslinje. I CSS kan detta avstånd justeras med hjälp av line-height. Generellt så, ju längre rader, desto större bör avståndet mellan dessa vara. Vi tar inte upp hur du kan påverkar radlängden i detta kapitel, då detta har med design av en helt webbplats att göra, det är ofta bredden på webbplatsen som bestämmer radlängden. Normalt brukar radavståndet hursomhelst hamna någonstans mellan 1,2 och 1,5 gånger textstorleken.

Samma enheter som de diskuterade vid font-size kan användas med line-height, men vi rekommenderar att du inte gör det. Det är oftast med naturlig att ange line-height utan någon enhet, t.ex. kommer line-height: 2 göra att radavståndet blir font-size × 2. Att ange line-height-värdet utan enhet är fördelaktivt p.g.a. hur arvet fungerar. Om du anger 150% som värde istället för 1.5 så är arvs det beräknade värdet, d.v.s. font-size × 150 % istället för 1.5; alltså kommer inte line-height beräknas om för de nästlade elementen. För ett längre utlägg om detta se Unitless line-heights av Eric Meyer. Slutsatsen där är samma som vår: använd ingen enhet när du specificerar värde för line-height.

font-weight – textens tjocklek

För att styra tjockleken på texten används font-weight, som kan tilldelas värden från 100 till 900, i steg om 100. Det finns även ett par fördefinierade nyckelord, varav enbart följande två bör användas då många typsnitt endast har stöd för just dem:

Utöver de två kan bolder och lighter användas för att stega mellan värdena från 100 till 900, men då många typsnitt som sagt saknar stöd för andra lägen än normal och bold är detta inget som syns till vanligen.

Kursiv stil – font-style

Om kursiv text är önskad så är det font-style som ska använda. Den här egenskapen tar tre olika värden: normal, italic och oblique. Skillnaden mellan italic (äkta kursiv) och oblique (falsk kursiv) är hårfin: äkta kursiv innebär att de kursiva bokstäverna är specialdesignade, medans falsk kursiv (kan) bestå utav en förvrängning av normalstilen. Serif-typsnitt brukar ha en äkta kursiv, medan moderna sans-serif-typsnitt endast brukar ha falsk kursiv.

Så vilken ska användas? Innan vi skrivit föregående stycke hade vi aldrig hört talas om oblique, i praktiken är det uteslutande normal och italic som specificeras som värde såvitt vi har sett. Vad händer då när ingen specialdesignad kursiv stil finns tillgänglig? Om du anger italic som värde försöker webbläsaren först hitta en äkta kursiv stil, men om en sådan inte finns tillgänglig så används istället en falsk variant.

Kapitäler med font-variant

Kapitäler, ”små versaler”, fås genom att använda font-variant. Denna egenskap tar bara två värden: normal, vilket så klart innebär att texten är normal; och small-caps, som anger att texten ska visas med kapitäler. Detta kan ge en elegant effekt på till exempel sidfoten eller så kallade ”bylines”, speciellt när ett serif-typsnitt används.

text-decoration dekorerar din text

Egenskapen text-decoration kan användas för att dekorera text, för att t.ex. stryka under den:

Det som är värt att lägga märke till här är att mer än ett värde i taget går att ange för text-decoration, så t.ex. kan text kan bli under-, över- och genomstruken:

body {text-decoration: underline line-through overline;}

Snabbskriftsmetoden för font

Snabbskriftsmetoden innebär att du kan slå ihop alla ovanstående font-*-egenskaper till en, nämligen font. Här är ett exempel på hur icke-minimerad kod kan se ut:

body {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2em;
  line-height: 1.2;
  font-weight: bold;
  }

Istället för att ha fyra rader med olika egenskaper så kan man slå ihop det till denna rad:

body {
  font: bold 2em/1.2 Georgia, "Times New Roman", serif;
  }

Snedstrecket används för att specificera line-height. Alla egenskaper måste inte vara med dock, det är enbart font-size och font-family som alltid måste vara med, övriga kan utelämnas om så önskas. Ordningen på egenskaperna är egentligen mer flexibel än vi kommer ange här, men reglerna för vilken ordning de får komma i (alla ordningar är inte tillåtna) är inte överdrivet enkla att komma ihåg från gång till gång så det är lika bra att alltid använda samma ordning:

font: font-style font-variant font-weight font-size/line-height font-family;

CSS2-specifikationen har en rad exempel:

p {font: 12px/14px sans-serif;}
p {font: 80% sans-serif;}
p {font: x-large/110% "New Century Schoolbook", serif;}
p {font: bold italic large Palatino, serif;}
p {font: normal small-caps 120%/120% fantasy;}

Denna finurliga metod är inte begränsad till just font, utan detta går att göra på alla möjliga attribut – men alla snabbskriftsmetoder fungerar på olika sätt, så dessa kommer vi till när vi går in på de områden som berör dem.

Övning

Nu kan du en hel del egenskaper för att påverkar textens utseende på webbsidan från kapitel 2, som du påbörjade vissa CSS-experiment på i kapitel 3. Öppna webbsidan i din textredigerare och experimentera omkring lite med de nya egenskaperna. T.ex.:

Sammanfattning

Det är svårt att göra någon sammanfattning på detta kapitel, då det till större delen består utav en lista med massor egenskaper som påverkar din texts utseende. Det som alltid ska tänkas på är att texten måste förbli läsbar om någon ska vilja läsa den, så gå inte lös med allt för mycket lustiga värden på dina textegenskaper.