UVOĐENJE NOVIH TIPOGRAFSKIH ELEMENTA NA WEBU

Maja Turčić, Maja Rudolf, Vesna Uglješić, Nikolina Stanić Loknar

Sažetak

Kroz povijest Web tipografija je u odnosu na tiskanu riječ oduvijek pružala samo osnovne mogućnosti (ograničen broj fontova, nemogućnost prelamanja riječi ...). Povijest tiska je ipak neusporedivo dulja od povijesti Web-a. Oblikovanje stranice i manipulacija tekstom je postala znatno lakša pojavom osobnih računala i aplikacija za prijelom poput InDesign-a i Quark-a. Tolika kontrola nad dizajnom teksta je na Web-u bila moguća isključivo slikom. Tekst u obliku slike je za Web nepraktičan jer slike zauzimaju više memorije od teksta te nisu uključene u tražilice. Pojavom CSS3 (Cascading Style Sheets 3) pojavile su se mogućnosti obrade i procesiranja teksta kakvih do sada nije bilo. Između ostalog, sada je moguće koristiti bilo koji font, prelamati tekst u više stupaca, koristiti efekte na tekstu (npr. sjene) itd. U primjeru pokazujemo primjenu individualnih rukopisnih fontova te ostalih CSS3 elemenata u svrhu prijeloma teksta.
Ključne riječi: CSS3, prijelom teksta, Web, font

Abstract

Throughout history, Web typography provided only basic possibilities considering print typography (limited number of fonts, inability of word wrapping ...). History of printing is ,after all, surpassingly longer than history of the Web. Page layout and text manipulation has become much easier with emersion of personal computers and applications for layout and publishing such as InDesign and Quark. That kind of control over text design on the Web was possible only with the use of images. Text in the form of an image is impractical because images take up more space then text itself and are not included in search engines. With the emersion of CSS 3 (Cascading Style Sheets) there are new features of text manipulation and processing. Among others, it is possible to use any font, multicolumn layout, text effects (ie. shadows) etc. Our example shows the implementation of individual handwritten fonts and other CSS3 elements for text layout purposes.
Keywords: CSS3, text layout, Web, font

Uvod

Odkad se tipografija suočila sa novim tehnologijama primjene na Webu, dizajneri pokušavaju rezultate na koje su navikli u tisku primijeniti i na novim medijima. Međutim, Web treba prihvatiti kao potpuno drugačiji medij sa drugačijim zahtjevima, a time i drugačijim riješenjima. Većina grafičkih elemenata je ostala ista, kao što su, format, odabir fonta, odnos slike i teksta, prored, margine, duljina retka, ali alati pomoću kojih raspoređujemo te elemente u cjelinu su često zahtjevali mnogo mašte kako bi dobili željene rezultate.
Pomoću nove CSS3 tehnologije, dizajnerski posao je mnogostruko olakšan. Tako se sada jednostavno može postaviti bilo koji font na Web u obliku teskta, a ne slike čime je postignuta njegova osnovna funkcija. Također se može tekst postaviti u više kolumni, čime se postiže postavljanje mnogo više teksta horizontalno, a da ne produljujemo redak u zonu nečitkosti te smanjujemo vertikalno pomicanje. Definira se visina retka, sukladno visini fonta, podešavaju se praznine u tekstu prijelomom riječi i podešavaju se razmaci između riječi jednako kao i u svakom softveru za stolno izdavaštvo. Moguće su i nove definicije boja te ukrašavanje teksta.
U našem primjeru pokazujemo kako na jednostavan način smjestiti zadane elemente u određeni format po uzoru na tipični prijelom stranice u časopisu. Time omogućujemo ispis te iste stranice na korisnikovom pisaču, ukoliko je to potrebno ili naprosto više poželjno. Povukli smo paralelu prijeloma teskta na Webu i tisku te pokazali kako tipografija na Webu napokon prestaje biti zakinuta i kako se napokon izjednačava sa mogućnostima u tisku.

Tipografski elementi u različitim medijima

