Какой шрифт выбрать для сайта: Как выбрать шрифт для сайта. Правила сочетания разных шрифтов. Какие бывают. В чем особенность их использования

Содержание

Как выбрать шрифт для сайта. Правила сочетания разных шрифтов. Какие бывают. В чем особенность их использования

Шрифт на сайте — это такой же элемент дизайна, как цвет и форма. Грамотно подобранные шрифты для заголовков и основного текста делают чтение проще и комфортнее. А еще они влияют на общее впечатление о сайте, от которого напрямую зависит — останется пользователь или уйдет.

В рамках статьи поговорим о подходах к выбору шрифта для сайта, а также о важности типографики и разнице восприятий текста на разных устройствах.

Как люди читают в интернете

Исследование «Как люди читают в интернете», опубликованное американской компанией Nielsen Norman Group в 2020 году, говорит о том, что люди предпочитают сканировать страницы глазами, прежде чем решают прочитать текст внимательно. Сканирование происходит по разным паттернам, но практически всегда взгляд читающего скользит по заголовкам.

Всё — от корки до корки — чаще читают посетители, зашедшие на сайт с мобильных устройств. С ноутбуков и компьютеров пользователи предпочитают потреблять информацию в максимально сжатой форме: таблицы, инфографики, схемы, списки. Но, независимо от того, какое устройство выбирает человек для интернет-серфинга, он никогда не станет утруждать себя попытками разобрать нечитабельный шрифт.

Когда выбрал неподходящий шрифт

Разновидности шрифтов для сайта

Прежде, чем переходить к выбору шрифтовых сочетаний, нужно знать, из чего выбирать. По способу начертания шрифты делятся на рукописные и печатные. Рукописные шрифты имеют оригинальный вид, среди них есть персонализированные (например, шрифт Кафки, Пикассо, Сезанна). Их используют дизайнеры для оформления заголовков, логотипов. В качестве основного шрифта для текста они не подходят, поскольку затрудняют чтение и восприятие. Здесь эстафету у них перенимают печатные шрифты. Их разделяют на три группы:

Шрифты с засечками . Они облегчают чтение печатных изданий, визуально очерчивая строки. Но в веб-дизайне они скорее усложняют восприятие и рассеивают внимание читателя. Основное назначение таких шрифтов – использование в логотипах, выделение заголовков и важной информации на странице.
Рубленные. Шрифты нейтрального характера, без засечек. Подходят для заголовков, параграфов, основного текста.
Декоративные. Они выглядят оригинально, ярко. Такие шрифты отлично подойдут для молодежных сайтов и любой тематики, связанной с творчеством. Но применять их нужно очень осторожно: текст, написанный декоративным шрифтом, сложный для чтения. Чаще всего их используют для создания логотипов и выделения заголовков.

Дизайнеры предпочитают делить шрифты всего на две категории: антиквы и гротески. К антиквам относятся все шрифты с засечками, к гротескам — без засечек, включая рукописные.

Какие шрифты актуальны в 2020-х

В оформлении сайтов дизайнеры используют шрифты, собранные в коллекции Google Fonts.

Коллекция обширная и включает только качественные бесплатные шрифты.
С ними не возникает проблем при верстке — легко подключить библиотеку и подтягивать из неё любой шрифт.
Библиотека Google Fonts поддерживает разные виды сортировки содержимого.

В Google Fonts есть шрифты для латиницы, кириллицы, иероглифического письма, иврита и арабского. Находить нужные удобно при помощи фильтров, а отобрать топовые можно в один клик — выбрав сортировку по популярности.

Рейтинг самых популярных шрифтов Google Fonts начала 2020-х выглядит так:

Roboto. Легко читается даже в маленьком размере и прекрасно работает в паре с другими кириллическими шрифтами Google Fonts.

Roboto был взят за основу при разработке веб-студией «Бизнес Сайт» интернет-магазина «Мир клея».

Open Sans. Еще один универсальный шрифт для длинных текстов и заголовков. Читается в любом размере, вплоть до самого мелкого, годится для баннеров, презентаций, рекламных креативов.
Montserrat. Аккуратный шрифт в урбанистической стилистике, идеально подходящий для использования в рекламе. Его козырь — читабельность. Выглядит он тоже достаточно представительно, чтобы найти ему место в заголовке.

В дизайне страниц сайта веб-студии Business Site мы используем Ubuntu — приятный, понятный, читабельный, стильный

Вы заметили, что все шрифты из топа без засечек. Раньше считалось, что шрифты без засечек сложно читать, особенно когда речь о напечатанных ими длинных текстах. Но в 2020-х антиквы стали все реже встречаться в веб-пространстве, уступая место менее замысловатым гротескам.

Характер и настроение шрифта

В разговоре о шрифтах, как правило, упоминаются стандартные характеристики: начертание, насыщенность, четкость, кегль и т. д. Но каждый шрифт, прежде всего, характер. В подтверждение этому можно привести такие интересные факты:

Юмористические зарисовки, оформленные гарнитурой Times, посчитало смешными на 10% больше читателей, чем при оформлении Arial.
Текст, напечатанный Baskerville, по сравнению с этим же самым, напечатанным Comic Sans, признали более убедительными

В зависимости от смысла, который необходимо передать, стоит выбирать и подходящий шрифт. Например, жирный шрифт с резкими очертаниями настраивает на восприятие фактов, важной информации, сенсационных новостей. Шрифты с мягкими линиями и закругленными очертаниями вызывают приятные и легкие эмоции, и подходят для соответствующей тематики.

Характер шрифтов особенно важно учитывать при создании сочетаний основного текста и заголовков.

Если в этой паре соединить противоречащие друг другу гарнитуры, внимание читателя сосредоточится на самих шрифтах, а не на содержании страницы. Например, если заголовок выполнен в Franklin Gothic (элегантный, солидный, мужественный стиль), а основной текст в Souvenir (легкомысленный, игривый), в результате получится противоречивое сочетание, которое мешает гармоничному восприятию статьи. А если заменить шрифт заголовка на Futura Bold, картина полностью изменится: эти два шрифта дополнят друг друга благодаря схожести элементов и не создают ненужного напряжения.

Ищем правильные сочетания шрифтов для сайта

Примерно 90% пользователей сознательно не обращают внимания на шрифт, используемый на сайте. Но если этих же людей попросить описать страницы с заведомо не сочетающимися шрифтовыми парами или нечитабельными шрифтами, респонденты отмечают, что им неприятно, сложно, неинтересно читать текст. Хотя те же тексты, но напечатанные стильными и удобными для восприятия шрифтами они охотно читали.

Для рядового пользователя важны только моменты восприятия: насколько гармонично вписывается шрифт в оформление, легко ли воспринимается, удобно ли читать, правильно ли расставлены акценты на странице, которые помогают ориентироваться в обилии информации.

Задача дизайнера — проработать все эти факторы, выдерживая дресс-код тематики сайта.

Секреты правильного подбора шрифтов для сайта от дизайнеров

Не использовать больше 3 шрифтов для оформления сайта. Большее количество будет отвлекать внимание посетителей. К тому же, на подгрузку шрифтов нужно больше времени, а даже доли секунды замедления скорости загрузки страницы отрицательно сказываются на эффективности поискового продвижения и лояльности пользователей.

