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

Лекція 5: Шрифти для Веб

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

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

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

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

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

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

Для виведення векторного шрифту на растрові пристрої (монітори і принтери) його необхідно растеризувати — перетворити в набір точок. Для растеризації шрифтів в сучасні операційні системи Windows і Mac OS втілено растеризатор шрифтів.

Існує кілька різних форматів векторних шрифтів, що різняться за способом збереження і представлення інформації про шрифт: це PostScript, Type1,TrueType, OpenType.

За шириною символів шрифти поділяють на моноширинні і пропорційні.

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

•В пропорційному шрифті символи можуть мати різну ширину. Наприклад, літера «І» займатиме значно менше місця, ніж літера «Ш». Це дозволяє в значній мірі зменшити середній розмір символу і зберегти при цьому легкість для читання. Текст, що набрано пропорційним шрифтом виглядає акуратніше і краще читається при великих об'ємах. Для друкування і відображення текстів майже завжди застосовується пропорційний шрифт.

Сімейства шрифтів

•Serif — шрифти із зарубками на закінченнях літер.

•Sans-serif — шрифти без зарубок.

•Cursive — шрифти курсивного зображення (рукописні шрифти).

Шрифт із зарубками (serif)

Текст

Зарубки або серіфи (фр. serif) - це горизонтальні елементи закінчення основних, іноді сполучених, штрихів, які можуть мати різні форми: прямокутну, зігнуту, заокруглену тощо.

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

Шрифти із зарубками виглядають традиційно, типово і сприяють легшому сприйняттю великих об'ємів тексту. Яскравим прикладом серіфних шрифтів є Times,  Bodoni,  Garamond.

Шрифти без зарубок (sans-serif)

Текст

Це так звані гротески (нім. Grotesk, анг. і фр. Grotesque, амер. Gothic). В шрифтах без зарубок відсутні завершальні елементи на кінцях штрихів.

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

В операційних системах шрифти без зарубок користуються більшою популярністю, ніж шрифти із зарубками, тому перелік універсальних шрифтів без зарубок, що доступні на платформах Windows, Linux і MACOS є більш широким. Це Arial, Impact, Helvetica, Lucida, Tahoma, Trebuchet, Verdana.

Шрифти курсивного зображення (cursive)

Текст

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

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

Альтернативні шрифти

Це шрифти, які створені у власному неповторному стилі. В основному - це новий вигляд шрифтових форм, що не містять в своїй основі інших шрифтів.

Гарнітура шрифту

Гарнітура шрифту (Type family) – це сукупність зображень, які об'єднані загальними стильовими ознаками, характером графічної побудови символів і рішенням їх елементів.

В гарнітурі присутній комплект шрифтів, що мають схожий малюнок, але різняться за накресленням (звичайний, курсивний, жирний). Наприклад, шрифти «Arial», «Arial Bold», «Arial Italic» складають одну гарнітуру «Arial».

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

Вибір шрифту для сайту

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

З цієї точки зору шрифти можна умовно розподілити до двох категорій:

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

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

Стандартні шрифти

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

•Стандартні шрифти Windows: http://www.microsoft.com/typography/default.mspx

•Стандартні шрифти Mac OS: http://www.microsoft.com/typography/fonts/mac.htm

Що стосується Unix/Linux операційних систем, то єдиного набору шрифтів в них немає.  За статистикою більшість Unix/Linux користувачів мають на своєму комп'ютері шрифти набору: Core fonts for the Web http://www.microsoft.com/typography/fonts/web.aspx

Веб-безпечні шрифти

В Інтернеті історично склалося таке поняття як «безпечні» веб-шрифти. Безпечним шрифтом можна назвати шрифт, який є стандартним для всіх операційних систем.

Основою для визначення «безпечних» шрифтів послужили шрифти Windows, які використовуються в інших операційних системах, наприклад, пакет шрифтів Core fonts for the Web.

