Разумевање типографије за Веб
У Веб дизајну тема типографије је важна када се разматрају сва подручја корисничког искуства. Свака веб страница има потребу за текстом, а постоје и смјернице које можете слиједити да бисте направили изузетно запањујуће изгледе. Треба узети у обзир решетке, слова, висину фонта, размак текста, схеме боја и друге сличне особине.
У овом чланку желим да се упустим у област веб типографије. Размотрићемо популарне идеје иза дизајнирања веродостојних текстова на веб страницама. Успут ћу вам представити неколико корисна својства ЦСС3 које дизајнери често заборављају.
Покушао сам да се више фокусирам на теорију и идеологије за Веб. Ово даје шири фокус на дигитални текст уопште, а ви, веб дизајнер онда можете да изаберете које стилове да примените за коју сврху. Контекст је увек кључ и то морате да одредите на одговарајући начин за сваки пројекат на коме радите. Размислите о овом водичу за референтни пакет пун модерних веб трендова од типографских иноватора широм планете.
Измерите ваше параграфе
Нећете морати да избацујете палицу за ову врсту мерења. Заправо, мјера у односу на типографију односи се на ширину (хоризонтално) било којег одломка на вашој страници. То није тема о којој се увек расправља, али утиче на читљивост вашег садржаја. Опште правило је да желите да ограничите било коју појединачну линију дужине од 75-85 знакова (не обавезно са размацима).
Сада, ово може изгледати као мало растезање за неке шире распореде. Поготово ако је ваш дизајн флуидан и намијењен да се прилагоди када корисник поново одреди величину прозора претраживача. Увек можете поставити ЦСС мак-видтх својство на вашем главном садржају див. Маргине кодирања и величине фонта у скалабилним јединицама (процентима, емс), а не пикселима омогућавају такву флексибилност у било којем распореду.
Не постоји максимална јединица мере за коју треба бити опрезан. Начин писања садржаја и речи у облику реченица је много важнији од ширине сваке линије. Али имајте на уму да су дуже реченице много теже прочитати у поређењу са краћим, концизним изјавама.
Леадинг Екплаинед
Приликом дизајнирања, уз вашу мјеру параграфа, требали бисте размотрити и идеју водећи. Ријеч се изговара “ледд-инг”, као што је олово које се користи у оловкама. Ово име потиче из старих дана механичког слагања слова где су траке олова биле постављене између редова текста.
Водећи је још увијек врло важан концепт у веб дизајну и иде руку под руку с мјерама параграфа. Како се ширина параграфа повећава, треба да примените једнако повећање на количину водећег, или размак између редова текста. Овај додатни простор чини читање много лакшим на вашим очима.
Ако бисте пролазили кроз веома чврсто рањен текст, можда ће вам бити тешко да се фокусирате на једну линију. Ако је то случај, покушајте повећати количину вођења помоћу ЦСС-а Висина линија својство. Увек желите више простора између редова текста него између речи. Иначе се ваши текстуални блокови могу појавити као новински испис и неће бити врло лако прилагођени кориснику да би се прегледали.
Чврста техника је да се примени више простора него што је првобитно било потребно и да се смањи ако је потребно. Нису сви текстови изједначени и сигурно ћете требати параграфе са различитим унутрашњим форматирањем, као што су подебљане речи, везе за сидрење, подцртавање, итд..
Користите величине природног фонта
Још увек постоји неколицина веб сајтова који се одлучују за фонтове мањих од просека. 11пк-12пк може изгледати много више “стандард профессионал” за пословне планове. Али ове величине не помажу већини посетилаца који траже специфичне информације.
Уопштено, веб прегледачи подразумевано постављају 16 пк ако не примењујете правила ЦСС-а. Чак и ово се може сматрати мало малим ако имате додатну просторију у вашем распореду за смјештај већег текста. Веће величине слова изгледају љепше и много лакше се прелиставају за релативне кључне речи. Сериф фонтови се често не бирају као материјали за пасусе, али се и даље можете извући са њима. Предлажем да користите много веће величине текста за фонтове засноване на серифу да бисте побољшали читљивост и привукли пажњу.
Одговорите на окружење корисника
Док испробавате различите породице фонтова и величине, ваша област садржаја мора да се прилагоди. Стандардна јединица са којом се држим је емс лако се могу поново подесити на основу расположивог простора и резолуције екрана. Ово оптимизира перформансе на корисниковом крају што је најважније.
Али када имате толико флексибилан садржај, ваш изглед чини вашу склоност грешком. Садржај у подручју подножја или бочне траке у неким претраживачима може бити искривљен или ван баланса. Или ћете можда имати потешкоћа да поставите слике или друге облике медија у вашем главном тексту. Постоје неке друге алтернативе за коришћење емс ако вам је потребан изглед стационарног стила - али покушајте са оба решења да бисте видели који вам је најбољи.
Запамтите да ће фиксне ширине и величине параграфа закључати многе поставке у вашем дизајну. Одличан је за садржаје који укључују много статичких естетских ефеката - замислите позадинске слике или много уграђених видгета са бочне траке. То је такође једноставан процес за изградњу области садржаја флуида у левој колони са фиксним бочним тракама са десне стране.
Стил заснован на контексту
Неки други, заиста уредни ЦСС трикови су сакривени од маинстреам дизајна. Конкретно, постоје трендови копирани из штампаних радова који се могу примијенити у одговарајућем контексту.
Многи веб дизајнери никада нису ни користили ЦСС својство. Ви уносите вредност за увлачење прве линије било ког одељка који је циљано овим правилом. Јединице прате стандардне текстуалне опције као што су пиксели, тачке, емс, проценти… То свакако није тренд који ћете наћи у већини блогова. Али, он пружа добар ритам странице док читате велике блокове текста.
Постоји још један тип ЦСС селектора познат као а псеудо елемент. Ово може да циља одређени део било ког селектора садржаја. ЦСС3: псеудо селектор првог слова је савршен за креирање фенси стилова на важним параграфима. Можете отворити уводно писмо сваког параграфа - слично једној причи о причи - користећи болд, курзив или чак и мијењање слова. Погледајте овај прелеп пример капа који садржи неке додатне ЦСС кодове које можете користити.
Играње са размаком између слова
Сигуран сам да су многи од нас чули за појам праћења, а да никада нису схватили да је то иста идеја као и ЦСС слово. Ова два појма су један у истом, а односе се на штампану и дигиталну типографију. Јединица се односи на размак између слова унутар било које линије текста. Ово је заиста добар ефекат да се примени на заглавља, па чак и на неке мање блокове садржаја на вашем сајту.
Важно је не бркати појмове размак између слова и кернинг. Оба се односе на типографију и удаљеност између слова. Међутим, изричито се односи на раздаљину између 2 појединачна слова у ријечи. Својство размака слова ће се применити на целог елемента текста, било да се ради о речи или параграфу или заглављу или сидру. Имајте то на уму када се играте са новим идејама за стилове.
Често користим неколико пиксела / тачака размака између слова у заглављима са свим великим словима. Ово раздваја појединачне ликове са додатним простором и такође се појављује као врло дефинисано “наслов” погледај. Негативни размак између слова такође одлично функционише у правом контексту. Углавном се држим мањих јединица, можда -0.03ем или -0.1ем највише.
Комбиновање и усклађивање типова
Концепти дизајна иза веб типографије су свакако облик уметности, не толико науке. Постоје смјернице које можете слиједити, али не постоје чврста правила на која сте ограничени. То значи да имате огромну количину слободе да експериментишете и мешате различите фонтове којима имате приступ.
Далеко најпопуларнија комбинација слова укључује сериф / санс-сериф поделу за заглавље и садржај параграфа. Волим да пребацујем оба, али чешће ћу користити сериф фонтове у заглављу. Додатне ознаке и потези на сваком од слова чине их ласкавијим као доминантни текст странице.
Осим тога, санс-сериф фонтови су чишћи и лакше се састављају у реченицама. То не значи да сериф фонтови неће радити у параграфима. У ствари, постоји много одличних примера! Али мало познати концепт назван к-хеигхт је од пресудног значаја за разликовање сложености типографије. Када погледате основну линију пар речи, уочићете како ће то бити фонтови “уклопити се” једни са другима.
Такође је важно напоменути важност простора између ових различитих елемената. Вероватно ћете користити 2 или 3 различита стилова заглавља, тако да ће сваки од њих бити испрекидан. Склон сам држати х2 / х3 елементе ближе следећем блоку параграфа, јер то имплицира да постоји корелација између садржаја.
Ова корелација је посебно корисна када користите два потпуно друга слова један поред другог. Препоручујем не више од 3 различите породице фонтова по сету садржаја. Након превеликог броја прилагођавања, ваше речи изгледају збуњено и цела страница излази као налик погрешних фонтова.
Закључак
Надам се да ће ови концепти бацити мало светла на компликовану тему дигиталне типографије. Може бити тешко стварно ући у посао као дизајнер, поготово ако вам је цијела тема страна. Али наставите да студирате и будите сигурни да вежбате читаву гомилу!
Следеће недеље: Останите са нама јер ћемо погледати у неке корисних алата и ресурса за бољу веб типографију.
Више…
Ево још постова везаних за типографију:
- Изложба веб дизајна с прекрасном типографијом
- Боља типографија за модерне веб странице
- Брзи водич за типографију: Учите и будите инспирисани
