Vertikalni ritem – Vertical Rhythm

Za vertikalni ritem oz. “Vertical Rhythm” ste najverjetneje že slišali, če ste le malo raziskovali tipografijo na spletu. Gre za zelo pomembno tehniko ponavljajočega vzorca, ki daje našemu besedilu in ostalim elementom ritem, bolj konstanten je vzorec, boljši je ritem. Posledica vertikalnega ritma pa je struktura, ki našem bralcem omogoča lažje prebiranje vsebin.

Kaj je vertikalni ritem?

Vertikalni ritem v osnovi izhaja iz tiska, kjer je skrbel za enakomerne razmike med elementi na strani. To običajno dosežemo z t.i. “baseline-nom”, ki nam omogoča izgradnjo enakomernih razmikov. V praksi si to najlažje predstavljamo s pomočjo vodoravnih črt, kot smo jih vajeni iz osnovnošolskih zvezkov. Na ponavljajoč vzorec črt pa moramo ustrezno razporediti naše besedilo in elemente.

Vertikalni ritem in splet

Pri spletu je naš “baseline” višina vrstice (line-height) v osnovnem (body) besedilu. V praksi to pomeni, če je višina naše vrstice 24px je potem tudi naš “baseline” enak 24px.

Implementacija vertikalnega ritma je od tu naprej precej enostavna, držati se moramo dveh pravil:

  1. Vsem elementom določimo odmike 24px ali njegovemu večkratniku (48px, 72px, …).
  2. Nastavitev višino vrstice 24px ali njegovemu večkratniku (48px, 72px, …).

Primer umestitve pravil v kodo

h1 {
  line-height: 48px;
  margin: 24px 0;
}

p {
  line-height: 24px;
  margin: 24px 0;
}


Razlika med osnovnim stilom in po implementaciji vertikalnega ritma.

Vertikalni ritem prinaša:

  • organiziranost
  • spokojnost
  • lažje branje
  • profesionalnost

Razlog zato je tiči v načelu ponovitve (The Principle of Repetition), ki osnovi pomeni vzorec oz. ponavljajoč element, ki povzroča domačnost, občutek da so stvari povezane ter daje pridih profesionalnosti.

Z uporabo vertikalnega ritma lahko tako svoje spletne (in druge) projekte hitro izboljšate, predvsem pa olajšate prebiranje vsebin svojim uporabnikom in izboljšate svoj spletni nastop oz. predstavitev.

Dodatno branje na temo Vertikalnega ritma:

Komentiraj


*