Tipografija se oduvijek sastojala od istih elemenata. Postavljanje tih elemenata u određene formate nosi sa sobom određene probleme koji zavise o trenutnoj tehnologiji. Problemi sa kojima se tipograf suočava su format, odabir fonta, smještaj elemenata u prostoru, razmak između riječi, razmak između redova, određivanje margina i duljina retka. Cilj rješavanja problema je čitljivost teksta.
Digitalizacijom tipografije, dizajnerima je olakšan posao u smislu prijeloma teksta pomoću osobnih računala i programskih alata. Na taj način prijelom teksta za tisak je praktički doveden do savršenstva jer osim pripreme i tehnologija tiska je napredovala do točke gdje je malo toga nemoguće.
Dok kompjutorske tehnologije rastu eksponencijalnom brzinom, internet postaje sve brži, programski jezici niču, Web dizajn još uvijek vodi borbu da postigne iste ciljeve kao dizajn za tisak. Iz tog razloga dizajneri pribjegavaju Flash tehnologijama koje smanjuju korisnost Web stranice: Back gumb, vertikalno pomicanje, pretraživanje teksta, indeksiranje stranice za tražilice, povećavanje sadržaja, dodavanje odnosno održavanje postojećeg sadržaja... Iako se većina tih problema može programski riješiti postoji jako malo Flash stranica kojima je funkcionalnost izjednačena sa HTML stranicama.
Prijelom teksta na Web-u se najčešće izjednačava sa CSS tehnologijom. Iako se sve Web tehnologije rapidno razvijaju, CSS2 standard je star 11 godina te ne omogućava dizajnerima da isporuče kvalitetan i funkcionalan dizajn teksta na jednostavan način. Zbog nedostataka CSS-a 2 razvija se novi standard CSS3 koji pruža više opcija i alata.
Čitanje velike količine teksta na Web-u četo predstavlja problem te mnogi korisnici sadržaj otisnu na pisaču. Prijelom stranica na Webu je često potpuno drugačiji od onog namijenjenog za tisak. Kvalitetan prijelom dizajner bazira na pomno isplaniranoj mreži. Mreže na Webu su komplicirane za postići te zahtjevaju mnogo nepotrebnog koda. Pomoću novih elemenata omogućeno je kontrolirano dizajniranje slično onome za tisak te će njihov otisak biti čitljiviji i samim time funkcionalniji korisnicima.

Format i kolumne

Format za tisak je stvar odabira dizajnera, dok je format za Web stranicu određen korisnikovim monitorom. Zbog toga je Web dizajn ograničen određenim dimenzijama koje nisu fiksne. Monitori su većinom širi nego duži, a ovisno o količini sadržaja na Web stranici, sadržaj je duži nego širi. Duljina retka ne bi trebala biti dulja od 60/70 znakova pa najčešće susrećemo stranice sa dugim vertikalnim pomicanjima i prevelikim prazninama sa (lijeve i) desne strane. Jedno od novih riješenja koje nam nudi CSS3 je prijelom u višestrukim kolumnama kojim na jednostavan način možemo odrediti broj znakova u retku i omogućiti čitljivost teksta i smanjiti količinu bjeline na samoj Web stranici. Ovim modulom tekst može prelaziti u više stupaca unutar jednog elementa.
Naš ekperimentalni primjer je baziran na mreži koja se sastoji od 4 stupca po uzoru na novinski tisak. Sam dizajn je koncipiran i izveden najprije u softveru za stolno izdavaštvo. Nakon dizajna, kodiranje je izvedeno kao kopija prijeloma za tisak pomoću HTML-a i CSS-a. Na ovaj način se pokušalo maksimalno približiti i izjednačiti sve principe funkcionalnosti prijeloma za tisak i za Web.
U prošlosti, na Webu je više kolumni bilo moguće definirati jedino preko tablica ili ‘div’ elementa što je zadavalo probleme sa tesktom i njegovim smještajem. Sada je takav dizajn mnogo lakši i praktičniji. Kolumne su određene širinom i visinom. Nakon što tekst ispuni prvu kolumnu, automatski prelazi u slijedeću. Sve kolumne imaju određen razmak u kojem se može definirati i grafički element koji ih razdijeluje (npr. crta). Tom elementu određujemo stil, boju i debljinu.
Postoje naravno problemi na koje dizajneri moraju pripaziti koristeći ovaj modul. Ukoliko se tekst odnosno sadržaj stranice postavlja u više kolumni, a sadržaja ima toliko da obvezuje vertikalno pomicanje, tada se tekst mora obavezno posložiti u kolumne čija visina ne prelazi format monitora. U protivnom će čitanje biti otežano. Ostali problemi čitljivosti prijeloma sa više stupaca ovise o sposobnostima dizajnera te kvalitetno postavljenoj mreži.

Font