Цей пакет містить наступні шрифти: Andale Mono, Arial Black, Arial, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, Webdings. Всі вони підтримують кирилицю, що важливо для української аудиторії.

Таким чином, на основі шрифтів Windows, що використовуються в інших операційних системах сформувався наступний список так званих «безпечних» веб-шрифтів:

•Arial

•Arial Black

•Comic Sans MS•Courier New

•Georgia

•Impact•Times New Roman

•Trebuchet MS

•Verdana

•Webdings  - містить набір картинок, тому його використовують для відображення іконок чи піктограм.

Ці шрифти є в кожного користувача Windows, Mac OS і в переважній більшості користувачів Unix/Linux.

Безпечні лінійки шрифтів

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

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

Безпечні лінійки для кириличних шрифтів

font-family: "Arial Black", "Helvetica CY", "Nimbus Sans L" sans-serif.

font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif.

font-family: "Comic Sans MS", "Monaco CY", cursive.

font-family: "Courier New", "Nimbus Mono L", monospace.

font-family: Georgia, "Century Schoolbook L", Serif.

font-family: Impact, "Charcoal CY", sans-serif.

font-family: "Lucida Console", Monaco, monospace.

font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif.

font-family: Tahoma, "Geneva CY", sans-serif.

font-family: "Times New Roman", "Times CY", "Nimbus Roman No9 L", serif.

font-family: "Trebuchet MS", "Helvetica CY", sans-serif.

font-family: Verdana, "Geneva CY", "DejaVu Sans", sans-serif.

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

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

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

•Використання властивості @ font-face в файлі стилів

•Використання API Google Font

Правило @ font-face

Кожен веб-дизайнер прагне створити сайт з красивою типографікою. Але, на жаль, браузери підтримують лише кілька гарнітур, так званих "безпечних веб шрифтів". В стандартний набір входять наступні шрифти: Arial, Verdana, Times, Georgia, Courier New і кілька інших.

Правило @ font-face дозволяє підключати різноманітні користувацькі шрифти. Браузер завантажує шрифти в кеш і використовує їх для оформлення тексту на сторінці. Такий підхід називається вбудовуванням шрифтів, а вбудовані шрифти - веб-шрифтами.

Правило @ font-face потрібно розміщувати перед всіма іншими правилами css, оскільки цей прийом підвищує продуктивність сторінки. Офлайн шрифти можна поміщати в спеціальну папку fonts, що розміщається на сервері.

Щоб підключити шрифт за допомогою правила @ font-face, потрібно:

1) завантажити файл шрифту на сервер в декількох форматах для підтримки всіма браузерами

2) вказати назву шрифту, прописати посилання на файл і задати опис шрифту,

3) додати ім'я шрифту в властивість font-family елемента, який буде відображатися даними шрифтом.

CSS

@ font-face {

    font-family: "WebFont";

    src: url (WebFont.eot?) format ("eot"), / * IE8 +, знак? дозволяє обійти баг в обробнику значення src * /

         url (WebFont.woff) format ("woff"), / * всі сучасні браузери, IE9 + * /

         url (WebFont.ttf) format ("truetype"); / * Всі сучасні браузери * /

}

p {font-family: "WebFont", Arial, sans-serif; }

Цей код повідомляє браузеру відображати текст всередині елемента <p>, використовуючи шрифт WebFont. Якщо браузер з якої-небудь причини не зможе завантажити даний шрифт, він вибере відповідний зі списку шрифтів. Він перебирає їх в зазначеному порядку до тих пір, поки не знаходить шрифт, який зможе успішно використовувати.

Всередині кожного сімейства шрифту можна визначити до дев'яти значень жирності (ваги). Тому, для кожного вбудованого шрифту, а також для кожного накреслення потрібно задавати окреме правило @ font-face, тобто не можна оголосити в одному правилі два різних шрифти або шрифт одного сімейства, але різних стилів і ваги.

CSS

