Web aplikacija za kombiniranje Google fontova

Jedan od bitnih čimbenika kvalitetnog web dizajna je kvalitetna tipografija. Odabir prikladnih fontova da bi prenijeli tematiku web stranice važan je kotačić web dizajna koji joj može dati presudan ton.

Nije isto ako za web stranicu tvrtke koja proizvodi igračke za djecu ili za stranicu vrtića koristiti neki font kao što je Roboto koji je sam po sebi dosta čvrst i strog. S druge strane, svakako nećemo nekoj korporaciji ili financijskoj ustanovi dizajnirati s fontom koji izgleda kao rukopis, primjerice, Pacifico ili Dancing Script. To bi bilo neozbiljno.

Isto tako, ako se rade web stranice za hrvatsko tržište, moramo koristiti neki font koji podržava dijakritičke znakove (č, ć, đ, š, ž). Ako nam je web stranica višejezična i neki od jezika ima svoju grupu dijakritičkih znakova tada i to moramo imati na umu. Primjerice, za njemački jezik trebaju bit podržani znakovi ä, ö, ü, za francuski jezik à, è, é, ê, ë, ï, ü, ÿ i tako redom za sve jezike koje namjeravamo postaviti. U suprotnom, ta slova se uopće neće dobro prikazivati. Kao što se vidi iz priloženog, odabir prikladnog fonta u izradi web stranica je ključan i svaki projekt je priča za sebe.

Način na koji odabiremo tipografiju ne mora nužno biti pomoću nekog programa ili aplikacije. Dovoljno je imati na umu temu projekta i iz glave izbaciti nekoliko kombinacija. Ipak, htjeli smo ići malo dalje. Kreirati alat koji će dati napredne mogućnosti filtriranja fontova prema određenim karakteristikama i pomoću jednostavnog sučelja prikazati kako kombinacija može izgledati u stvarnosti. Radi projekata do kojih nam je stvarno stalo da sve bude posve uštimano kako treba.

Dogovor je pao na izradu aplikacije (tzv. Single Page App) koja će omogućiti usporedni pregled kada se upare dva ili više fontova jedno pored drugoga, zajedno s njihovim varijacijama (debljina slova, veličine, ukošenost…). Sve to se treba događati u realnom vremenu bez osvježavanja ekrana nakon svake interakcije radi dobrog korisničkog iskustva. A to nam je moguće pomoću JavaScript programiranja i korištenja progresivnog frameworka kao što je React ili Vue.js.

Cilj je da korisnik iz bogate riznice fontova koji se mogu naći i besplatno preuzeti s Google repozitorija suzi odabir na najčešće dvije idealne kombinacije fontova koji se međusobno skladno nadopunjuju.

Konkretnije, strategija izrade aplikacije je omogućiti korisniku:

• Filtrirati fontove na temelju pisma (latinica, ćirilica, arapski, japanski…) jer web stranice se rade za cijelu planetu prema govornom području.
• Suziti izbor na određeni stil fonta. Primjerice, serif fontovi su više pogodni za tisak i književnost ali i tamo gdje se traži dekorativnost natpisa. Sans-serif fontovi su radi jednostavnije forme prikladniji za moderna sučelja, display fontovi dobro izgledaju na velikim naslovima te nekolicine manje bitnih grupa kao što je handwriting koji imitira rukopis i monospace kojeg karakterizira arhaično računalni izgled.
• Sortirati fontove radi lakšeg izbora prema stalnoj popularnosti, trenutnom trendu korištenja, datumu kreiranja itd.

Grafički dizajn ovdje nije bitan već smo se fokusirali na programiranje sučelja i izradu funkcionalnosti. Također, prilagođavanje mobilnim uređajima je napravljeno toliko da se aplikacija dostojanstveno prikazuje međutim sam rad s njom nije posve mogući na punoj razini. Aplikacija je namjenjena isključivo za rad na stolnom računalu i nije ciljana za prosječne korisnike već za dizajnere i developere stoga je nema smisla koristiti na mobitelima.

Sužen odabir fontova pruža na raspolaganju jednostavniju potragu za pravim fontovima. Na klik su dostupne detaljnije informacije svakog pojedinog fonta; koje debljine su podržane, varijanta (normalno uspravljeno slovo ili ukošeno) te kako izgleda generička rečenica fonta u stvarnosti. Naravno, svaki tekst se također može proizvoljno mijenjati prema svojim potrebama da se na licu mjesta vidi kakav će biti konačni rezultat.

Ako i nakon takvog suženja odabira i dalje nemamo odabrano ono pravo, dodat ćemo fontove koji nam se sviđaju u grupu omiljenih klikom na zvjezdicu pored naslova fonta. Nakon toga možemo raditi međusobne usporedbe fontova i fino uštimati konačni odabir.

Glavna strana igraonice dopušta unos proizvoljnog teksta i podešavanje stila fontova. Iako danas novi alati i aplikacije stižu svakodnevno i vrlo brzo potisnu prijašnje inačice, FontFest je primjer kako pomoću JavaScript programiranja izrađujemo interaktivnu web aplikaciju.