CSS типография
По принцип “CSS” и “типография” не се срещат често в едно и също изречение и то съвсем резонно. Традиционната типография е много нежна и красива форма на дизайна, която позволява хиляди вариации и решения. За съжаление не така розово стоят нещата при CSS-а. Все пак обаче той може да прави повече неща, отколкото си мислите.



С вграждане на шрифтове (font embedding), широко разпространеният sIFR и доста замества щи и JavaScript техники, има няколко начина да се заобиколят типографските ограничения на Мрежата. Всеки от тях обаче си има своите недостатъци. Ето защо ще се фокусираме върху разгръщането на възможностите си в рамките на CSS.



Типографията не е точно наука и като при всеки друг аспект на дизайна се изисква практика, за да се усвоят добре подборът на подходящи шрифтове и правилното им аранжиране и настройване. Тук няма да се занимаваме с чисто дизайнерските аспекти на шрифтовете, а само с опциите, които ни дава CSS. С малко практика ще се научите как да правите дизайна си по-лесно четим и по-естетичен.




Защо CSS?



Макар че има и други варианти, CSS е най-лесният, най-надеждният, достъпен и директен начин да подобрим четимостта дизайна на сайта си. Единственото, което стои на пътя ви е незнанието за това какви техники можете да използвате и кога да ги приложите. От line-height до letter-spacing, имате повече контрол върху текста в уеб страницата си, отколкото си мислите.




Защо да се занимаваме с това въобще?



Типографското изкуства има вековна традиция. Корените му лежат в графиката и дизайна и към днешна дата има създадени хиляди шрифтове. Макар в Мрежата да сме лишени от съвършенството и прецизността на традиционната печатна типография, все още можем да променим нещата така, че да подобрим вида и четимостта на буквите и параграфите в текстовете, които пишем.



Все още не сте убедени, че труда си заслужава? Отворете който и да е сайт пълен с много съдържание и обърнете внимание какъв дял заема текста. Сега си представете какъв ефект би имало естетическото подобрение на нещо, което заема такава голяма част от представеният уеб продукт. Когато думите са важна част от уеб страницата ви, те заслужават и специално внимание, защото имат значимо влияние върху дизайна.



Нещо повече от красив шрифт



И ако все още не ни вярвате, ще ви покажем един практически пример от изследване на щатския университет в Уичита, което сравнява четимостта на текстове с различна аранжировка.



Изследването установява, че границите на текста и междуредовото пространство имат голямо влияние върху качественото обемане на текста. Тези техники намаляват скоростта за четене, но въпреки това оптималната ширина на междуредието е посочена като най-предпочитана. Всъщност оформлението и текстът ви имат значителен ефект и функцията им е нещо повече, от чисто естетическа.



Шрифтове по подразбиране в различните платформи


Първата стъпка към подобряване на онлайн типографията е да се запознаете със шрифтовете, които ще ползвате. Всяка платформа има различен набор шрифтове по подразбиране, което донякъде опростява задачата ни. Добрата новина е, че вие вероятно вече добре познавате някои от тях: Arial, Helvetica, Times, Georgia, Trebuchet, Verdana и Courier. Макар че от тая групичка има още доста какво да се желае като цяло, тя е достатъчна за постигането на някои доста симпатични резултати.


Измерване, размери и преоразмеряване


Тънкостите в използването на различни мерки за размерите на шрифтовете е сложен въпрос и е извън обсега на настоящата статия. Засега е достатъчно да знаете, че изборът на единица мярка за големината на шрифта може да окаже влияние върху това как ще се изобразява текста ви на различни платформи и през различни браузъри. Ако все пак сте заинтересовани от подробен анализ и обяснение хвърлете едно око на статията на Оуен Бригс за текстовото оразмеряване. Старичка е, но нещата са простичко обяснени.



На всичкото отгоре няма как да сте сигурни, че потребителите, които зареждат страницата ви, ще видят нещата точно така, както вие. Те могат да променят размера на шрифта както пожелаят и така драстично да променят идеята на подредбата. Добре е да вземете предвид тази възможност и да предвидите нещата максимално.



В този урок ще се осланяме на откритията на Оуен и ще вземем за основен размер на шрифта на body-то 76% и размер на пробела на абзаца - 1 em. Това трябва да се визуализира по приблизително еднакъв начин на повечето браузъри и да позволи на потребителите свободно да оразмеряват текста така, както намерят за добре.



Това, което е важно да запомните за емовете (em), е че те уеднаквяват елементите на текста. тоест, ако зададете параметър font-size както за тагът p, така и за тагът strong с размер, да речем, .9em, то думата “красива” в тага strong ще се визуализира като по-малка от заобикалящият я текст:



<p>Обичам <strong>красива</strong> типография!</p>



Получава се така, защото em е релативна величина и вътрешният таг с размер на шрифта е свързан не с документа, а с parent елемента. В показаният горе случай "красива" е .9 em свързано с .9-em на тагът на параграфа, който на свой ред е свързан с размерът на текста на бодито по подразбиране. Трябва да запомните, че задаването на по-малък размер на шрифта за елементите ще ги оразмери според parent елементът — не според документа.




