10 grundläggande lektioner i CSS

Font är detsamma som teckensnitt eller typsnitt. Varje dator har sina uppsättningar av fonter och många av dessa är samma, men inte alla. Macdatorerna har i regel sin defaultfont som inte är densamma som i vanliga PCdatorer. Det kan vara bra att veta om man inte har angett ett specifikt typsnitt på sin font. Typsnitt är bland annat utseendet på fonten. Vi ska börja med att gå igenom följande egenskaper för en font.

Font-family

Genom att ange en specifik font för ett HTMLelement så prioriteras denna font. Ofta skriver man in flera alternativ för om din besökares dator inte har stöd för den första fonten som du har angivit så kommer den att avsöka alternativ två. Finns det stöd så används den fonten, i annat fall söker den vidare tills den hittar en font som överensstämmer med den uppsättning fonter som datorn har. Använder du däremot ovanliga fonter, eller inte har lagt till några alternativ som exempelvis stöder Macdatorer, så kommer din besökares dator att använda defaultvärdet – defaultfonten – om inte den specifika fonten finns installerad.

Det finns två varianter att kategorisera en font på; dels har vi de som kallas för familjenamn (family-names) och dels de som menas vara släktnamn (generic-family). Skillnaden dem emellan är att familjenamnen är dem som vi i allmänhet kallar för just font, exempelvis Arial, Verdana eller Georgia. Släktnamnen är däremot en kategori fonter utifrån sitt specifika utseende vilka kan vara serif, sans-serif eller monospace. Så när man anger sina fonter är det en god idé att även avsluta alternativen med ett släktnamn, exempelvis serif, så man vet att sidan kommer att visa en snarlik font från samma “släkte” om inte besökarens dator har den specifika fonten installerad.

  1. Familjenamnen (font-family) Georgia, Times New Roman och Garamond tillhör samma släktnamn (generic-family) serif. De har “fötter”.
  2. Familjenamnen Verdana, Arial och Trebuche tillhör släktnamnet sans-serif. De har inga “fötter”.
  3. Familjenamnen Courier samt Courier New tillhör släktnamnet monospace. Dessa har en fast vidd.

När man anger sina fontalternativ bör man därför hålla sig till de familjenamn som ingår i samma släkte och avsluta alternativen med själva släktnamnet. De familjenamn (fonter) som innehåller blanksteg i sitt namn, exempelvis Times New Roman måste omslutas med citattecken – “Times New Roman”. Css-syntaxen för font-family ser ut så här:

  1. vald selector {font-family: arial, verdana, sans-serif;}

Font-style

Det finns tre egenskaper för fontens stil, det vill säga font-style. Dessa är italic, normal och oblique. Italic betyder kursiv stil medan oblique betyder snedställd. De är lika till sitt utseende. Den mest vanliga egenskapen är dock normal.
Det här är italic och det här är oblique. CSS-syntax är denna:

  1. vald selector {font-style:italic;}
  1. vald selector {font-style:normal;}
  1. vald selector {font-style:oblique;}

Font-variant

Font-variant ger fonten två värden, dels normal och dels small-caps. Small-caps är lite speciell men snyggt att använda till exempelvis rubriker eftersom varje bokstav är “kapitaliserad”, det vill säga är stor bokstav, men i mindre storlek. Den första bokstaven i varje mening är dock lite större än de andra. Det här är small-caps. Css-syntax:

  1. vald selector {font-variant:small-caps;}
  1. vald selector {font-style:normal;}

Font-weight

Med font-weight kan man välja hur kraftig eller tjock fonten skall vara. Med följande två värden kan vi väja om en text ska vara bold – tjock – eller normal – det vill säga ha normalläge. Css-syntaxen:

  1. vald selector {font-weight:bold;}
  1. vald selector {font-style:normal;}

En del webbläsare klarar även att läsa in tjockleken på fontens värde om man anger dessa i nummer; 100-900.

Font-size

