Вертикален ритъм (част 1)

Глава 2.2 в книгата The Elements of Typographic style е озаглавена „Vertical motion“. По тази тема има писани не малко материали (пример, пример). Реших, че нещо на роден език може само да обогати средата. А и ще се опитам да го курдисам разбираемо и използваемо.

Най-често срещаното тълкувание (в предпечата, а и въобще) на „вертикален ритъм“ включва:

• избор на подходящ размер на шрифта, комбиниран с удачно междуредие и отстъпи. Междуредие – leading; чете се „леддинг“ и идва от lead – олово на английски, тъй като в ония времена са се използвали оловни ленти за разделяне на редовете метални букви, изграждащи текста. Отстъпи – margins, от там и родната чуждица „маргинален“ – по края на нещо, граничен.
• хармонично композиране в дълбочина (надолу по страницата) на всички елементи – текст, няколко нива заглавия, забележки, бели петна (whitespace)
• подравняване на редовете в отделните колони, при дву- или многоколонен текст (често срещано явление в уеб средата). Това важи и за лице/гръб на печатни страници – вдигнете срещу светлината страница от някоя книга и вижте дали редовете текст са равнени на лицето и гърба.

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

Ако се интересувате от крайния резултат и общото естетическо внушение, а не от това как да го постигнете – давам тук направо трите примера:

• „Строг“ ритъм
• „Свободен“ ритъм
• Същото, но повече приличащо на сайт

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

Първия пример наричам строг, защото отстъпите между елементите са равни, еднакви. Това прави цялото съдържание малко стерилно, но може да е подходящо в определени случаи – технически текстове, примерно. Нужно е по-силно разграничаване на заглавие от текст.

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

Този принцип може да се приложи в почти всякакви условия. Договори и оферти, писани на Word, печатни материали, странирани в InDesign, уеб страници, Flash сайтове… Стига инструментът да позволява задаване на размер на шрифта, междуредие и отстъпи (конкретно отгоре и отдолу).

Ако разгледате кода на примерите (и разбирате от тази материя), ще се ориентирате как е изградена системата. Всичко се свежда до:

1. Избор на шрифт и размер за основния текст
2. Избор на междуредие (и/или отстъпи) за основния текст
3. Смятане на междуредие / шрифт = Х (ако искате относително задаване на размерите, както е по-добре за уеб)
4. При всички други типове съдържание – използване на междуредие (и/или отстъпи), кратно на избраното в стъпка 2

Подготвям по-подробно обяснение, което ще публикувам по-късно днес или утре. Там ще се опитам да обясня логиката, по която са направени уеб вариантите от по-горе, а ще гледам да пусна и Word-пример.

пп: Ето една презентация в PDF формат по общата типографска тема. Росна-пресна.

ппп: Чак сега се загледах в примера на 24Ways и е учудващо приличащ на моя. Great minds think alike.

пппп: Общо станаха три части: първа, втора и “трета” част.