Какие шрифты чаще всего используете в дизайне сайта? — Хабр Q&A
Не путайте парня и не ограничивайте его в выборе. Послушает, замкнется на Open Sans, Roboto, Proxima Nova.1. Выбор шрифта осуществляется в соответствии с конкретной задачей. Это первое правило, которое нужно держать в голове при выборе шрифта (шрифтов) для определенного проекта.
У Вас большие объемы текста и нужно добиться максимальной скорости прочтения? Выбирай шрифт с максимальной удобочитаемостью (Helvetica, Pragmatica, Aktiv Grotesk, etc).
Делаешь своей девушке сайт-визитку по продаже хенд-мейд бижутерии? Можешь присмотреться к декоративным шрифтам или серифам.
Кроме того, возможны ограничения по шрифтовым набором со стороны разработчика ПО под которое делается проект. Так например, Microsoft в Windows 8 Guidelines, настоятельно рекомендовала уйти от сторонних шрифтов в пользу Segoe UI.
Мне сложно представить, к примеру, сайт IT компании, параграфы которого набраны serif типа Bodoni или Baskerville. Это вызывало бы диссонанс, так как Антиква (serif fonts) отправляет нас в прошлое, а Информационные технологии — направление будущего, поэтому и выбирают Гротескные гарнитуры (sans-serif).
2. Практика — это хорошо, но без теоретических основ и понимания структуры Вам сложно будет добиться идеальных результатов. Образцы шрифтов Яна Чихольда, Живая Типографика Корольковой — отличные книги для начала.
3. Поиск шрифтовых пар.
Найдите пару шрифту для связки Заголовок/Параграф. Как и у людей — не все шрифты подходят друг другу. Собираетесь сделать моношрифтовой сайт? Почему бы нет. Однако, возможно, он будет скучноват и будет напрашиваться добавление еще одной гарнитуры к уже имеющийся.
В интернете полно сайтов, посвященных «играющим» парам.
НО. Никогда. ни в коем случае. Не при каких обстоятельствах. Нельзя использовать в заголоках и параграфов похожие шрифты. Например: Helvetica и Acumin Pro.
Почему некоторые шрифты популярны, а другие нет? Здесь есть много причин:
a) Бесплатность. Не нужно платить за лицензию на шрифт, либо лицензионные фи за использование в приложениях или web. Шрифт Лобстер набрал свою популярность именно по этой причине. (правда сейчас у него репутация, близкая к Comic Sans’у).
c) Поддержка языков.
d) Наличие лигатур (для кириллицы не актуально:))
e) Тенденции в Web Дизайне и т.д.
Возвращаясь к вопросу «Какие шрифты должны быть у каждого web дизайнера?» Не хочется ли Вам после всего вышеописанного перефразировать свой вопрос «Чем должен руководствоваться каждый web дизайнер при выборе шрифта?»
Сервисы:
Google Fonts (Free) и Adobe TypeKit (Free and Paid). Лично мне больше нравится сервис от Adobe. Немного сложнее в «установке» шрифта, но приятнее по качеству наборов гарнитур.
Какой шрифт выбрать для сайта
От автора: типографская разметка – обширное поле деятельности. Люди посвящают годы своей жизни этому древнему ремеслу, и всегда найдется что-нибудь новое для изучения. В этой статье, я сделаю обзор основных моментов, которые следует обдумать при выборе шрифта для своего сайта и гарнитуры (набор из одного или нескольких шрифтов). После чего вопросы на подобие «Какой шрифт выбрать?» у вас отпадут сами по себе.
Практическая типографская разметка
При создании дизайна для Сети вам нужно принять к сведению, что контент будет меняться. О том, чтобы тратить время на кернинг (подгонку пробелов между отдельными буквами) каждого заголовка большого вебсайта, вопрос даже не стоит. Другими словами, вы отказываетесь от контроля.
Сегодня я собираюсь сосредоточиться на практической разметке. Для меня это означает понимание того, что полного контроля над типографией своих вебсайтов вы никогда не получите. Выбор гарнитуры шрифтов, решение вопроса размера – это все те вещи, на которые мы, как дизайнеры, можем повлиять. Практическая разметка означает как, и еще более важно, зачем приводить в порядок то, что вам подконтрольно. Давайте начнем.
Читабельность при выборе шрифта
Перед тем как выбрать шрифт для сайта, вам следует ответить на некоторые вопросы. Что вы делаете с написанным? Читаете! Почему же множество вебсайтов так сильно усложняют это дело? Будь то крошечный размер шрифта, бессистемная высота строки или даже простые уродливые шрифты – кажется, многие сайты не хотят вам дать возможность нормально прочесть свое содержимое!
Сделав написанное удобочитаемым, вы немедленно опередите по крайней мере половину своих конкурентов, что на самом деле здорово, потому что не так уж сложно!
Веб-дизайн. Быстрый старт
Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma
Узнать подробнееКак выбрать гарнитуру шрифта?
Решая, какую гарнитуру применить на своем вебсайте, важно помнить: не перемудрите. Я знаю, как много дизайнеров недолюбливают использование Helvetica оттого, что она широко применяется. Я согласен, но это утверждение оставляет в стороне важные данные: почему. Люди слишком часто пользуются Helvetica, потому что он ужасно хорош. Он отлично подходит к любому дизайну, какой только можно себе представить, хорошо работает как в маленьком, так и огромном размере.
Установка такой ругаемой гарнитуры шрифтов может идти вразрез с вашими убеждениями, но если это работает, то принимайтесь за дело.
Основной текст, вероятно – как раз та часть дизайна, которая должна быть самой читабельной, так что убедитесь, что выбираете шрифт, который хорошо работает при маленьких размерах. Что я этим имею в виду? Если вы можете установить основной текст на 10px и все еще различать, о чем там пишется, то это отличный показатель читабельности гарнитуры шрифтов.
Это что касается основного текста, но как насчет заголовков, какой шрифт выбрать именно для них?
Вычислить читабельность больших заголовков гораздо проще, чем основных текстов. Если можно немедленно различить, о чем там пишется, то заголовок достаточно читабелен.
Хорошо то, что как только вы поработаете над достаточным количеством проектов, у вас сложится отличное представление о том, какие из гарнитур работают, а какие нет. С тех пор вы сможете лучше судить о том, какие шрифты выбирать.
Не существует формулы выбора верных шрифтов вашего вебсайта. Часто лучший способ решить, на каком остановиться – это попробовать каждый, который, как вы считаете, должен работать, а затем сравнить их. Выбор шрифтов на самом деле инстинктивен, но важно помнить, что 90% времени пользователь не будет раздумывать, что же за шрифт был тут применен, так что если он читаем – значит, достаточно хорош.
Выбор пары
Очень редко (если вообще бывает) случается ситуация, когда для использования на сайте подходит всего одна гарнитура. На среднем вебсайте используется много текстов. Не может получиться так, что одна гарнитура подойдет для них всех! Подавляющее большинство хорошо спроектированных вебсайтов применяют две: одну для основного текста и вторую для заголовков.
При выборе пары шрифтов важно обдумать, как они будут смотреться вместе. «Они достаточно похожи?» «Слишком похожи?» «Недостаточно разные?» Вы должны себе задать все эти вопросы. Я считаю, что лучший способ подобрать пару хорошо смотрящихся вместе шрифтов – просто поставить множество их рядом и решить, какие лучше. Нельзя этого узнать, пока не попробуете.
Иногда самыми подходящими будут два sans-serif, а в другое время вам понадобится sans для заголовков и serif для основного текста. Не имеет особого значения, что они смотрятся похожими, значение имеет то, что они действуют похоже. Это, конечно, зависит от остального дизайна вашего проекта. Какие бы шрифты вы не выбрали, они должны точно передавать ваше послание, и если это означает контрастные гарнитуры, тогда продолжайте в том же духе.
Саймон Коллисон (Simon Collison) использует в своем сайте идеально подобранные шрифты, выбирая мощный sans-serif для основных заголовков и простой Serif для всех прочих, меньших заголовков, а также для основного текста. Это партнерство искусно передает то, что пытается сказать вебсайт так, как не смог бы выразить каждый шрифт по отдельности.
Размер
Как правило, дизайнеры устанавливают размер основного текста как минимум на 12px. Большинство, однако, выбирают размер вроде 14px, который читается еще лучше. Выбрать размер шрифта основного текста довольно легко, а сложности начинаются с заголовками.
Насколько большими должны быть заголовки? Бывает по-разному. Собственными наблюдениями и в процессе создания вебсайтов я пришел к мысли, что заголовок должен быть настолько большим, насколько нужно. Это значит, что вы должны опробовать различные размеры, пока не найдете достаточно большой для привлечения внимания к чему следует, но не более того, если только огромный текст – не то, чего вы добиваетесь, и в таком случае продолжайте в том же духе.
Иерархия
По своей сути заголовок большой. На странице он – важный элемент, так что, естественно, он должен быть больше, правильно? И да, и нет. Да, заголовки обычно больше прочих элементов, и нет, это не единственный способ привлечь к ним внимание. Цвет, насыщенность и расположение в равной степени важны для учреждения четкой визуальной иерархии ваших страниц.
Ее ключевой момент, о котором нужно помнить – то, что все относительно. Текст на сайте просто должен выделяться по сравнению с другими текстами. Возьмите как пример сайт Уилсона Майнера (Wilson Miner). Его заголовки довольно маленькие для своей важности и на удивление близки по размеру. Однако использование им цвета дает возможность различить самые важные заголовки и придает им больше веса.
Использование типографии очень важно для установления визуальной иерархи, будь это посредством размера, цвета, плотности или даже размещения.
Межстрочный интервал
Межстрочный интервал, или пробел между строками текста, незаменимый инструмент читабельности. Плохой интервал может разрушить выдающийся при других условиях фрагмент основного текста, а хороший – сделать даже более плохой текст читабельным. К счастью, это не так сложно реализовать.
С помощью свойства CSS line-height (высота строки) можно легко установить пробел между строками основного текста. В общем говоря, для больших текстовых блоков хороший размер – в 1,5 раз больше размера текста. У более мелкого текста должен быть меньший междустрочный интервал, а у огромного – большой. На самом деле не так сложно.
Трекинг
Трекинг – это пробел между знаками в тексте. Отмечу, что он – нечто непонятное, когда дело доходит до «практической разметки текста», тут CSS не дает нам сильно контролировать его. Обычно в маленьком тексте вам не придется об этом беспокоиться, это становится проблемой только для заголовков. В общем, при добавлении в CSS letter-spacing: 1px; или letter-spacing: 2px; между буквами будет достаточный интервал.
Другое место, где будет выгодно добавить интервал – это маленькие заглавные буквы. Тут обычно хорошо получается, если добавить дополнительный пиксель или пару между символами, так как они, естественно, выглядят больше.
Веб-дизайн. Быстрый старт
Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma
Узнать подробнееЦвет
Хотя, строго говоря, не относящийся к типографской разметке, цвет – очень важная деталь каждого типа вебсайта. Я говорю не о цветовых схемах, а больше о контрасте, нужном для обеспечения читабельности сайта. Черный текст на белом (или светлом) фоне считается самым читабельным цветом для текста.
Я не говорю, что вы должны пойти и установить все на черное по белому, просто при создании дизайна вам следует знать о контрастности своего текста. Если вы не будете осмотрительны, это вам потом может откликнуться.
Сетка
По моему мнению, применение сетки – самая важная идея практической разметки текста в Сети. У вас могут быть отличные шрифты, отступы и цвета, но если отсутствует хорошая разметка, вы с тем же успехом можете применить comic sans.
Использование сетки при создании дизайна с текстами гарантирует четкий баланс и геометрическую структуру вашего проекта. Это – не волшебное исправление плохого дизайна, но если с самого начала вы создаете проект по сетке, то можете быть уверены, что по меньшей мере ваша разметка будет прочной.
Так какую же роль играет сетка в типографской разметке? Скажу просто: всеобщую. Сетка воплощает в себе все основные идеалы типографской разметки. Она геометрична, постоянна, легка в применении и, более того: прекрасна.
Выравнивание текста по сетке – ключевой метод установления визуальной иерархии и отличный показатель того, насколько большим (или маленьким) должен быть ваш текст.
Выделение
Как я уже говорил, если ваша типографская разметка читабельна, то вы уже на 50% выигрываете у конкурентов, а что насчет второй половины? Если вы зашли уже настолько далеко, то вместе мы оставим четкие, последовательные правила читабельности и входим в мрачный и мистический мир уникальности.
Шрифты
Хотите, чтобы ваш вебсайт выделялся? Шаг 1. Примените уникальную типографскую разметку. Предположительно для вас это означает использование уникальных шрифтов. Но в чем состоит уникальность шрифта? По-моему, это не тот шрифт, который не используется слишком часто, а тот, у которого есть послание или чувство, не содержащееся в других гарнитурах.
Выбор уникального шрифта – область ощущений. Ощущается ли этот шрифт по-другому? Или просто выглядит по-другому? При выборе гарнитур любого проекта всегда нужно принимать во внимание ощущение от дизайна. Так как это чисто личное мнение, я не могу помочь вам найти уникальную гарнитуру. Могу всего лишь показать примеры шрифтов.
У The Design Cubicle – очень уникальный логотип и дизайн. Он мощный, однако классный, привлекающий внимание, но изящный. Когда я смотрю на этот проект, у меня остается чувство высокого класса этого сайта. Он говорит мне: «Я знаю, что делаю».
Будьте небанальны
Сколько вы знаете вебсайтов с логотипом размером во все содержимое? Как насчет ультратонкого заголовка? В отличие от моего последнего пункта, быть небанальным – значит смотреть на то, что делают другие, а затем сделать все наоборот.
Ребята из Savvy Belfast умны. Они заметили, какими стесненными смотрятся большинство вебсайтов и решили заменить весь бессмысленный основной текст одним предложением.
Даже бросив на их сайт единственный взгляд на одно мгновение, вы не можете не запомнить их название.
Приводите свой дизайн в соответствие
Типографская разметка – не вещь сама в себе. Это часть веб-дизайна, как любая прочая. Текст важен, да, но не следует забывать, что он – всего лишь часть того, что делает ваш проект великим. Вы должны создавать текст, имея в голове образ остального дизайна.
Если у вас применяется замысловатая фоновая текстура, то, возможно, вашим заголовкам подойдет хороший serif.
Моя точка зрения тут проста: не забывайте о контексте. Область дизайна огромна, а сегодня я говорю только об одном ее разделе. Для создания успешного веб-дизайна все части нужно успешно смешать. Вот в чем состоит цель: выработать впечатление, которое кто-то получит от вашего сайта. Это нельзя сделать с помощью одного лишь текста, или одного лишь цвета, или даже одного лишь контента!
Эмоциональный текст
Так много во впечатлении определяется тем, как вы себя чувствуете: счастливым, печальным, удивленным, гневным, бла-бла-бла. У человеческих существ имеется большой набор эмоций, и наша работа как дизайнеров – пробудить своими проектами эти эмоции.
Из всего, о чем я сегодня говорил, это общепризнанно самая абстрактная вещь, и ее немного трудно объяснить. Вместо этого давайте я вам просто покажу.
Впервые посетив Solid Giant, я улыбнулся. Я улыбнулся в следующий раз, когда его увидел, и даже в следующий. Внезапно я ощутил родство с этим проектом. Эта большая, пушистая «G» слишком очаровательна, чтобы ее можно было забыть!
Если честно, я думаю, что это гениально.
Эмоциональному дизайну научить невозможно, это нечто, что следует испытать, а затем обыграть в собственных проектах.
Заключение урока о том какой выбрать шрифт для сайта
Ну, вот вы и добрались до конца поста. Надеюсь, что, по меньшей мере, вы что-то узнали, а если нет, тоже хорошо. Если я и хочу, чтобы после прочтения у вас отложилась какая-то мысль, то это: будьте читабельны, а все остальное приложится. Тем более что теперь то у вас не стоит вопроса, какой же именно выбрать шрифт для своего вебсайта 
Как вы считаете, что самое важное в типографской разметке сайта? Оставьте свое мнение в комментариях!
Автор: Max Luzuriaga
Источник: http://webdesign.tutsplus.com/
Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.
Веб-дизайн. Быстрый старт
Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma
Узнать подробнее
Веб-дизайн. Быстрый старт
Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma!
Смотреть видеоКак выбрать и использовать шрифт: 10 советов
На что вы обращаете внимание, выбирая дизайн сайта или печатной продукции? Макет, цветовая гамма, изображения формируют визуальную привлекательность страницы. Но не забывайте, что дьявол прячется в деталях. Одной из них можно считать шрифт. В этой статье вы найдете 10 советов по выбору и использованию шрифта.
Занимаемся разработкой фирменного стиля: повышаем узнаваемость бренда.
Подробнее
1. Объедините текст на странице в несколько блоков
Начинающие дизайнеры иногда помещают весь текст страницы в один блок или используют одинаковый шрифт в разных блоках. Из-за минималистического подхода они упускают возможность увеличить визуальную привлекательность страницы с помощью разных шрифтов, цветов, интервалов. Обратите внимание на страницу сайта «Ведомостей»: текст меню и сайдбаров визуально отличается от основного блока. Это создает дополнительные визуальные зацепки для пользователя.
В качестве дополнительных блоков текста могут выступать врезки в главный блок. Они дают возможности визуально выделять важные смысловые блоки и использовать разные шрифты на одной странице.
2. Выберите оптимальное позиционирование и выравнивание шрифта
Следите, чтобы шрифт в каждом блоке на странице имел одинаковое выравнивание. Если вы выравниваете текст в основном блоке по левому краю, используйте такое же выравнивание во врезках и сайдбарах.
Выбирайте параметры позиционирования, включая обтекание, минимальную и максимальную ширину и высоту, в соответствии с элементами дизайна и оформления страницы. Позиционирование в соседних блоках на одной странице может отличаться.
3. Подбирайте шрифты, соответствующие характеру вашего продукта и бренда
Шрифты бывают агрессивными и спокойными, маскулинными и фемининными, солидными и легкими. Это не субъективные определения, в чем можно убедиться на следующих примерах:
Плавные линии, отсутствие углов, легкие буквы, — эти элементы шрифта дают понять, что бренд работает исключительно на женскую аудиторию.
Угловатые и солидные буквы, четкие границы, цвет, — это явно мужской шрифт и бренд.
4. Убедитесь в читабельности текста
Выбирайте легкий для восприятия шрифт. Это в первую очередь касается шрифтов для основного текста на странице, текста в презентациях, инфографике, листовках и другой полиграфии. Избегайте шрифтов с засечками, написания всего текста заглавными буквами или курсивом. При выборе шрифта учитывайте общие рекомендации по обеспечению читабельности контента.
5. Выберите оптимальный размер шрифта и попробуйте использовать разные размеры
Выбирайте размер шрифта, обеспечивающий удобство восприятия и визуальную привлекательность страницы. Попробуйте использовать шрифт разного размера в одном блоке текста. Например, меняйте размер шрифта для заголовков, подзаголовков, маркированных списков. Это облегчает восприятие текста для пользователя: появляются «зацепки» при визуальном сканировании страницы.
6. Попробуйте Caps Lock
Когда речь идет о большом количестве текста, заглавные буквы уменьшают читабельность. Однако Caps Lock уместно использовать для повышения визуальной привлекательности заголовков, подзаголовков, коротких слоганов. Обратите внимание на обложку страницы компании Nike в Facebook:
7. Выберите оптимальный интервал между буквами
Увеличение интервала между буквами облегчает визуальное сканирование текста. Уменьшение интервала визуально делает страницу более насыщенной контентом и тяжелой. Если вы создаете графический контент с помощью Canva, менять интервал между буквами можно вручную.
8. Попробуйте использовать разные пары шрифтов
Эту рекомендацию уместно использовать при дизайне полиграфической продукции, баннеров, инфографики. Попробуйте применить взаимодополняющие шрифты. Например, используйте декоративный шрифт для названия компании или слогана, а четкий геометрический шрифт без засечек для информационной части. Одно из классических сочетаний: шрифт с высокими буквами обычно выгодно смотрится рядом со шрифтом с низкими буквами.
9. Убедитесь, что текст расположен там, где его удобно читать
Ни один удачно выбранный шрифт вам не поможет, если вы поместите текст в нижней части страницы. Когда вы используете большое количество визуальных компонентов, помещайте шрифт вверху и в центре страницы.
10. Уменьшите объем текста
Эта рекомендация увеличивает читабельность текста на рекламной полиграфической продукции, баннерах, слайдах презентаций. Например, вы можете оставить на листовке или баннере только визуальные элементы и призыв к действию или слоган.
Выбирая шрифт…
… учитывайте общие принципы читабельности контента. Для заголовков и подзаголовков используйте шрифты с засечками, экспериментируйте с заглавными буквами и цветами. Для основного текста лучше использовать шрифты без засечек, увеличить интервал между буквами, а также сделать достаточным межстрочный интервал.
Адаптация материала 10 Helpful Tips for Choosing and Using Fonts by Melanie Perkins.
kak-vybrat-i-ispolzovat-shrift-10-sovetovКак выбрать правильный шрифт для своего лендинга?
Есть миллион вещей, которые следует учитывать при создании идеального лендинга: подобрать изображения, цветовую гамму, написать цепляющий заголовок. Но есть одна вещь, которую часто недооценивают — это шрифт. Не стоит делать эту же ошибку. Правильный выбор шрифта может оказать существенное влияние на окончательный внешний вид вашей страницы. Прочитав эту статью, вы узнаете о том, что стоит учитывать при выборе шрифта для своего лендинга.
Содержание статьи
Придерживайтесь стиля вашего бренда
У вашего бренда еще нет фирменного стиля и шрифта?
1. Учитывайте целевую аудиторию
2. Выбирайте шрифт, который будет подчеркивать ваш продукт
Что такое веб-безопасные шрифты?
Как комбинировать разные шрифты при создании сайта
Как разные типы шрифтов влияют на ваш дизайн
Заключение
Придерживайтесь стиля вашего бренда
Фирменный стиль бренда — это набор правил, которые помогают дизайнеру создать единство цвета, шрифтов и прочих элементов сайта. Если у вашего бренда уже есть гайдбук, старайтесь придерживаться его в своем дизайне. Если же его нет, то стоит задуматься о его создании.
У вас может возникнуть соблазн поэкспериментировать с новыми шрифтами при создании лендинга. Но не стоит делать этого. Каждый раз, когда пользователь заходит на вашу страницу или, например, видит вашу рекламу, у него складывается общее представление о вашем бренде. Если все это будет оформлено в разных стилях, с использованием разной цветовой гаммы и шрифтов, то у вашего потенциального клиента возникнет ощущение несогласованности и разрозненности. Вот почему так важно быть последовательным, когда дело касается стиля, цвета и, конечно же, шрифтов.
В гайдлайнах обычно указывается вся иерархия шрифтов, которые используются при создании фирменного стиля бренда. Эти правила можно сразу же интегрировать в свой дизайн. Если другой бренд использует какой-либо неизвестный вам шрифт, можно воспользоваться инструментом «WhatTheFont» на сайте Myfonts.com. Это поможет вам его идентифицировать.
Но если у вашего бренда дизайнерский шрифт, то дизайнеру придется постараться найти похожий, чтобы затем использовать его при создании лендинга. В разных браузерах шрифты могут казаться менее четкими, поэтому создатели сайтов используют шрифты Google, чтобы максимально приблизиться к фирменному стилю компании.
Кстати, отныне вам больше не нужно открывать сервис Google Fonts для получения сторонних шрифтов на ваши посадочные страницы, ведь теперь шрифты подключаются прямо из редактора лендингов LPgenerator. Мы добавили все шрифты из коллекции Google Fonts в наглядную галерею, и все, что нужно сделать — это выбрать подходящий шрифт, нажать на кнопку подключения и использовать его для новых или уже размещенных на лендинге текстов:
Читайте также: Вы кое-что забыли! или Как неудачные шрифты могут убить конверсию лендингаУ вашего бренда еще нет фирменного стиля и шрифта?
Ниже вы найдете два ключевых момента, которые стоит учитывать, выбирая шрифт для своего лендинга.
1. Учитывайте целевую аудиторию
Шрифт на лендинге должен отражать индивидуальные особенности ваших покупателей. У вас традиционный бизнес, ориентированный на более консервативную аудиторию, или, может быть, наоборот, минималистичный и современный, рассчитанный на молодежь?
Разные аудитории — разный дизайн, в том числе и шрифт
Как только вы ответите на вопрос об аудитории, у вас будет понимание стиля. Основываясь на этой информации, вы сможете правильно подобрать шрифт для своего лендинга.
2. Выбирайте шрифт, который будет подчеркивать ваш продукт
Скажем, вы — владелец винтажного магазина одежды с приятной и современной атмосферой. Вы можете выбрать традиционный шрифт для заголовков и классический шрифт без засечек для основного текста. К примеру, для заголовков можно взять шрифт вроде Arvo, а для основного текста — Open Sans, известный своей читабельностью. Это придаст всему сайту сбалансированный внешний вид. Кроме того, он будет выглядеть вневременно, что будет отлично сочетаться с вашей компанией в стиле ретро:
Или, скажем, у вас юридическая фирма или бренд элитной косметики, и вы хотите, чтобы внешний вид сайта подчеркивал ваш профессионализм и вызывал доверие потенциальных клиентов. Тогда лучше будет использовать классический и одновременно элегантный шрифт вроде Frank Ruhl Libre или Playfair Display. В глазах потенциальных клиентов это лишний раз подчеркнет вашу надежность и первоклассный уровень сервиса.
Chanel использует уникальный брендовый шрифт на своем сайте
Независимо от того, какой шрифт вы в итоге выбрали, убедитесь в том, что он является веб-безопасным. О том, какие шрифты относятся к «безопасным», вы узнаете, прочитав информацию ниже.
Читайте также: 15 красивых, актуальных и бесплатных шрифтовЧто такое веб-безопасные шрифты?
Использование веб-безопасного шрифта означает, что пользователям не нужно устанавливать какой-либо дополнительный шрифт на компьютер, чтобы текст правильно отображался в их браузере. 10 лет назад было всего 13 семейств шрифтов, которые дизайнеры могли использовать при создании сайтов. В настоящее время золотым стандартом для любого дизайнера является Google Fonts. Эти шрифты корректно отображаются в любых браузерах.
Однако некоторые бренды используют дизайнерские шрифты. В этом случае необходимо прибегать к помощи специальных инструментов преобразования в веб-безопасный шрифт. Но иногда даже это не является гарантией того, что ваш текст будет хорошо выглядеть на экране. Вот почему дизайнеры часто сталкиваются с проблемой поиска похожих веб-безопасных шрифтов, которые являются бесплатными и корректно отображаются во всех браузерах.
Когда вы ищете идеальный веб-безопасный шрифт, лучше всего посмотреть в библиотеке Google Fonts. В большинстве случаев вы найдете там подходящий вариант. Там содержится более 800 бесплатных лицензионных шрифтов. Если вы используете один из них, то можете быть абсолютно уверены в том, что пользователи из любой страны увидят ваш текст правильно в любом браузере.
Как комбинировать разные шрифты при создании сайта
Когда вы создаете лендинг, вы скорее всего хотите использовать больше, чем один шрифт. Однако существуют некоторые правила их комбинирования.
Во-первых, никогда не используйте больше трех шрифтов в рамках одной посадочной страницы. Во-вторых, убедитесь в том, что они дополняют друг друга. И третье правило, которого стоит придерживаться: определите иерархию выбранных шрифтов.
Вот, как это выглядит на практике:
1. Определитесь с основным шрифтом, который вы будете использовать для заголовков. Для этого можно обратиться к фирменному стилю вашего бренда.
2. Затем нужно выбрать дополнительный шрифт, который будет использоваться для основного текста. Он должен быть легко читаемым даже на небольших экранах. Таким, к примеру, является шрифт Noto Sans.
3. И, наконец, ваш третий шрифт должен привлекать внимание. Его можно использовать на кнопках целевого действия или выделять с его помощью некоторые части текста. Для этого прекрасно подойдет шрифт вроде Montserrat.
Читайте также: 4 способа улучшить восприятие бренда с помощью шрифтов на посадочной страницеКак разные типы шрифтов влияют на ваш дизайн
Только грамотная комбинация шрифтов может оказать существенное влияние на внешний вид вашего лендинга.
Посмотрите, как в примере выше дизайнер использовал уникальный шрифт, чтобы соответствовать тематике боевых искусств и приблизить посетителя сайта к японской культуре. Остальная часть текста написана лаконичным, хорошо читаемым шрифтом. Результат: сбалансированный дизайн, который привлекает внимание пользователя к нужным местам.
Выше можно увидеть еще два примера грамотного использования шрифтов. Первый лендинг принадлежит кэшбэк сервису. Там используется четкий, но слегка угловатый шрифт Open Sans. Благодаря этому сайт приобретает современный внешний вид. Второй пример — магазин чая и подарков. На его страницах используется более редкий шрифт Bebas Neue Regular, также без засечек, но за счет «вытянутости» по вертикали он выглядит более оригинально. В обоих этих примерах шрифт прекрасно сочетается с остальными элементами дизайна и прекрасно передает ценности бренда. В этом и заключается сила влияния шрифта.
Читайте также: Как типографика влияет на конверсию лендинг пейдж?Заключение
Выбор шрифта для вашего лендинга полностью зависит от цели, которой вы хотите достичь. Когда вы планируете фирменный стиль и дизайн, подумайте о том, какой вы хотите, чтобы вашу компанию увидели потенциальные клиенты. Шрифты — идеальный имиджевый инструмент. Хотите, чтобы ваша компания выглядела классической, серьезной или традиционной? Тогда вам стоит выбрать элегантный шрифт с засечками. Хотите выглядеть стильно и минималистично? Тогда вам подойдет шрифт без засечек. Вам нужно нечто среднее? Тогда стоит объединить несколько шрифтов. Проще говоря, тот шрифт, который вы выбираете много говорит людям о вашей компании, поэтому следует отнестись к этому с умом.
Высоких вам конверсий!
По материалам: 99designs.com
24-08-2018