- Какие разновидности шрифтов существуют?
- Какие шрифты пользуются популярностью сегодня?
- Prayfair Display
- Bebas Neue
- Druk Wide
- Cinzel
- Gilroy
- Montserrat
- Proxima Nova
- PT Sans
- Work Sans
- Lato
- Как подобрать правильное сочетание шрифтов конкретному сайту?
- Подведение итогов
Шрифты для сайта являются такими же важными элементами дизайна, как форма, цветовое исполнение и другие компоненты. Правильно подобранные инструменты оформления заголовков, базового текста при наполнении веб-ресурса контентом делают чтение информации максимально комфортным и легким. Кроме того, используемые шрифты играют важную роль в создании общего впечатления о веб-сайте и, как итог, влияют на то, останется потенциальный клиент или уйдет.
В процессе разработки ресурса абсолютно каждый дизайнер сталкивается с важной задачей – выбрать красивый и самый подходящий шрифт. Получить более детальное представление о выполнении этого задания можно на обучающем курсе UX/UI от DevEducation, в ходе которого профессиональные преподаватели и IT-специалисты подробно рассматривают все аспекты создания дизайна. В этой статье предлагаем остановиться на 10 самых востребованных и бесплатных шрифтов для коммерческих и некоммерческих интернет-ресурсов.
Какие разновидности шрифтов существуют?
До того как поговорить о типах веб-шрифтов, следует детальнее остановиться на важности их правильного выбора. Согласно результатам исследования американской компании «Nielsen Norman Group», опубликованным в 2020, интернет-пользователи предпочитают сначала просканировать страничку собственными глазами, а после уже принимают о прочтении информации более внимательно и осознанно. При этом сканирование человеком осуществляется с учетом разных паттернов, но всегда проводится по заголовкам.
Как правило, пользователи, которые запускают веб-сайт с мобильного телефона, отдают предпочтение прочтению текста от начала и до конца. Люди, открывающие страничку с персонального компьютера или ноутбука, чаще потребляют сведения в очень сжатом формате – посредством табличек, схем, списков и инфографики. При этом, неважно с помощью какого оборудования человек выполняет серфинг. Важно то, что он никогда не будет заставлять себя разбирать абсолютно нечитабельную информацию.
Это значит, что, если компания или некоммерческая организация заинтересована в привлечении внимания целевой аудитории, важно тщательно выбрать шрифт для оформления собственного сайта. Сегодня веб-дизайнерам предлагается впечатляющее разнообразие вариантов, которые можно использовать для наполнения веб-ресурсов клиента контентом.
Например, по методике начертания шрифты классифицируются двумя типами – рукописные, печатные. Первый тип представлен оригинальным внешним видом, и в нем присутствуют индивидуализированные подвиды. К примеру, шрифты Сезанна, Пикассо и Кафки. Им отдают предпочтения дизайнеры, когда необходимо красиво оформить заголовки, логотипы. Оформлять основной текст рукописной вариацией не рекомендуется, так как она существенно усложняет чтение сведений и их восприятие.
Для оформления базового текста используют печатные шрифты. Их можно разделить на три подгруппы:
- Рубленные. Это вариации нейтрального характера, не имеющие засечек. Безупречно подходят для оформления ключевого текста, параграфов, заголовков.
- С засечками. Данные шрифты существенно облегчают процесс чтения пользователями печатных изданий, так как с их помощью можно визуально очерчивать строки. В сфере веб-дизайна такие вариации не применяются для оформления основной части информации, поскольку они рассеивают внимание пользователей, усложняют восприятие. Базовое назначение шрифтов с засечками – применение в логотипах, для представления заголовков и другой важной информации на веб-странице.
- Декоративные. Эти вариации выглядят очень ярко, оригинально и выразительно. В большинстве случаев эти шрифты используются для создания молодежных сайтов и веб-ресурсов, тематика которых связана с креативом и творчеством. При этом рекомендуется их задействовать с особой осторожностью, поскольку текст, оформленный посредством декоративных шрифтов, является достаточно сложным для пользователей. Как правило, они применяются для заголовков, создания логотипов.
Современные веб-дизайнеры классифицируют шрифты двумя подвидами – гротески, антиквы. Например, к антиквам можно отнести разновидности с засечками, а гротескам – вариации без них, в том числе, рукописные. Оптимальным вариантом сегодня считается сочетания шрифтов, гармонично дополняющих друг друга, создающих оригинальный дизайн ресурса.
Какие шрифты пользуются популярностью сегодня?
Современные дизайнеры для создания дизайна сайта применяют те варианты, которые были собраны в базе Google Fonts. Скачать шрифты возможно абсолютно бесплатно, при этом они отличаются высоким качеством и большим разнообразием. Их использование не сопровождается возникновением проблем в процессе верстки, что делает их очень востребованными.
Дизайнеры могут легко подключить базу, чтобы подтягивать из нее необходимые шрифты. Для удобства пользователей Google Fonts представлена разнообразными способами сортировки. В библиотеке есть шрифты для арабского языка, иврита, латиницы и кириллицы, а также иероглифического письма. Найти более подходящий вариант можно посредством системы фильтров, а остановиться на самых популярных инструментах – выбрав соответствующую сортировку.
Предлагаем остановиться более детально на ТОП-10 самых востребованных шрифтов, которые сегодня активно используются веб-дизайнерами для оформления коммерческих и некоммерческих ресурсов.
Prayfair Display
Замена острых перьев для письма стальными ручками существенно повлияла на типографские символы – они стали менее похожими на письменные. Активное развитие технологии печати, производства бумаги и чернил предоставило возможность печатать символы с достаточно высоким уровнем контрастности и очень тонкими линиями.
Prayfair Display – идеальный вариант для формирования заголовков, к примеру, новостей. Разработчик Клаус Соренсен предложил возможность дизайнерам веб-ресурсов использовать его для создания стилистического эффекта разнообразных заголовков и подзаголовков.
Bebas Neue
Это свободный Sans Serif, который был разработан японским дизайнером шрифтов Ryoichi Tsunekawa. В наше время Bebas Neue представлен 4 современными вариациями:
- thin;
- light;
- book;
- regular.
Данный инструмент превосходно подходит для создания подзаголовков, постеров, навигационных элементов и иных компонентов ресурса.
Druk Wide
Коллекция этих шрифтов была представлена миру в 2013. Они были разработаны для дизайна категории «про культуру», стиль в Bloomberg Businessweek – Etc. Данное семейство отдает дань уважения нидерландским дизайнерам, которые активно использовали насыщенные и широкие гротески. Такие популярные шрифты применялись для оформления каталогов, посвященных Городскому музею Амстердама.
Cinzel
Разработчики этого шрифта вдохновились римской символикой первого столетия. Cinzel отличается классическими пропорциями, но при этом он не только повторяет век возрождения, а эффективно передает историю всего латинского алфавита в сочетании с современным искусством.
Gilroy
Достаточно часто дизайнеры выбирают универсальные шрифты, которые безупречно подходят под любые стилистические направления. Одним из таких вариантов является Гилрой, относящийся к линейке современного инструментария без засечек с различными геометрическими прикосновениями.
Gilroy является частью семейства Qanelas, которые были созданы вместе с мощнейшими функциями Opentype. Приятным бонусом использования данной разновидности является то, что абсолютно каждый вес этого шрифта представлен:
- расширенной поддержкой языков (то есть содержит кириллицу);
- фракциями;
- фигурами для табличек;
- стрелками;
- лигатурами, а также многими другими элементами.
Использовать Гилрой можно для графического и редакционного дизайна, оформления сайтов, рекламных вывесок, иных целей.
Montserrat
Разработчица Джульетта Улановская вдохновилась старыми плакатами и вывесками, расположенными в одном из районов Буэнос-Айреса – Монтсеррате. Этот шрифт по праву считается спасением безупречности городской типографии, которая появилась в 20 столетии.
Письма, вдохновившие проект, наполнены преданностью дела, соответствующими цветами, светом. Поэтому в первую очередь они разрабатывались для того, чтобы сохранить ценные элементы Монтсеррата.
Proxima Nova
Это семейство является полной переработкой Proxima Sans, который был разработан в 1994. Эти виды шрифтов насчитывали в самом начале исходных 6 вариаций, но сегодня дизайнеры получают доступ к сорока восьми полнофункциональным инструментам OpenType.
Веб-дизайнеры могут воспользоваться тремя ширинами коллекции:
- Нова;
- Nova Condensed;
- Nova Extra Condensed.
Абсолютно все предлагаемые ширины представлены шестнадцатью шрифтами (7 весов с определенным курсивом).
По стилистике Проксима Нова помогает преодолеть разрыв между шрифтами Futura и классикой без засечек. В итоге дизайнеры получают гибрид, который сочетает в себе гуманистические пропорции и незначительно геометрический тип.
PT Sans
Сегодня многие веб-дизайнеры используют специальные программы для работы со шрифтами, позволяющие создавать уникальный дизайн сайта в максимально сжатые сроки. Не менее популярными для этих целей считается семейство шрифтов PT Sans, которые отличаются универсальным применением. Этот вариант содержит восемь стилей (жирный, обычный инструментарий, а также соответствующий им курсив).
Дизайн коллекции шрифтов представлен сочетанием классического консервативного типа с элементами современности (гуманистический без засечек). Поэтому PT Sans отличается повышенным уровнем читаемости. Такие возможности, кроме обычного применения в различных бизнес-программах, печатных материалах, способствовали тому, что инструмент часто применяют для разработки указателей, дорожных схем, а также информационных киосков и других элементов визуальной коммуникации в городе.
Work Sans
Данная библиотека основана на ранних гротесках (Бауэршен Гиссерей, Миллер, Стивенсон Блейк). Все их вариации адаптированы под создание текстов для чтения на дисплеях средних размеров. Достаточно часто шрифт применяется для оформления печатных материалов.
Коллекция Work Sans максимально приближена к крупным весам, поэтому она предназначена для задействования непосредственно во всемирной паутине. Функционал шрифта упрощен, адаптирован под разрешение конкретного дисплея.
Lato
Разработчик Лукаш Дзедзич представил собственный инструментарий без засечек Лато в 2019. Уже спустя полгода библиотека была опубликована на основании лицензии OpenFront при поддержке Гугл.
Первоначально шрифты были задуманы для применения в корпоративном сегменте для работы с крупными клиентами, но позже разработчик решил отказаться от этого, и пойти по иному направлению. По этой причине семейство Лато сегодня предлагается в открытом доступе.
Как подобрать правильное сочетание шрифтов конкретному сайту?
Приблизительно 9 из 10 пользователей сознательно не акцентируют внимание на шрифтах, которые были использованы для оформления веб-ресурса. При этом, если попросить такого человека описать страничку с гармонично не сочетающимися между собой шрифтовыми парами, нечитабельными вариациями, он отметит свой негативный опыт (неприятно, сложно или неинтересно). Но идентичный текст, созданный более удобным и модным шрифтом, будет прочитан максимально охотно.
Это значит, что для обычных интернет-пользователей важен момент собственного восприятия информации: гармоничность общего оформления сайта, легкость читаемости текста, корректное размещение акцентов на страничках для правильной ориентации. Поэтому главная задача специалиста заключается в том, чтобы проработать такие факторы, выдержать общую концепцию тематики веб-ресурса.
Поделимся с вами секретами корректного подбора шрифтовых пар для веб-ресурсов:
- Откажитесь от использования более трех шрифтов в процессе создания веб-дизайна. Большее количество отвлекает внимание потенциального клиента, утяжеляет и замедляет их подгрузку на страничку. Доли секунды могут сыграть негативную роль в формировании отношения пользователя к бренду.
- Пристально следите за фактором читабельности. Если текст не может быть прочитан, иные компоненты не играют роли. Поэтому важно предложить пользователю текст таким шрифтом, чтобы ему не захотелось покидать сайт в течение первых нескольких секунд. Потребуется удостовериться в том, что контент легко читается, и для него были правильно подобраны параметры (сочетание цвета, размер, начертание и другие характеристики).
- Используйте типографику максимально логично. Рекомендуем применять для этого различные гарнитуры, шрифтовые сочетания. При этом важно придерживаться логики оформления – заголовки больше подзаголовков, базовый текст не может сливаться с цветной подложкой.
Кроме того, рекомендуем тщательно следить за правильностью сочетания шрифтов, и при появлении мельчайших сомнений выполнять их замену. Традиционно используются вариации с засечками и рубленные, применение шрифтов различных категорий, разная контрастная насыщенность базового текста и подзаголовков.
Оценить гармоничность оформления возможно посредством методики «боковое зрение» — направляйте свой взгляд правее/левее текстового контента, что позволит воспринять общую картинку, при этом не читая саму информацию. Такой метод поможет дизайнеру определить, правильно ли подобран шрифт для создания дизайна веб-ресурса.
Подведение итогов
Сегодня многие веб-дизайнеры выбирают бесплатные шрифты для сайтов не только потому, что это выгодно, но и по причине их универсальности, удобства чтения с любых экранов. В нашей статье были рассмотрены наиболее популярные и востребованные среди IT-специалистов семейства, которые представлены в публичном доступе без необходимости оплачивать их покупку. Правильный выбор шрифтового сочетания предоставит возможность разработать привлекательный сайт, который будет нравиться целевой аудитории бизнеса.