Odabir fonta za Web stranicu je ograničen na više razina. Postoji desetak fontova koji su dostupni svima, bez obzira na instalirane fontove. Alternative su korištenje teksta u obliku slike, ili korištenje Flash tehnologije. Na taj način onesposobljavamo indeksiranje i tražilice te povećavamo veličinu stranice.
Sada se može koristiti bilo koji font na Webu koji ostaje u obliku teksta. Međutim postoji problem korištenja fontova s obzirom na licence. Zbog toga još uvijek ova tehnologija nije u potpunosti implementirana. Dizajneri fontova ulažu mnogo truda u svoj rad te detaljno definiraju gdje i kako se taj font može koristiti. Autori koji žele koristiti fontove na Webu koji se moraju skinuti trebaju pripaziti da li imaju licencu za to. Mnogi komnercijalni fontovi danas ne dopuštaju skidanje sa Weba u nijednom obliku. Prije korištenja potrebno je provjeriti da li postoji licenca za takvo korištenje. Iz tih razloga je još uvijek diskutabilno korištenje fontova na ovaj način.
Također svi fontovi nisu zamišljeni odnosno dizajnirani za upotrebu na Web-u pa se time smanjuje njihova funkcionalnost i čitljivost. Renderiranje tih fontova također nije usklađeno između različitih preglednika. Opet odgovornost za postizanje funkcionalnosti pada na dizajnera te njegove sposobnosti tipografije.
Pravilo @font-face dozvoljava povezivanje na fontove koji se automatski aktiviraju kada je to potrebno. Na taj način autorima je omogućeno korištenje bilo kojeg fonta, bez obzira na bazu fontova korisnika. Potrebno je definirati izvor fonta, bilo lokalno ili eksterno, koji se po potrebi učita.
Učitani fontovi su jedino dostupni u dokumentima u kojima su refencirani, odnosno nedostupni su korištenju u drugim dokumentima i aplikacijama. Izvor fontova može biti lokalan, instaliran na korisničkom sistemu, ili se može skinuti.
Bez obzira da li se font učitava ili je lokalno instaliran potrebno je definirati njegov izvor pomoću ‘src’ deskriptora. Eksterni izvori se sastoje od URI nakon kojeg se definira format fonta. Formati koji su podržani su: True Type (.ttf), Open Type (.otf), Embedded Open Type (.eot) i SVG Font (.svg/.svgz).

Prelamanje riječi

U svrhu postizanja optimalnog broja znakova u retku, posebice u prijelomu sa više stupaca teksta, potrebno je dijeljenje riječi na kraju retka. Dijeljenjem riječi se također izbjegnu nepotrebne bjeline između riječi kada je tekst isključen na puni format. Za većinu pisama, bez prisutsva crtica za dijeljenje riječi, prelazak u novi red se dešava isključivo nakon cijele riječi. Mnoga pisma koriste razmak ili interpunkciju za razdvajanje riječi. Međutim postoje pisma koja ga ne koriste.
Svojstvo ‘word-break’ definira kako i kada se prelazi u novi redak. Vrijednosti su: normal, keep-all, loose, break-strict i break-all. Ukoliko postavimo znakove za prelamanje unutar teksta i te znakove preglednik prepoznaje, riječi će se dijeliti prema tim znakovima, a ako ih preglednik ne prepoznaje dijelit će se prema zadanom pravilu. U našem primjeru je postavljena vrijednost break-all pa se riječi u nekim preglednicima dijele prema potrebi kako bi tekst bio bez nepotrebnih bjelina.
Svojstvo ‘text-align-last’ omogućuje definiranje poravnavanja zadnjeg retka paragrafa ukoliko je poravnavanje zadano na justify. Moguće vrijednosti su: start, end, left, right, center i justify.

Podešavanje razmaka

Podešavanje razmaka između riječi i između znakova je obavezano ukoliko želimo pravilno prelomljen tekst bez nepotrebnog rastezanja riječi i bjelina između riječi. Razmaci između znakova i riječi su određeni u samom fontu, ali jednako kao što tipograf ispravlja greške i podešava tekst prelamajući ga za tisak, tako je sada moguće podešavanje tih parametara za Web.
Pomoću ‘spacing-limit’ definiramo dodatni razmak koji dopuštamo između riječi, a nije definiran fontom. ‘Word-spacing’ definira minimalan, maksimalan i optimalan razmak između riječi. Korištenjem isključivanja teksta razmaci se mogu mijenjati, ali ne bi trebali biti manji od minimuma niti veći od maksimuma definiranog.
Ukoliko odredimo ‘letter-spacing’ određenom vrijednošću, sprečavamo dodavanje razmaka između znakova u svrhu podešavanja teksta na puni format. U svrhu prijeloma također se može koristiti kerning svojstvo. Definira se za interpunkcijske znakove. Ukoliko sam font ima kerning tablicu, kerning je automatski, ali tek nakon veličine 15pt. Postoji i ukrašavanje teksta, kao što je text-shadow, pomoću kojeg definiramo sjenu na svakom znaku, njegovu boju i veličinu.

