Uporaba resnično odzivne tipografije ni tako zapletena, kot deluje na prvi pogled. Z novejšimi CSS3 enotami, kot so vw in vh in zaradi relativno dobre podpore v spletnih brskalnikih jo lahko že uporabljamo brez večjih težav.
Tipografija je bil zadnji večji košček pri odzivnem spletnem designu (RWD), ki ni bil resnično odziven oz. fluiden, ampak smo ga prilagajali zaslonom s pomočjo “breakpointov”. S pomočjo enot vw in vh pa lahko pripravimo resnično odzivno tipografijo, ki se bo sproti prilagajala prostoru na zaslonu.
Obstaja več različnih načinov uporabe resnično odzivne tipografije, ogledali pa si bomo štiri načine:
Klasična metoda
font-size: 4vmin;Preprosta metoda, kjer enota vw, vh, vmin ali vmax določa velikost fonta.
Smashingmagazine I
font-size: calc(2em + 2vw + 2vh);Naprednejša oblika, kjer velikosti fonta 32px (2em) dodamo še dve enoti vw in vh in tako odzivno povečujemo font.
Vir: https://twitter.com/smashingmag/status/596642216682074112
CrocoDillon
font-size: calc(4vw + 4vh + 2vmin);Zanimiva oblika, ki nam omogoča, da se velikost fonta prilagaja polju v katerem se font nahaja. Npr. DIV polju, zaslonu, …
Vir: https://codepen.io/CrocoDillon/pen/fBJxu
Smashingmagazine II
font-size: calc(16px + (24-16)*(100vw-400px)/(800-400));Naprednejša zgornja oblika nam omogoča, da imamo na resoluciji 400px velikost fonta 16px, ki se nato na resoluciji 800px transformira na 24px. Izpeljanko te metode uporabljam tudi sam na blogu.
Vir: https://www.smashingmagazine.com/2016/05/fluid-typography/#controlling-the-rate-of-scale
Pred uporabo resnično odzivne tipografije v svojem projektu izberite ustrezno metodo. Prepričajte se tudi o njeni podpori v brskalnikih za katere projekt pripravljate in predhodno ustrezno testirajte izbrano rešitev.
Ne pozabite predhodno nastaviti osnovne velikosti fonta, preden implementirate resnično odzivno tipografijo. V nasprotnem primeru bo brskalnik uporabil osnovno nastavitev, ki ni nujno enaka vaši.
