Шрифт - это не менее важный элемент сайта, чем кнопки, картинки, декорации и так далее. От него зависит общий внешний вид и восприятие продукта пользователем. Текст окружает нас повсюду, из-за чего большинство людей не всегда обращают внимание на его стилистику. Однако не нужно обманываться и считать, что типографика не имеет особой роли в дизайне сайта - имеет и весьма немалую. Даже если обычный пользователь не акцентирует особого внимания на самом шрифте, то он обращает его на общую концепцию, а если шрифты подобраны некорректно, то и общая концепция будет страдать.
Веб-разработчику, если планируется работа непосредственно с дизайном, требуется знать основы типографики и технические характеристики шрифтов, чтобы правильно применять их на сайтах.
Правила выбора шрифтов для сайта
Так как сайт должен корректно отображаться на как можно большем числе устройств, нужно обращать внимание не только на то, как смотрится шрифт, но и будет ли он отображаться. Гарантировать корректное отображение может наличие нужного шрифта в операционной системе пользователя. Однако тут есть несколько условностей:
- Стандартные шрифты Windows, а именно эту ОС использует большинство пользователей, не всегда могут подходить под концепцию сайта. Пускай их и много, иногда требуется задействовать тот шрифт, которого в Windows не предусмотрено.
- Шрифт, который есть в Windows не всегда имеется на других операционных системах, например, Linux, Mac, Android.
Чтобы избежать этих проблем, веб-разработчикам рекомендуется подключать шрифты к сайту, а не просто использовать их в дизайн-макете. Существует два основных варианта подключения - загрузка исходных файлов в корневую директорию и использование CDN-ссылок. В первом случае сайт становится более тяжелым и чуть дольше грузится, но зато шрифты гарантировано отображаются. Во втором случае, так как файлы находятся на стороннем сервере, сайт загружается быстрее, но если что-то случится с этим сервером, то шрифт может не отобразиться.
Поэтому при выборе шрифта важно смотреть, чтобы у него были исходные файлы, а также возможность подключения через CDN-ссылки. В противном случае он может просто некорректно отображаться у пользователя, если в его операционной системе данного шрифта нет.
Помимо этого основного правила стоит обсудить вопрос с лицензией. Часто в рунете этим вопросом пренебрегают, особенно, если речь о таких мелочах как шрифты. Однако, при разработке потенциального крупного проекта лучше не нарушать правил с лицензиями, дабы избежать возможных проблем в будущем. Ищите шрифты в тех источниках, которые в случае необходимости смогут предоставить лицензию. Это правило касается и бесплатных шрифтов тоже.
Где искать шрифты для сайта
Просто “гуглить” их не рекомендуется, так как можно попасть на ресурс, где шрифт предоставлен не полностью, есть проблемы с лицензиями, используются устаревшие версии, да и банально нет удобных инструментов подключения к сайту. К счастью, специально для дизайнеров и разработчиков существуют ресурсы, где собраны полные версии как платных, так и бесплатных шрифтов со всеми лицензиями и возможностями быстрого и удобного подключения к сайту.
Google Fonts
Самый популярный сайт для поиска бесплатных шрифтов, коих здесь очень много - более 800 штук. На сайте представлена удобная система фильтрации - можно выбирать категории, доступные начертания, поддерживаемые алфавиты. Так как это сервис от Google, то проблем с лицензиями у него нет. Все шрифты, представленные в каталоге имеют открытый исходный код и полностью бесплатны, в том числе и для коммерческого использования.
Интерфейс сайта Google Fonts
Главное преимущество сервиса - расширенные возможности для веб-разработчиков. Вы можете настроить внешний вид шрифта и экспортировать настройки к себе на сайт через CDN. Так как сервера предоставляются Гуглом, то риски того, что с ними возникнут проблемы и текст на сайте “поедет”, минимальны. Если же подключать через CDN вы не хотите или не можете по каким-то другим причинам, то шрифт вместе с заданными настройками можно без проблем выгрузить RAR-архивом.
Font Squirrel
Не такой удобный, как Google Fonts, но имеющий некоторые свои фишки, например, определение названия и параметров шрифта по загруженному изображению. Это полезная функция для веб-разработчиков, так как иногда бывает, что дизайнер отправил готовый макет, но исходники к нему не скинул. Также здесь есть Webfont Generator, предназначенный для создания собственных шрифтов.
Интерфейс сайта Font Squirrel
Большинство шрифтов, но не все, имеют лицензии на бесплатное коммерческое использование. Перед тем, как использовать шрифт рекомендуем проверить его лицензию. Это можно сделать прямо на сайте.
FontSpace
Здесь представлена самая обширная библиотека шрифтов - более 32 тысяч вариантов и она постоянно пополняется. С сайтом сотрудничает более 2 тысяч дизайнеров, в том числе и типографов. Однако большинство из представленных шрифтов здесь имеет свои условиях распространения, в том числе необходимость платы за коммерческое использование. Для личных нужд вы можете работать с любым понравившемся, но вот перед тем, как подключить выбранный шрифт к сайту нужно убедиться, что его создатель разрешает коммерческое использование на бесплатной основе.
Интерфейс сайта FontSpace
Тренды шрифтов для сайта в 2022 году
Перед тем, как переходить к подборке шрифтов, рассмотрим популярные тренды этого года и когда их применение уместно:
- Массивные буквы. Чаще всего используются в заголовках и подзаголовках. Выступают больше не для привлечения внимания, а как полноценная часть дизайна в качестве тяжелых акцентирующих элементов. Вполне могут использоваться даже на страницах, выполненных в утонченном минималистичном дизайне. Главное, не переборщить с ними, чтобы не сделать весь дизайн сильно тяжелым.
- Минималистичные шрифты. Для них характерны легкие и геометричные линии без засечек. Такой вариант шрифта отлично подойдет для простого текста и подзаголовков. Его удобно читать, он не перетягивает на себя внимания и при этом органично вписывается практически в любую дизайн-концепцию.
- Ретро-стиль. Эти шрифты лучше всего подходят для заголовков, подзаголовков и выделенного текста. Писать им обычный текст не рекомендуется, чтобы не сделать его тяжелым для восприятия. Шрифты в этом стиле изобилуют плавными линиями, засечками, некоторой несимметричностью. Это делает их идеальным кандидатом для расстановки якорей внимания в дизайне.
- Рукописные шрифты. Чаще всего используются для создания логотипов и заголовков на главном экране страницы, так как они дают больше уникальности проекту.
- Шрифты с заостренными буквами. Они выглядят современно и немного агрессивно. Обычно используются в заголовках, подзаголовках и для расстановки акцентов внутри текста.
- Классические шрифты. Их не нужно путать с ретро. У них присутствуют засечки, но они не так сильно выделяются. Отличным примером классического шрифта является Times New Roman. Они отлично подходят для заголовков, подзаголовков и обычного текста.
Никто не запрещает совмещать в проекте несколько стилей шрифтов. Главное, чтобы они смотрелись органично и не было перегруза. Хорошим примером такого совмещения является использование ретро и классических шрифтов, где в ретро выполнены заголовки и акценты, а в классике подзаголовки и обычный текст.
ТОП-10 шрифтов для сайта в 2022 году
Теперь рассмотрим сами шрифты, которые отлично впишутся в дизайн современного сайта и основные тренды веб-оформления 2022 года.
Roboto
Несмотря на то, что первые версии этого шрифта появились еще в 2011 году под руководством Google. Хоть он и не отличается какими-либо дизайнерскими изысками, он имеет гибкие настройки, поддержку основных алфавитов, в том числе и кириллического. По-сути, это простой шрифт без засечек, идеально подходящий для обычного текста, но вот для оформления заголовков и акцентов лучше использовать какую-нибудь альтернативу.
Шрифт Roboto
Telegraf
Шрифт без засечек в гротескном стиле, отсылающий к середине прошлого века. Есть 8 весов, поэтому он отлично подойдет как для оформления простого текста, так и заголовков. Примечательно, что при изменении веса у текста проявляются прямые углы. Шрифт поддерживает только латиницу. Русские буквы не поддерживаются и не известно, будут ли поддерживаться в будущих обновлениях.
Шрифт Telegraf
Cirka
Универсальный шрифт с засечками. Изначально создавался для использования в типографии, но и в плане веб-разработки себя неплохо зарекомендовал. Идеально подойдет как для оформления заголовков, так и простого текста. Имеется 4 веса - от легко до полужирного. Cirka может рассматриваться для оформления сайта в ретро или классической стилистики. Для оформления страниц в современной стиле вряд ли подойдет.
Шрифт Cirka
Neue Montreal
Сейчас у этого шрифта появилась вторая доработанная версия, включающая 14 начертаний. Получил известность, так как использовался многими брендами из города Монреаль, в том числе и известными во всем мире. Это строгий и в то же время универсальный шрифт, который отлично будет смотреть на сайте, выполненном в минималистичном стиле.
Шрифт Neue Montreal
Eiko
Шрифт с засечками, выполненный с отсылками к традиционному японскому дизайну. Несмотря на использование засечек, выглядит очень современно и строго. Отлично подойдет для оформления заголовков и расстановки акцентов, хотя и в качестве обычного текста тоже будет неплохо смотреться. На него стоит обратить внимание разработчикам сайтам, которые так или иначе посвящены восточной тематике. Помимо стандартной латиницы, шрифт поддерживает и японские символы из каны и стандартные иероглифы. Их можно использовать самих по себе как дизайнерские элементы.
Шрифт Eiko
Wagon Serif
Шрифт, сочетающий в себе классический и современный дизайн. Бесплатен для личного использования, но для коммерческих целей придется приобретать лицензию. Отлично подойдет для оформления сайтов, посвященных моде, дизайну, журналистике. В текущей редакции поддерживается только расширенный набор латинских символов для 87 языков. Пока это демо-версия. В будущих редакциях возможно появится поддержка и кириллических символов.
Шрифт Wagon Serif
Kamino
Вытянутый шрифт без засечек с закругленными углами букв. Он только подходит для заголовков и логотипов, призванных задержать на себе внимание пользователей. Однако этот шрифт нельзя рассматривать для оформления простого текста.
Шрифт Kamino
Phonk Sans
Элегантный шрифт без засечек, поддерживающий русские буквы. Имеет 10 вариантов начертаний - от легкого до тяжелого. Обилие начертаний делает его чрезвычайно универсальным. Phonk Sans имеет множество функций OpenType, таких как лигатуры, альтернативные символы, дробные числа и многое другое. Текст, написанный данным шрифтом, может выглядеть немного вытянутым, однако это никак не мешает пользователю ознакамливаться с ним.
Шрифт Phonk Sans
Generator
Минималистичный шрифт без засечек. Он имеет свою индивидуальность, например, при разных начертаниях одинаковые буквы могут сильно меняться внешне. Всего предусмотрено 9 начертаний. Поддерживается только латиница. Есть поддержка спецсимволов, например, дробей.
Шрифт Generator
Trap
Современный шрифт без засечек, идеально подходящий для молодых IT-стартапов. Распространяется полностью бесплатно, в том числе и для коммерческого использования. Поддерживается только латиница.
Шрифт Trap
Заключение
Выбор шрифтов для сайта - это важный процесс создания дизайна и верстки. Категорически не рекомендуется подходить к этому процессу безответственно. На одной странице желательно использовать 2-3 шрифта (не больше): для заголовков, для основного текста и для акцентов. Некоторые шрифты настолько универсальны, что могут успешно применяться во всех трех направлениях. Выбирать шрифт для сайта лучше всего совместно с дизайнером, а также клиентом. Если есть возможность, то попытаться реализовать несколько вариантов.