Следите за читабельностью. Когда текст не читается, всё остальное — не важно, просто меняйте шрифт.. Чтобы пользователь не покинул страницу в первые же секунды после перехода, важно убедиться, что текстовый контент легко читается и выбраны правильные параметры: цветовое сочетание, размер, начертание и пр.
Используйте типографику логично. Для этого применяются разные гарнитуры или один и тот же шрифт, но с разными параметрами насыщенности, размера, начертания. Но так, чтобы в выборе была логика —- заголовки не были мельче подзаголовков, а основной текст не сливался с подложкой. Это помогает посетителю сориентироваться на странице.
Следите за сочетанием шрифтовых пар и меняйте при возникновении малейших сомнений.
Классические варианты: шрифт с засечками + рубленый, сочетание шрифтов разного класса, контрастная насыщенность шрифта в заголовке и в основном тексте, сочетание шрифтов различной тональности, яркое + нейтральное. Оценить гармоничность типографики можно приемом «бокового зрения»: направить взгляд левее или правее текста, чтобы воспринимать картинку в целом, не читая текст.

Полезные инструменты в работе со шрифтами

Подберите удачные сочетания шрифтов для сайта при помощи онлайн-сервисов:

Google Type: большое количество шрифтовых пар, подобранных дизайнерами.
Type Genius: вводите основной шрифт и получайте подходящую пару.
Font Combinator , простой в использовании сервис, позволяет выбирать и гарнитуру и тип шрифта для заголовков и основного текста среди гармонирующих между собой вариантов.
Font Pair: подбирайте шрифтовую пару по выбранным в фильтре характеристикам и скачивайте их на свой компьютер.

The Art of Mixing Typefaces – таблица-шпаргалка по сочетаемости шрифтов для веб-дизайнеров.

Чтобы выбрать подходящие шрифты на глаз, нужно иметь насмотренность и хороший вкус. Без этого никак, мы проверяли. Поэтому, если не хотите углубляться в тонкости использования типографики в дизайне, делегируйте эти вопросы нашим дизайнерам.

Заказывайте прототип, дизайн, редизайн сайта или полный цикл разработки сайта под ключ у профессионалов в «Бизнес Сайт». Заполните форму заявки, мы перезвоним, проконсультируем, составим и пришлем персональное коммерческое предложение с привлекательными условиями.

Какие шрифты выбрать для сайта и почему это важно

Шрифт является важной составляющей страницы. Это не просто часть дизайна, а функциональный элемент. От него зависит качество подачи и удобство восприятия информации. Правильно подобранный шрифт подтолкнет посетителя прочитать статью, оформить заказ или остаться на сайте.

Текст – это главный источник информации. Именно он несет основную смысловую нагрузку и решает главные задачи. Копирайтеры составляют его так, чтобы он достучался до целевой аудитории. Их старания будут напрасными, если статья будет опубликована нечитабельным шрифтом.

Согласно исследованиям компании Nielsen Norman Group в 2020 году, посетители сканируют текст взглядом, прежде чем решают прочитать его внимательно. Особое внимание уделяют заголовкам подзаголовкам. Пользователи смартфонов изучают контент внимательнее, чем владельцы декстопов. Последние предпочитают сжатую подачу: инфографику, таблицы, списки.

Задача дизайнера и веб-разработчика – грамотно подобрать шрифты для ресурса. Чтобы текст быстро сканировался «по диагонали», легко воспринимался и не утомлял глаза. При этом нужно учитывать цвета, тип гаджета и даже смысл информации. Шрифт может подчеркнуть серьезность контента или сделать его более непринужденным.

Какие шрифты бывают

Шрифт – это способ начертания букв и знаков. Группа шрифтов разных видов и размеров, имеющих общий стиль и оформление, называется гарнитурой. Сегодня граница между этими двумя понятиями стерлась. Говоря про типы, правильно применять слово «гарнитура».

Но мы будем придерживаться привычных терминов.

Существуют тысячи различных шрифтов для более 130 языков мира. Каждый день появляются новые типы. Они делятся на две большие группы:

Рукописные – уникальные оригинальные шрифты с персонализированным стилем (шрифт Кафки, Пикассо и другие). Для обычного текста практически не применяются. Их используют дизайнеры для разработки логотипов, афиш и других проектов;
Печатные – классические шрифты для набора текста и печати. Это наиболее распространенные типы. Они бывают с засечками и без засечек. Именно их используют на сайтах, в приложениях и документах. Разберем их далее.

Шрифты с засечками

Буквы таких шрифтов имеют засечки – черточки и штрихи на концах. Их второе название «антиквы», а в их английских обозначениях часто есть слово «serif». Засечки облегчают чтение, визуально очерчивают строку и направляют взгляд слева направо. Известный представитель семейства – Times New Roman.

Это самый старый тип шрифтов. Считается, что он появился в Древнем Риме. Там высекали латиницу на камнях. Процесс был трудоемким, поэтому на концах букв непроизвольно появились дополнительные линии – засечки. Со временем они стали нормой и в таком виде вошли в письменность и типографию, а затем перекочевали в интернет.

Шрифты с засечками преимущественно используются на бумажных носителях, реже – на сайтах. В сети и с их помощью чаще оформляют заголовки или выделяют важные фрагменты документов. Они придают тексту официальность и серьезность. К тому же они не позволяют латинским буквам сливаться и имеют большее межбуквенное расстояние, например: Illusion и Illusion.

Шрифты без засечек

Буквы имеют прямые концы без дополнительных линий и штрихов. Такие шрифты также называют «гротесками» или «рублеными». В их названиях часто присутствует выражение «sans-serif». Подобное начертание выглядит просто, минималистично, четко и разборчиво, а тексты легко читаются. Популярные sans-шрифты – Arial, Verdana.

Первый печатный шрифт с засечками появился в начале 19-го века. Он размещался на объявлениях, афишах и рекламных буклетах для привлечения внимания. Позже его начали использовать для набора текста и в интернете. Рубленые буквы считаются более узнаваемыми. Поэтому они часто встречаются в бумажной детской литературе.

Гротески ассоциируются с простотой и универсальностью. Они чаще применяются для оформления сайтов и статей в сети. Информационный, развлекательный и обучающий материал форматируются именно такими символами. Шрифты без засечек лучше масштабируются. Это значит, что страница будет комфортно читаться с экрана любого размера. Антиквы при изменении масштаба искажаются, это заметно даже в редакторе Word.

Где брать шрифты

Шрифты есть платные и бесплатные. Не стоит использовать нелегально скачанные. Впоследствии это может обернуться штрафом. В интернете много сервисов с бесплатными продуктами.

Google Fonts

Самая известная библиотека бесплатных шрифтов. Есть кириллица, латиница и другие языки. Здесь собрано около 1000 семейств для большинства языков мира. Есть фильтры для сортировки. Веб-дизайнеры давно работают с этой площадкой. С ней не бывает проблем.

FontSpace

На платформе размещено более 37 тыс. бесплатных шрифтов. Есть даже пиктограммы. Присутствуют и платные продукты. Их можно приобрести для использования в коммерческих целях.

Allfont

Сайт с платными и бесплатными шрифтами. Они распределены по группам: 3D-шрифты, брендовые, готические, комические, восточные, поцарапанные и многое другое. Одних только кириллических здесь более 2 тыс.

FontStruct

Это конструктор шрифтов. Можно сделать свой самостоятельно или использовать бесплатно созданные другими пользователями.

Font Squirrel

На этом сайте помимо бесплатных шрифтов есть и платные. Но они продаются с хорошими скидками.

DaFont

Здесь можно скачать бесплатные шрифты для частного или коммерческого использования. Есть интересные категории, которых не найти на других ресурсах.

Urban Fonts

Платные и бесплатные продукты собраны в одном месте. Вторые выделены в отдельную категорию – Free;

Abstract Fonts

Очередной сборник бесплатных шрифтов. Его ассортимент постоянно пополняется.

My Fonts

