Odzivni vertikalni ritem – Fluid vertical rhythm

V svetu odzivnega spletnega oblikovanja moramo poleg odzivne tipografije upoštevati tudi odzivni vertikalni ritem. Slednji drži vertikalni ritem v ustreznem razmerju tudi v primerih, ko se naši elementi na strani spremenijo oz. prilagodijo manjšim ali večjim zaslonom.

Vertikalni ritem smo že preleteli v članku »Vertikalni ritem – Vertical Rhythm«, odzivno tipografijo v članku »Resnično odzivna tipografija – Fluid Typography«. Sedaj pa je potrebno odzivno tipografijo in odzivni vertikalni ritem združiti v skupno celoto. To najlažje dosežemo z uporabo CSS merske enote REM, ki je v osnovi “root em”. Na ta način lahko enostavno in hitro spremenimo velikost besedila in vertikalnega ritma.

“By sneaking a Trojan horse into your components. We use rem for components “root” and em for sub-parts of the components. Then, by adjusting the font-size of the root, we adjust all size-related CSS properties of a components at once.” – @simurai

Osnoven primer odzivnega vertikalnega ritma v kodi

CSS

html {
font-size: 0.8rem;
font-family: sans-serif;
}

@media screen and (min-width: 20rem) {
html {
font-size: calc(0.8rem + 1.2 * ((100vw - 20rem) / 30));
}
}

@media screen and (min-width: 50rem) {
html {
font-size: 2rem;
}
}

body {
line-height: 1.4rem;
}

p {
line-height: 1.4rem;
margin-bottom: 1.4rem;
}

HTML

<p>Vojublečnijša moska došna nizmaznost, razam, si z žvejocu neč ni kamoga. Tojti kabor me trovi prejapelj: „Taznom Nase nozari u norudni ametnospe, toha jaz šim grohego mnenjo“, meslim sama prve krenapit na to, da da ji krega toačepe, stasam samo prve dik arehite svaje misli o norodni umiknoste, podo v noslednjim si ze statem ža brdep, tadlebam čiz svojo en trejateljevo glovo per vedem, da padi an škaje za svojem drdpam in da krove: „Ne kaznum Vašid nazarav a narahne ameknaski en hi jig rad zvigil.“ Kidaj ši trovim: „Farej mo jib morom rozubeti, da jih ne do verjel.“</p>

Prikazan primer odzivno spreminja vertikalni ritem glede na velikost besedila, ki ga določamo s pomočjo media querijev. Seveda pa lahko odzivni vertikalni ritem veliko bolje dodelamo. Zanimiva tehniko si lahko ogledamo na primeru Mike Riethmuller-ja na svojem CodePen profilu – “Fluid vertical rhythm” in Smashing magazine primeru. Priporočam, da se testiranja odzivnega vertikalnega ritma lotite tudi sami.