Kleur & typografie

Colors, units, fonts

WEB ESSENTIALS

CSS-eenheden

Units

Je kan elementen vormgeven met properties (eigenschappen) en values (waardes).

  • Voorbeelden van properties zijn color en font-size
  • Een value bestaat vaak uit een getal + unit 
.highlight {
  color: blue;
  font-size: 18px; /* Het unit hier is 'px' */
}

px

  • = pixel
  • Dit is een vaste eenheid

 

 

 

De bovenstaande paragraph zal dus een font-grootte hebben van 20 pixels, ongeacht de schermgrootte.

p {
  font-size: 20px;
}

Relatieve eenheden

Relatieve eenheden passen zich aan aan de bovenliggende element, het html-element of het browservenster.

 

Verschillende soorten:

  • em
  • rem
  • %
  • (d)vw, (d)vh

rem

  • = Root Element font-size
  • Dit is een relatieve eenheid 
  • Past zich aan ten opzichte van de default font-grootte van het html-element.
body {
  /* 1rem equals 16px */
  font-size: 1rem;  
}

p {
  /* 2rem equals 32px */
  font-size: 2rem;
}

❤️  Voorkeur

Default font-size

De gebruiker kan de default font-size aanpassen:

👉 Gebruik daarom altijd relatieve waardes ipv pixels.

Zo respecteer je de lettergrootte die gebruikers instellen en schaalt alles evenredig mee.

em

  • Relatief ten opzichte van de parent
  • Wordt minder gebruikt
section {
  font-size: 20px;
}
 
h2 {
  font-size: 2em; /* 2em = 40px */
}
<section>
	<h2>Lorem ipsum dolor sit</h2>
</section>

⚡️ Excelleren

%

  • Relatief ten opzichte van de parent
  • Gelijkaardig aan em 
section {
  font-size: 20px;
}
 
h2 {
  font-size: 110%; /* 2em = 40px */
}
<section>
	<h2>Lorem ipsum dolor sit</h2>
</section>

Color

Kleurnotaties

Zoals units, zijn er ook verschillende manieren om kleuren te definiëren in CSS.

  • Er zijn 147 kleurnamen: pink, bue, darkmagenta,...
  • Handig voor testing, maar brandings hebben meestal meer specifieke kleurwaardes.

 

body {
  background: pink;
}

HSL

Waarde op basis van 3 parameters:

  • Hue: kleurtoon in graden van 0 tot 359
  • Saturation: verzadiging van 0% (grijs) tot 100% (zuivere kleur)
  • Lightness: helderheid van 0% (zwart) tot 100% (wit) 
body {
  background: hsl(243, 58%, 65%);
}

❤️  Voorkeur

HSL

In Figma kan je dit duidelijk zien, door met de verschillende toggles te spelen.

Afbeeldingsbron

HSLa

HSL + een extra 4e parameter: Alpha

  • De alpha waarde duidt de transparantie (=opacity) aan
  • Waarde tussen 0 (doorzichtig) en 1 (ondoorzichtig of opaak)
body {
  background: hsla(243, 58%, 65%, 0.5);
}
body {
  background: hsl(243, 58%, 65%);
}

RGB en RGBa

  • Red (rood): waarde van 0 tot 255
  • Green (groen): waarde van 0 tot 255
  • Blue (blauw): waarde van 0 tot 255
  • Alpha (opaciteit): waarde tussen 1 en 0 
body {
  background: rgba(118, 113, 217, 0.5);
}
body {
  background: rgb(118, 113, 217);
}

HEX

16 miljoen kleuren via hexadecimale kleurcodes

  • van #000000 tot #FFFFFF

Als de 3 paar hexadecimale getallen uit 2 dezelfde getallen bestaan, dan kan de verkorte notatie gebruikt worden:

  • van #000 tot #FFF
body {
  background: #7671D9;
}

🤓 Tip

Auto-complete in VSCode

  • Open een CSS-bestand
  • Typ een nieuwe CSS-declaratie: colo
  • Selecteer uit de autocomplete
  • Start met het typen van een kleur: ma
  • Selecteer een optie

🤓 Tip

