шрифт веб сайт

Нестандартні (довільні) шрифти

А як же бути з решта шрифтами? Адже хочеться, щоб задум дизайнера побачило як можна більше число користувачів!

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

Заміна тексту картинкою

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

Незручності, що виникають при використанні графіки замість тексту:

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

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

· Не можна виділити і скопіювати текст, який відображено на картинці.

· До кожного графічного елементу в коди HTML потрібно додавати опис. Якщо до малюнка не додано атрибуту опису ”ALT”, то користувач браузера з вимкненим відображенням графіки не побачить вмісту картинки і відповідно надпису, що мав би відображатися у цьому місці.

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

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

Втілення шрифтів -- EOT (Embedded OpenType)

Технологія Embedded OpenType (втілений формат OpenType) з'явилася в 1997 році. Можливість повноцінно використовувати будь-який шрифт на сайті існувала починаючи з Internet Explorer 4, але монополія Microsoft перешкоджала популяризації цієї технології. Також свою роль зіграв єдиний на той час конкурент Internet Explorer -- Netscape, який просував іншу технологію впровадження шрифтів -- TrueDoc.

Технологія EOT стискає і конвертує шрифти форматів TrueType і OpenType у формат EOT. Під час конвертації, в кореневий рядок шрифту прописуються адреси сайтів (або локальні адреси), де фізично буде розташовано файл шрифту. Якщо адреса сайту не збігається з адресою в кореневому рядку, то шрифт не відображатиметься.

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

CSS-правило @font-face

Починаючи з Firefox 3.5, Google Chrome 2, Opera 10 і Safari 3.1 стало можливим використовувати в цих браузерах CSS-правило @font-face, яке дозволяє імпортувати зовнішній файл шрифту в документ. Це означає, що якщо в відвідувача не встановлено потрібний шрифт, він завантажиться з сервера без втілення в операційну систему.

На даний момент ці браузери обробляють будь-який шрифт форматів OTF і TTF без необхідності конвертації в захищений формат EOT. Це істотна відмінність від Internet Explorer, який підтримує використання шрифтів лише у форматі EOT.

Переваги застосування правила @font-face:

· Гнучкість. Власник сайту може як завгодно міняти будь-які тексти.

· Висока швидкість завантаження. Мінімальна кількість зовнішніх файлів за будь-якої кількості тексту нестандартним шрифтом.

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

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

· Досить проста реалізація навіть з врахуванням оптимізації шрифту.

Недоліки:

· Підтримується не всіма браузерами. Технологію підтримують IE 4+, Opera 10.5+, Firefox 3.5+, Chrome 2+, Safari 1+.

· Великий об'єм шрифту. Може сягати кількох мегабайт, але ця проблема частково вирішується.

· Відображення шрифту після його повного завантаження. Допоки завантажується шрифт, в одних браузерах (IE, Firefox, Opera) користувач бачить відображення тексту звичайним шрифтом, в інших -- взагалі не бачить тексту (Safari, Chrome).

· Дотримання авторських прав щодо використання шрифту.

· Спостерігаються певні дрібні незручності, наприклад, не промальовується повністю текст (Safari, Chrome, Opera).

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

http://www.xiper.net/html-and-css-tricks/typographics/any-font.html

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

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

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

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

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

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

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

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

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

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

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

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

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

· Для встановлення властивостей шрифту слід використовувати таблиці стилів замість прописування цих властивостей в HTML-коді.

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

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

· Використовувати шрифти, що оптимізовані для виводу на екран.

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

Вибір розміру шрифту

При виборі розміру шрифту можна застосувати кілька підходів:

1. Не задавати розмір шрифту, використовувати розміри, що встановлені в браузерах за замовченням і цілком відмовитися від контролю за розміром шрифту.

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

2. Визначити розмір, використовуючи відносні або абсолютні одиниці вимірювання.

Абсолютні одиниці

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

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

Пункт (pt, пт) - абсолютна одиниця вимірювання, що використовується найчастіше. 1 пункт дорівнює 1/72 дюйми, і саме з даним співвідношенням пов'язано частину проблем пунктів, як одиниць вимірювання.

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

Стандартна роздільність комп'ютерів РС дорівнює 96 ppi, тобто, в одному дюймі знаходяться 96 пікселів. Таким чином, 1 пункт = 1/72 дюйми на екрані РС займає приблизно 1,3 піксели.

Але не всі системи мають таку ж стандартну роздільність. Роздільність комп'ютерів Macintosh дорівнює 72 ppi, тобто в одному дюймі міститься 72 піксели і 1 пункт займає 1 піксел. В результаті один і той же текст, розмір якого заданий в пунктах, на екрані Macintosh виглядає в 1,3 рази меншим, ніж той же самий текст на комп'ютерах РС. При використанні шрифту розміром 9 пунктів і менше, текст на екрані Macintosh стає нечитабельним.

Інші абсолютні одиниці

Інші абсолютні одиниці вимірювання також не є вдалими для відображення тексту на екрані - це піки (pc), дюйми (in), сантиметри (cm) і міліметри. Вони, подібно до використання пунктів, можуть привести до непередбачуваних результатів.

Абсолютні одиниці вимірювання варто застосовувати лише тоді, коли відомо про точні фізичні розміри пристрою відображення (наприклад, розміри екран дисплея або сторінки, що буде видрукувана). Тому, в більшості випадків для Інтернет видань використовуються відносні одиниці.

Відносні одиниці

Відносні одиниці визначають розмір елементу через значення іншого розміру.

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

Самими популярними одиницями є піксели і відсотки. Вони залежать від роздільної здатності монітора, його розмірів та налаштувань операційної системи.

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

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

Відсотки вказують на розмір обраного шрифту відносно розміру шрифту, що встановлено в сайті чи браузері за замовченням. Тому, наприклад, можна задати, що основний текст сторінки повинен дорівнювати 100%, заголовок - 130%, підзаголовок - 120%, а текст в навігаційному блоці 95% від встановленого за замовченням шрифту.

Одиниці em і ex є величинами, відносними до шрифту, що встановлено за замовченням у сайті чи браузері користувача. Одиниця 1 em дорівнює висоті найбільшої літери цього шрифту (зазвичай, це літера «M», звідси абревіатура em), а 1 ex дорівнює висоті рядкових літер шрифту (зазвичай, це висота літери «x», звідси англійська назва x-height і абревіатура ex).

Размещено на Allbest.ru