Опциите на ваше разположение



Без използването на "майсторски" техники възможностите ви в онлайн типографията са крайно ограничени. Въпреки това имате няколко чудесни опции за подобряване четимостта и естетическият вид на текстовете си.


От всички възможности за подобряване типографията чрез CSS, line-height е една от най-важните. Браузърите се мъчат да настроят line-height заедно с промените в размера на шрифта, но не винаги успяват. Според размера на текста ви прибавянето или намаляването на междуредовото пространство може драстично да подобри четимостта. Внимателната употреба на word-spacing и letter-spacing може да има същият ефект или да се използва за подчертаване на фраза в текст.


При случаи в които искате да използвате само главни, само малки или капитализация на първата буква можете да се възползвате от text-transform. В добавка font-variant може да прави малки главни (small caps).


Друга практика, използвана предимно в печатарството, но не много популярна онлайн, е отстъпа в първият ред на нов абзац. В CSS опцията text-indent се грижи за това оформление.


Вероятно text-align не е нещо непознато за вас, но са малко хората, които използват justify опцията. Тя е полезна в няколко случая; например когато използвате тесни колони, като във вестник, тя помага да оформите по-добре аранжировката на страницата.


Макар да не са универсално поддържани все още, псевдо-елементите :first-letter и :first-line могат да ви помогнат да оформите абзаците си. Това, което трябва да запомните при псевдо-елемента за първа буква е, че можете да използвате float опцията, за да изведете елемент без да се влияе от останалата структура.


Хубавото при first-line опцията е, че думите, които са на първия ред, се определят автоматично. Ако размерът на текста се промени първият ред и ефектите ще се променят според думите, които се побират на първия ред.
Създаване на четим текст


Макар че повечето тънки номера, които споменахме дотук, с страхотни, има още неща, които трябва да имаме предвид, когато пишем онлайн. Не бива да забравяме, че пред монитора хората по-често преглеждат, не четат, което означава, че разумната употреба на заглавия, получер текст, курсив и списъци с водещи символи (bullets) могат много да улеснят читателите ви в по-бързото възприемане на информацията, която им поднасяте. Ключовата дума тук е "разумна". В никакъв случай не се увличайте в подчертаването на части от текста; маркирайте само най-важните неща.


Заглавията са ваши първи приятели. Те не само помагат за по-смилаемо раздробяване на информацията и групирането й на порции, но помагат да украсите оформлението си. Тествайте различни заглавия - с различни цветове, с получер, с курсив, с по-малко пространство между буквите и др. подобни.



Външни препратки


Остана да приложите нещата на практика. В обширното уеб пространство има премного подходящи примери, а тук маркирахме само някои основни неща, които са наистина полезни и важни. Показахме, как вниманието към детайла създава не само нещо красиво, но и по-функционално.



* Kottke.org – Сайта на Джейсън винаги е бил пример за много четим уеб продукт. Тук има доста текст и междуредовото пространство, оставящо буквите да дишат, е наистина от голяма полза.
* Rob Weychert – Роб страхотно съчетава различни шрифтове и чист CSS, за да придаде интересен и разнообразен вид на нещата.
* Subtraction – С вниманието си към детайла, размерите на шрифтовете и междуредовите разстояния Кхой доказва, че е възможно да използвате Arial, най-широко разпространеният шрифт в уеб, за да създадете нещо красиво.
* A List Apart – Типографските решения на Джейсън са страхотни. Той използва курсив и главни букви, за да придаде на текста разнообразие и смел типографски почерк, като при това лежи почти изцяло на CSS.
* Reading Online Text: A Comparison of Four White Space Layouts – Изследване за използването на... бялото пространство и четимостта на текста.
* Текст и шрифт в уеб дизайна: основни грешки



Следващите линкове дават допълнителна информация за шрифтовете по подразбиране в Windows и Mac:


Mac

* Mac OS X fonts
* Mac OS 9 fonts
* Microsoft IE core fonts

Windows

* Win dows 98 fonts
* Win dows XP fonts
* *
* Six new Windows fonts in 2006


Обобщение



Следващият път, когато седнете да правите нов дизайн, отделете специално време и внимание на настройване на CSS-а за постигане на по-голямо типографско съвършенство. Експериментирайте. Преди да преминете към по-сложни методи, като sIFR или заместване на изображения, уверете се, че сте разбрали добре CSS опциите.



Сайтът ви ще бъде по-гъвкав, по-достъпен и лесен за поддръжка в дългосрочен план, а потребителите ви ще ви обичат - или поне ще оценят вниманието ви към детайла.



Автор: Гарет Даймън за Digital Web Magazine



/ Трябва да сте регистриран за да напишете коментар /
От: batmanabg
13:16 22-07-2011
Полезен урок.
1