Платный сервис. Но здесь много интересных оригинальных шрифтов по хорошим ценам. Если хочется найти что-то уникальное и необычное, то стоит посетить эту площадку.

Советы и сервисы для работы со шрифтами на сайте

Мало найти шрифт, нужно еще и подобрать подходящий. Необязательно полагаться на свой вкус. Есть зарекомендовавшие себя решения. Их подскажут и покажут умные сервисы. Например, на некоторых можно определиться со стильной цветовой гаммой для текста. Также необходимо комбинировать шрифты и правильно задавать размеры. Каких рекомендаций стоит придерживаться:

Разный шрифт для заголовка и текста;

Обычно ресурс оформляют в двух шрифтах: один для заголовков, другой для статей. Так посетители лучше воспринимают информацию. Гармоничные сочетания можно найти и скачать на сервисе Fontstorage. Здесь же можно менять размеры, типы, фоны, картинки и видеть в реальном времени, как это будет смотреться. Еще сервисы для подбора шрифтов: Тур.io, Google Type, Font Combinator, Font Pair, The Art of Mixing Typefaces;

Цветовой круг для подбора гаммы;

Выбирать цвета нужно аккуратно, чтобы они не мешали чтению и не сливались со страницей. Чем больше контраст между текстом и фоном, тем меньше устают глаза. Удачные сочетания есть в Color wheel от компании Adobe. Нужно смотреть не только на цвет букв, но и на стиль всего сайта.

Оптимальный размер;

Важен не только тип, цвет, но и размер (кегль). Рекомендуемый размер для обычного текста – 12-14, минимальный – 10, максимальный – 16. Кегль заголовка можно подсчитать по формуле «золотого сечения». Размер букв умножаем на 1,6 и выбираем ближайшее существующее значение. Например, для основного текста величиной 14px оптимальным будет заголовок в 22px (14х1,6=22,4). Подобрать кегль можно в сервисе Modularscale. Оптимальный межстрочный интервал – 1,5;

Правильный подход.

Шрифт должен быть простым и легко читаемым. Также он должен корректно отображаться на разных экранах и в браузерах. Поэтому не стоит слишком экспериментировать с экзотическими стилями. Для веб-ресурсов предпочтительней шрифты без засечек. Также необходимо учитывать направленность и стилистику статьи. Для инструкций подойдут одни шрифты, для блога – другие, для премиум-продукции – третьи.

Заключение

Шрифт – это один из ключевых элементов сайта. От него зависит качество подачи и удобство восприятия текстового контента. Поэтому выбор шрифта – ответственное решение. Универсального стиля, который подошел бы всем, нет. Главными критериями являются читабельность и соответствие тематике ресурса. Шрифт должен подчеркивать направленность страницы и создавать комфортные условия для чтения.

При создании сайта важно все. Любая мелочь влияет на конверсию, а значит и на конечную прибыль. Нужен продающий сайт? Специалисты Белой Вороны реализуют самый смелый проект. Позвоните нам или оставьте заявку. Приведем клиентов из интернета!

Если Вам понравилась статья — ставим лайк и делимся ей в социальных сетях. Хотите получать больше полезных статей? Подпишитесь на рассылку. Раз в неделю пишем коротко про интернет-маркетинг.

Как правильно выбрать шрифт для веб-сайта

Разработка веб-сайта — это напряженный процесс, требующий много тяжелой работы. Есть о чем подумать, от цветовой схемы и логотипа до навигации, макета и дизайна текста. Но, пожалуй, самая сложная часть разработки веб-сайта — собрать все эти различные элементы в одно логическое, компактное и хорошо сбалансированное единство.

Шрифты веб-сайтов являются важной частью этого единства. Получив общее впечатление о вашем веб-сайте, посетители неизбежно сосредоточатся на тексте, чтобы узнать больше о вас и вашем бренде. Вот почему, пытаясь склеить эти элементы дизайна вместе, особенно важно обратите внимание на дизайн вашего шрифта . Есть множество мест, где вы можете найти качественные шрифты, но вы должны убедиться, что выбранный вами шрифт читабельный, чистый и находится справа от бросающегося в глаза , не отвлекая слишком много внимания от остального дизайна.

Выбор правильного шрифта является ключом к хорошему дизайну веб-сайта, будь то портфолио, блог, интернет-магазин или веб-сайт огромной корпорации. Чтобы помочь вам определить, какой тип шрифта лучше всего соответствует сути вашего бренда, мы попытались немного упростить для вас этот процесс. Вот некоторые вещи, которые вы должны учитывать при выборе идеального шрифта для вашего сайта.

1. Начните с основ

Когда дело доходит до шрифтов для веб-сайтов, есть так много вещей, на которые нужно обратить внимание, и это может очень быстро стать ошеломляющим. Вот почему лучше начать с самых азов, прежде чем идти дальше.

Если вы выберете Serif или Sans: , это одна из классификаций элементарных категорий шрифтов. Основанные на латинском алфавите шрифты Serif характеризуются декоративным штрихом , расположенным в конце вертикального и горизонтального штрихов букв.

Некоторые из самых известных шрифтов с засечками включают Times New Roman и Georgia. Шрифт Times New Roman , в частности, подпадает под категорию классических безопасных веб-шрифтов . В целом, вы не ошибетесь, выбрав типы шрифтов по умолчанию, такие как этот, поскольку они обычно легко читаются и существуют уже давно, поэтому многие пользователи Интернета к ним привыкли. Тем не менее, если вы предпочитаете более смелый подход, мы рекомендуем попробовать такие шрифты, как Noe Display, Freight Text или коллекцию Portrait. Конечно, всегда есть шрифты Google с засечками, которые вы можете использовать бесплатно, такие как Playfair Display, Cormorant Garamond или Crimson Text, и это лишь некоторые из них.

Шрифты без засечек не имеют засечек на буквах (слово «sans» означает «без» на французском языке), и они известны тем, что имеют более современный и чистый дизайн по сравнению с их аналогами с засечками. Helvetica, Tahoma, Verdana, Futura и Arial — все это примеры широко используемых шрифтов без засечек. Что касается бесплатных шрифтов, мы предлагаем попробовать следующие из библиотеки бесплатных шрифтов Google Fonts: Roboto, Source Sans Pro, Poppins, Heebo или Montserrat.

Какой шрифт вы выберете, во многом зависит от вашей целевой аудитории и настроения, которое вы хотите вызвать своим дизайном шрифта. Как правило, 9Шрифты с засечками 0005 используются для придания более формального и элегантного тона , поэтому их часто можно найти среди многих элегантных шрифтов. Хотя их также можно использовать для придания альтернативного вида вашей веб-странице, и их часто можно найти в журналах и в индустрии моды.

Шрифты Sans , с другой стороны чаще всего символизируют минимализм, простоту и прямолинейность . Однако одной из замечательных характеристик шрифтов без засечек является то, что они очень гибкие . Например, в сочетании со старым шрифтом шрифт без засечек может приобретать его качества, в свою очередь, создавая более традиционную атмосферу.

Кернинг, интерлиньяж и отслеживание: эти три элемента дизайна могут иметь жизненно важное значение при определении внешнего вида вашего шрифта. Эти методы имеют целью изменить расстояние между буквами , чтобы получить визуально приятный и легко читаемый шрифт. Кернинг обозначает расстояние между двумя буквами, интерлиньяж представляет собой расстояние между строками текста, а отслеживание (или интервал между буквами) — это расстояние между группами букв.

