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

В първата част обясних малко теория и показах три уеб примерчета на тема вертикален ритъм в страницата. Ако сте разгледали кода на примерите, вероятно ви е станало ясно кое как е. Сега ще се опитам да обясня защо е така, както и стъпките, през които минах, за да направя примерите (отворете ги (1, 2, 3), защото надолу обяснявам по тях). И така…

Когато започвам типографското оформяне на уеб страница, в началото работя в пиксели, а след това преминавам в относителни мерни единици. Ето една примерна последователност:

  1. Избирам подходящ шрифт (и алтернативи) – това си е цяла отделна тема за разговор. Освен това е доста субективно решение. Още повече, че изборът в уеб средата се свежда до има-няма 10 шрифта…
  2. Избирам размер на шрифта в пиксели – изпробвам различни стойности, като тествам и алтернативите. Добрите алтернативни шрифтове имат подобно излъчване при еднакъв размер. Имайте предвид, че на модерните резолюции (1024х760 и нагоре), всичко под 11px е нечетимо в 90% от случаите.
  3. Избирам височина на линията (line-height) – търся четимост на реда, но не прекалено разкъсване на съдържанието. Някои често спрягани в полиграфията двойки размер/междуредие са 11/13, 12/14, 14/16. Разбира се, междуредието зависи много от самият шрифт. Освен това, аз лично завишавам поне с 1 втората цифра в тези двойки, тъй като на екран нещата стоят по различен начин от печатната страница.
    Забележка: в CSS line-height не е точно междуредие (leading). Защото добавя височина под и над реда, а не само под, както е в печатните технологии. Това означава, че ако имате 14 пиксела шрифт с line-height 18 пиксела, тогава този текст е центриран вертикално, имайки по 2 пиксела горе и долу.
  4. Преминавам от фиксираните px към относителните em. Защо това е добра практика е обект на друга статия. Един бонус е възможността потребителя да увеличава/намаля сам размера на шрифта през браузъра. Използвам известната хватка за приравняване на размера на шрифта в различните браузъри: font-size: 62.5%. От тук нататък 1em = 10px.

Избрал съм шрифт Palatino, като за алтернатива съм поставил Book Antiqua, който е много подобен на Палатино. Като крайна мярка – Georgia. Cambria, който е от новите за Виста, съм поставил на първо място само заради експеримента.

За размер се спрях на 14px = 1.4em, което ми се струва достатъчно четимо, а и всички знаете, че съм фен на текст с добър размер, а не миниатюри 🙂 ! При размер 14px, най-малката разумна височина на линията е 18px. А сега – математика.

Тъй като работим в относителни мерни единици, трябва да зададем line-height в някакво отношение спрямо font-size на същия елемент. Отношение се получава чрез деление: 18 / 14 = 1.286 (закръглете нагоре до третия знак). Задавайки 1.286em line-height, указвам на браузъра да направи височината на линията 1.286 пъти размера на шрифта, ерго – 18 пиксела. Ако сега потребителят промени размера на шрифта (а начини за това – бол, директно от браузъра), височината на линията ще остане пропорционална на размера на шрифта.

Можем да зададем и отстъпи (margin), макар че, в повечето случаи, отстъп горе и долу на параграф е трудно реализируем хармонично. Най-простото решение е да зададем margin: 0 0 1.286em 0, което ще симулира един празен ред след всеки параграф.

Като имаме предвид казаното до тук, за да създадем вертикален ритъм е нужно само line-height и margin (-top или -bottom) навсякъде да бъдат кратни на избрания line-height, в случая – 18px. Например:

  • заглавие с размер 20px (2.0em): 18 / 20 = 0.9em или 1.8em line-height (или margin)
  • заглавие с размер 16px (1.6em): 18 / 16 = 1.125em или 2.250 line-height (или margin)
  • забележка с размер 12px (1.2em): 18 / 12 = 1.5em line-height (или margin)

На заглавията нарочно съм дал две възможни стойности, тъй като по-ниската е удачна само при заглавия на един ред. При такива на няколко реда и малък line-height ще се получи застъпване на редовете.

Малък спек в системата внасят изображенията в текста, тъй като имат трудно предвидими размери. Нужно е височината на всяка снимка да бъде отново кратна на избрания line-height и по възможност – да бъде зададена в em. Тези две изисквания в общия случай са неизпълними. В примерите съм „форсирал“ височина на снимките, но това води до кофти превю или дори непропорционални деформации. Има някои начини за заобикаляне на проблема:

  • Ако правите всичко на ръка, форматирайте снимките в подходящ размер след избор на размера на шрифта. В нашия случай, примерно 180px височина за превюто или 360px за хоризонтална снимка.
  • Ако правите CSM, който позволява качване на изображения, лесно можете да направите генерирането на превюта да бълва подходящо форматирани изображения
  • Възможно е да поставяте всяко вложено в текста изображение в таг <span>, след което да задавате височина на span-а, най-близка до кратно на избрания line-height. Това е относително лесно, ако планирате CMS. По този начин, ако имате колона с основа 300px, очевидно изображението ви трябва да се смали до 300px за превю в колоната. Остава само да вземете височината на полученото превю и да намерите най-близкото кратно число нагоре.
  • Сигурно има още 1001 хитри начина, но вън напече приятно и някак си не ми се мислят повече 🙂

Излишно е да казвам, че тези похвати не могат да бъдат прилагани винаги. Но все пак да ще спомена. Има редица сайтове или печатни материали, в които подобен вертикален ритъм няма смисъл. Там обикновено се прибягва към grid systems и други пропорционални системи, но за това – в следващия живот. Ако, обаче, ви се налага да оформяте приличен обем текст или съдържание, което е с доминираща текстова част – отделете малко време да обмислите и изградите „стратегията“ си предварително. Това ще ви спести чуденки в последствие и ще придаде хармочност на продукта.

А сега, след толкова писане, наздраве!

пп: Утре ще се опитам да пусна примерче и за Word, защото още преди да пусна това блогиране вече имах два мейла по темата!

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

3 thoughts on “Вертикален ритъм (част 2)”

  1. Въпрос на подход. Практически всеки метод на изграждане на лейаут си има конкретно приложение. Решението в повечето случай винаги е субективно(лично) може би подхода трябва да се базира изцяло на идеята за Приотизиране на интерфейса (от което да следва конкретно дизайнерско решение) или Visual flow.
    Ша те чета за грид системите, пиши че ми стана интересно:))

  2. А бе туй хубуу, ама тука не говоря толкова за лейаут, колкото за text flow. Очевидно е, че при един сайт като Site5.com, дето всичко е рекламни карета с къстъм дизайн, тия неща нямат особен смисъл.

    Това е приложимо при разни text heavy случаи. И е нещо като златното сечение – ако искаш го ползвай, ако искаш – недей. Помага и резултира в структури, които хората намират за благи. Но в никой случай не трябва да ти пречи. Ако считаш, че пречи, значи просто не е удачно за случая.

  3. Не пречи. Даже е мега важно. Дори и да не е Хеви текста пак си требе да се мисли за типография(което както знаем хич не опира само до избора на фонта).Убао е да се говори за тез неща, в бг нета нещо много внимание на картинките се обръща. Ади за грида пиши,
    даже ако имаш некой як материал мое да шернеш срешу бирица черпня.:))

Leave a Reply

Your email address will not be published. Required fields are marked *