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

Какие шрифты использовать на веб-страницах? В каких единицах указывать их размеры? На эти вопросы мы постараемся ответить в этой статье и дадим некоторые полезные советы.

Гарнитуры шрифтов в веб-дизайне

Исторически сложилось, что в интернете чаще всего встречаются шрифты без засечек – т. е. без декоративных элементов, расположенных на концах букв. Примерами шрифтов без засечек являются 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. При верстке старайтесь использовать только те шрифты, которые есть у всех пользователей. Использование нестандартных и редких шрифтов может привести к тому, что пользователь увидит страницу совсем не так, как видите её вы, при этом он может быть разочарован.
Автор: Михаил Пестречихин Источник: www. codething. ru/fonts. php
15:49 14.12.2016

---

Ваше имя (псевдоним):

Проверка на спам:

Введите символы с картинки:

---

Владимир Пресняков-старший стал автором ноктюрнов дл...

Совместный проект «Nocturnes» Владимира Петровича Преснякова-старшего с Евгением Борцем – пианистом, композитором, аранжировщиком и руководителем джазового коллектива «Jazz Town Band» - новый этап в ...

Методические аспекты разработки технологии дистанцио...

Теперь, когда информационно-коммуникационные технологии (ИКТ) пришли в образование, на них возлагаются большие надежды, но при этом следует быть особенно предусмотрительными в их применении, следует п...

Почему я не хочу экономить? Заметка из сэкономленных...

По причине тотального дефицита жизнь советского человека образца 70−80-х напоминала жизнь Робинзона Крузо. Поскольку ничего нельзя было просто купить — приходилось беречь то, что было...

Кондиционеры зимой… Зачем?

Зачем думать о кондиционере зимой? Зачем готовить сани летом? Два разных вопроса, но суть одна: необходимо заранее подготовиться к решению какой-либо задачи в будущем или в определенный сезон, т.е. по...

Вкусные рецепты: Киви...в ШОКОЛАДЕ!!!..."Мороже...

Киви...в ШОКОЛАДЕ!!!..."Мороженое на палочке")))Начнем с киви: Очистить и порезать на кружочки толщиной 2,5 см. Затем в каждый кружок киви вставить палочку для мороженого... Убрать в морозильную камер...

Вкусные рецепты: Выпечка к чаю с цитрусом и смородин...

Выпечка к чаю с цитрусом и смородинойМасло рубим на небольшие кусочки,добавляем лимонный сок,воду,перемешиваем. Добавляем муку,тщательно замешиваем тесто. Раскатываем тесто (не сильно тонко, но и не с...