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

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

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

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

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

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

Как добиться идеальных форм? Минимум усилий, макси

Зима — это время года, когда мы обычно набираем лишние килограммы. Поэтому наверняка дост...

Зачем человеку моногамия? Нелепо, смешно, безрассу

Ни толку, ни проку, ни в лад, невпопад… Совершенно… Снова, снова поверяют алгеброй га...

Вкусные рецепты: Китайский салатик с огуречной кож

Китайский салатик с огуречной кожуройКожуру нарезать тонкой длинной соломкой. Морковь нарезать также...

Ваш сайт - это Ваша фирма

Интернет-бизнес уникален тем, что он международный. Если Вы учредили русскоязычный сайт, то все гово...

Чем может помочь родителям детский психолог?

Можно сказать, что к психологам все уже привыкли. Эти специалисты помогают решать личностные проблем...

Стюарты - несчастливые короли? Умный король

История Стюартов продолжилась: жена Карла I Генриетта-Мария, сестра короля Франции Людовика XIII, ув...

Гипотоническая болезнь

ГИПОТОНИЧЕСКАЯ БОЛЕЗНЬ И ВЕГЕТОСОСУДИСТАЯ ДИСТОНИЯ ПО ГИПОТОНИЧЕСКОМУ ТИПУ   Это состояние ...

Астрология. Влияние одиннадцатого дома натальной к

Чёрная Луна (Лилит) в старшем владении (обители) -в Скорпионе. В младшем владении (обители) --в Козе...

Астрология. Влияние двенадцатого дома наталъной ка

Смысл двенадцатого дома натальной карты-это усиленное влияние кармы на жизнь и деятельность человека...

Какой антивирус лучше, Kaspersky (Касперский) или

В данной статье я не буду затрагивать другие антивирусы. А хочу поговорить только об этих двух. Я ра...



О информационном портале:

Наш сайт является ресурсом, который включает в себя полный перечень полезных и интересных статей. Абсолютно каждый гость найдет для себя что-нибудь полезное. Модернизированный дизайн позволяет вам быстро находить требуемую информацию. Самые разнообразные тематические статьи дают возможность вам совершенствоваться в той или иной сфере. Быть более начитанным и грамотным. Современный дизайн сайта позволяет просматривать статьи на всех гаджетах. Теперь отыскать требуемую информацию стало совершенно просто.

Мы собрали для вас полезные и интересные статьи. У нас сайте вы найдете ответы на необходимые для вас вопросы. Упрощенная система поиска позволяет вам мгновенно отыскать нужную информацию. Адаптированный дизайн позволяет вам просматривать информацию на абсолютно любых гаджетах. Теперь, поиск нужной информации будет занимать у вас считанные секунды.