Razumijevanje pisanja tipografije za web
U Web dizajnu tema tipografije je važna kada se razmatraju sva područja korisničkog iskustva. Svaka web-lokacija ima potrebu za tekstom, a postoje smjernice koje možete pratiti kako biste izgradili iznimno zapanjujući izgled. Treba uzeti u obzir mrežne crte, slova, visinu fonta, razmak teksta, sheme boja i druga slična svojstva.
U ovom članku želim preći na područje web tipografije. Razmotrit ćemo popularne ideje iza dizajniranja vjerodostojnih tekstova na web stranicama. Usput ću vam predstaviti nekoliko korisna svojstva CSS3 koje dizajneri često zaboravljaju.
Pokušao sam se više usredotočiti na teoriju i ideologije za web. To daje širi fokus na digitalni tekst općenito, a vi, web dizajner, tada možete odabrati koji će se stilovi primjenjivati za koju svrhu. Kontekst je uvijek ključan i to morate odrediti na odgovarajući način za svaki projekt na kojem radite. Smatrajte ovaj vodič referentnim paketnim prepunom modernih web trendova tipografskih inovatora diljem planeta.
Izmjerite svoje stavke
Nećete morati razbijati palicu za ovu vrstu mjerenja. Zapravo mjera u odnosu na tipografiju odnosi se na širinu (vodoravno) bilo kojeg odlomka na vašoj stranici. To nije tema o kojoj se uvijek raspravlja, ali utječe na čitljivost vašeg sadržaja. Općenito, želite ograničiti bilo koji redak duljine 75-85 znakova (ne nužno s razmacima).
Sada, ovo može izgledati kao malo rastezanje za neke šire rasporede. Pogotovo ako je vaš dizajn fluidan i namijenjen prilagodbi jer korisnik ponovno određuje veličinu prozora preglednika. Uvijek možete postaviti CSS max širine svojstvo na glavnom sadržaju div. Margine kodiranja i veličine fonta u prilagodljivim jedinicama (postoci, ems) umjesto piksela omogućit će takvu fleksibilnost unutar bilo kojeg izgleda.
Ne postoji maksimalna mjerna jedinica koja bi trebala biti oprezna. Način pisanja sadržaja i riječi u obliku rečenica mnogo je važniji od širine svake linije. Ali imajte na umu da su dulje rečenice mnogo teže čitati u usporedbi s kraćim, konciznim izjavama.
Vodeći objasnio
Prilikom osmišljavanja, zajedno s mjerom u paragrafu, trebate uzeti u obzir i ideju vodeći. Riječ se izgovara “ledd-ing”, poput olova koji se koristi u olovkama. Ovo ime potječe iz starih dana mehaničkog slaganja, gdje su trake olova bile smještene između redaka teksta.
Vodeći je još uvijek vrlo važan koncept u web dizajnu i ide ruku pod ruku s paragrafskim mjerama. Kako se širina paragrafa povećava, trebate primijeniti jednako povećanje na iznos vodećeg, ili razmak između redaka teksta. Ovaj dodatni prostor čini čitanje mnogo lakšim na vašim očima.
Ako bi prolazili kroz vrlo čvrsto ranjen tekst, moglo bi vam biti teško usredotočiti se na jednu liniju. Ako je to slučaj, pokušajte povećati količinu vođenja pomoću CSS-a linija visina nekretnine. Uvijek želite više prostora između redaka teksta nego između riječi. Inače se vaši tekstualni blokovi mogu pojavljivati kao ispis u novinama i neće biti vrlo jednostavni za korištenje.
Čvrsta tehnika je primijeniti više prostora nego što je bilo potrebno i smanjiti ga ako je potrebno. Nisu svi tekstovi jednaki i zasigurno će vam trebati paragrafi s različitim unutarnjim oblikovanjem, kao što su podebljane riječi, veze za sidrenje, podcrtavanje itd. Uz neke dodatne promjene te promjene neće se osjećati izvan ravnoteže u odnosu na drugi.
Koristite prirodne veličine fontova
Još uvijek postoji nekolicina web-mjesta koja se odlučuju za veličinu fonta manjeg od prosjeka. 11px-12px može se činiti da je mnogo više od “standardni profesionalni” za poslovne izglede. Ali ove veličine ne pomažu većini posjetitelja koji traže određene informacije.
Općenito, web-preglednici zadani su 16px ako ne primijenite CSS pravila. Čak i ovo se može smatrati malo malim ako imate dodatnu sobu u vašem rasporedu za smještaj većeg teksta. Veće veličine slova izgledaju ljepše i mnogo ih je lakše pregledavati za relativne ključne riječi. Fontovi serifa često nisu odabrani kao materijal za odlomke, ali se ipak možete izvući s njima. Predlažem da koristite mnogo veće veličine teksta za fontove temeljene na serifu kako biste poboljšali čitljivost i privukli pozornost.
Odgovorite na okruženje korisnika
Dok isprobavate različite obitelji i veličine fontova, vaše područje sadržaja morat će se sukladno tome prilagoditi. Standardna jedinica s kojom se držim je EMS lako se mogu mijenjati prema dostupnom prostoru i razlučivosti zaslona. To optimizira performanse na korisnikovom kraju što je najvažnije.
Ali kada imate tako fleksibilan sadržaj, vaš izgled čini sklon pogrešnom izgledu. Sadržaj u području podnožja ili bočne trake u nekim preglednicima može biti iskrivljen ili izvanbilančni. Ili možda imate poteškoća s redanjem slika ili drugih oblika medija unutar glavnog teksta. Postoje neke druge alternative za korištenje ems ako vam je potreban izgled fiksnog stila - ali pokušajte s oba rješenja kako biste vidjeli koji vam se najviše sviđa.
Zapamtite da će fiksne širine i veličine paragrafa zaključati mnogo postavki u vašem dizajnu. Izvrstan je za sadržaj koji uključuje mnogo stacionarnih estetskih efekata - zamislite pozadinske slike ili mnogo ugrađenih widgeta s bočne trake. To je također jednostavan postupak za izgradnju područja sadržaja tekućine u lijevom stupcu s fiksnim bočnim trakama s desne strane.
Stil na temelju konteksta
Neki drugi doista uredni CSS trikovi skriveni su od mainstream dizajna. Konkretno, postoje trendovi kopirani iz tiska koji se mogu primijeniti u odgovarajućem kontekstu.
Mnogi web dizajneri nikada nisu ni koristili CSS svojstvo s uvlačenjem teksta. Nabavite vrijednost za uvlačenje prvog retka bilo kojeg stavka ciljanog ovim pravilom. Jedinice slijede standardne tekstualne opcije kao što su pikseli, točke, ems, postotci ... To sigurno nije trend koji ćete naći u većini blogova. No, on pruža lijep ritam stranice dok čitate velike blokove teksta.
Postoji još jedan tip CSS selektora poznat kao a pseudo element. To može ciljati određeni dio bilo kojeg selektora sadržaja. CSS3: pseudo-selektor prvog slova savršen je za stvaranje fancy stilova o važnim paragrafima. Možete otvoriti uvodno pismo svakog paragrafa - slično jednoj priči s prilično priču - koristeći bold, kurziv ili čak mijenjajući font. Pogledajte ovaj prekrasan primjer kapsula koji uključuje neke dodatne CSS kodove koje možete koristiti.
Igranje s razmakom između slova
Siguran sam da su mnogi od nas čuli za pojam praćenja, ali još uvijek nisu shvatili da je to ista ideja kao vlasništvo CSS slova. Ta su dva pojma jedan u istom, a odnose se na tiskanu i digitalnu tipografiju. Jedinica se odnosi na razmak između slova unutar bilo kojeg retka teksta. To je doista uredan učinak za primjenu na zaglavlja, pa čak i na neke manje blokove sadržaja na vašoj web-lokaciji.
Važno je ne brkati pojmove razmak između slova i kerning. Oba se odnose na tipografiju i udaljenost između slova. Međutim, sljubljivanje se posebno odnosi na udaljenost između 2 pojedinačna slova u riječi. Svojstvo razmaka slova primjenjivat će se na cijeli element teksta, bilo da se radi o riječi ili stavku ili zaglavlju ili sidru. Imajte to na umu kada se igrate s novim idejama za stilove.
Često koristim nekoliko piksela / razmaka između slova u zaglavljima sa svim velikim slovima. Time se pojedini likovi dijele s dodatnim prostorom, a pojavljuju se i kao vrlo definirani “naslov” izgled. Negativni razmak između slova također odlično funkcionira u pravom kontekstu. Uglavnom se držim manjih jedinica, možda -0.03em ili -0.1em najviše.
Kombiniranje i usklađivanje slova
Koncepti dizajna iza web tipografije zasigurno su oblik umjetnosti, a ne toliko znanosti. Postoje smjernice koje možete slijediti, ali ne postoje čvrsta pravila s kojima ste ograničeni. To znači da imate ogromnu količinu slobode za eksperimentiranje miješanja i podudaranja različitih fontova kojima imate pristup.
Daleko najpopularnija kombinacija slova uključuje podjelu serif / sans-serif za sadržaj zaglavlja i paragrafa. Volim se prebacivati na oba, ali češće ću koristiti serif fontove u odjeljcima zaglavlja. Dodatne oznake i potezi na svakom od slova čine ih laskavijim kao dominantni tekst stranice.
Osim toga, sans-serif fontovi su čišći i jednostavniji za sastavljanje u rečenicama. To ne znači da serif fontovi neće raditi u paragrafima. Zapravo, postoji mnogo sjajnih primjera! Ali malo poznati koncept nazvan x-height je od presudne važnosti za razlikovanje složenosti tipografije. Od gledanja u baznu liniju par riječi koje ćete vidjeti kako će takvi fontovi biti “uklopiti” jedno s drugim.
Također je vrijedno spomenuti važnost prostora između tih različitih elemenata. Vjerojatno ćete koristiti 2 ili 3 različita stilova zaglavlja, tako da će se svaki od njih pojaviti s razlikom. Sklon sam držati h2 / h3 elemente bliže sljedećem bloku odlomaka, jer to implicira da postoji korelacija između sadržaja.
Ta je povezanost posebno korisna kada koristite dva potpuno različita slova jedan do drugog. Preporučujem ne više od 3 različite obitelji fontova po skupu sadržaja. Nakon prevelikog broja prilagođavanja, vaše se riječi pojavljuju ispremiješane, a cijela stranica izlazi poput nalik pogrešnih fontova.
Zaključak
Nadam se da će ti koncepti osvijetliti složenu temu digitalne tipografije. Može biti teško ući u posao kao dizajner, pogotovo ako vam je cijela tema stran. Ali nastavite studirati i budite sigurni da vježbate cijelu hrpu!
Sljedeći tjedan: Ostanite s nama jer ćemo istražiti neke korisnih alata i resursa za bolju web tipografiju.
Više…
Evo još postova povezanih s tipografijom:
- Izlog web dizajna s prekrasnom tipografijom
- Bolja tipografija za moderne web stranice
- Brzi vodič za tipografiju: naučite i budite nadahnuti