Slutligen har vi då kommit fram till själva storleken på fonten, det vi kallar för font-size. Det finns fyra alternativ att välja mellan när man vill ange en fonts storlek. Vi har följande värden: px, em, %, och pt. Vad som kan vara bra att veta är förutsättningarna för storlekarna beroende på vilken typ av värde vi använder. Hur stor är exempelvis em om man jämför med procent(%) eller pixel(px) och pt(point)? Pixel to em har en bra konverterare online och överblick om detta.

En allmän kort och enkel jämförande överblick

8px = 0.5em = 50% = 6pt
9px = 0.563em = 56.3% = 7pt
10px = 0.625em = 62.5% = 8pt
11px = 0.688em = 68.8% = 8pt
12px = 0.75em = 75% = 9pt
13px = 0.813em = 81.3% = 10pt
14px = 0.875em = 87.5% = 11pt
15px = 0.938em = 93.8% = 11pt
16px = 1em = 100% = 12pt

CSS-syntax:

  1. p {font-size:12px;}
  1. p {font-size:1em;}
  1. p {font-size:10pt;}
  1. p {font-size:100%;}

Egenskaper för font (typsnitt)

font-family
specificerar en förvald prioriterad lista med fonter, ex: arial, times, helvetica
font-style

anger fontens stil med följande värden: normal, italic
font-weight
anger fontens tjocklek med följande värden: bold, light, integer, bolder, lighter, normal
font-size
anger fontens storlek med följande värden: px, em, %, pt
font-variant
ger fonten värdet normal, small-caps

Egenskaperna för font kan användas som shorthand declarationgroup och ska då användas i denna ordning:

  1. font:italic normal 11px/150% arial, times, helvetica;

Som css-syntax:

  1. font-style - font-variant - font-weight - font-size - font-family

I lektion 4 ska vi se hur vi formaterar och sätter stil på själva texten. Välkommen dit!

Liknande poster:

5 Comments Add yours

  1. Erik says:

    Hej!
    Tack för en mycket bra guide! Jag har följt den till punkt och pricka och allt fungerar bra, förutom font-size. Jag använder style sheet och jag kan ändra textfärg, länkfärg, bakgrundsfärg osv, men när jag försöker skriva in font-size så fungerar det inte på den text som är skriven innom i mina html doc. Jag kan ju såklart skriva in font-size i varje html doc men jag vill ju använda mitt style sheet 🙂 Jag har skrivit in det på följande sätt (nu skriver jag bara i font-size) i body {font-size:10px} och p { font-size:10px;} men det blir ändå bara standard storlek. Har tittat i bådde chrome, IE och firefox. Vet du vad detta kan bero på? Tack på förhand! /Erik

    1. Erik says:

      det ska alltså stå “krokodilgap höger P krokodilgap” vänster i meningen: “…text som är skriven innom (krokogapPkrokogap) i mina html doc.

    2. Lena says:

      Hej Erik!
      All css som läggs in i dokumentet prioriteras före stilmallen. Har du möjligtvis angett font-size för speciella div-block i stilmallen? Kika här under:

      #main {background: [...]; padding:[...], font-size:[...];}

      Eller:

      #main p {font-size:[...];}

      Ovanstående css prioriteras för font-size i body, dock ärver de egenskaperna från parent (body).
      Du har angivit body {font-size:10px} och p { font-size:10px;} därför blir all text på sidan lika stor. Body innebär ALL text, inklusive stycken (p), men du har också angivit att dina stycken ska vara 10px. Testa och ta bort font-size i body. Därefter anger du istället fontstorleken för varje element i stilmallen.
      mvh/Lena

  2. Björn Andersson says:

    Ville bara tacka för en riktigt snygg och välskriven guide. Jag snubblade in på din sida mest bara på måfå och har varit fast sedan lunch, så det är ett gott betyg:) Bra jobbat!

    1. Lena says:

      Hej Björn!

      Vad trevligt att du “fastnade” på min sida. Jag hoppas att du fick med dig lite matnyttigt =)
      TACK för berömmet!
      mvh/Lena

Leave a Reply

Your email address will not be published. Required fields are marked *