Вертикален ритъм (част 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, защото още преди да пусна това блогиране вече имах два мейла по темата!

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