CSS-teckensnittsstorlek


Innehållsförteckning

    Visa innehållsförteckning


Textstorlek

Egenskapen font-size anger storleken på texten.

Att kunna hantera textstorleken är viktigt i webbdesign. Men du bör inte använda teckenstorleksjusteringar för att få stycken att se ut som rubriker, eller rubriker ser ut som stycken.

Använd alltid rätt HTML-taggar, som <h1> - <h6> för rubriker och <p> för stycken.

Teckensnittsstorleken kan vara en absolut eller relativ storlek.

Absolut storlek:

  • Ställer in texten till en angiven storlek

  • Tillåter inte en användare att ändra textstorleken i alla webbläsare (dåligt av tillgänglighetsskäl)

  • Absolut storlek är användbar när den fysiska storleken på utdata är känd

Relativ storlek:

  • Ställer in storleken i förhållande till omgivande element

  • Tillåter en användare att ändra textstorleken i webbläsare

Obs! Om du inte anger en teckenstorlek är standardstorleken för normal text, som stycken, 16px (16px=1em).


Ställ in teckenstorlek med pixlar

Genom att ställa in textstorleken med pixlar får du full kontroll över textstorleken:

Exempel

h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

p {
  font-size: 14px;
}

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

p {
  font-size: 14px;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>


Tips: Om du använder pixlar kan du fortfarande använda zoomverktyget för att ändra storlek på hela sidan.


Ställ in teckenstorlek med Em

För att tillåta användare att ändra storlek på texten (i webbläsarmenyn), många utvecklare använder em istället för pixlar.

1em är lika med den aktuella teckenstorleken. Standardtextstorleken i webbläsare är 16px. Så standardstorleken på 1em är 16px.

Storleken kan beräknas från pixlar till em med denna formel: <i>pixlar/16=<i>em

Exempel

h1 {
  font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
  font-size: 1.875em; /* 30px/16=1.875em */
}

p {
  font-size: 0.875em; /* 14px/16=0.875em */
}

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
  font-size: 1.875em; /* 30px/16=1.875em */
 }

p {
  font-size: 0.875em; /* 14px/16=0.875em */
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>Specifying the font-size in em allows all major browsers to resize the text.
Unfortunately, there is still a problem with older versions of IE. When resizing the text, it becomes larger/smaller than it should.</p>

</body>
</html>


I exemplet ovan är textstorleken i em densamma som i föregående exempel i pixlar. Men med em-storleken är det möjligt att justera textstorleken i alla webbläsare.

Tyvärr finns det fortfarande problem med äldre versioner av Internet Explorer. Texten blir större än den borde när den görs större och mindre än den borde när den görs mindre.



Använd en kombination av procent och em

Lösningen som fungerar i alla webbläsare är att ställa in en standardtypsnittsstorlek procent för elementet <body>:

Exempel

body {
  font-size: 100%;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 1.875em;
}

p {
  font-size: 0.875em;
}

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  font-size: 100%;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 1.875em;
}

p {
  font-size: 0.875em;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>Specifying the font-size in percent and em displays the same size in all major browsers, and allows all browsers to resize the text!</p>

</body>
</html>


Vår kod fungerar nu utmärkt! Den visar samma textstorlek i alla webbläsare och låter alla webbläsare zooma eller ändra storlek på texten!


Responsiv teckenstorlek

Textstorleken kan ställas in med en vw enhet, vilket betyder "viewport width".

På så sätt kommer textstorleken att följa storleken på webbläsarfönstret:

Hello World

Resize the browser window to see how the font size scales.

Exempel

<h1 style="font-size:10vw">Hello World</h1>

Prova själv →

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>

<h1 style="font-size:10vw;">Responsive Text</h1>

<p style="font-size:5vw;">Resize the browser window to see how the text size scales.</p>

<p style="font-size:5vw;">Use the "vw" unit when sizing the text. 10vw will set the size to 10% of the viewport width.</p>

<p>Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.</p>

</body>
</html>


Viewport är storleken på webbläsarens fönster. 1vw=1 % av visningsportens bredd. Om visningsporten är 50 cm bred är 1vw 0,5 cm.