@ font-face {

    font-family: "WebFont";

    src: url (WebFont.eot?) format ("eot"),

         url (WebFont.woff) format ("woff"),

         url (WebFont.ttf) format ("truetype");

    font-weight: bold;

    font-style: italic;

}

CSS

@ font-face {

    font-family: "WebFont";

    src: url (WebFont.eot?) format ("eot"),

         url (WebFont.woff) format ("woff"),

         url (WebFont.ttf) format ("truetype");

    font-weight: 400;

    font-style: normal;

}

В загальному вигляді для шрифту можна задати такі властивості:

CSS

@ font-face {

    font-family: "WebFont";

    src: local ("WebFont"),

         url (WebFont.eot?) format ("eot"),

         url (WebFont.woff) format ("woff"),

         url (WebFont.ttf) format ("truetype");

    font-weight: bold;

    font-style: italic;

}

Формати веб-шрифтів

Властивість @ font-face має хорошу підтримку в браузерах, але різні браузери використовують різні формати шрифтів. Існують чотири основних формату шрифтів:

Формат WOFF (Web Open Font Format), відкритий мережевий формат шрифту, розроблений в Mozilla. Технічно WOFF не можна назвати форматом шрифту, так як він являє собою лише оболонку з функцією стиснення. Формат стискає шрифти в форматі TTF / OTF для використання їх в інтернеті. Також, WOFF дозволяє додавати до файлу метадані, наприклад, відомості про ліцензії.

Формати OTF / TTF (OpenType Font і TrueType Font) працюють в більшості браузерів. Обидва формати поширюються вільно.

Формат EOT (Embedded Open Type) створений розробниками Microsoft, являє стислу копію шрифту TTF, повторне використання якого забороняється технологіями DRM (Digital Rights Management, цифрове управління правами доступу). Підтримується лише в IE, починаючи з 8-ї версії.

SVG / SVGZ (Scalabe Vector Graphics) - тип файлів шрифтів, що представляє векторне накреслення шрифту. Як правило, має менші розміри файлів, тим самим дозволяючи поліпшити продуктивність на мобільних пристроях. Працює в Opera Mobile і iOS Safari.

Складнощі використання вбудованих шрифтів

1) Файли шрифтів можуть бути великих розмірів, тому, в деяких випадках додавання @ font-face уповільнює завантаження сторінок.

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

3) Деякі шрифти просто погано виглядають на веб-сторінках.

Корисні ресурси

Font Squirrel - сервіс, що дозволяє конвертувати веб-шрифти різних форматів. Невеликий мінус - висота деяких символів після конвертації може розрізнятися. Шрифт завантажується на сервіс по кнопці Upload Fonts.

http://www.fontsquirrel.com/tools/webfont-generator

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

http://webfont.ru/

Використання API Google Font

Google Font API (https://www.google.com/fonts) - це безкоштовний сервіс від Google, який надає власникам сайтів можливість використовувати різні шрифти простим, зручним і ефективним способом.

Google Font API - новий представник ніші Font-as-Service, який включає TypeKit, Typotheque та ін. та надає високоякісні відкриті (open source) шрифти, які легко можуть бути використані у дизайні.

Переваги використання Google Font API

•Використання HTML тексту.

•На відміну від використання @ font-face, як рішення для більш привабливої веб-типографіки, більш сприятливо в плані SEO.

•Доступність

•Надійна інфраструктура і зниження навантаження на сервер. Завантаження використовує надійну інфраструктуру Google, тому обслуговування файлів шрифтів буде швидким, а це знижує навантаження на власний сервер

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

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

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

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

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

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

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

•cmСантиметр

•mmМіліметр

•inДюйм (1 дюйм = 2,54 см)

•ptПункт (1 пункт = 1/72 дюйми  0.35 мм)

•pcПіка (1 піка = 12 пунктам)

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

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

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

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

•pxПіксел

•%Відсоток

•emВисота найбільшої літери шрифту

•exВисота рядкової літери шрифту

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

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

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

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

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