Више него приметно је да се сем дизајна и функционалности сајта јако пуно посвећује пажња садржају који његове стране нуде. Чак штавише у многим случајевима не можете ни почети да дизајнирате или да правите неку функционалност на сајту уколико не знате који ће тачно садржај тај изглед да представи.

Најважнији део садржаја је наравно текст. Он може бити представљен на различите начине и то углавном зависи од фонта који је коришћен, стила, величине, боје итд. Када се одређује фонт за веб потребно је обратити пажњу на то шта један фонт треба да има да би се лепо видео на екрану. Ево неких од карактеристика:

• низак контраст, једноставан строке са конзистентном дебљином
• добра висина
• пристојна ширина и простор између слова
• пристојна ширина у оквиру слова

Узимајући ове напомене у обзир када дизајнирате сајт можете отићи и даље од стандардних Веб фонтова. Ако желите да креирате “custom” фонт онда постоји пар дизајн принципа којих се треба придржавати.

Величина

Величина фонта је један од најлакших фактора за контролисати на екрану, па се с тога њему не даје важност коју заслужује на пољу веб типографије. Величина фонта је важна у процесу давања хијерархије садржају, а релативне величине наслова, текста у садржају и подножју (engl. footer) могу имати велики утицај не целокупни изглед стране. Величина фонта је такође блиско повезана са другим каратеристикама стране, као што је ширина колоне, висина линије итд.

У раном 16. веку типографи су користили стандардну скалу са величином фонта, па се таква скала може применити и на вебу, наравно уколико тражите традиционални и врло читљив резултат. Као што имамо музичку скалу тако се скала са величином фонтова у наставку узима као стандард за релативне величине фонта.

Добар пример сајта који користи ову скалу је Jaredigital.com . Јасно је да су традиционална и стилска типографија били неопходни за овај сајт, а мало сређивања у CSS-у је учинило то и могућим:

h3 { font-size: 16px; }

h4 { font-size: 12px; }

p { font-size: 11px; }

Практично се показало да што су ближе величине фонта различитих нивоа, елегантније изгледа целокупни изглед.

Ако желите модернији изглед покушајте да користите величине фонта који су даље на скали. Добар пример овога се може видети на Coudal.com. Велики хедер који се овде користи је врло необичан, али даје мање традиционалан, а више модеран изглед дизајну. Такође је текст у хедингу приказан у светлијој боји него текст у садржају. Још једна добра пракса је коришћење светлије боје у хедеру како би се избалансирао изглед целокупне стране. Вреди напоменути добро коришћење сериф фонта на екрану (у овом случају Times-а).

Истицање

Истицање текста је релативно једноставан начин да оживите своје речи на вебу. Тренутно је тренд, нарочито у текстовима за сврхе огласа и реклама, да се разбацају болдована слова по страни. Иако би традиционална типографија нагласила да је то превелико коришћење bold или italic стила, на вебу се ова техника користи како би се око пробило кроз текст када на страни постоји доста елемената који одвлаче пажњу. Постоји доста начина да се текст истакне:

Bold

На вебу је најчешћа и најефектнија метода коришћење bold-а. Наравно није добро претерано коришћење ни ове, а ни осталих техника. Кључ је коришћење bold-а умерено или не користити уопште.

Italic

Italic тип текста може да изгледа лошије на мониторима који имају слабу резолуцију због накривљености и кривина на словима. Али ово не треба да вас одврати од коришћења овог стила у појединим случајевима, као на пример у истицању страних речи и фраза, овај стил може да буде од користи.

Underline

Генерално се сматра да подвлачење текста на вебу није добра идеја. Конвенције које су постављене у веб свету кажу да ако је текст подвучен он мора бити линк на који се може кликнути. Ако кренете да подвлачите около текст на који не може да се кликне сигурно ћете збунити кориснике.

Боја

