До вибору шрифтів потрібно віднестися зі всією серйозністю. Правильний підбір шрифтів зможе посилити враження від вашого Web-сайта, а неправильний – привести до того, що враження буде послаблене або зовсім зіпсоване.

Спочатку у розробників Web-сторінок взагалі не було можливостей контролювати вибір шрифтів. Автор вказував стилі для ділянок тексту, наприклад Heading1 (заголовок першого рівня) або normal (звичайний текст), а підстановкою шрифтів для цих стилів займався вже браузер відвідувача Web. На практиці більшість шрифтів, що використовуються у Web були різними варіантами Times Roman і Courier.

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

Назви і заголовки, як правило, – більшого розміру по відношенню до звичайного тексту і використовувати художні шрифти для них простіше. Однак проблеми виникають і з ними. Головна проблема полягає в тому, що Web-дизайнер ніколи не може бути впевнений, що потрібний для нього шрифт встановлено на комп’ютері відвідувача Web. Загальноприйнятої технології завантаження шрифтів з Web досі так і не існує. У результаті багато Web-дизайнерів замінюють текст зображеннями, на яких заголовок або назва гарантовано виглядає так, як вони це планують, зі всіма витікаючими звідси недоліками.

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

• всі заголовки першого рівня повинні виглядати однаково;
• весь звичайний текст повинен виглядати однаково;
• заголовки першого рівня повинні відрізнятися від звичайного тексту.

Tе ж саме можна сказати по відношенню до гіперпосилань та інших елементів.

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

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

Є два звичайних способи досягти контрасту між різними ділянками тексту – використати напівжирне або курсивне зображення. Якщо напівжирнимвиділена якась частина звичайного тексту, як правило, це означає, що цій частині надається особливе значення. Курсивом же звичайно виділяються спеціальні терміни (особливо коли вони зустрічаються в перший раз).

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

Підкреслення – це досить груба заміна курсиву. Цей метод виділення тексту залишився нам в спадщину від епохи пишучих машинок, коли можливості роботи зі шрифтами були зовсім обмежені. У наш час, коли курсив повністю доступний, використовувати підкреслення вже немає ніякої необхідності. Більш того, використання такого методу виділення тексту може навіть збентежити відвідувача Web, оскільки браузери часто виділяють гіперпосилання саме підкресленням.

Головні засоби, які можна використати для досягнення контрасту між різними частинами тексту:

• Розмір (size). Як правило, розмір шрифту вимірюється в пунктах (points), де один пункт еквівалентний 1/72 дюйма. Розмір рівний відстані між верхньою точкою самого високого символа і найнижчою точкою символа, який більш усього видається вниз.

• Колір (color). Для тексту, як і для практично будь-якого елемента Web-сторінки, можна настроїти колір. Пам’ятайте, що колір, вибраний вами для тексту, повинен бути інтегрований із загальною колірною схемою сторінки.
• Гарнітура шрифту (typeface). У цей час розроблені тисячі гарнітур і кожний день створюються все нові і нові. Враховуючи те, що кількість символів в алфавіті обмежена, дивно, що автори шрифтів змогли створити таку кількість варіантів написання одних і тих же букв. Більш дивним є те, що читачі досі можуть їх розпізнати. Ось деякі характеристики, якими одні гарнітури шрифтів відрізняються від інших:
  • Наявність або відсутність спеціальних рисок – засічок (serifs). Засічки - маленькі загострені риски на кінцях символів. Вони є, наприклад, в таких гарнітурах, як Times Roman і Garamond. В Arial і Helvetica їх немає.
  • Нахил засічок (slant of serifs). Засічки можуть розташовуватися як паралельно напряму рядка, так і під кутом до нього.
  • Товщина засічок (thickness of serifs). Засічки можуть бути настільки тонкими, наскільки це можливе, а можуть бути такої ж товщини, як і самі лінії, що створюють символи.
  • Переходи штрихів (stroke transition). Штрихи – це лінії і їх сполучення, які і створюють символ. Перехід штрихів – це різниця між самою товстою і самою тонкою лінією, які утворюють символ.
  • Нахил (stress). Під ним мається на увазі кут, під яким нахилена до рядка уявна лінія, що проходить через найбільш тонкі частини симетричних символів.
  • Товщина ліній (weight). У поліграфії використовується також термін "насиченість”. Найбільш яскраво різниця в товщині шрифту виявляється при порівнянні звичайного і напівжирного зображення одного і того ж шрифту. Можливі й інші градації товщини. Деякі гарнітури шрифтів використовують більш товсті лінії, ніж інші, просто за своїй природою. У самих товстих шрифтів звичайно в назві фігурують слова "black” (чорний) або "ultra” (ультра). Загальне правило: чим товстіше, "важче” шрифт, тим більшу увагу він привертає. Однак дуже велика кількість "важких” шрифтів на сторінці знижує ефективність їх застосування.
  • Напрям (direction). У цього терміну є відразу декілька значень. По-перше, він застосовується для позначення нахилених по відношенню до іншої частини сторінки або звивистих рядків (цим ефектом частіше зловживають, ніж використовують у справі). Крім того, цей же термін застосовується і по відношенню до загального компонування тексту. Наприклад, пропозиції або абзаци, які скомпоновані у високі і вузькі стовпці, мають велику вертикальну спрямованість, ніж текст, розташований по всій ширині сторінки. Вертикальне і горизонтальне вимірювання є і у рядків, і у стовпців в таблицях. Елементи в списках можуть бути розташовані горизонтально (як слова в пропозиціях) або вертикально (один над одним, як в більшості списків).
  • Пропорційні (proportional) і моноширинні (monospaced) шрифти. Більшість гарнітур є пропорційними. Це означає, що одні символи ширші, ніж інші. Таку ситуацію потрібно визнати нормальною, якщо у вас немає якихось особливих міркувань відносно того, чому рядкова i повинна займати стільки ж місця на рядку, скільки і прописна W.
    Моноширинні гарнітури влаштовані по типу пишучої машинки: вони відводять на кожний символ однакове місце. Як правило, такі шрифти виглядають менш привабливо, ніж пропорційні, і читаються гірше. Однак використання таких шрифтів може виявитися доречнішим, наприклад, для лістингу програм або в інших ситуаціях, коли рядки тексту повинні бути розміщені чітко один під одним без використання таблиць і символів табуляції.
  • Форма (form). Форма – це загальний контур символа в гарнітурі. Можна сказати, що форма – це об’єднання всіх властивостей шрифту, перерахованих вище. Прописні і рядкові символи одного і того шрифту мають різну форму.
  • Стиль (style). Це властивість, яка об’єднує все, що не було розглянуто вище. При створенні шрифту важливий як художній, так і технічний підхід. Під стилем шрифту розуміється те, що відноситься до області мистецтва.

