Главный Каталог Статей РФ
85945 авторов, размещено 47073 статей, сейчас на сайте пользователей: 159 Статистика
Аватар 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
Лучшие авторы
Аватар planetaigrushki
Наш интернет магазин работает что бы дети играли. ...

Читать

Аватар Victoria Tian
Автор женского журнала - Женские Хитрости

Читать

Аватар Aleksandr-sites
Создание, реализация сайтов.
Поддержка бизнес-проектов.

Читать

Аватар atntrans
Компания ЕООД "АТН-ТРАНС" работает на рынке трансп...

Читать

Аватар GodKnows
Холост, детей нет.

Читать

Свежие комментарии
Талантливый человек талантлив во всём! Будь как Паша! А ещё ты можешь ...

Читать

Можно выбрать.

Читать

Ой, шутник.

Читать

https://priornews.ru/zastrojshhik-iz-hmao-sravnil-ufas-s-prestupnoj-gr...

Читать

https://ura-news.turbopages.org/turbo/ura.news/s/news/1052688335

Читать

Напишите нам