fbpx

Каталог статей

Каталог статей для размещения статей информационного характера

Технології

Верстка шрифтів на веб-сторінках

Які шрифти використовувати на веб-сторінках? В яких одиницях вказувати їх розміри? На ці питання ми постараємося відповісти в цій статті дамо деякі корисні поради.
Гарнітури шрифтів у веб-дизайні
Історично склалося, що в інтернеті найчастіше зустрічаються шрифти без зарубок – тобто без декоративних елементів, розташованих на кінцях букв. Прикладами шрифтів без зарубок є Arial, Verdana, Tahoma та ін. Приклади шрифтів із зарубками – Times New Roman, Courier New та ін
На моніторах з низьким дозволом і з великими пікселями шрифти без зарубок читаються і масштабуються значно краще, ніж шрифти із зарубками. Тому при верстці сайтів більшість дизайнерів зазвичай використовують шрифти без зарубок. Шрифти із зарубками застосовуються у веб-дизайні або для декоративних цілей, або для виділення якихось окремих елементів (наприклад, підписи).
Розміри шрифтів
Шрифти на веб-сторінках не повинні бути занадто дрібними, так і занадто великими. Оптимальний розмір шрифту в текстових блоках 9-11 pt або 10-14 px.
Не варто застосовувати на одній сторінці безліч різних варіантів розмірів, кольорів і гарнітур шрифту. У більшості випадків це ускладнює сприйняття сторінки і просто негарно виглядає. Виробіть кілька варіантів накреслення: для заголовків різних рівнів, для звичайного тексту, виділеного тексту, для коментарів, цитат і т. п. Не робіть одні й ті ж по функціональності блоки різними по гарнітурі і розміром шрифтами. Дотримуйтесь єдність стилю. Якщо хочете щось виділити, краще скористайтеся кольором або такими параметрами як жирність або курсив.
При верстці веб-сторінок найкраще вказувати розміри шрифтів в пікселях (px), так можна уникнути проблеми, пов’язаної з налаштуваннями масштабу шрифтів в операційній системі Windows і зберегти зовнішній вигляд сайту однаковою при будь-яких настройках браузера та операційної системи.
Дещо про шрифти
1. Для вставки фрагментів програмного коду, краще всього підходить моноширинний шрифт Courier – кожен символ цього шрифту займає однакову ширину, тому програмний код читається природно, зберігаються всі необхідні структурні відступи в програмному коді.
Про можливості автоматичної підсвічування синтаксису програмного коду можна прочитати статтю:
Підсвічування синтаксису програмного коду для відображення на веб-сторінках.
2. Для кращого сприйняття довгих текстів рекомендується збільшувати міжрядковий інтервал. Робиться це параметром line-height у CSS, який найзручніше задавати у відсотках. Наприклад, line-height: 100% – рядки будуть щільно наліплені один до одного, а line-height: 150% – вже дає необхідне розрідження між рядками і довгий текст читати стане простіше.
3. При верстці намагайтеся використовувати тільки ті шрифти, які є у всіх користувачів. Використання нестандартних і рідкісних шрифтів може призвести до того, що користувач побачить сторінку зовсім не так, як бачите її ви, при цьому він може бути розчарований.
Автор: Михайло Пестречихин
Джерело: