Kleur en typografie in CSS

Verschillende types kleur

CSS: kleur als naam

Er zijn 147 kleurnamen

  • pink
  • red
  • green
  • ...

Maar liever niet gebruiken! Ontwerpers willen doorgaans specifiekere kleuren.

body {
  background: pink;
}

CSS: kleur als hex code

16 miljoen kleuren via hexadecimale kleurcodes

van #000000 tot #FFFFFF

ofwel #000 tot #FFF

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

body {
  background: #bada55;
}

CSS: RGB kleur

Red-Green-Blue 

body {
  background: rgb(0,0,0);
}

p {
  background: rgb(40, 10, 230);
}

CSS: HSL kleur

Hue-Saturation-Lightness notatie 

p {
  background: hsl(310 10% 23%);
}

CSS: HSLa kleur

De Hue-Saturation-Lightness kan aangevuld worden met een alpha-waarde.

body {
  /* Hue: Graden op de kleurencirkel 0-359 */
  /* Saturation: Graden op de kleurencirkel 0% - 100% */
  /* Lightness: Graden op de kleurencirkel 0% - 100% */
  /* Alpha: Graden op de kleurencirkel 0-1 */
  color: hsla(0, 100%, 0%, 0.2);
}

p {
  background: hsla(310, 10%, 23%, 1);
}

CSS: RGBa kleur

Je kan de RGB-notatie aanvullen met een waarde voor alpha (= transparantie):

body {
  background: rgba(0,0,0,1);
}

p {
  background: rgba(40, 10, 230, 0.3);
}

CSS kleuren overzicht

  • Namen: red, tomato, green
  • hexadeximale waarde: #48963a
  • RGB - RGBa: rgba(123, 40%, 20%, 1)
  • HSL - HSLa: hsla(123, 40%, 20%, 1)

Kleurpallet - Kleuren combineren

Tip: auto-suggest colors

Open een CSS-bestand

Typ een nieuwe CSS-declaratie:

colo

En selecteer uit de autocomplete:

color

CSS-eenheden

px

Dit is kort voor pixel.

 

 

 

Dit is een vaste eenheid. De bovenstaande paragraph zal dus 100 pixels breed zijn. 

p {
  width: 100px;
}

em

Is relatief ten opzichte van de parent van het element.

 

 

 

 

div {
  font-size: 20px;
}

p {
  margin-top: 2em; /* 2em equals 40px */
}
<div>
  <p>
    Alle eendjes zwemmen in het water, ....
  </p>
</div>

rem

Root em: Is relatief ten opzichte van het root-element: <html>

 

html {
  font-size: 100%;  
}

body {
  font-size: 20px;  
}

p {
  /* 2rem equals 32px */
  margin-top: 2rem;
}

Vast vs relatief

Vaste eenheden lijken simpeler, maar zijn vaak een struikelblok voor schaalbaarheid en toegankelijkheid.

Conclusie

Gebruik uitsluitend rem voor font-sizing.

Een browser kan de font-size van de html selector veranderen

html {
  font-size: 100%;
}

body {
  font-size: 1.2rem;  
}

h1 {
  font-size: 2rem;
}

Tekst eigenschappen

Color

Tekstkleur

p {
  color: red;
}

Opacity

Ondoorschijbaarheid

 

 

 

Dit wordt niet gelimiteerd op tekst, maar zal het volledige element 50% minder doorzichtig maken.

p {
  /* Maak de paragraph 50% doorzichtig */
  opacity: 0.5;
}

Font-size

Tekengrootte (rem is aangeraden)

 

 

Tip:

Je kan kiezen welke tekengrootte je graag wilt gebruiken op je website.

 

Weet je niet goed hoe hier de verschillende waardes te bepalen, kies dan voor een type scale.

line-height

Regelhoogte (zonder eenheid is aangeraden)

 

 

 

html {
  font-size: 16px;
  line-height: 1.5;
}

Font-style

Gebruik een variant van de gevonden font.

.special {
  font-style: italic;
}

.another-one {
  font-style: oblique;
}

Font-weight

Kiest het dikte van het lettertype.

 

 

Let op:

Wanneer de browser hier niet een bold variatie kan vinden, zal deze zelf een bold genereren.

.special {
  font-weight: bold;
}

text-align

Het aligneren van text.

 

text-decoration

Enkele manieren om tekst te decoreren.

text-indent

Enkele manieren om tekst te decoreren.

Letter-spacing

Letterspariëring

Text-transform

Transformeren van letters tussen lowercase en lowercase

List-style

Pas de visuele weergave aan van List Items.

Oefening @Campus

Apple watch

 

programming Created with Sketch.

Uitdagingen

Sliding hover animatie

StuBru funky font

unicycle Created with Sketch.

(Enkel voor studenten met voorkennis)

What the font?

Wat is een font?

1 font = 1 bepaald lettertype in 1 bepaalde stijl:

bv: Roboto Regular

Wat is een font?

1 font heeft een hele hoop tekens:

 - Iedere letter van het alphabet (a - Z)

 - Ieder nummer (0 tot 9)

 - Lettertekens (; , . ? / >)

 - Lettervariaties (é ê ë ē ę è ž, ...)

Wat is een font?

Die tekens kan je gaan categoriseren volgens subsets 

 - Alle Griekse tekens

 - Alle Latijnse tekens

 - Alle cijfers

 - ...

Font gebruiken

Fonts gebruiken

font-family property (Lettertype)

 

 

De webpagina zal nu proberen het Verdana font te laden en indien dit font niet gevonden wordt op de computer, zal vervolgens Arial ingeladen proberen worden = fallback

html {
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

Fonts gebruiken

Verschil per besturingssysteem.

 

Welke fonts beschikbaar? (ref)

OSX (Apple): 198 fonts

Windows (Microsoft): 440 fonts

 

Fonts gebruiken

Default verschilt per software versie. (ref)

 

 

 

Fonts gebruiken

Design zal altijd een specifieke font verwachten, bijvoorbeeld: "Lato".

 

 

 

Maar wat doe je als die font niet bestaat op een gebruiker hun systeem?

html {
  font-family: "Lato", Arial, Helvetica, sans-serif;
}

Fonts gebruiken

1. Download de fonts en plaats ze in een mapje naast je index.html 

 

Gratis: Google fonts + Font squirrel

Betalend: Fonts.com, ...

Fonts gebruiken

Download enkel de variaties van de font dat je zal gebruiken!

Bijvoorbeeld:

  • regular
  • italic
  • black

Fonts gebruiken

Je kan Google Fonts toevoegen met een CDN (content delivery network). Maar voor onze lessen gaan we dit niet doen

html {
  font-family: 'Roboto', sans-serif;  
}

...
<head>
  ...
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
  ...
</head>

Fonts gebruiken

Google Fonts laat u enkel toe om fonts in het TTF formaat te downloaden! Echter Mozilla heeft een beter alternatief: WOFF en WOFF2

Fonts gebruiken

Gebruik een converter om

  1. het .ttf formaat om te zetten naar .woff en .woff2
  2. de juiste subset te kiezen van de font.

Online converters: Font Squirrel, Fontie of Transfonter

 

Hulpmiddel voor Google Fonts: Google webfont helper

Fonts gebruiken

Roboto.ttf

171kb

Subsetted

Roboto.ttf

47kb

Subsetted

Roboto.woff

26kb

Fonts gebruiken

Dan stuur je de fonts mee!

@font-face {
  font-family: "Lato";
  src: url('fonts/lato.woff2') format('woff2'), 
    url('fonts/lato.woff') format('woff');
}


html {
  font-family: "Lato", Arial, Helvetica, sans-serif;
}

Fonts gebruiken

Iedere variatie krijgt zijn eigen @font-face

@font-face {
  font-family: "Lato";
  src: url('fonts/lato.woff2') format('woff2'), 
    url('fonts/lato.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Lato";
  src: url('fonts/lato--bold.woff2') format('woff2'), 
    url('fonts/lato--bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "Lato";
  src: url('fonts/lato--italic.woff2') format('woff2'), 
    url('fonts/lato--italic.woff') format('woff');
  font-weight: normal;
  font-style: italic;
}


html {
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-style: normal;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
}

em {
  font-style: italic;
}

Oefening @home

freelance Created with Sketch.

Green world

Made with Slides.com