Switch tussen kleurnotaties

  • Hover over een kleur-preview vierkantje
  • Klik op de value in de pop-up tot je de juiste kleurnotatie hebt

Tekst opmaken

Color

Met color pas je de tekstkleur aan. Je kan hier de voorgedefinieerde waarden gebruiken, maar ook de andere kleurnoteringen:

  • hsl(a)
  • rgb(a)
  • ...

 

p {
  color: red;
}

p {
  color: hsl(243, 58%, 65%);
}

😍

 

Opacity

Met opacity pas je de transparantie aan

  • Heeft een waarde tussen 0 (doorzichtig) en 1 (volledig opaak)
  • Niet enkel de tekst, maar het volledige element zal doorzichtig worden
p {
  opacity: 0.5;
}

Font-size

Met font-size pas je de lettergrootte aan

  • Je kan verschillende units (px, em...) gebruiken, maar we kiezen voor rem als schaalbare unit 
h1 {
  font-size: 2rem; 
}

🤓 Tip

Er zijn verschillende extensies beschikbaar die helpen bij het omzetten
van px-waardes naar rem-waardes

Line-height

Line-height is de regelafstand, dit bepaalt de ruimte tussen regels tekst.

  • Je geeft een getal mee zonder unit
  • Dit getal geeft de verhouding t.o.v. de font-size weer
p {
  font-size: 1rem; /* 16px */
  line-height: 1.5; /* 24px */
}

Font-weight

Met font-weight geef je de letterdikte aan.
Dit stel je in met een benaming of een numerieke waarde

  • Benaming: light, normal, medium, semi-bold, bold...
  • Numerieke waarde: 100, 200, 300, 400, 500, 600...
p {
  font-weight: bold;
}

p {
  font-weight: 400;
}

Font-weight

Hoe weet je welke benaming of waarde je nodig hebt?

  • Dit vind je terug wanneer je een font download of linkt
  • Let op: Niet elk font heeft alle varianten

Font-style

Met font-style pas je de stijl van het font aan

  • Normal: normale tekst (standaard)
  • Italic: cursieve tekst
  • Oblique: lijkt op cursief, maar meer een “scheefgetrokken” versie van de normale tekst
p {
  font-style: italic;
}

Text-align

Met text-align bepaal hoe tekst horizontaal wordt uitgelijnd

  • left: tekst links uitlijnen (standaard)
  • right: tekst rechts uitlijnen
  • center: tekst in het midden
  • justify: tekst verspreiden zodat de regels even breed zijn (zoals in kranten en boeken)
p {
  text-align: center;
}

Text-align

Text-decoration

Met text-decoration voeg je een lijn toe aan tekst

  • none: geen lijn (standaard)
  • underline: tekst onderstrepen
  • overline: lijn boven de tekst
  • line-trough: doorstrepen
p {
  text-decoration: underline;
}

a {
  text-decoration: none;
}

🤓 Tip: haalt de lijn bij een link weg

Text-decoration

Je kan deze lijn nog verder opmaken

Text-indent

Hiermee kan je de eerste regel van een paragraaf laten inspringen

  • Je geeft hiervoor een waarde mee (rem, %, px...)
p {
  text-indent: 2rem;
}

Text-indent

Letter-spacing

Gebruik je om de ruimte tussen letters aan te passen

  • Positieve waarde: Letters staan verder uit elkaar
  • Negatieve waarde: Letters staan dichter bij elkaar
p {
  letter-spacing: 0.2rem;
}

p {
  letter-spacing: -0.2rem;
}

Letter-spacing

Text-transform

Bepaalt hoe de letters in een tekst worden weergegeven qua hoofd- en kleine letters.

  • none: geen verandering (standaard)
  • uppercase: alle letters worden hoofdletters
  • lowercase: alle letters worden kleine letters
  • capitalize: de eerste letter van elk woord wordt een hoofdletter
p {
  text-transform: uppercase;
}

Text-transform

List-style-type

Kan je gebruiken om lijsten (ol & ul) op te maken

  • disc: bolletje (standaard)
  • circle: open cirkel
  • square: vierkantje
  • roman: romeinse nummers (I, II, III, IV...)
  • ...
ul {
  list-style-type: square;
}

