Typografi i CSS

 

Typografi  inkluderer alle de forskellige måder man kan style en tekst på. På denne side vil følgende metoder blive gennemgået: tekststørrelsen, skrifttypen, tekstvægten, tekstpositionen, tekstformatering, linjehøjden, afstanden mellem ord og afstanden mellem bogstaver.

 

Tekststørrelse

Man kan ændre på størrelsen af et tekstelement ved at benytte erklæringen font-size. Denne erklæring kan have værdier som f.eks. small, medium og large, men oftest så benytter man antal pixels (px) til at definere, hvor stor tekststørrelsen skal være. Standardtekststørrelsen for en paragraf  er 16 pixels på de fleste browsere, så hvis du ikke indikerer en tekststørrelse så vil den automatisk være 16 pixels stor.

I nedenstående eksempel bliver tekststørrelsen på en tekst der har id’et “Tekst” sat til 22 pixels:

.Tekst {
  font-size: 22px;
}

Teksten vil se sådan her ud i browseren:

Stor tekst

Det kan anbefales at benytte overskrift-elementer i stedet for bare at give normale paragraf-elementer en større skriftstørrelse, da Google og andre søgemaskiner benytter overskrifterne til at indeksere din sides struktur og indhold.

 

Skrifttype

For at ændre skrifttypen på et tekstelement kan man benytte erklæringen font-family.

Når man ændrer skrifttypen på tekstelementer, så er der et par ting man skal huske:

1. Når man vælger en skrifttype, så er det bedst, hvis den er understøttet af de fleste browsere, da den ellers ikke vil kunne vises. Derfor er det en god ide at holde sig til netsikre skrifttyper.
2. Det er bedst, hvis man undgår at benytte mange forskellige skrifttyper på sin hjemmeside, da det kan gøre sidens indlæsning langsommere (derudover ser det oftest heller ikke særlig pænt ud).
3. Standard skrifttypen er “Times New Roman”, så hvis man ikke indikerer en skrifttype, så vil det være den som bliver vist i browseren.

Der er to slags skrifttyper:

• family-name (familienavn): Navnet på en specifik skrifttype, som f.eks. “Times New Roman”, “Arial” eller “Times”
• generic-family (generisk familie): Navnet på en generisk skrifttype. De kan dække over flere skrifttyper som ligner hinanden, som f.eks. “Serif”, “Monospace” og “Fantasy”

I nedenstående eksempel bliver skrifttypen på alle <h2>-elementer ændret til “Verdana”:

h2 {
  font-family: Verdana;
}

Kodestykket vil resultere i, at overskriften vil have en skrifttype som ser sådan her ud:

CSS typografi

Bemærk, at hvis skrifttypen består af mere end ét ord, så er det nødvendigt at sætte anførselstegn (” “) rundt om. Hvis man ændrer skrifttypen med en style-attribut, så skal man kun benytte enkelt anførselstegn (‘ ‘) når man skriver en skrifttype med mere end ét ord.

font-family kan holde flere forskellige skrifttyper. Så hvis den første ikke er understøttet af browseren, så vil hjemmesiden indlæse den næste. Det vil se sådan her ud:

h2 {
  font-family: Verdana, sans-serif;
}

Her vil koden indlæse overskriften med skrifttypen “Verdana” ligesom før, men hvis “Verdana” ikke er understøttet af brugerens browser, så vil koden indlæse skrifttypen “sans-serif”.

Listen over forskellige skrifttyper som kan benyttes er lang, men nedenstående kan ses nogle af de sikreste og populæreste. Listen er skrevet op, så det første navn er skrifttypen og det andet navn er en lignende skrifttype, som browseren kan vise, hvis ikke den understøtter den første:

• Verdana, sans-serif
• Garamond, Times
• Arial, Helvetica
• “Times New Roman”, Times
• “Courier New”, Courier
• Bookman, serif
• Candara, sans-serif
• Impact, Charcoal
• “Comic Sans MS”, Cursive

 

Tekstvægt

For at regulere hvor tyk eller hvor tynd en tekst skal være, så skal man benytte erklæringen font-weight. Denne erklæring kan have følgende værdier:

• 100: Meget tynd
• 200: Tynd
• 300: Lidt tynd
• 400: Normal (Her vil værdien normal give samme resultat)
• 500: Medium
• 600: Lidt tyk
• 700: Tyk (Her vil værdien bold give samme resultat)
• 800: Meget tyk
• 900: Ekstrem tyk
• lighter: Lidt tyndere end normal
• bolder:  Lidt tykkere end normal

Erklæringen kan benyttes ligesom i nedenstående eksempel:

.tekst1 {
  font-weight: 100;
}

.tekst2 { 
  font-weight: 900; 
}

De to tekster vil se sådan her ud i browseren:

Tekst 1

Tekst 2

 

Tekstposition

Man kan bestemme positionen på et tekstelement på hjemmesiden med erklæringen text-align. Denne erklæring har fire mulige værdier:

1. left – positionerer teksten til venstre på siden (dette er standard)
2. center – positionerer teksten i midten af siden
3. right – positionerer teksten til højre på siden
4. justify – udstrækker teksten så hver linje har lige meget bredde

