Typografi

Typografi med CSS

Det är mer än bara textstorlek när det kommer till typografi på webben. Här kommer vi att gå igenom de viktigaste variablarna i CSS som används för typografi.

Textstorlek

Textstorleken anges i pixlar och skrivs font-size: 14px om texten ska vara 14 pixlar hög.

h1 {
  font-size: 30px;
}

p {
  font-size: 14px;
}
<h1>Rubrik</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, ut voluptas at quis rerum tempore eligendi quas vitae sint expedita voluptatum tenetur blanditiis architecto vel itaque recusandae facere commodi eius!</p>

<p>Labore magnam veritatis asperiores quod quaerat reiciendis?</p>

Linjehöjd

Linjehöjden avgör hur hög en rad ska vara. Du vill inte att raderna ska vara för nära varandra och samtidigt inte för långt borta. Höjden bestäms med hjälp av line-height.

h1 {
  font-size: 30px;
  line-height: 32px;
}

p {
  font-size: 14px;
  line-height: 21px;
}

Radavstånd

Radavståndet är avståndet mellan rubriker och paragrafer.
Här använder vi margin-bottom: 15px för att skilja dom åt.

h1 {
  font-size: 30px;
  line-height: 32px;
  margin-bottom: 15px;
}

p {
  font-size: 14px;
  line-height: 21px;
  margin-bottom: 15px;
}

Typsnitt

Med hjälp av font-family så tilldelar vi texten ett typsnitt. En fullständig lista på alla tillgängliga typsnitt hittar du här. Om du vill importera ett eget typsnitt så hänvisar vi dig till vår fördjupning av typsnitt.

h1 {
  font-size: 30px;
  line-height: 32px;
  margin-bottom: 15px;
  font-family: helvetica;
}

p {
  font-size: 14px;
  line-height: 21px;
  margin-bottom: 15px;
  font-family: helvetica;
}

Tjocklek och kursivt

I HTML finns det två taggar som används för tjock text och kursiv text, nämligen <strong> och <em>. Eftersom vi tidigare i kursen nollställde alla CSS-värden med en Reset CSS så måste vi nu ta in dessa stilar igen till respektve HTML-tag.

strong {
  font-weight: bold;
}

em {
  font-style: italic;
}
<strong>Tjock text</strong> <br/>

<em>Kursiv text</em>
Tjock text
Kursiv text

Länkar

För att ändra css-stilen när man har musen över eller trycker på en länk så krävs det några extra attribut, nämligen hover och active.

a {
  /* När länken är oberörd */
}

a:hover {
  /* När länken hålls över */
}

a:active {
  /* När länken trycks på */
}

Exempel

a {
  color: #38b857; /* Grön */
  text-decoration: none; /* Inget understreck */
}

a:hover {
  color: #44d96c; /* Ljusare grön */
  text-decoration: underline; /* Understreck */
}

a:active {
  color: #47e672; /* Ännu ljusare grön */
}
<a href="#">Håll musen över mig</a>

Gå till nästa steg!


Vill du bidra till ett öppnare och friare läromedel?

Bidra med eget material
comments powered by Disqus