Какими должны быть шрифты для сайта?

Автор /  Elena Rabkina

04 октября 2017

Какими должны быть шрифты для сайта?

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

 

 

 

 

Немного матчасти

 

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

 

Все шрифты, используемые на сайтах, делятся на пять основных семейств:

 

 - Serif – шрифты с засечками. Больше подходят для строгого «типографического» дизайна и версий для печати. Примеры: Times New Roman, Georgia, Droid Serif, Noto Serif, PT Serif.

 

 - Sans serif – шрифты без засечек. Подходят в сущности для любых проектов. Обычно используются, как основные шрифты для текстов сайта. Примеры: Verdana, Arial, Roboto, Open Sans, PT Sans.

 

 - Cursive – шрифты, стилизованные под рукопись. Подходят в основном для проектов, касающихся искусства. Не рекомендуется использовать где-либо, кроме заголовков. Примеры: Comic Sans, Neucha, Bad Script.

 

 - Monospace – моноширинные шрифты. Обычно используются для вывода исходных кодов или стилизации текста под печатную машинку. Примеры: Courier New, Lucida Console, PT Mono.

 

 - Fantasy – шрифты с необычным начертанием. Обычно используются в заголовках. Примеры: Copperplate, Impact, Comfortaa, Forum.

 

 

 

Как избежать типичных ошибок со шрифтами?

 

 

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

 

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

 

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



При подборе шрифтов для сайта важно придерживаться нескольких простых правил:

 

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

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

 - Помните, что ваша главная цель — донести информацию, не стоит слишком увлекаться нечитабельной эстетикой.

 

 

 

О лицензиях

 

 

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

 

Чтобы не создавать проблем разработчикам, дизайнеру следует придерживаться простого правила: использовать только свободные для использования на сайтах шрифты. Лучший вариант — использовать сервис Google Fonts. Он автоматически встроен на ucraft. На этом сервисе на момент написания статьи размещено 847 бесплатных шрифтов, что предоставляет практически исчерпывающие возможности для подбора шрифтов на сайт.

 

А что делать, если понравился шрифт на чужом сайте?

 

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

 

 

 

Каким должен быть шрифт для молодежного сайта?

 

 

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

 

 

 

 

https://www.ucraft.ru/demo/jacos-bbshop

 

Основной шрифт — Verdana. Шрифт навигации — Lato. На баннерах — Carter One.

 

В общем и целом, сочетание аккуратного, но стильного Carter One и простого и привычного Verdana создает свежий, но довольно представительный вид.

 

 

 

Каким должен быть шрифт для респектабельного бренда?

 

 

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

 

 

 

https://www.ucraft.ru/demo/victor-winehouse

 

Например, обратите внимание на шрифты, органично сочетающие элементы классики с новыми нестандартными решениями. Заголовки — Playfair Display. Основной — Raleway. Навигация — как и в прошлом примере, Lato.

 

С одной стороны - Playfair Display, строгий и представительский по характеру, придающий тексту оттенок старого печатного издания. С другой стороны — Raleway, выглядящий весьма свежо. Такое сочетание очень подходит для старых именитых брендов, которые идут в ногу со временем.

 

 

 

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

 

 

Представляете свой собственный стиль? Шрифт должен соответствовать.

 

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

 

 

 

https://www.ucraft.ru/demo/abstract

 

Шрифт заголовков — Amatica SC. Основной шрифт — Roboto.

 

Шрифт Amatica SC подчёркивает живой творческий характер практически любого вида искусства. Шрифт Roboto – весьма популярное в наше время шрифтовое решение, простое легко читаемое, и идеально совместимое с любыми устройствами.

 

 

 

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

 

 

Не затрудняйтесь в выборе шрифтов для бизнес-сайтов. Они не должны отвлекать от получаемой информации. «Всё гениальное - просто». Заголовки и навигация — Lato. Основной шрифт — Raleway.

 

 

 

https://www.ucraft.ru/demo/yamay

 

Шрифты лёгкие и современные. Это позволяет не отвлекать пользователя от как таковой информации.

 

 

 

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

 

 

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

 

 

 

https://www.ucraft.ru/demo/misty 

 

Шрифт макета — Lato.

 

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

 

 

Как передать настроение с помощью шрифта?

 

 

Весёлый шрифт заголовков с весёлым названием Annie Use Your Telescope придаёт сайту радостный озорной колорит, что помогает создать легкую и радостную атмосферу. Он хорошо сочетается с уже упоминавшимся шрифтом Lato.

 

 

 

https://www.ucraft.ru/demo/shoonig

Шрифт заголовков — Annie Use Your Telescope. Шрифт текстов — Lato.

 

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

 

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

 

 

#Заметка

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