Як правило, у кожного шрифту є назва, але в більшості випадків вона нічого не повідомляє про його властивості. У деяких шрифтів (наприклад, Garamond або Baskerville, які були названі в честь своїх творців більше як століття тому) багата історія, інші ж з’явилися на наших очах. Давайте розглянемо найбільш загальні категорії шрифтів:

• Oldstyle (шрифти старого стилю). Це шрифти, що добре читаються, мають багату історію, а тому широко розповсюджені. У них використовуються похилі засічки для рядкових символів, помірні переходи штрихів і невеликий нахил зліва. Найбільш поширені гарнітури цієї категорії – Times Roman і Garamond.
• Modern (модерн). У цих шрифтах використовуються дуже великі переходи штрихів, нахил – чітко вертикальний по відношенню до рядка, а засічки направлені горизонтально. У результаті текст виглядає холоднішим і механістичнішим, ніж при використанні шрифтів старого стилю. Поширені приклади шрифтів модерн – Bodoni і Elephant.

• Slab serif (шрифти з укрупненими засічками). Ці шрифти були спеціально розроблені для кращого читання. У них використовуються малі переходи штрихів, більш товсті засічки, але нахил залишається вертикальним, як і в шрифтах модерн. Як приклади таких шрифтів можна назвати Century Schoolbook, New Century Schoolbook і Clarendon.
• Sans serif (без засічок). У цих шрифтах взагалі не передбачені ні засічки, ні переходи шрифтів, ні нахили. У результаті шрифти набувають точного, технічного вигляду, але, як правило, читаються гірше, ніж шрифти із засічками. Контраст між шрифтами із засічками і без засічок дуже великий. Тому часто шрифтами без засічок виділяються заголовки, в той час як основний текст набраний шрифтом із засічками. Приклад шрифтів без засічок – Arial і Helvetica.
• Script (рукописні). До цієї категорії відносяться шрифти, які з першого погляду наводять на думку про рукописний текст і каліграфію. Ці високохудожні шрифти частіше за все застосовуються для запрошень і рекламних оголошень. Звичайно такі шрифти читати важче, ніж інші, і їх складно відобразити на екрані монітора. При створенні Web-сторінок до використання таких шрифтів завжди треба підходити з великою обережністю. Типовий приклад такого шрифту – Zapf Chancery.
• Decorative (декоративні). До цієї категорії відноситься безліч стилізованих шрифтів, які цілком можна назвати химерними. Вони привертають до себе увагу, але їх важко читати, тому зловживати ними не треба. Такі шрифти повинні бути великими – маленькі декоративні шрифти при низькій здатністі монітору  виглядають просто жахливо. За допомогою таких шрифтів можна створювати привертаючі увагу логотипи, заголовки і "шапки” для іншого тексту, але пам’ятайте про те, що перевантажувати сторінку такими шрифтами не треба. Приклад такого шрифту – Matisse ITC.
• Symbol (символьні). Ці шрифти спеціально призначені для роботи з різними символами – від поширених до абсолютно некорисних. У них ви не знайдете звичайних букв, цифри або символи пунктуації. Реально такі шрифти нагадують швидше колекцію значків. Застосування такого шрифту до звичайного тексту приводить до появи на сторінці випадкового набору самих різних символів. Приклад такого шрифту приведений на мал.31.
  

  Мал. 31. Приклад символьного шрифту

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

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

Контраст, що створюється за допомогою кольору і розміру шрифту, набагато помітніший, ніж контраст з використанням різного зображення символа. Якщо ви вирішили використати на Web-сторінці різні шрифти, пересвідчіться, по-перше, що всі ці шрифти дійсно чітко відрізняються один від одного, а по-друге, що всі вони добре читаються. Крім того, шрифти повинні поєднуватися один з одним. Якщо у вас виникли сумніви, використайте шрифт за умовчанням (швидше усього, це буде шрифт старого стилю) для основного тексту і шрифти більшого розміру без засічок – для заголовків.