Лекції з дисципліни "Веб-дизайн"

Лекція 6. Веб типографіка

Базові принципи веб типографіки

1. Тип шрифту

Вибір типу шрифту є базовою основою типографії і є одним з ключових етапів у розробці дизайну сайту.

Serif   Sans-serif

В поліграфії прийнято вважати, що шрифти без зарубок сильніше стомлюють очі, ніж шрифти із зарубками, оскільки зарубки допомагають вести погляд відвідувача по тексту і людський мозок швидше сприймає плавні форми. Тому, в більшості традиційних друкованих документів при публікації великих об'ємів тексту, таких як основна частина книги чи газетної статті використовуються шрифти із зарубками. Чіткіші, помітніші і не обтяжені додатковими елементами форми шрифтів без зарубок  у поліграфії використовуються, в основному, для заголовків статей або для рекламних слоганів.

Для веб-документів, що призначені в основному для перегляду на екрані монітора застосовується інший підхід. Тут, шрифти із зарубками не є популярними, і основний текст, зазвичай, набирають шрифтами без зарубок. Причина цього, мабуть, криється в низькій роздільності екрану.

В друкарських текстах зарубки мають складну, загострену на кінці, форму і з'єднуються з основним штрихом плавно. На екрані окремий символ займає, зазвичай, 12–16 пікселів у висоту, зарубка відображається лінією завтовшки лише в 1 піксел і не може плавно з'єднуватися з основним штрихом або мати загострену форму. До того ж, для 12–16 пікселів символу 2 піксели зарубок (знизу і зверху) є достатньо великим візуальним навантаженням.

Тому, на відміну від шрифтів serif, які на моніторі виглядають стертими, шрифти sans-serif навпаки, є чіткими.

2. Стандартні веб шрифти

Нижче представлено три класичних шрифту, які є найбільш популярними серед веб дизайнерів.

body {

font-family: verdana, "trebuchet MS", helvetica, sans-serif;

}

Ці шрифти є безпечними і мають широке застосування.

Verdana - є найпопулярнішим представником sans-serif шрифтів, що використовуються сьогодні в Інтернеті.

Збільшена відстань між символами, а також наявність великої кількості білих пікселів в кожному символі надає шрифту Verdana чіткість відображення на екрані.

Trebuchet було розроблено Вісенте Коннарем в 1996 році і також є безпечним веб-шрифтом.

Завдяки чітким лініям і блокам, шрифт Threbuchet добре відтворює дрібні розміри символів.

Helvetica було розроблено у 1950 роках, на тепер досі залишається популярним.

Незважаючи на компактну ширину шрифту, Helvetica добре читається на екрані завдяки великій висоті символів. Основною перевагою даного виду шрифту є економія простору.

Останнє правило в CSS sans-serif визначає, що за відсутності перелічених шрифтів на комп’ютері відвідувача, його браузер відстворить текст шрифтом без зарубок, який встановлено за замовченням.

3. Хороший екранний шрифт

До хороших екранних шрифтів можна віднести шрифти з такими характеристиками:

•Низький контраст, прості блоки з відповідною вагою і товщиною.

•Відповідна висота букв.

•Оптимальна ширина символів і відстанб між ними.

•Наявність вільного простору в кожному символі.

Вибір типу шрифту - досить відповідальний етап. Шрифт - це частина вашого проекту. Якщо ви розробляєте веб вузол для банку або серйозної компанії, нереальним буде використання шрифту зразку Comic Sans, шрифт повинен бути підібраний строгим, що відповідає тематиці вашого сайту.

4. Розмір шрифту

Розмір шрифту є важливим інструментом представлення тексту на сайті, він визначає ієрархію розмірів заголовків, основного тексту, а також впливає на сприйняття тексту в загальному. Розмір шрифту знаходиться в дуже тісному контакті з іншими властивостями тексту, такими як ширина колонки, висота відступів тощо.

Традиційну ієрархію розмірів тексту різних об'єктів в CSS представлено наступним чином:

p {font-size: 14px;}

h1 {font-size: 26px;}

h2 {font-size: 22px;}

Як правило, при використанні заголовків в основному тексті, для них вказується більш легкий, м'який колір для створення відчуття врівноваженості тексту. Ви також можете задавати розміри шрифтів у відсотковому відношенні від їх початкового розміру.

5. Акцент

Для акцентування уваги на важливих фрагментах тексту можна використати кілька підходів до виділення ключових слів:

•Bold (грубий). Найпопулярніший метод акцентування уваги. Як правило, грубим текстом виділяють заголовки або важливі слова в тексті.

