Tipografija

Tipografija je izbor i upotreba pisma: koja se slova koriste, koliko su velika, koliko su razmaknuta i kako su raspoređena. Nije isto što i font, mada se te dvije riječi u govoru miješaju. Font je datoteka s jednim pismom; tipografija je sve odluke o tome kako se ono koristi.

Na sajtu je to sloj koji se ne primjećuje dok je dobar. Kad je loš, ljudi ne kažu da je tipografija loša; kažu da im se ne da čitati, ili jednostavno odu.

Od čega se odluka sastoji

Izbor pisma je samo prvi dio, i ne najvažniji.

Veličina. Za brodtekst na sajtu polazna tačka je oko šesnaest piksela. Naslovi idu naviše u koracima koji se vide, jer razlika od dva piksela ne govori ništa o tome šta je važnije.

Razmak između redova. Najčešće zanemarena postavka i ona koja najviše mijenja čitljivost. Za tekst se koristi oko jedan i po puta visina slova; zbijeni redovi su najbrži način da duži tekst niko ne pročita.

Dužina reda. Od šezdeset do sedamdeset pet znakova po redu. Tekst koji se preko cijele širine ekrana proteže u redove od sto dvadeset znakova oko se gubi pri povratku na sljedeći red.

Debljina. Dvije do tri debljine su dovoljne: obična za tekst, deblja za naslove, i eventualno nešto između. Podebljano u tekstu se koristi štedljivo, jer kad je sve naglašeno, ništa nije.

Kontrast prema pozadini. Sivo na svijetlosivom izgleda smireno na maketi i ne može se pročitati na telefonu na suncu.

Naša slova su prva provjera

Ovo je dio koji se u BiH preskoči redovno, a otkrije se tek kad sajt već radi.

Mnoga besplatna pisma nemaju č, ć, ž, š i đ. Kad ih nema, pregledač ta slova uzme iz nekog drugog pisma, pa se usred riječi pojavi slovo koje je drugačije široko i drugačije oblikovano. Na naslovu je to odmah vidljivo.

Provjera traje trideset sekundi: u pregledu pisma se upiše rečenica koja sadrži sva naša slova i pogleda se izgleda li ujednačeno.

Isto vrijedi i za ćirilicu, ako je koristite. Pismo koje podržava latinicu ne podržava nužno i ćirilicu, a mješoviti sadržaj bez toga izgleda kao dva različita sajta.

Tipografija je dio identiteta

Pismo je, uz boju, najbrži nosilac prepoznatljivosti. Ljudi ga ne imenuju, ali prepoznaju kad je dosljedno.

Zato tipografija spada u brendiranje, a ne u pojedinačni projekat. Odluka se donosi jednom i onda vrijedi za sajt, za ponudu, za fakturu, za objavu na Instagramu i za natpis na vozilu.

Praktično to znači zapisana pravila: koje pismo za naslove, koje za tekst, koje veličine za koji nivo, i šta se radi kad pismo nije dostupno, recimo u Wordu ili u Google dokumentima. Ta zamjenska lista je dio posla koji se najčešće zaboravi, pa svaka ponuda izgleda drugačije.

Kod manjih firmi je ovo jeftin dio identiteta. Dobrih besplatnih pisama ima dovoljno, a razlika između sajta koji izgleda kao firma i onog koji izgleda kao predložak je često upravo dosljednost u ovome.

Tipografija i brzina

Svako pismo je datoteka koju pregledač mora preuzeti prije nego što tekst prikaže kako treba.

Dva pisma s po dvije debljine su četiri datoteke. Dodajte kurziv i to je osam. Kod sporije veze to su sekunde, a sekunde su ono što mjeri Core Web Vitals.

Postoji i vidljiva posljedica. Dok se pismo učitava, tekst ili nestane ili se prikaže zamjenskim pismom pa poskoči kad pravo stigne. To poskakivanje je jedna od stvari koje Google mjeri kao nestabilnost stranice.