Контраст: в типографическом веб-дизайне контраст используется для выделения различных фрагментов текста множеством способов , и все это с целью выделить важные части. Различные типы контраста включают размер, насыщенность (выделение определенных частей текста жирным шрифтом), цвет, форму (например, заглавные или строчные буквы) и структуру (разные формы в сочетании с разными гарнитурами).

Выравнивание: Выяснение того, как текст будет размещен на странице, также является элементом, который может внести большой вклад в ваш дизайн шрифта. Вы можете выровнять текст по левому, правому краю или по центру . Кроме того, вы можете выбрать, хотите ли вы, чтобы текст был рваным справа или по ширине.

Вообще говоря, текст, выровненный по левому краю, читается легче всего . Текст, выровненный по ширине, считается более формальным, поскольку он выравнивается равномерно по обеим сторонам поля, в то время как рваный текст имеет репутацию более неформального и дружелюбного. Вы можете настроить свое выравнивание в зависимости от типа вашей аудитории, их ожиданий и того, нужно ли вам думать об ограничениях пространства или нет. Если вам нужно в полной мере использовать пространство для письма, то, во что бы то ни стало, используйте оправданное выравнивание. И если вы хотите, чтобы ваш идеально выровненный текст казался менее скучным, вы всегда можете разделить разные части текста, вставив между ними какие-либо визуальные элементы или подзаголовок. Если вы сделаете это, не забудьте обернуть текст вокруг изображений, чтобы придать вашей странице более чистый и организованный вид.

При выравнивании текста следует также обратить внимание на Длина строки (расстояние между левой и правой стороной текстового блока). Наиболее эффективным способом измерения длины строки является среднее количество символов в строке. Оптимальная длина строки от 45 до 80 символов , включая пробелы.

Лучшие темы для креативщиков

View Collection

Manon

Портфолио и агентство Theme

Zermatt

Тема Multi-Concept Agency

Cinerama

Тема для киностудий и кинематографистов

выбор шрифтов практически безграничен. Хотя это хорошо само по себе, это может легко усложнить ситуацию, если у вас нет хотя бы некоторого представления о том, чего вы хотите (или не хотите). Вот почему важно

тщательно продумать цель вашего веб-дизайна, а также тип аудитории, которую вы хотите привлечь . Затем посмотрите, соответствует ли стиль рассматриваемого вами шрифта общему сообщению, которое вы хотите донести до своих посетителей.

После выяснения этих основных принципов, вот несколько дополнительных вопросов, которые следует задать себе при выборе дизайна шрифта:

Какова природа вашего бренда? Например, это серьезно или непринужденно?

Если ваш веб-сайт вращается вокруг проекта, какой это тип проекта? Это краткосрочное или долгосрочное? Существует вероятность того, что у долгосрочного проекта (например, журнала или информационного бюллетеня) может быть больше требований, чем у краткосрочного, и может потребоваться смена шрифтов с течением времени. На всякий случай лучше выбрать большое семейство шрифтов с разными вариантами и весом, чтобы в вашем распоряжении были разные варианты. Если вы работаете над краткосрочным проектом (например, над запуском продукта или маркетинговой кампанией), то может быть достаточно придерживаться простых версий шрифта без дополнительного веса.

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

Будет ли ваш веб-сайт более визуально ориентирован (графика, такая как фотографии, анимация и видео) или он будет в основном состоять из больших фрагментов текста, которые предоставляют много информации о вашем бренде или продуктах?

Задавая себе эти вопросы, вы должны, по крайней мере, получить общее представление о том, чего хотите, поэтому, когда вы наткнетесь на шрифт, решить, подходит он вам или нет, будет хотя бы немного проще.

3. Выберите количество шрифтов и ранжируйте их по важности

В типографике слишком много хорошего может легко стать плохим. При выборе количества шрифтов для вашего веб-сайта мы рекомендуем ориентироваться не более чем на три разных шрифта . Позвольте нам остановиться на этом более подробно.

Основной шрифт: , так как это будет наиболее заметный шрифт на вашей странице, ваш основной шрифт должен быть наиболее синонимом вашего фирменного стиля . Основные шрифты в основном используются для более крупного текста, например заголовков.

Если возможно, убедитесь, что логотип вашего бренда также содержит намеки на ваш основной шрифт. Вы можете выбрать более смелые типы шрифтов при выборе основного шрифта, хотя, в конце концов, все зависит от вашего бренда. Мы предлагаем обратить внимание на такие шрифты, как Voga, Ikaros или Qontra.

Дополнительный шрифт: вы должны использовать этот шрифт для основной копии . Это означает, что любая статья или описание на вашей странице будет напечатано вашим дополнительным шрифтом. Прежде всего, ваш вторичный шрифт должен быть чистый и легко читаемый . Типы шрифтов, такие как Futura, Roboto или Verdana, могут быть хорошим выбором для основного текста.

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

Учитывая все вышесказанное, каждый бренд предъявляет свои требования, так что на самом деле ничего не высечено на камне. Просто помните, что чем больше у вас шрифтов, тем сложнее будет их все вместе согласовать . Поэтому, если возможно, постарайтесь свести номер шрифта к минимуму, если только в этом нет крайней необходимости.

4. Помните о времени загрузки

В наше время ни у кого нет ни времени, ни терпения для медленных сайтов. Вот почему, если шрифт загружается слишком долго, это может быть не лучшим решением для вас. Вот некоторые вещи, которые вы можете сделать, чтобы шрифт не замедлял скорость вашего сайта.

Придерживайтесь ограниченного количества шрифтов . Мы уже упоминали, почему иметь слишком много шрифтов может быть не лучшей идеей. Скорость загрузки — еще одна причина, по которой не стоит перебарщивать с номером шрифта.

Выбирайте только те стили, которые вам нужны. Таким образом, размер ваших шрифтов будет минимальным, а меньший размер означает меньшее время загрузки. Например, при загрузке шрифта выбирайте только обычный и полужирный начертания.

Не загружайте языки, которые вы не будете использовать. Если вам требуется только один или несколько разных языков для определенного шрифта, обязательно отмените выбор тех, которые, как вы уверены, вам не понадобятся при его загрузке.

5. Подумайте о комбинациях шрифтов

Существует несколько моментов, которые следует учитывать при сочетании разных шрифтов. В конце концов, у каждого шрифта есть свой особый характер — некоторые шрифты кажутся более серьезными, некоторые — более утонченными, а другие — более причудливыми и спонтанными.

Тема Arrosa со шрифтами Montserrat и Tuesday Night

Смешение двух шрифтов с разным «настроением» может помочь — говорят, что противоположности притягиваются, и это правило применимо и к шрифтам. Попробуйте сочетать грубые типы шрифтов с более нейтральными, приглушенными. Первое следует использовать для заголовков, а второе лучше всего подходит для основного текста.

Еще одна хорошая комбинация, с которой вы вряд ли ошибетесь, — это смешать шрифты с засечками и без засечек . Сочетание шрифтов — это создание контраста, а шрифтов с засечками и без засечек более чем достаточно, чтобы создать тонкую, но отчетливую разницу в сочетании.

Если вы все еще не уверены, какие шрифты объединить, вы всегда можете выбрать безопасный путь и использовать два шрифта из одного и того же семейства шрифтов , так как они созданы для совместной работы. Кроме того, сочетание шрифтов из одного семейства шрифтов может помочь вам создать ощущение согласованности, что значительно упростит процесс разработки веб-сайта. Вы можете создать контраст между одними и теми же семействами шрифтов, изменив такие параметры, как размер, регистр или жирность, смешав обычные шрифты с курсивом и т. д.

Если вам нужна помощь в объединении шрифтов, есть несколько отличных онлайн-инструментов, например, fontpair, которые могут вам помочь. Кроме того, вы всегда можете проверить комбинации шрифтов Google, чтобы узнать, какие шрифты из коллекции Google отлично сочетаются друг с другом.

6. Вдохновение шрифтов и другие полезные инструменты

Если вам понадобится дополнительная помощь при поиске шрифтов, в Интернете есть множество мест, где можно найти вдохновение для шрифтов. Например, Typewolf — это сайт, на котором вы можете найти множество рекомендаций и списков шрифтов, которые могут пробудить ваш творческий потенциал или, по крайней мере, показать вам путь, по которому вы можете двигаться в своем дизайне шрифта. Кроме того, вас ждет целая коллекция типографских ресурсов — от книг и инструментов, которые могут помочь вам идентифицировать шрифт, до полезных блогов по типографике.

Еще один отличный сайт для начала — Fonts In Use. Здесь вы можете просмотреть шрифты, которые многие дизайнеры используют в реальном мире, а также в Интернете.

Допустим, вы наткнулись в Интернете на образец дизайна с очень классным шрифтом. Вы можете легко изобразить этот шрифт на своей веб-странице, но не знаете его названия и не знаете, как его найти самостоятельно. К счастью, для таких ситуаций есть полезные онлайн-инструменты, которые могут идентифицировать шрифты для вас. WhatTheFont — это один из таких идентификаторов шрифтов, основанный на одной из крупнейших коллекций шрифтов в Интернете. Все, что вам нужно сделать, это загрузить изображение с желаемым шрифтом и обрезать его, и в результатах вы увидите название рассматриваемого шрифта.

Fontface Ninja — это бесплатное расширение для браузера, которое позволяет вам просматривать, пробовать и/или покупать любой интересующий вас шрифт. Когда вы наводите курсор на шрифт, вы можете не только узнать его название, но и вы также получите информацию о его размере, кернинге, высоте строки и цвете.

С другой стороны, если вы действительно не хотите искать шрифты веб-сайта самостоятельно и просто хотите как можно скорее увидеть, как определенные шрифты будут выглядеть на вашей веб-странице, вы будете рады услышать, что многие современные темы WordPress поставляются с готовых шрифтов . Эти шрифты были тщательно подобраны и объединены дизайнерами, поэтому обязательно найдутся такие, которые понравятся вам и будут соответствовать вашему представлению о том, как должна выглядеть типографика на вашей веб-странице.

Заключительные мысли

Несмотря на то, что сеть изобилует великолепно выглядящими элементами графического дизайна, такими как анимированная графика, иллюстрации и фотографии, большую часть онлайн-информации все еще можно найти в текстовом виде. Фактически, типографика составляет около 90% контента сайта . Таким образом, нельзя упускать из виду важность дизайна шрифта, поскольку он может иметь прямое влияние на взаимодействие с пользователем и, как таковой, может создать или разрушить ваш веб-сайт. Чтобы убедиться, что ваш веб-сайт достаточно удобочитаем для полного удобства чтения вашими пользователями, всегда проверяйте, как ваши шрифты отображаются на разных устройствах и размерах экрана .

При выяснении того, какой дизайн шрифта лучше всего подходит для вас, постарайтесь сначала подумать о цели вашего дизайна. Как только вы определите общее направление, в котором хотите двигаться, выберите количество шрифтов, которые вы хотите иметь, а затем начните просматривать Интернет в поисках возможных комбинаций шрифтов. Вариантов очень много, поэтому вы обязательно найдете что-то, что подойдет именно вам. И как только вы найдете идеальный шрифт, добавление шрифта на ваш веб-сайт WordPress станет легкой задачей.

10 лучших шрифтов для веб-сайтов

Выбор наилучшего стиля шрифта для вашего веб-сайта может иметь огромное значение. Шрифты не только влияют на читабельность вашего контента, но и могут оказывать сильное психологическое воздействие на ваших посетителей.

Шрифты имеют решающее значение для создания потрясающего пользовательского опыта, передачи ценности бренда и завершения вашего веб-дизайна.

Это руководство содержит полезные советы, которые помогут вам выбрать лучшие шрифты для вашего бренда. Прежде всего, однако, краткий предварительный просмотр трех наших любимых шрифтов для веб-сайтов — вы можете ознакомиться с полным списком 10 лучших шрифтов далее в этой статье.

Lato — хороший шрифт для веб-сайтов, потому что он легко читается и имеет множество различных стилей.

Merriweather чрезвычайно популярен для онлайн-использования, потому что он был разработан для чтения на экранах.

Alegreya выглядит более традиционно, со ссылками на литературу и печатный текст — идеально подходит для сайтов с большим количеством текста.

Ваш шрифт многое говорит о вашем бренде

Различные стили шрифта передают людям различные подсознательные сообщения, которые могут помочь вам создать индивидуальность бренда.

Интернет-пользователи быстро соображают: им требуется всего 0,5 секунды , чтобы сформировать мнение о веб-сайте, и 94% этого суждения связано с дизайном . Это означает, что шрифты жизненно необходимы для того, чтобы убедить посетителей в том, что эта страница — это правильная страница для них, потому что шрифты являются важной частью веб-дизайна сайта.

Как пользователи, мы читаем между строк, чтобы понять, что означают разные шрифты, и быстро оцениваем веб-сайты на основе стилей шрифтов, которые мы видим. Определенные стили шрифта могут передавать людям различные сообщения, такие как доверие, стабильность, сила, элегантность и изысканность, а также креативность.

Здесь вы можете увидеть, как изменение одного только шрифта может полностью изменить ощущение и индивидуальность веб-сайта. Этот пример имеет смелый, современный вид.

В этом примере используется рукописный шрифт для создания знакомой атмосферы.

Этот пример выполнен в дружелюбном стиле ретро.

Совет эксперта

Существует четыре основных типа шрифта:

Serif – они обычно выглядят более традиционно и надежно
Sans serif – эти шрифты передают модернизм, сила и стиль
Рукописный шрифт – обычно ассоциируется с элегантностью, творчеством и «индивидуальным подходом»
Дисплей – уникальный, более разнообразный дизайн, предназначенный для использования в качестве заголовков

Мы также говорим о «современном» шрифты в инфографике ниже — это более свободная категория, основанная на внешнем виде, а не на форме.

Правильный шрифт может улучшить взаимодействие с пользователем

Удобство для пользователя заключается в том, чтобы сделать посетителей максимально удобными и счастливыми.

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

Хорошее взаимодействие с пользователем может привести к большему количеству кликов, конверсий, репостов или повторных посещений вашего сайта, что поможет вам добиться успеха в Интернете. И ключевая часть пользовательского опыта? Вы уже догадались — выбрав читабельный фирменный шрифт!

Почему важны шрифты для веб-сайтов? Резюме:

Шрифты многое говорят о вашем бренде
Посетители будут оценивать ваш сайт мгновенно, основываясь на его внешнем виде, а не на его содержании
Выбранный вами шрифт определяет удобочитаемость, что является ключом к созданию хорошего пользовательского интерфейса

Подобно тому, как разные цвета оказывают на людей разное эмоциональное и психологическое воздействие, разных дизайнов шрифтов способны передавать разные характеристики.

Приведенная ниже инфографика дает вам четкое представление о том, как разные дизайны шрифтов имеют определенные коннотации и значения. Быстро становится очевидным, что шрифты не являются взаимозаменяемыми — представьте, например, что вы пытаетесь продвигать сильный современный бренд, используя «элегантный» шрифт Bickham Script.

Используя это инфографическое руководство, нетрудно выбрать наиболее подходящий дизайн шрифта для того, как вы хотите, чтобы люди думали о вашем бренде.

