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

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

Вертикален ритъм (част 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. Например:

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

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

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

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

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

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

15 March 2007, 19:00 | Теч | Тагове: , , , , , , , , , ,

Коментари

  1. Nubizus, 21 March 2007, 20:03

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

  2. Боби, 22 March 2007, 11:19

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

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

  3. Nubizus, 22 March 2007, 11:32

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

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

/ / Textile Help