6 Шрифти для Веб



Скачати 248.97 Kb.
Дата конвертації02.12.2016
Розмір248.97 Kb.

6.1. Шрифти для Веб. Типи шрифтів

6.1. Шрифти для Веб


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

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



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

Шрифт — це невелика програма, яка написана спеціальною мовою розмітки шрифту.


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


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

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

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

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

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


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

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

Проте моноширинні шрифти мають певні недоліки: перш за все, більшу ширину набору, нерівномірний малюнок, а також складнощі з відображенням «широких» букв, таких як «Ш» або «М»: при невеликій роздільності їх важко впізнати.

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



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

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


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

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

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

  • Fantasy — декоративні шрифти.

  • Monospace — моноширинний шрифт (з буквами однакової ширини).

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


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

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

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

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


Це так звані рубані шрифти або гротески (нім. Grotesk, анг. і фр. Grotesque, амер. Gothic). В перекладі з французької sans serif – «без зарубок».

В шрифтах без зарубок відсутні завершальні елементи на кінцях штрихів.









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

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

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

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


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

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









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

Декоративні шрифти (fantasy)


Цю категорію складають численні шрифти, які не вкладаються в звичайні групи. Вони призначені для надання привабливого вигляду тексту і можуть імітувати визначений історичний стиль або декоративну обробку форми, наприклад: Модерн, Ар Деко, Оп-арт, контурні, зворотні, тривимірні, фактурні, орнаментальні, трафаретні, машинописні, екранні, з рваним контуром і тощо.







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

Акциденція – це сутності та форми, метою яких є не так інформативність, як привабливість.

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


Готичні шрифти застосовуються в основному як акцидентні. Вони імітують середньовічні рукописні почерки широким пером, які були поширені в XIII-XVI століттях головним чином в північній Європі. Існує кілька основних форм готичних почерків. Їх букви характеризуються, як правило, вузькими пропорціями, сильним контрастом, зламами штрихів, великою насиченістю і високою декоративністю.

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

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

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






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


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

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

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

Прикладом може служити шрифт Franklin, (Franklin, Franklin) який налічує близько 33 зображень.


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

Вибір відповідного шрифту для сайту є непростою справою:


  • Певні шрифти оптимізовані для виводу на друк, інші на екран. Шрифти, які створені для виведення на друк (зокрема шрифти із зарубками) на екрані можуть виглядати неакуратно.

  • Не всі операційні системи містять однакові системні шрифти.

  • Розмір шрифту залежить від роздільності екрану та налаштувань операційної системи користувача.

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

Безпечні шрифти


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

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



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

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

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


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

Перелік стандартних шрифтів різних версій Windows


Шрифт

Сімейство

Windows

Зразок шрифту

Arial

sans serif

3.1, 95, NТ 3.5



Arial Black

sans serif

95, 2000



Arial Narrow

sans serif





Arial Unicode MS

sans serif





Book Antiqua

serif

98



Bookman Old Style

serif





Calibri

sans serif

Vista



Cambria

serif

Vista



Candara

sans serif

Vista



Century

serif





Century Gothic

sans serif

95



Comic Sans MS

cursive

95, 2000



Consolas

monospace

Vista



Constantia

serif

Vista



Corbel

sans serif

Vista



Courier New

monospace

3.1, 95, NT 3.5



Franklin Gothic Medium

sans serif

XP



Garamond

serif





Georgia

serif

95, 2000



Impact

sans serif

95, 2000



Lucida Console

monospace

95, NT 3.5



Lucida Sans Unicode

sans serif

95, NT 3.5



Microsoft Sans Serif

sans serif

2000



Mistral

cursive





Monotype Corsiva

cursive





Palatino Linotype

serif

2000



Segoe Print

cursive

Vista



Segoe Script

cursive

Vista



Segoe UI

sans serif

Vista



Sylfaen

serif

XP



Tahoma

sans serif

98, 2000



Times New Roman

serif

3.1, 95, NT 3.5



Trebuchet MS

sans serif

95, 2000



Verdana

sans serif

95, 2000



В таблиці вказано версії Windows, з якими вперше поставлявся шрифт.

Перелік стандартних шрифтів Mac OS можна подивитися на сторінці http://www.microsoft.com/typography/fonts/mac.htm

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

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


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

Основою для визначення «безпечних» шрифтів послужили шрифти найбільш поширеної операційної системи 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. Всі вони підтримують кирилицю, що важливо для слов’яномовної аудиторії.

Набір шрифтів, які входять в стандартне постачання Mac OS містять всі шрифти набору Core fonts for the Web.



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

  • Arial

  • Arial Black

  • Comic Sans MS

  • Courier New

  • Georgia

  • Impact

  • Times New Roman

  • Trebuchet MS

  • Verdana

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

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

Шрифти, що підтримують кирилицю


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

Нижче приведена таблиця відповідностей шрифтів.


Windows

Mac OS

Unix/Linux

Родове сімейство

Arial Black

Helvetica CY

Nimbus Sans L

Sans-serif

Arial

Helvetica CY

Nimbus Sans L

Sans-serif

Comic Sans MS

Monaco CY

* (див. нижче)

cursive

Courier New

* (див. нижче)

Nimbus Mono L

Monospace

Georgia

* (див. нижче)

Century Schoolbook L

Serif

Impact

Charcoal CY

* (див. нижче)

Sans-serif

Times New Roman

Times CY

Nimbus Roman No9 L

Serif

Trebuchet MS

Helvetica CY

* (див. нижче)

Sans-serif

Verdana

Geneva CY

DejaVu Sans

Sans-serif

* - рідних кириличних еквівалентів Windows-шрифта в операційній системи немає.

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


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

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


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


Шрифти

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

Arial Black

Arial


Comic Sans MS

Courier New

Georgia

Impact


Lucida Console

Lucida Sans Unicode

Tahoma

Times New Roman



Trebuchet MS

Verdana


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.


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


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

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


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


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

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


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

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

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

  • До кожного графічного елементу в коди 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. Не задавати розмір шрифту, використовувати розміри, що встановлені в браузерах за замовченням і цілком відмовитися від контролю за розміром шрифту.

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

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

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


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

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



Одиниця

Опис

in

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

mm

Міліметр

pc

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

pt

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

cm

Сантиметр

Пункт (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) і міліметри. Вони, подібно до використання пунктів, можуть привести до непередбачуваних результатів.

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


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


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

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



Одиниця

Опис

px

Піксел

%

Відсоток

em

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

ex

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

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

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

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



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

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





База даних захищена авторським правом ©lecture.in.ua 2016
звернутися до адміністрації

    Головна сторінка