Resnično odzivna tipografija – Fluid Typography

Resnicno-odzivna-tipografija-Fluid-Typography

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.
advanced-calc-800-opt
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.

Uporabni viri za odzivno tipografijo:

Oznake: Fluid TypographyOdziven spletni designRWD

Komentiraj


*