•Italic (нахилений). Курсивний текст зле виглядає на екранах з невеликою роздільною здатністю. Не слід також застосовувати курсив в формах. Однак він чудово підходить для цитування фраз або складання списку літератури чи періодичних видань.

•Underlinе (підкреслений). Не варто використовувати підкреслений текст для виділення ключових слів. В вебі прийнято, що підкреслений текст є посиланням, тому це може ввести відвідувачів в оману.

•Колір. Використання кольору для виділення також не є гарною ідеєю. Акцентування на тексті за допомогою кольорових слів було популярним в минулому столітті, в даний час професійні веб дизайнери не використовують даний метод виділення.

•Великі букви. Не слід використовувати довгі речення, що написані великими літерами. Це буде розцінено як недолік в оформленні сторінки, а також знизить читабельність решти тексту.

6. Відстань між рядками (Line Spacing)

Вертикальна дистанція між рядками має значний вплив на чіткість і стиль відображення тексту. Оптимальною відстанню між рядками вважається відстань, не менша за висоту символу.

При встановленні відстані між рядками необхідно не забувати, що занадто велика відстань також може негативно позначитися на загальному сприйнятті тексту.

 7. Відстань між буквами (Letter Spacing)

Зазвичай, стандартні шрифти б браузерах відображаються з оптимальною відстанню між літерами та словами. Зазвичай таку можливість застосовують для коротких заголовків, проте деякі браузери можуть це проігнорувати.

9. Відступи (Margin) і вирівнювання (Alignment)

Відступи мають вплив на загальне сприйняття сторінки. Вони допомагають розміщувати текст на різних відстанях від суміжних елементів, а також від меж браузера. Великі межі створюють відчуття вільного простору, в той час, як невеликі представляють більш естетичний вигляд тексту.

Для веб-тексту можна використати кілька варіантів вирівнювання:

•За лівим краєм. Традиційний підхід до вирівнювання основного тексту.

•По центру. Здебільшого застосовується для заголовків чи важливих фрагментів.

•За правим краєм. Використовується дуже рідко для специфічних цілей, наприклад, епіграфу.

•За шириною. Є найбільш популярним в друкованих виданнях, але рідше використовується в веб типографіці. При вирівнюванні за шириною колонки браузер збільшує або зменшує відстані між словами в кожному рядку, що істотно відбивається на естетичному вигляді загального тексту.

Доцільний шрифт для верстки сайтів

Твердо стверджувати, що існує самий кращий шрифт для верстання сайту не можна. Якщо такий шрифт і існує, то для кожного розробника свій.

Оскільки не можна передбачити вибір відвідувачів, то можна передбачити можливість самостійного вибору користувачем шрифту. Наприклад, це може бути улюблений шрифт, що більше за все відповідає уподобанням відвідувача. Робота розробника полягає в тому, щоб не заважати користувачеві до застосування власних налаштувань, тобто можливості вибору шрифту, виходячи з власних міркувань.

При відвідуванні зручного веб-сайту у користувача повинна бути можливість:

•Відключити таблицю стилів веб-сайту, щоб браузер відобразив сторінку, використовуючи власні налаштування чи налаштування користувача.

•Використати власну таблицю стилів, якщо є така можливість.

•Змінити налаштування сайту стосовно зовнішнього вигляду тексту, зокрема зміна шрифту, його розміру чи кольору. Однією з найважливіших проблем розробника в даному випадку є вибір одиниць для встановлення розміру шрифту: абсолютних або відносних.

Тому, розробник має враховувати наступні правила:

•Шрифт за стилем повинен відповідати змістовному навантаженню сайту.

•Уважно проаналізувати сайт стосовно зручності сприйняття і читабельності текстів відповідними шрифтами: довжина рядків, міжрядковий інтервал (висота рядків), розмір шрифту, співвідношення тексту і вільного простору на сторінці. Підвищення читабельності тексту забезпечує важливі чинники: увагу, швидкість прочитання та осмислення інформації.

•Вибирати шрифти, що є доступними для користувачів більшості операційних систем, або забезпечити альтернативу вибору, також в таблиці стилів потрібно вказати загальний тип шрифту.

•Переконатися, що в розробленому сайті ніщо не заважатиме користувачеві встановити свої налаштування відносно шрифту.

Веб типографіка домоглася значного прогресу за останні кілька років. Вона починає знаходити свої характерні риси, засновані на специфіці верстки статей, розміщення їх в Інтернеті, і відображення за допомогою веб браузерів.

Сьогодні шрифти і виглядають відмінно, і читаються виразно, окрім того, типографіка підказала дизайнерам цілий ряд прекрасних рішень в плані побудови веб-сайтів.