Коришћење боје код истицања текста је такође незгодан посао. Као и код подвученог текста, текст у другој боји се може схватити као линк у тексту. У прошлости је често коришћена друга боја позадине како би се истакао део текста, али је чак и ово сада у конвенцији узето као начин представљања линка. Закључак је да је коришћење боје при истицању текста лоша идеја.

Велика слова

Никада немојте на целе делове текста стављати сва велика или сва мала слова. Не само што се ово сматра непристојним већ је ово и типографски јако лош избор. РАЗМОТРИТЕ ЧИТЉИВОСТ ОВЕ РЕЧЕНИЦЕ У ОДНОСУ НА ПРЕТХОДНУ ИЛИ НАРЕДНУ. Ту нема сумње, без различитих облика речи креираних малим и великим словима читљивост је угрожена. Пример у наставку то лепо приказује. Без сумње је лакше распознати речи у доњој половини слике.

Међутим добри резултати се могу постичи коришћењем  свих великих или свих малих слова у правој ситуацији. Покушајте да користите мала слова за скраћенице или акрониме и наравно велика слова за акрониме који представљају имена или називе места. Ово је детаљ који је ретко разматран на вебу, а могуће је постићи га кроз CSS.

Размак између линија

Кључни детаљ када припремате фонт за веб је размак између линија тј. line spacing. Вертикална удаљеност између линија текста може направити велику разлику у читљивости и стилу поруке. Поређење два блока текста у наставку би требало да прикаже то.

У сваком прегледачу је подразумевани размак 1.2 (при чему је 1 висина код које би горњи део једног реда додиривао доњи део реда изнад). Ово није довољно за текст на екрану, па се препоручује да се тај размак повећа на вредности између 1.4 и 1.6.

Размак између слова

Размак између слова (letter spacing) онакав како је контролисан у CSS-у не би требало да се користи у тексту у садржају. То није примењиво у свим броwсерима, па оно што видите у Firefox-у ће бити потпуно другачије у Explorer-у или Safari-у. Типографи ће најчешће добро прорачунати простор и имати добар резултат без додатног штеловања.

Међутим размак између слова може бити ефикасан у насловима. Пример овога се може видети на Zeldman.com. Велики простор између слова у десном sidebar-у дозвољава коришћење великих слова која су болдована, али исто тако спречава разбијање изгледа стране.

Размак између речи

Као што је то случај са размаком између слова и размак између речи (word spacing) треба пажљиво користити на екрану. Ако за текст који сте ставили на сајт треба додатни простор који ћете ручно унети онда вероватно нисте узели одговарајући фонт. Као и са свим осталим опцијама које CSS дозвољава конзистентност је кључ. Постарајте се да читалац буде фокусиран на текст, као и да он буде лаган за очи када се креће кроз речи. Ако преламате слова и речи то ће само одвући пажњу и прекинути ток текста.

Поравњање

Маргине могу имати изненађујуће велики утицај на изглед ваших страна. Оне помажу да одвојите текст од осталих елемената сајта, као и од ивице прегледача. Велике маргине доносе отворенији осећај док мање маргине дају стегнутију и интимнију естетику.

Претпостављајући да пишете писмом које иде са лева на десно онда у скоро свим ситуацијама на вебу би требало текст да поравњате у лево. Десно поравњање треба користити у специфичним случајевима и не за дугачке делове текста.

Веома популарно поравњање у књигама и новинама је justified које даје униформан изглед стране. Ова врста поравњања би била коришћена и на вебу да не постоји чињеница да ниједан прегледач или оперативни систем нема библиотеку за писање са цртицом. Ово значи да прегледач не може аутоматски да преломи реч из једног реда у други већ мора да продужава или скупља речи како би направио ред како треба. Овакво формирање реда може понекад да изгледа јако лоше.

У наставку је приказан пример доброг и пример лошег јустифиед текста.

Текст у широј колони изгледа одлично и прегледач се добро изборио са justified стилом. Међутим у мањој колони је простор између речи измешан и неконзистентан што драстично утиче на читљивост текста.

Извор: designfestival.com