Хапвам, значи съм! » Теч - сайт на Боби Димитров

Към съдържанието

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

15 March 2007, 12:45 | Теч | Тагове: , , , , , , , , , , ,

Коментари

  1. Коко, 19 March 2007, 20:03

    > Great minds think alike.

    Браво!
    Сега съвсем се чудя как ще седнем на една маса с теб!

  2. Боби, 20 March 2007, 10:34

    Сядането ще е лесно, но виж ставането може да ни озори :)

Твоя коментар

/ / Textile Help