Ваша очередь!

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

Наш шорт-лист включает:

Шрифт Script: Edwardian Script — для традиционного шрифта с эффектом росчерка
Шрифт с засечками: Trajan — для заявления или впечатляющего первого впечатления
9000 5 Современный шрифт: Didot Italic – для более тонкого, современного эффекта

Скорее всего, вы бы сразу отказались от шрифтов Helvetica Bold и Cooper, если только у вас нет очень нишевой целевой аудитории !

Ваша целевая аудитория будет определять ваш окончательный выбор – выберете ли вы что-то причудливое и классическое или что-то чистое, стильное и современное.

5 типов шрифтов

Существует пять основных типов шрифтов. Подумайте о своем бренде или веб-сайте и о том, какая индивидуальность подходит ему лучше всего, когда мы рассмотрим каждый из них — просто нажмите на каждый тип индивидуальности ниже, чтобы узнать больше:

Если вы хотите, чтобы ваш веб-сайт представлял эту индивидуальность, шрифты быть стилями шрифта с засечками, которые выглядят классическими и традиционными.

Примеры:

Merriweather
Trajan
Playfair Display

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

Это шрифты с очень чистым дизайном и менее рукописным качеством.

Примеры:

Open Sans
Myriad Italic
Josefin Sans

Эти начертания часто имеют очень жирный или очень тонкий профиль. У них, как правило, меньше изюминки, они склоняются к более минималистичному дизайну, поэтому они кажутся более современными.

Если вы хотите, чтобы ваш веб-сайт выглядел более современно, подумайте об использовании этого типа шрифта.

Совет эксперта!
Эти современные шрифты без засечек, как правило, более читабельны, чем рукописные или суперблочные шрифты, что делает их хорошим выбором для основного текста на вашем веб-сайте.

Эти шрифты очень жирные и имеют блочный дизайн. Эта смелость придает дизайну содержание и создает впечатление силы.

Примеры:

Helvetica Bold
Futura
Franklin Gothic

