CSS-teckensnitt


Innehållsförteckning

    Visa innehållsförteckning


Att välja rätt typsnitt för din webbplats är viktigt!


Val av teckensnitt är viktigt

Att välja rätt typsnitt har en enorm inverkan på hur läsarna upplever en hemsida.

Rätt typsnitt kan skapa en stark identitet för ditt varumärke.

Det är viktigt att använda ett teckensnitt som är lätt att läsa. Teckensnittet lägger till värde för din text. Det är också viktigt att välja rätt färg och textstorlek för typsnittet.


Generiska teckensnittsfamiljer

I CSS finns det fem generiska teckensnittsfamiljer:

  1. Serif-teckensnitt har ett litet streck i kanterna på varje bokstav. De skapar en känsla av formalitet och elegans.

  2. Sans-serif-teckensnitt har rena linjer (inga små streck bifogade). De skapar en modern och minimalistisk look.

  3. Monospace-teckensnitt - här har alla bokstäver samma fasta bredd. De skapar ett mekaniskt utseende.

  4. Kursiva teckensnitt imiterar mänsklig handstil.

  5. Fantasy-teckensnitt är dekorativa/lekfulla typsnitt.

Alla de olika teckensnittsnamnen tillhör en av de generiska teckensnittsfamiljerna.


Skillnaden mellan Serif- och Sans-serif-teckensnitt

Obs! På datorskärmar anses sans-serif-teckensnitt vara lättare att läsa än serif-teckensnitt.


Några teckensnittsexempel

Generic Font Family Examples of Font Names
Serif Times New Roman
Georgia
Garamond
Sans-serif Arial
Verdana
Helvetica
Monospace Courier New
Lucida Console
Monaco
Cursive Brush Script MT
Lucida Handwriting
Fantasy Copperplate
Papyrus


Egenskapen för CSS-teckensnittsfamiljen

I CSS använder vi egenskapen font-family för att ange teckensnittet för en text.

Obs: Om teckensnittsnamnet är mer än ett ord måste det stå inom citattecken, som: "Times New Roman".

Tips: Egenskapen font-family bör innehålla flera teckensnittsnamn som ett "reservsystem", för att säkerställa maximal kompatibilitet mellan webbläsare/operativsystem. Börja med det typsnitt du vill ha och avsluta med en generisk familj (att låta webbläsaren väljer ett liknande typsnitt i den generiska familjen, om inga andra typsnitt är det tillgängliga). Teckensnittsnamnen ska separeras med kommatecken. Läs mer om reservteckensnitt i nästa kapitel.

Exempel

Ange några olika typsnitt för tre stycken:

 .p1 {
  font-family: "Times New Roman", Times, serif;
}

  .p2 {
  font-family: Arial, Helvetica, sans-serif;
}

  .p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
.p1 {
  font-family: "Times New Roman", Times, serif;
}

.p2 {
  font-family: Arial, Helvetica, sans-serif;
}

.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}
</style>
</head>
<body>

<h1>CSS font-family</h1>
<p class="p1">This is a paragraph, shown in the Times New Roman font.</p>
<p class="p2">This is a paragraph, shown in the Arial font.</p>
<p class="p3">This is a paragraph, shown in the Lucida Console font.</p>

</body>
</html>