Više nego primetno je da se sem dizajna i funkcionalnosti sajta jako puno posvećuje pažnja sadržaju koji njegove strane nude. Čak štaviše u mnogim slučajevima ne možete ni početi da dizajnirate ili da pravite neku funkcionalnost na sajtu ukoliko ne znate koji će tačno sadržaj taj izgled da predstavi.

Najvažniji deo sadržaja je naravno tekst. On može biti predstavljen na različite načine i to uglavnom zavisi od fonta koji je korišćen, stila, veličine, boje itd. Kada se određuje font za web potrebno je obratiti pažnju na to šta jedan font treba da ima da bi se lepo video na ekranu. Evo nekih od karakteristika:

• nizak kontrast, jednostavan stroke sa konzistentnom debljinom
• dobra visina
• pristojna širina i prostor između slova
• pristojna širina u okviru slova

Uzimajući ove napomene u obzir kada dizajnirate sajt možete otići i dalje od standardnih Web fontova. Ako želite da kreirate custom font onda postoji par dizajn principa kojih se treba pridržavati.

Veličina

Veličina fonta je jedan od najlakših faktora za kontrolisati na ekranu, pa se s toga njemu ne daje važnost koju zaslužuje na polju Web tipografije. Veličina fonta je važna u procesu davanja hijerarhije sadržaju, a relativne veličine naslova, teksta u sadržaju i footeru mogu imati veliki uticaj ne celokupni izgled strane. Veličina fonta je takođe blisko povezana sa drugim karateristikama strane, kao što je širina kolone, visina linije itd.

U ranom 16. veku tipografi su koristili standardnu skalu sa veličinom fonta, pa se takva skala može primeniti i na Web-u, naravno ukoliko tražite tradicionalni i vrlo čitljiv rezultat. Kao što imamo muzičku skalu tako se skala sa veličinom fontova u nastavku uzima kao standard za relativne veličine fonta.

Dobar primer sajta koji koristi ovu skalu je Jaredigital.com . Jasno je da su tradicionalna i stilska tipografija bili neophodni za ovaj sajt, a malo sređivanja u CSS-u je učinilo to i mogućim:

h3 { font-size: 16px; }

h4 { font-size: 12px; }

p { font-size: 11px; }

Praktično se pokazalo da što su bliže veličine fonta različitih nivoa, elegantnije izgleda celokupni izgled.

Ako želite moderniji izgled pokušajte da koristite veličine fonta koji su dalje na skali. Dobar primer ovoga se može videti na Coudal.com. Veliki heder koji se ovde koristi je vrlo neobičan, ali daje manje tradicionalan, a više moderan izgled dizajnu. Takođe je tekst u hedingu prikazan u svetlijoj boji nego tekst u sadržaju. Još jedna dobra praksa je korišćenje svetlije boje u hederu kako bi se izbalansirao izgled celokupne strane. Vredi napomenuti dobro korišćenje serif fonta na ekranu (u ovom slučaju Times-a).

Isticanje

Isticanje teksta je relativno jednostavan način da oživite svoje reči na Web-u. Trenutno je trend, naročito u tekstovima za svrhe oglasa i reklama, da se razbacaju boldovana slova po strani. Iako bi tradicionalna tipografija naglasila da je to preveliko korišćenje bold ili italic stila, na Web-u se ova tehnika koristi kako bi se oko probilo kroz tekst kada na strani postoji dosta elemenata koji odvlače pažnju. Postoji dosta načina da se tekst istakne:

Bold

Na Web-u je najčešća i najefektnija metoda korišćenje bold-a. Naravno nije dobro preterano korišćenje ni ove, a ni ostalih tehnika. Ključ je korišćenje bold-a umereno ili ne koristiti uopšte.

Italic

Italic tip teksta može da izgleda lošije na monitorima koji imaju slabu rezoluciju zbog nakrivljenosti i krivina na slovima. Ali ovo ne treba da vas odvrati od korišćenja ovog stila u pojedinim slučajevima, kao na primer u isticanju stranih reči i fraza, ovaj stil može da bude od koristi.

Underline

Generalno se smatra da podvlačenje teksta na Web-u nije dobra ideja. Konvencije koje su postavljene u Web svetu kažu da ako je tekst podvučen on mora biti link na koji se može kliknuti. Ako krenete da podvlačite okolo tekst na koji ne može da se klikne sigurno ćete zbuniti korisnike.

Boja