Boje

Postoje novi načini definiranja boja. Jedan od načina je RGBA vrijednost kojom definiramo, osim standardnih RGB kanala, i alfa kanal kojim postižemo transparenciju. Ovakvim definiranjem boje nemožemo koristiti heksadecimalni zapis. Ukoliko svojstvo nije podržano, prikazuje se ‘normalna’ boja, bez transparecije. Isto kao kod RGBA modela postoji i HSLA model (ton, zasićenje, svjetlina, alfa).

Zaključak

Pomoću novih Web tehnologija postizanje određenog dizajna za koje je trebalo puno vremena i mnogo koda, sada se može postići brže, lakše i jasnije. Neka svojstva još uvijek nisu podržana u svim preglednicima, ali to nas ne bi trebalo spriječiti u eksperimentiranju ili pružanju optimalnijeg dizajna korisnicima novijih i boljih preglednika.
Iako se ne bi trebalo uspoređivati grafički dizajn za Web i za tisak, jednaki elementi se ponavljaju u svim medijima. Korisnici žele i mora im se omogućiti ispis Web stranica. Pomoću ovih novih tehnologija sa elementima baratamo lakše, jednostavnije dobivamo željene rezultate, a prijelomu teskta možemo pristupiti jednako kao i za tisak. Tehnike tiska su se razvijale kroz puno duži period, ali Web tehnologije kroz kraće razdoblje puno brže te je realno da se napokon izjednače mogućnosti grafičkog i Web dizajna. Korištenjem i eksperimentiranjem sa novim tehnologijama i sami podržavamo i ubrzavamo njihov razvoj.

Literatura

Bringhurst, Robert: ‘The elements of Typographic Style’, Hartley &
Marks; Vancouver, Canada, 2004
Jury, David: ‘What is typography’, RotoVision SA; Mies, Switzerland, 2006
Samara, Timothy: ‘Typography Workbook’, Rockport Publishers;
Gloucester, Massachusetts, 2006
Mesaroš, Franjo: ‘Tipografski priručnik’, Grafički obrazovni centar;
Zagreb, Hrvatska, 1985
Žiljak, Vilko: ‘Računarska tipografija’, Školska knjiga; Zagreb, Hrvatska, 1987
http://www.w3.org/TR/css3-multicol/
http://www.w3.org/TR/css3-text/
http://www.w3.org/TR/css3-fonts/
http://www.w3.org/TR/css3-color/

Patrik Ervells latest collection is ironically titled “Software”ADIDAS ORIGINALS TUBULAR SHADOW. In the notes from the presentation, Ervell says he was interested in developing tension between nostalgia and sci-fi,NIKE ZOOM WINFLO 3 and even included 90s cyberpunk amongst his influences. Ervell developed this point of view by creating an imaginary software company called Idegen software systems. He then re-appropriated the company’AIR JORDAN XXXI MENs logo in several of the collection’s garments. Elsewhere,MBT TARIKI MEN mohair coats with oversized lapels made an appearance alongside mock neck tees,NIKE AIR JORDAN RETRO 5 police-inspired ribbed sweaters,MBT FORA GTX WOMEN flight bombers, and polyurethane leather coats. The setting was also suitably dystopian, and the resulting ambiance was something akin to if the creators of Deutschland 83 and Hackers met up and decided to create a collection… We mean that as a compliment.Yesterday afternoon,JORDAN CP3 IX MEN artist JR spent the day working on his latest collaborative piece with Daniel Arsham in Greenpoint,NIKE AIR MAX 90 Brooklyn,MBT KIMONDO GTX MEN NYC. Connecting the lines between art, architecture, dance and theater, Daniel Arsham has been known to subvert existing architectural structures in unconventional,NIKE CLASSIC CORTEZ NYLON playful ways; confusing and confounding the expectations of space and form. Source: Street Art News .