Rješenja su poznata i posao su za onoga ko održava sajt: koristiti moderne formate, učitavati samo debljine koje se stvarno koriste, i postaviti da se tekst odmah prikaže zamjenskim pismom umjesto da nestane.

Šta se najčešće popravlja

Kod sajtova koje preuzmemo, tri izmjene nose najveći dio razlike i nijedna nije izbor novog pisma.

Povećanje teksta. Sajtovi rađeni prije nekoliko godina redovno imaju brodtekst od trinaest ili četrnaest piksela, što je premalo na telefonu.

Razmak između redova. Podizanje s tijesnog na jedan i po odmah promijeni koliko se teksta pročita.

Ograničenje dužine reda. Tekst koji ide preko cijele širine ekrana se sužava na razumnu mjeru, što je izmjena od jedne linije koda.

Sve tri spadaju u UX posao jednako koliko i u dizajn, i sve tri se mjere: vrijeme na stranici i dubina skrolanja se vide odmah.

Kako se pismo bira

Kod većine firmi izbor traje predugo i vrti se oko toga šta se kome sviđa. Postupak koji daje odluku za jedno popodne izgleda ovako.

Prvo se skupi kratak spisak, najviše pet pisama. Kriterij nije ukus nego tri provjere: ima li naša slova, ima li barem tri debljine, i je li licenca čista za sajt i za štampu.

Zatim se svako od njih isproba na stvarnom tekstu, a ne na imenu firme. Uzme se pravi naslov, pravi odlomak od stotinjak riječi i pravi natpis na dugmetu. Pismo koje dobro izgleda u dvije riječi zna se raspasti u odlomku.

Onda se gleda na telefonu. Ne na maketi u dizajnerskom alatu nego na stvarnom ekranu, na sunčevoj svjetlosti ako je ikako moguće.

Na kraju se bira ono koje se najmanje primjećuje. Pismo za brodtekst treba nestati; posao mu je da se tekst čita, ne da se pismo vidi. Karakter ide u naslove, gdje ga ima nekoliko riječi i gdje smeta manje.

Ako je izbor između dva podjednako dobra, uzima se ono s više debljina. Ta odluka se isplati godinu dana kasnije, kad zatreba nešto što u drugom pismu ne postoji.

Greške koje najčešće viđamo

Prva je pismo bez naših slova, otkriveno poslije objave.

Druga je previše pisama. Tri za naslove, jedno za tekst, i još jedno koje je došlo s nekim dodatkom.

Treća je presitan tekst, najčešće zato što je dizajn odobren na velikom ekranu, a prilagođena verzija provjerena tek na kraju.

Četvrta je podebljano na svakoj drugoj rečenici, čime se gubi svaka hijerarhija.

Peta je pismo kupljeno bez provjere licence, pa se ispostavi da licenca za štampu ne pokriva sajt.

Šesta je nedostatak pravila. Pismo je izabrano, ali nigdje ne piše koje veličine se koriste, pa svaka nova stranica dobije svoju verziju i sajt se kroz godinu raspadne.

Lista za provjeru

• Prikazuju li se č, ć, ž, š i đ istim pismom kao ostala slova, i u naslovima?
• Koliko je velik brodtekst na telefonu i mora li se povećavati?
• Koliko znakova staje u jedan red na širokom ekranu?
• Koliko pisama i debljina sajt učitava?
• Poskakuje li tekst dok se stranica učitava?
• Postoji li zapisano pravilo koje pismo i koje veličine se koriste gdje?
• Imate li zamjensko pismo za dokumente u kojima pravo nije dostupno?
• Pokriva li licenca upotrebu i na sajtu i u štampi?

Pojmovi koje ćete čuti uz tipografiju

• Font: datoteka s jednim pismom u jednoj debljini.
• Serifno i beserifno: pisma s potezima na krajevima slova i ona bez njih.
• Razmak između redova: visina reda, mjerena prema visini slova.
• Hijerarhija: razlike u veličini i debljini koje govore šta je važnije.
• Web font: pismo koje se učitava sa sajta, a ne uzima s uređaja posjetioca.
• Brending: šira odluka o tome kako firma izgleda, čiji je pismo dio.