Korišćenje boje kod isticanja teksta je takođe nezgodan posao. Kao i kod podvučenog teksta, tekst u drugoj boji se može shvatiti kao link u tekstu. U prošlosti je često korišćena druga boja pozadine kako bi se istakao deo teksta, ali je čak i ovo sada u konvenciji uzeto kao način predstavljanja linka. Zaključak je da je korišćenje boje pri isticanju teksta loša ideja.

Velika slova

Nikada nemojte na cele delove teksta stavljati sva velika ili sva mala slova. Ne samo što se ovo smatra nepristojnim već je ovo i tipografski jako loš izbor. RAZMOTRITE ČITLJIVOST OVE REČENICE U ODNOSU NA PRETHODNU ILI NAREDNU. Tu nema sumnje, bez različitih oblika reči kreiranih malim i velikim slovima čitljivost je ugrožena. Primer u nastavku to lepo prikazuje. Bez sumnje je lakše raspoznati reči u donjoj polovini slike.

Međutim dobri rezultati se mogu postiči korišćenjem  svih velikih ili svih malih slova u pravoj situaciji. Pokušajte da koristite mala slova za skraćenice ili akronime i naravno velika slova za akronime koji predstavljaju imena ili nazive mesta. Ovo je detalj koji je retko razmatran na Web-u, a moguće je postići ga kroz CSS.

Razmak između linija

Ključni detalj kada pripremate font za Web je razmak između linija tj. line spacing. Vertikalna udaljenost između linija teksta može napraviti veliku razliku u čitljivosti i stilu poruke. Poređenje dva bloka teksta u nastavku bi trebalo da prikaže to.

U svakom browseru je default razmak 1.2 (pri čemu je 1 visina kod koje bi gornji deo jednog reda dodirivao donji deo reda iznad). Ovo nije dovoljno za tekst na ekranu, pa se preporučuje da se taj razmak poveća na vrednosti između 1.4 i 1.6.

Razmak između slova

Razmak između slova (letter spacing) onakav kako je kontrolisan u CSS-u ne bi trebalo da se koristi u tekstu u sadržaju. To nije primenjivo u svim browserima, pa ono što vidite u Firefox-u će biti potpuno drugačije u Explorer-u ili Safari-u. Tipografi će najčešće dobro proračunati prostor i imati dobar rezultat bez dodatnog štelovanja.

Međutim razmak između slova može biti efikasan u naslovima. Primer ovoga se može videti na Zeldman.com. Veliki prostor između slova u desnom sidebar-u dozvoljava korišćenje velikih slova koja su boldovana, ali isto tako sprečava razbijanje izgleda strane.

Razmak između reči

Kao što je to slučaj sa razmakom između slova i razmak između reči (word spacing) treba pažljivo koristiti na ekranu. Ako za tekst koji ste stavili na sajt treba dodatni prostor koji ćete ručno uneti onda verovatno niste uzeli odgovarajući font. Kao i sa svim ostalim opcijama koje CSS dozvoljava konzistentnost je ključ. Postarajte se da čitalac bude fokusiran na tekst, kao i da on bude lagan za oči kada se kreće kroz reči. Ako prelamate slova i reči to će samo odvući pažnju i prekinuti tok teksta.

Poravnjanje

Margine mogu imati iznenađujuće veliki uticaj na izgled vaših strana. One pomažu da odvojite tekst od ostalih elemenata sajta, kao i od ivice browsera. Velike margine donose otvoreniji osećaj dok manje margine daju stegnutiju i intimniju estetiku.

Pretpostavljajući da pišete pismom koje ide sa leva na desno onda u skoro svim situacijama na Web-u bi trebalo tekst da poravnjate u levo. Desno poravnjanje treba koristiti u specifičnim slučajevima i ne za dugačke delove teksta.

Veoma popularno poravnjanje u knjigama i novinama je justified koje daje uniforman izgled strane. Ova vrsta poravnjanja bi bila korišćena i na Web-u da ne postoji činjenica da nijedan browser ili operativni sistem nema biblioteku za pisanje sa crticom. Ovo znači da browser ne može automatski da prelomi reč iz jednog reda u drugi već mora da produžava ili skuplja reči kako bi napravio red kako treba. Ovakvo formiranje reda može ponekad da izgleda jako loše.

U nastavku je prikazan primer dobrog i primer lošeg justified teksta.

Tekst u široj koloi izgleda odlično i browser se dobro izborio sa justified stilom. Međutim u manjoj koloni je prostor između reči izmešan i nekonzistentan što drastično utiče na čitljivost teksta.

Izvor: designfestival.com