Главный Каталог Статей РФ
87238 авторов, размещено 47366 статей, сейчас на сайте пользователей: 612 Статистика
Аватар Pestr

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

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

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

Исторически сложилось, что в интернете чаще всего встречаются шрифты без засечек – т.е. без декоративных элементов, расположенных на концах букв. Примерами шрифтов без засечек являются 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. При верстке старайтесь использовать только те шрифты, которые есть у всех пользователей. Использование нестандартных и редких шрифтов может привести к тому, что пользователь увидит страницу совсем не так, как видите её вы, при этом он может быть разочарован.

Автор: Михаил Пестречихин Источник: http://www.codething.ru/fonts.php

Комментарии
К этой статье пока нет комментариев. Станьте первым! У нас гости не могут комментировать статьи. Пожалуйста авторизуйтесь или зарегистрируйтесь, чтобы прокомментировать.
Интересные статьи по теме
Аватар AnemoN
Накрутка лайков и подписчиков ВКонтакте Есть несколько хитрых и не очень методов, которые используются для т.н. "накрутки лайков".О заслуживающих внимания пойдет речь в этой статье....
Категория: Интернет | Автор: AnemoN | Добавлено: 17.02.2013
Аватар Jetti
Буксы — что это такое и как правильно выбрать букс для заработка Из-за коронавируса, "блуждающего" по всему миру вот уже второй год, у многих людей появилось огромное количество свободного времени. Одни стали тратить это время на хобби, другие — читать книги и смот...
Категория: Интернет | Автор: Jetti | Добавлено: 20.07.2021
Аватар Lizetta
Сколько времени уходит на создание сайта? Сколько времени тратит специалист на разработку сайта? В какой срок можно создать сайт и чем обуславливается это?...
Категория: Интернет | Автор: Lizetta | Добавлено: 03.06.2011
Аватар gul_itb
Как правильно представить информацию на сайте Зачем люди сидят в Интернете? В основном есть две причины – это развлечение и поиск информации. Ваш корпоративный сайт, конечно же тоже служит этим двум целям Интернет-общения. Даже бизнес-сайт о чем-...
Категория: Интернет | Автор: gul_itb | Добавлено: 26.10.2009
Аватар Marta22
Как улучшить страницу на сайте вконтакте Советы, как сделать страницу в vkontakte лучше...
Категория: Интернет | Автор: Marta22 | Добавлено: 21.08.2009
Свежие комментарии
Ну, вот это я понимаю, настоящая инструкция для тех, кто хочет не просто «привет, как дела», а чтобы дамы сами в личку ломились! Как говорится, техник...

Читать >>

Куклы-обереги действительно имеют глубокий символизм и интересную историю, которая часто теряется в современных интерпретациях. Например, многие не зн...

Читать >>

Полностью поддерживаю подход, описанный в статье! Рисование — не просто творческое занятие, а ключевой инструмент для развития ребёнка. Как детский пс...

Читать >>

Интересная подборка ошибок, но не могу не высказать скепсис по поводу части рекомендаций. Например, о зарядке только до 80% — это логично с техническо...

Читать >>

Работал соцработником пару лет, и вот что не написали: это не только помощь людям, но и куча бумажек, отчётов и согласований. Бывает, половина времени...

Читать >>

Лучшие авторы
Аватар Yurlana
нутрициолог, косметолог. Опыт работы с БАДами и ом...

Читать

Аватар 25amsi
Моя компания, Всем о ремонте, предоставляет полный...

Читать

Напишите нам