Erklæringen kan benyttes ligesom i nedenstående kodestykke:

.venstre {
  text-align: left;
}

.midten { 
  text-align: center;
}

.højre {  
  text-align: right;
}

.ligebredde {  
  text-align: justify; 
}

De fire klasser tilhører hver et tekstelement, som vil se sådan her ud i browseren:

Tekst til venstre

Tekst i midten

Tekst til højre

Tekst med lige bredde

 

Tekstformatering

Teksten kan formateres ved hjælp af to forskellige erklæringer i CSS: text-transform og font-style.

 

font-style

Med font-style kan man indsætte tre forskellige værdier: normal, italic og oblique. Bemærk at italic og oblique stort set er det samme, da de begge gør at skriften bliver skrå. normal er standardværdien.

I nedenstående kodestykke bliver teksten lavet skrå ved at benytte italic:

.Tekststykke {
  font-style: italic;
}

Dette vil resultere i at teksten ser sådan her ud:

Dette tekststykke er skrevet med skråskrift

 

text-transform

Med text-stransform kan man indsætte fire forskellige værdier: none, capitalize, uppercase og lowercase:

I nedenstående eksempel bliver text-transform benyttet til at ændre alle bogstaverne så de står med stort:

.Tekststykke {
  text-transform: uppercase;
}

Dette vil resultere i nedenstående tekst:

Dette tekststykke er skrevet med store bogstaver

 

Linjehøjde

Linjehøjden kan justeres med erklæringen line-height. Linjehøjden på et tekststykke er afstanden fra den nederste del af en tekst til den nederste del af teksten nedenunder. Det kan ses på nedenstående illustration:

Linjehøjden kan justeres med følgende værdier:

1. Et nummer uden enhed som specificerer linjehøjden i forhold til skriftstørrelsen
2. Et nummer med en enhed. Denne enhed kan bl.a. være pixel (px) eller procent (%)

Erklæringen kan benyttes ligesom i nedenstående eksempel:

.Tekst_1 {
  line-height: 1.2;
}

.Tekst_2 {
  line-height: 30px;
}

Linjehøjden for Tekst_1 har fået et nummer uden enhed som er 1.2. Den vil se sådan her ud:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas nunc sem. Vestibulum at malesuada lorem, in maximus turpis. Nulla nec libero eu orci volutpat facilisis et id dui. Duis non ligula eget sem lacinia luctus ut a sapien. Nulla nisi orci, pulvinar et ante id, euismod lacinia sapien. Praesent nisi velit, scelerisque quis interdum sed, posuere sodales ipsum. Suspendisse fringilla lacus nunc, ut aliquet felis elementum in. Ut lacinia at turpis eget aliquet.

 

Linjehøjden for Tekst_2 er blevet angivet til at være 30px. Den vil se sådan her ud:

Fusce in tincidunt mi. Sed mattis justo sapien, vitae sodales odio facilisis vitae. Integer at dignissim lorem. Maecenas pharetra metus sit amet nunc faucibus vulputate. Ut ornare nisl nisi, sed dictum nunc commodo suscipit. Cras pretium, elit in auctor aliquet, elit lacus molestie enim, ac eleifend quam lectus sollicitudin leo. Phasellus eget neque sem. Aenean lorem magna, vulputate at mi non, consequat consequat libero. Cras convallis nibh vitae ultrices sollicitudin.

Det er en fordel at benytte et nummer uden enhed, da linjehøjden så automatisk vil blive justeret, hvis man ændrer på tekststørrelsen.

 

Afstand mellem ord

For at justere på afstanden mellem ord i et tekstelement så skal man benytte erklæringen word-spacing. Oftest benytter man enheden em til at angive værdien, men man kan også benytte andre enheder som f.eks. px. Enheden em specificerer afstanden mellem ord relativt i forhold til tekststørrelsen. Som standard er afstanden mellem ord lig med 0.25em. Bemærk at man også godt kan benytte negative værdier.

I nedenstående eksempel sættes afstanden mellem ord til at være 2em:

.Tekststykke {
  word-spacing: 2em;
}

Det vil resultere i at teksten ser sådan her ud:

Dette tekststykke har et stort mellemrum mellem ordene.

Det hjælper ofte at forstørre afstanden mellem ord når man har af gøre med fed tekst for at gøre det mere læsevenligt.

 

Afstand mellem bogstaver

For at justere på afstanden mellem bogstaver i et tekstelement så skal man benytte erklæringen letter-spacing. Oftest benytter man enheden em til at angive værdien, men man kan også benytte andre enheder som f.eks. px. Enheden em specificerer bogstaveafstanden relativt i forhold til tekststørrelsen. Som standard er der ingen afstand mellem bogstaverne.

I nedenstående eksempel sættes afstanden mellem bogstaver til at være 0.5em:

.Tekststykke {
  letter-spacing: 0.5em;
}

Det vil resultere i at teksten ser sådan her ud:

Dette tekststykke har et stort mellemrum mellem hvert bogstav.

Det hjælper ofte at forstørre afstanden mellem bogstaver når man har af gøre med bogstaver som er skrevet i Caps Lock (store bogstaver) for at gøre det mere læsevenligt.

 

Gå videre til Elementplacering i CSS her →