Роль шрифтов при создании сайта
При оформлении созданного сайта необходимо уделить должное внимание выбору шрифтов, поскольку люди посещают страницы с целью получить информацию именно через прочтение, поэтому нужно сделать этот процесс максимально комфортным.
Разумным решением будет использовать два основных шрифта при оформлении сайта. Один – для заголовков, а другой – для основного текста. Таким образом, посетитель будет легко различать структуру контента, а сам сайт будет более целостным.
Для заголовка, например, можно использовать шрифт Roboto Black, а для основного текста – Roboto Light или другие варианты.
Важно знать, что шрифт, который вы установили на своем компьютере, не обязательно правильно отрисуется у других. Если такой же шрифт не установлен у читателя, то его браузер отобразит либо альтернативу вашему шрифту, либо значение по умолчанию.
Кстати, эта фраза для демонстрации всех кирилических шрифтов выбрана не случайно. Именно она содержит сразу весь русский алфавит и предоставляет возможным оценить отрисовку каждой буквы в контексте одного предложения.
Как установить сразу несколько шрифтов
Очередь шрифтов – указание в стилях сайта не только, например, «Roboto», но и ряд других, как вариант: «Roboto, Serif, Arial». В таком случае, браузер первым попытается использовать шрифт Roboto, если он не установлен на компьютере пользователя, то следующим будет Serif, за ним Arial, а затем шрифт, который система сама обозначила по умолчанию. Пример реализации, фрагмент из style.css моего сайта:
body { font-family: Open Sans Light, sans-serif; color: #333; font-size: 18px; line-height: 20px; font-weight: 400; }
Как видно из кода, основным шрифтом является Open Sans Light, в случае возникновения с ним каких-либо проблем, браузер отобразит стандартный serif, который есть в каждой сборке Windows. Зачем это нужно, если система сама поставит шрифт по умолчанию? Затем, что стандартный serif визуально гораздо больше похож на мой кастомный Open Sans, и в целом, потери отображения контента будут не такими большими, как в случае с отрисовкой совершенно другим шрифтом.
Чтобы совсем обезопасить себя от метаморфоз с отображением, достаточно просто прописать прямую ссылку на используемый шрифт в файл стилей Вашего сайта. Делается это очень просто:
@font-face { font-family: "Название шрифта"; src: url("../путь/к/шрифту.ttf") format("truetype"); font-style: normal; font-weight: normal; }
Пример из таблицы стилей моего сайта:
@font-face { font-family: "Open Sans Light"; src: url("../fonts/opensans.ttf") format("truetype"); font-style: normal; font-weight: normal; }
После указания в style.css прямой ссылки на файл шрифта, остаётся лишь применить его, указав в том же файле стилей font-family для всего сайта или отдельного элемента. В качестве примера, применим ко всему тексту на сайте:
body { font-family: Open Sans Light ; color: #333; font-size: 18px; line-height: 20px; font-weight: 400; }
Где взять красивые шрифты для сайта?
Поиск необходимых шрифтов, порой, самое долгое и интересное занятие. Ведь их на сегодняшний день просто великое множество, и такое же множество похожих между собой видов. Определиться с этим крайне непросто, но ведь нужно знать, откуда брать источник для выбора.
AllFont — cервис, которым я пользуюсь лично. Это огромная библиотека шрифтов, в том числе, что немало важно, и кирилических. Сайт удобен тем, что Вам вовсе не обязательно скачивать шрифт для того, чтобы узнать как он будет выглядеть в работе - достаточно лишь ввести желаемую фразу в качестве примера, и Вы сразу получите представление о шрифте. Так же на странице каждого шрифта дополнительно есть изображение со всеми символами и буквами русского и английского алфавита, цифрами и самыми распространенными спецсимволами.
Желаю Вам удачи в оформлении
Таким образом, зная эти несколько нюансов, вы сможете оформить сайт на свой вкус и предотвратить возможные недоразумения при его отображении на компьютерах пользователей.