9000 2 Если вы хотите заявить о себе или выглядеть солидно, вам следует использовать этот тип шрифта.
Совет эксперта!
Жирные блочные шрифты могут утратить свой эффект, если вы используете их по всему веб-сайту — попробуйте вместо этого использовать их для заголовков, логотипов или цитат! Вы можете сочетать жирный шрифт заголовка с чистым, более легким шрифтом, таким как Open Sans, для основного текста, чтобы добиться максимального эффекта без ущерба для удобочитаемости.
Это шрифты рукописного типа с большим количеством кривых. Действительно, именно эти изгибы придают дизайну романтический и элегантный вид.
Примеры:
Бикхемский сценарий
Эдвардианский сценарий
Parisienne
900 02 Не все рукописные шрифты романтичны — они также могут быть причудливыми и свободными, как, например, забавный шрифт Giddyup. стиль. Чем более курсивный и изогнутый дизайн шрифта, тем более винтажным он будет выглядеть. Чем округлее дизайн шрифта, тем более причудливым и ретро он будет казаться:
Совет эксперта!
Будьте осторожны при выборе рукописных шрифтов, так как их может быть трудно читать, особенно в Интернете или при использовании для длинных фрагментов текста. Всегда помните о своем читателе, и если вы выберете рукописный шрифт, используйте его экономно для достижения наилучших результатов.
Это настолько стилизованные дизайны шрифтов, что они не попадают ни в одну конкретную категорию. У них может быть так много разных характеристик, что трудно охватить их все!
Примеры:
Metropolis
Streetwear
Distorted Fashion
Эти шрифты удобны, если вы хотите создать уникальный фирменный стиль. Чтобы выбрать правильный дизайн, потребуются дополнительные дизайнерские навыки, поскольку все они очень специализированы.
Вот хороший ресурс, где можно узнать больше о дизайне стилизованных шрифтов.
Независимо от того, запускаете ли вы свой первый веб-сайт или надеетесь обновить существующий сайт, изучение значений шрифтов — это мощный инструмент, который поможет вам добиться успеха. Рекомендуется сначала понять свой бренд, а затем найти шрифт, который соответствует образу вашего бренда.
Продуманный дизайн шрифта — это быстрый и простой способ улучшить индивидуальность вашего бренда и создать прочную связь с вашей целевой аудиторией.
Что означают разные шрифты для веб-сайтов? Резюме:
Разные шрифты несут разное значение и вызывают у читателей разные эмоции
Подумайте о своем бренде и решите, какую индивидуальность вы хотите передать
Шрифты с засечками могут передать: традиции, респектабельность, надежность, комфорт
Рукописные шрифты могут передать: элегантность, нежность, креативность
Демонстрационные шрифты могут передать: дружелюбие, веселье, уникальность, выразительность
Современные шрифты могут передать: силу, стиль, шик, прогрессивность 9002 6
Санс шрифты с засечками могут передать: стабильность, объективность, чистый и современный минимализм
Люди судят о ваших шрифтах, прежде чем они прочитают ваш контент — убедитесь, что ваш шрифт соответствует вашему фирменному стилю!
1: Начните с вашего бренда
Шрифт может выглядеть красиво, но если он не соответствует вашему бренду, в нем нет смысла. Всегда начинайте с вашего бренда, прежде чем выбирать дизайн.
Какая индивидуальность у вашего бренда? Кто ваша целевая аудитория? Как только вы узнаете ответы на подобные вопросы, вы сможете выбрать, какой шрифт соответствует вашему бренду, и приступить к выбору идеального стиля фасада.
2: Выберите шрифты для читателей
Постарайтесь найти баланс между вашим личным вкусом и потребностями вашей аудитории. Например, вы можете быть по уши влюблены в шрифт Hanalei, но подумайте о своих читателях — соответствует ли этот шрифт их потребностям?
В случае с Hanalei его загруженные печатные буквы и грубые края могут порадовать юную аудиторию, но представляют собой проблему для читателей старшего возраста.
При попытке понять вашу аудиторию необходимо задать следующие вопросы:
Какова идеальная возрастная группа?
Какой предпочитаемый пол?
Какая у него профессия?
Имеет ли он/она больше/меньше располагаемого дохода?
3.
Позаботьтесь о читабельности
Хотя важно, чтобы шрифты хорошо выглядели, важно также, чтобы они были удобочитаемыми. Часто нам нравится шрифт , потому что он удобочитаемый, а не только потому, что выглядит красиво — постарайтесь выбрать шрифт, который не только отражает ценности вашего бренда, но и доставляет удовольствие при чтении.
Держитесь подальше от совершенно нечитаемых шрифтов, какими бы визуально ошеломляющими они ни были:
Некоторые шрифты, такие как плотные, блочные начертания или причудливые рукописные рисунки, могут быть сложными для чтения при чрезмерном использовании на веб-странице — по этой причине они обычно работают лучше всего в качестве шрифтов заголовков. Всегда выбирайте легко читаемый шрифт для более длинного текста.
4: Проверьте свой шрифт на прочность
Прежде чем выбрать шрифт, посмотрите, как он выглядит во всех его различных формах, размерах и весах (вес шрифта определяет, насколько толстыми или тонкими будут линии).
Как это выглядит в разных размерах?
Как выглядят прописные и строчные буквы?
Как это выглядит курсивом?
Как это выглядит жирным шрифтом?
Как выглядят персонажи? Например, легко ли в этом шрифте читаются цифры и знаки препинания?
Какой вес будет лучше всего смотреться на вашем сайте?
Например, стиль шрифта Cedarville Cursive — это красивый рукописный шрифт, но буква «G» в верхнем регистре может вам не нравиться, или вы можете предпочесть традиционный амперсанд, а не простой значок плюса. Всегда стоит проверять такие мелкие детали!
5: Используйте веб-безопасные шрифты
Наш последний совет — используйте веб-безопасные шрифты. Веб-безопасный шрифт — это шрифт, который устанавливается на всех устройствах, что приводит к более высокой скорости загрузки вашего веб-сайта. Это делает ваших читателей счастливее, так как им не нужно так долго ждать загрузки вашего контента, а также полезно для SEO-рейтинга вашего сайта.
Представьте, что вы специалист по финансовому планированию. Ваша идеальная группа клиентов — миллениалы с хорошо оплачиваемой работой, которые только начинают инвестировать и планировать свое будущее.
Когда они посещают ваш веб-сайт, какое первое впечатление вы хотите произвести?
Вы, вероятно, хотите казаться ответственным, заслуживающим доверия, прогрессивным и современным, потому что миллениалы, скорее всего, не ищут специалистов по финансовому планированию старой школы.
Вместо этого вы хотите спроецировать идею о том, что вы можете общаться с более молодыми и состоятельными клиентами — вашим идеальным целевым рынком.
Итак, как выбрать дизайн шрифта, отражающий эти характеристики?
Ответственный и надежный: Вы хотите выбрать шрифты с традиционным наследием, такие как Trajan или Times New Roman, которые создают ощущение истории.
Progressive & Modern: Вы хотите выбрать шрифт с четкими линиями, более тонким шрифтом и более минималистичным дизайном. Это создает ощущение модернизма и прогрессивности (см. шрифты в правой части инфографики выше).
Какие шрифты лучше всего подходят для соответствия этим критериям?
Мы выбрали Aller (от Font Squirrel) в качестве надежного шрифта для нового поколения финансового планирования, ориентированного на миллениалов.
Он имеет четкие линии с классическим изогнутым дизайном, обеспечивая хороший баланс между новым (современным и прогрессивным) и старым (надежным и ответственным).
Шрифт выглядит профессионально и может посылать правильные подсознательные сигналы миллениалам, которые ищут финансовый совет.
Используя приведенное выше руководство по инфографике, какие шрифты, по вашему мнению, подходят для вашего веб-сайта ?
Как подобрать шрифт для своего сайта. Резюме:
Всегда начинайте с вашего бренда
Выбирайте шрифты с учетом ваших читателей, а не только вашего личного вкуса
Убедитесь, что ваш шрифт читабелен
Проверьте свой шрифт во всех его формах — полужирный, курсив, цифры , знаки препинания и т. д.
Используйте веб-безопасные шрифты, чтобы ваш контент загружался быстрее для читателей
1: Не используйте броские шрифты
Никогда не используйте Comic Sans – всегда . Это может быть то, что вы хотите использовать в приглашении на день рождения вашего ребенка, но безвкусным и причудливым шрифтам не место ни на одном веб-сайте, который хочет восприниматься всерьез.
Каждый дизайн шрифта имеет свою индивидуальность. В зависимости от выбранного вами дизайна шрифт будет создавать разное впечатление о вашем веб-сайте и вашем бренде.
Например, шрифт «Papyrus» наводит на мысли о древних цивилизациях. Это шрифт, который вы ожидаете увидеть в названии фильма о египетских мумиях, а не в качестве украшения веб-сайта финансового планирования.
Хотя эти безвкусные шрифты находят свое место на сайтах для развлечения и хобби, пожалуйста, не используйте их на своем сайте, если хотите выглядеть профессионально.
2: Не используйте грязные, трудно читаемые шрифты
Выбор дизайна шрифта для вашего основного контента сильно отличается от выбора шрифта для заголовка, заголовка или логотипа. Цель содержимого вашего веб-сайта – предоставить читателям полезную информацию о ваших продуктах или услугах, поэтому читабельность здесь очень важна.
Если вы сомневаетесь, вы всегда можете обратиться к этим шрифтам:
Вот отличная блок-схема дизайна шрифтов от Basekit, которая поможет вам выбрать правильный шрифт для ваших областей контента:
3: Не Увеличивайте межстрочный интервал
Один из самых простых способов сделать ваш контент более удобным для чтения — добавить достаточное расстояние между каждой строкой.
Магическое число идеальной высоты строки составляет 150% размера шрифта, который вы используете.
Например, если вы используете размер шрифта 24 пикселя, высота строки будет 36 пикселей (что составляет 150% от 24 пикселей):
Сразу видно, что левый столбец выглядит лучше всего.
4: Не используйте слишком много разных дизайнов шрифтов
Вы должны выбрать не более трех шрифтов для своего веб-сайта. В идеале, , вы должны стремиться использовать только два стиля шрифта для использования на всем веб-сайте:
Стиль шрифта для заголовков и заголовков страниц
Стиль шрифта для основных областей содержимого
Стиль шрифта для цитат или подзаголовков (необязательно )
Еще немного, и ваш веб-дизайн может начать казаться загроможденным и запутанным — и вы подорвете ту идентичность бренда, над которой вы так усердно работали!
Попробуйте найти два шрифта, которые дополняют друг друга — это называется сочетание шрифтов .
Вам понадобится шрифт для заголовков и шрифт для более длинных копий на сайте, и вы можете повеселиться, сопоставив эту пару. Если вы столкнулись с трудностями, Google Fonts предлагает предложения по сопряжению, а также есть бесплатные онлайн-инструменты, которые помогут вам.
5: Не используйте слишком много цветов шрифта
Цвет — мощный инструмент брендинга. Например, когда вы думаете о Starbucks, какие цвета приходят вам на ум? Скорее всего, это зеленый цвет, который вы видите на их логотипе и на их сайте.
Когда вы выбираете цвета для своих шрифтов, выберите только один или два фирменных цвета , которые действительно представляют вас или ваш бизнес, для использования в заголовке или подзаголовке.
Убедитесь, что цвет шрифта четко выделяется на фоне цвета фона , чтобы его было легко читать. В Интернете есть бесплатные инструменты, такие как средство проверки контрастности WebAIM, которое вы можете использовать, чтобы убедиться, что цвет вашего шрифта соответствует стандартам удобочитаемости!
Использование слишком большого количества цветов, несовместимых цветов или неправильного цвета (например, светло-зеленого или бледно-желтого) сделает ваш веб-сайт беспорядочным и затруднит восприятие содержимого.
6: Не выбирайте размер шрифта случайным образом
Размер шрифта с модульным масштабированием придаст вашему тексту более гармоничный вид. Это серия размеров шрифта, обладающих идеальными пропорциями, которые широкая публика считает «красивыми».
Рекомендуемые размеры шрифта: 8, 16, 24, 32, 48, 64, 95
16px — идеальный размер шрифта для основного текста. Он не слишком маленький и не слишком большой, поэтому он действительно помогает улучшить читабельность абзаца. Фактически, размер шрифта, который мы используем в основных областях содержания наших статей, составляет 16 пикселей.
8 пикселей действительно слишком малы для основной копии — вместо этого вы должны использовать этот размер только для второстепенного текста, такого как штампы с датами. Для заголовков не стесняйтесь играть с более крупными размерами шрифта, как вы считаете нужным!
Полезный ресурс:
Хотите другой размер шрифта, чем мы рекомендуем? Вы можете использовать этот калькулятор модульной шкалы, чтобы создать собственную идеальную шкалу размера шрифта.
7: Не стоит недооценивать пустое пространство
Белое пространство — это пустое пространство вокруг содержимого, такого как заголовки, абзацы, изображения или кнопки, и оно жизненно важно для вашего веб-дизайна. Использование пустого пространства — одна из самых простых вещей, которые вы можете сделать прямо сейчас , чтобы мгновенно сделать содержимое вашего веб-сайта более удобным для чтения.
Пустое пространство делает ваш веб-сайт загроможденным , и придает вашему контенту больше эффекта и «пространство для дыхания», что, в свою очередь, облегчает просмотр и усвоение посетителями. Белое пространство на самом деле не обязательно должно быть белым — это просто пустое пространство между элементами.
Некоторые бренды, которые лучше всего используют свободное пространство, включают Apple, Squarespace и Medium — поэкспериментируйте с пустым пространством на своем веб-сайте и посмотрите, какие результаты вы получите!
Яркий современный шрифт Squarespace выделяется тем, что окружен большим количеством пустого пространства. Представьте, если бы он был переполнен текстом и изображениями — он потерял бы свое влияние!
Apple не боится, чтобы ее шрифт говорил сам за себя — если вы выбрали блочный, сильный шрифт, дайте ему возможность проявить себя, как в этом примере.
Домашняя страница Medium загружена, но никогда не кажется загроможденной. Это связано с тем, что весь текст разделен пробелом, поэтому жирные заголовки располагаются рядом друг с другом.
7 смертных грехов выбора шрифта. Резюме:
Избегайте броских шрифтов, таких как Comic Sans
Не используйте грязные шрифты, которые трудно читать
Используйте высоту строки, равную 150% размера шрифта, который вы используете много дизайнов шрифтов – выберите максимум два или три
Не используйте слишком много цветов шрифта – выберите один или два фирменных цвета
Не выбирайте размер шрифта наугад – мы рекомендуем 16px для основной копии
Не забудьте включить пробел
Существует так много шрифтов, что мы знаем, что может быть трудно понять, с чего начать, не говоря уже о том, где найти идеальное сочетание. Вот почему мы составили список из 10 наших любимых шрифтов для веб-сайтов, чтобы дать вам отправную точку — все десять можно бесплатно загрузить с Google Fonts:
Lato
Merriweather
Aleg Рея
Arvo
Amatic SC
Josefin Slab
Bowlby One SC
Танцевальный сценарий
Playfair Display SC
Poppins 9 0026
1. Lato
Lato — замечательный шрифт без засечек для веб-сайтов — он четкий, теплый , и сильно, и очень читабельно. На самом деле, это шрифт, который мы используем на нашем сайте! Он прекрасно сочетается с Open Sans.
2. Merriweather
Merriweather был разработан для чтения на экране, что делает его одним из лучших вариантов для удобства чтения. Это шрифт с засечками, который имеет множество стилей на выбор.
3. Alegreya
Alegreya имеет классический вид — она была разработана для литературы, что делает ее идеальной для длинных текстов. Это приятный ритмичный и динамичный шрифт, который хорошо сочетается с Roboto.
4. Arvo
Arvo — это гладкий, гибкий на вид шрифт, основу которого составляют геометрические узоры. Это легко читаемый шрифт с засечками, который имеет традиционную атмосферу, но не кажется скучным или скучным.
5. Аматик SC
Этот прекрасный нарисованный от руки шрифт идеально подходит для заголовков. Это просто и весело — нам это особенно нравится, потому что он не жертвует удобочитаемостью ради стиля.
6. Josefin Slab
Josefin Slab — это современный стильный шрифт, который идеально подходит для придания изысканности любому веб-сайту. Он хорошо работает для основного текста и будет хорошо смотреться рядом с заголовками в Amatic SC.
7. Bowlby One SC
Bowlby One SC предназначен для заголовков и выпускается только в одном стиле — мы не рекомендуем использовать его для основной копии. Однако, если вам нужны эффектные, громоздкие заголовки со слегка шероховатыми краями, то Bowlby One SC — идеальный выбор.
8. Dancing Script
Если вам нужен стиль рукописного шрифта, сложный, но в то же время дружелюбный и довольно непринужденный, обратите внимание на Dancing Script. У него приятное спонтанное ощущение — идеально, если вы стремитесь к классике, не чувствуя себя душно. При использовании в заголовках Dancing Script прекрасно сочетается с Lato.
9. Playfair Display SC
Для заголовков в традиционном стиле Playfair Display SC — сильный и универсальный стиль шрифта. Нам особенно нравятся тонкие различия между стандартным и курсивным шрифтом. Версию этого шрифта, содержащую символы нижнего регистра, можно найти на Playfair Display.
10. Poppins
Использование изогнутых линий в дизайне Poppins придает ему открытый и дружелюбный вид. Он предлагает 18 различных стилей на выбор, от очень тонких и утонченных до тяжелых и смелых дизайнов. Наш фаворит — Extra-bold 800, который действительно сделает ваши заголовки яркими!
Если вам нужно надежное место для загрузки выбранного стиля шрифта или вы просто ищете вдохновение, вот полезная коллекция ресурсов для начала работы.
Надежные библиотеки шрифтов
Google Fonts — открытый исходный код, бесплатные шрифты для просмотра и загрузки
Adobe Fonts — шрифты для тех, у кого есть подписка Creative Cloud
MyFonts — бесплатные и платные шрифты (вы выбираете нужный тип лицензии при оформлении заказа)
Wild Type — бесплатные и платные шрифты для креативного дизайна
Inspiration
Wix Fonts — 20 классных шрифтов, которые разбудят ваше воображение
50 элегантных дизайнов шрифтов — список стильных шрифтов Canva
Как выбрать цветовую схему — узнайте, как выбрать правильный цвет шрифта
Инструменты
Coolors. co — простой в использовании генератор цветовых схем
Цвета веб-сайта Colormind — просмотрите свою цветовую схему на демонстрационной целевой странице
WebAIM Contrast Checker — убедитесь, что ваш шрифт и цвета фона читабельны
Шрифты важны. Они передают смысл и могут создать или разрушить индивидуальность вашего бренда. Люди судят о ваших шрифтах еще до того, как прочтут хоть одно слово вашего контента, поэтому выбор наилучшего стиля шрифта является ключом к созданию необходимого первого впечатления.
Теперь, когда вы знаете, почему шрифты важны и какие из них больше всего подходят вашему бренду, вы готовы начать выбирать свои собственные стили шрифтов! Мы хотели бы знать, какие шрифты вы выберете, поэтому напишите нам в комментариях, чтобы мы знали ваши любимые шрифты!
Это зависит! Если вы загружаете свой шрифт с такого сайта, как Google Fonts , вам не о чем беспокоиться — все эти шрифты лицензированы как для личного, так и для коммерческого использования. На других сайтах вам может потребоваться выбрать нужную лицензию или приобрести коммерческую лицензию отдельно.
Персональная лицензия на шрифт позволяет вам использовать ваш шрифт в личных целях в частных проектах. Если вы будете использовать свой шрифт для заработка (например, для изготовления открыток или сумок), вам потребуется коммерческая лицензия.
В общем, лучше перестраховаться — хотя бы для основного экземпляра. Темно-серый цвет на белом фоне — наш любимый выбор, так как он менее резкий и с меньшей вероятностью утомляет глаза, чем абсолютно черные буквы. Для заголовков вы можете немного повеселиться с цветом, если они всегда читаемы.
Размер основного текста должен быть не менее 16 пикселей. Для заголовков вы можете играть с гораздо большими размерами, чтобы соответствовать вашему брендингу.
Автор:
Я работаю контент-менеджером в Website Builder Expert, а это значит, что я читаю и редактирую практически весь контент, который мы публикуем, и работаю с нашими замечательными писателями и исследователями, чтобы предоставить вам наилучшие возможные советы для достижения ваших целей.