Web: Essentials

Appearance

CSS: Typografie ​

Basiseigenschappen voor tekststijling ​

font-size - Tekstgrootte ​

Bepaalt de grootte van de tekst. Je kunt verschillende eenheden gebruiken maar rem heeft de voorkeur:

css
p { font-size: 1rem; }
h1 { font-size: 2rem; }

Titel: 2rem

Body: 1rem

line-height - Regelafstand ​

De afstand tussen tekstregels, belangrijk voor leesbaarheid. Voor line-height gebruiken we een waarde zonder unit. Deze is relatief aan de font-size.

css
p { 
    font-size: 1rem;
    line-height: 1.5; /* 1.5x de font-size = 1.5rem */
}

font-weight - Tekstgewicht ​

Het gewicht van de tekst. Je kan hier een numerieke waarde gebruiken of een keyword:

  • 100 - 900 (numeriek)
  • normal (400), bold (700)
  • lighter, bolder (relatief ten opzichte van parent)
css
h1 { font-weight: bold; }
p { font-weight: normal; }
.light { font-weight: 300; }
.heavy { font-weight: 900; }

Titel: bold

Body: normal, met heavy en light classes.

font-style - Tekststijl ​

Voor cursieve of normale tekst:

css
em { font-style: italic; }
p { font-style: normal; } /* standaard */

Body: normal, met emphasis.

font-family - Lettertype ​

Bepaalt welk lettertype gebruikt wordt. Je kan meerdere lettertypes definiëren per lijn. Deze werken als fallback (reserve) indien een lettertype niet beschikbaar is.

Lettertypes tussen quotes zijn zelf geladen lettertypes, standaard (systeem) lettertypes kan je zonder quotes definiëren.

css
body { 
  font-family: "Helvetica Neue", Arial, sans-serif; 
}

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

code { 
  font-family: "Courier New", Monaco, monospace; 
}

Fontstack categorieën:

  • Serif (schreef): Times, Georgia
  • Sans-serif (schreefloos): Arial, Helvetica
  • Monospace: Courier, Monaco - voor code

Tekstuitlijning en decoratie ​

text-align - Tekstuitlijning ​

Bepaalt hoe tekst uitgelijnd wordt binnen zijn container:

css
h1 { text-align: center; }
p { text-align: left; } /* standaard */
.quote { text-align: right; }
.justified { text-align: justify; }

Titel: gecentreerd

Paragraaf: links (standaard)

Quote: rechts

Lange tekst: justified. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed enim libero, luctus eu tincidunt in, accumsan vitae nisl. Nunc accumsan neque enim, in tempor tellus ornare a.

text-decoration - Tekstdecoratie ​

Voor onderlijning, doorhaling, etc.:

css
a { text-decoration: underline; }
.crossed { text-decoration: line-through; }
.overlined { text-decoration: overline; }
.clean-link { text-decoration: none; }

/* Meerdere decoraties */
.multiple { text-decoration: underline overline; }

/* Geavanceerd */
.fancy { 
  text-decoration: underline; 
  text-decoration-color: hsl(0,0,0);
  text-decoration-thickness: 2px;
  text-decoration-style: dotted;
}

Paragraaf met een link, clean-link, crossed, overlined, multiple en fancy

text-transform - Teksttransformatie ​

Wijzigt de case van tekst:

css
.uppercase { text-transform: uppercase; } /* ALLES HOOFDLETTERS */
.lowercase { text-transform: lowercase; } /* alles kleine letters */
.capitalize { text-transform: capitalize; } /* Eerste Letter Van Elk Woord */
.normal { text-transform: none; } /* Originele case behouden */

Paragraaf met uppercase, lowercase, capitalize

Meer typografie-eigenschappen ​

text-indent - Tekstinspringing ​

Voor de eerste regel van een paragraaf:

css
p { text-indent: 2rem; } /* Eerste regel 2rem inspringen */

Paragraaf met indent.

letter-spacing - Letterspatiëring ​

Ruimte tussen individuele letters:

css
p { letter-spacing: 1px; } /* Meer ruimte tussen letters */
.tight { letter-spacing: -1px; } /* Letters dichter bij elkaar */
.spaced { letter-spacing: 0.1rem; }

Paragraaf met tight en spaced.

word-spacing - Woordspatiëring ​

Ruimte tussen woorden:

css
p { word-spacing: 2px; }
.tight-words { word-spacing: -2px; }

Paragraaf met tight words.