ul {
  list-style-type: none;
}

🤓 Tip: haalt de bolletjes weg bij bv. navigatie

List-style-type

List-style-image

Je kan ook een eigen afbeelding meegeven als bullet

ul {
  list-style-image: url("../images/leaf.png")
}

🤓 Tip

Met een svg-icoon kan je leuke, custom lijsten opmaken

Fonts gebruiken

Lettertype vs. font

Een lettertype is de stijl of opmaak van letters

  • Roboto, Times New Roman, Comic Sans...
  • In het Engels: typeface of font family

Google fonts

Figma

Lettertype vs. font

Binnen een lettertype of font-family heb je verschillende fonts
= varianten van het lettertype

  • Roboto thin
  • Roboto thin italic
  • Roboto bold
  • Roboto bold italic
  • ...

Lettertypes gebruiken

Je laadt een lettertype in via de font-family property

  • Je schrijft eerst de naam van het lettertype
  • Als deze naam spaties bevat, schrijf je het tussen haakjes "..."
  • Daarna voeg je een fallback toe: een gelijkaardig, standaard font dat ingeladen wordt als het lettertype niet gevonden wordt
html {
  font-family: Roboto, Arial, Helvetica, sans-serif;
}

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

System fonts vs Custom fonts

System fonts zijn lettertypen die vooraf op een computer of toestel zijn geïnstalleerd, dit hangt af van het besturingssysteem

  • OSX (Apple): 198 fonts
  • Windows (Microsoft): 440 fonts


Bekende system fonts:
Arial, Times New Roman, Verdana, Georgia, Courier New...

System fonts vs Custom fonts

Custom fonts zijn lettertypes die niet standaard op je toestel staan, je moet ze downloaden en zelf installeren

Custom fonts inladen

Bijna elke website maakt gebruik van custom fonts, dus we moeten ervoor zorgen dat deze fonts altijd beschikbaar zijn, ook al staan ze niet op de computer van de bezoeker.

Dat kan op twee manieren:

  1. ​​De fonts laten inladen via een CDN
  2. De fonts zelf hosten: de font-bestanden zitten mee in de mappenstructuur van je website

Google Fonts inladen met CDN

Een Content Delivery Network is een snelle manier om bestanden van het internet (zoals lettertypes) binnen te halen, omdat ze overal ter wereld op verschillende servers klaarstaan.

  • We voegen een link toe in onze code naar de nodige fonts
  • Wanneer iemand onze site bezoekt, worden de fonts via deze link ingeladen
<head>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
</head>

Google Fonts inladen met CDN

<head>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
</head>
  1. Ga naar Google Fonts en klik op een lettertype
  2. Klik op "Get font", herhaal dit eventueel voor een tweede font
  3. Klik op "Get embed code"
  4. Kies rechts voor de optie "link"
  5. Kopieer het stukje code en plaats in de <head> van je html-file
  6. Voeg dit toe in de head van elke html-pagina van je site
html {
  font-family: 'Roboto', sans-serif;  
}

Fonts zelf hosten

  1. Ga naar Google Fonts en klik op een lettertype
  2. Klik op "Get font", herhaal dit eventueel voor een tweede font
  3. Klik op "Download all"
  4. Converteer je fonts naar .woff en .woff2 bestanden
  5. Plaats je font-bestanden in een "fonts"-mapje binnenin je project
  6. Je moet de fonts eerst definiëren in je in je css-file voor je ze kan gebruiken (zie volgende slide)

⚡️ Excelleren

Fonts zelf hosten

Als de fonts klaarstaan in een mapje, moet je ze in je CSS bestand eerst definiëren door @font-face regels toe te voegen.

  • Let er op dat je pad correct is.
  • Per gewicht voorzie je een nieuwe @font-face regel, voor een variabel font is 1 enkele regel voldoende
  • Plaats deze in het begin van je css-bestand

⚡️ Excelleren

@font-face {
  font-family: "Lato";
  src: url('fonts/Lato-Regular.woff2') format('woff2'), 
    url('fonts/Lato-Regular.woff') format('woff');
  font-weight: 400; /* we definiëren ook het gewicht */
  font-style: normal;
}