Какие лучше использовать шрифты для сайта: 20 Лучших веб-шрифтов от Google Web

ТОП-15 лучших дизайнерских шрифтов: самые крутые и популярные

На чтение 6 мин Просмотров 1.9к. Опубликовано 28 сентября, 2022 ТэгиUX/UI-дизайн / Графический дизайн / Моушн-дизайн

Дмитрий Очаков

Дизайнер

Если вы только начинаете работать с типографикой, то, скорее всего, вам сложно сразу найти подходящие шрифты для своих проектов. Поэтому мы сделали подборку популярных и стильных шрифтов для разных задач. Каждый из них дополнили примерами работ разных дизайнеров, чтобы вы могли найти интересные идеи или вдохновиться. Составить эту подборку нам помог дизайнер Дмитрий Очаков – преподаватель школы Contented, который работает в компании Monotype. 

Содержание

1. Raleway
2. Fira Sans
3. Open Sans
4. Uni Sans
5. DIN Pro
6. Avenir Next World
7. San Francisco
8. Geometria 
9. Pragmatica
10. Zona Pro
11. Auch
12. Garamond
13. Colus
14. Averta
15. Forum

Открытая лицензия.

Источник

Raleway ― гротескный шрифт, то есть шрифт без засечек, который в 2010 году разработал дизайнер Мэтт Макинерни, он тогда создал первое начертание шрифтов. Затем над Raleway работали еще несколько дизайнеров: Пабло Импаллари, Родриго Фуэнсалида в Иджинио Марини. Они добавили в семейство другие начертания, в том числе курсив. Сейчас этот шрифт поддерживает 318 языков, начертания на латинице и кириллице.

Источник

Где использовать: Лучше всего его использовать в заголовках, даже с большим кеглем в тексте он выглядит броско и интересно. 

Открытая лицензия.

Источник

Fira Sans ― еще один гротескный шрифт без засечек, созданный немецким типографом Эриком Шпикерманом специально для Mozilla Firefox. Он был разработан для удобства чтения как на большом мониторе, так и на мобильных устройствах с разным качеством экранов.

Источник

Где использовать: У шрифта множество начертаний различной жирности, что позволяет применять его как к заголовкам, так и к текстам.  

Открытая лицензия.

Источник

Open Sans завоевал популярность за счет применения в плоском дизайне (его еще называют flat design, то есть дизайн без передачи объема). Графический шрифт разработан Стивом Мэтисоном по заказу Google.

Источник

Где использовать: Open Sans по умолчанию используется в Mozilla Firefox, WordPress и Telegram. Так что если нужен популярный шрифт для веб-дизайна или сайтов, то присмотритесь к нему.

Открытая лицензия.

Источник

Uni Sans ― пример современного гротеска, с выраженным характером и геометрическим оттенком. Он смотрится дорого и профессионально, но чуть скругленные углы создают ощущение дружелюбия. Шрифт создан относительно недавно, в 2002 году, дизайнером Святославом Симовым и имеет 14 начертаний; из них бесплатно можно получить 4. 

Источник

Где использовать: Uni Sans используется для корпоративных проектов, телевидения, журналов, брендинга и упаковки.

Платная лицензия. Принадлежит компании Monotype.

Источник

DIN Pro был разработан голландским типографом Альбертом-Яном Пулом в 2009 году. Гротескный шрифт без засечек, создание которого уходит корнями в немецкие стандарты, определенные еще в 1931 году. У шрифта есть множество начертаний, функций, все знаки и почти все языки мира. 

Источник

Где использовать: Встретить DIN Pro можно на упаковках, плакатах, вывесках, также он подходит для рекламы и брендинга.

Платная лицензия. Принадлежит компании Monotype.

Источник

Шрифт Avenir создан в 1988 году Адрианом Фрутигером, который вдохновлялся геометрическим гротеском 1920-х годов. Позже на его основе появился Avenir Next World — это расширенная версия семейства, которая поддерживает более 150 языков, включая латиницу, кириллицу, греческий, иврит, арабский, грузинский, армянский и тайский.

Источник

Где использовать: В электронных и интерактивных материалах, приложениях, логотипах и полиграфии. 

Условно открытая лицензия, можно использовать для личной работы. Полная лицензия принадлежит компании Apple.

Источник

San Francisco или просто SF разработан специально для Apple Watch в 2014 году. Поэтому он самый популярный среди брендовых шрифтов. Создатели ориентировались на то, чтобы текст можно было читать в маленьком кегле, на маленьком экране. Также он внедрен в iOS/Mac. Подсемейства у них два: Text и Display. Шрифт современный и динамично меняет начертания в зависимости от контекста. 

Источник

Где использовать: Для собственных, немонетизируемых проектов в digital-направлении.

Платная лицензия. Шрифт принадлежит компании Brownfox.

Источник

Geometria ― гротескный шрифт, который поддерживает 72 языка. Он разработан в 2013 году Вячеславом Кириенко и Гаяне Багдасарян. В России встречается часто, так как его используют государственные учреждения, например музеи. Geometria отлично подходит для чтения большого количества текста.

Источник

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

Платная лицензия. Принадлежит компании Paratype.

Источник 

Pragmatica ― отечественный шрифт, который разработан Владимиром Ефимовым в 1987 году для энциклопедий. Позже его доработала Ольга Чаева, которая добавила еще 8 дополнительных начертаний. Pragmatica основана на шрифте Helvetica, поэтому не имеет засечек. 

Источник 

Где использовать: Используется для приложений, книг, журналов и рекламы.

Открытая лицензия.

Источник

Zona Pro создан греческим дизайнером Костасом Бартсокасом, который руководствовался геометрическими стилями 1920-х годов. В общей сложности у Zona Pro 16 начертаний, но бесплатны только несколько. Он поддерживает немного языков, но среди символов есть кириллица. 

Источник

Где использовать: Формы шрифта удобочитаемые и подходят для брендинга, заголовков и основного текста.

Свободное использование для личных и коммерческих целей. Принадлежит компании Pinspiry.

Источник

Auch разработал турецкий дизайнер Мурат Юксель. Шрифт считается необычайно красивым и уникальным. В наборе есть спецсимволы и множество начертаний. Языков также много, поддерживает в том числе кириллицу.

Источник

Где использовать: Auch можно использовать в брендинге, на витринах и для заголовков. 

Открытая лицензия.

Источник

Garamond относится к классу антиква ― это типографские шрифты с засечками, которые появились еще в эпоху Возрождения. Вариантов этого шрифта много: есть классический, создание которого приписывают типографу Клоду Гарамонду в XVI веке, есть российская версия от Александра Тарбеева ― ITC Garamond, а есть версия для Apple ― Apple Garamond. 

Источник

Где использовать: Лучшее применение для Garamond ― приметные заголовки; еще его можно использовать в тех случаях, когда нужно создать чувство традиционности и неизменности. 

Открытая лицензия.

Источник

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

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

Условно открытая лицензия, можно использовать для личной работы. Принадлежит компании Fontfabric. 

Источник

Averta разработан тем же дизайнером, что и Zona Pro. Это изящный авторский шрифт, который имеет черты как американского, так и европейского гротеска. У него больше 40 начертаний, порядка 200 языков. Он постоянно обновляется и имеет два бесплатных начертания. Читается хорошо не только в заголовках, но и в тексте.

Источник

Где использовать: Подходит как для электронного формата, так и для печатного.

Открытая лицензия.

Источник

Forum создал Денис Мошаров в 2011 году. Шрифт имеет античные, классические «римские» пропорции. В нем есть множество символов, знаков и языков, однако имеет он всего лишь одно начертание.  

Источник

Где использовать: Forum подходит для основного текста, заголовков и подзаголовков.

Справочное руководство по типографике в мобильном веб‑дизайне

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

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

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

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

Основы типографики в современном веб-дизайне.

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

Тем не менее, с появлением мобильного телефона, типографика требует дополнительного внимания.

ТИПОГРАФИЧЕСКАЯ ТЕРМИНОЛОГИЯ

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

‍Типографика: Этот термин относится к технике, используемой при стилизации, форматировании и оформлении «печатного» (в отличие от рукописного) текста.

‍Гарнитура/Семейство шрифтов: Это система классификации, используемая для обозначения семейства символов. Например, Arial, Times New Roman, Calibri, Comic Sans и др.

Стандартный список семейств шрифтов в текстовых приложениях. (Источник: Google Docs)

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

Пример трех элементов, определяющих шрифт. (Источник: Google Docs)

Размер: Существует два способа указания размера (или высоты) шрифта: размер в пунктах или размер веб-дизайна в пикселях. Говоря о мобильном веб-дизайне, мы используем пиксели.

Ниже приведено построчное сравнение различных размеров шрифта:

Пример того, как одна и та же строка текста отображается при разных размерах. (Источник: Google Docs)

Как видно из WordPress, размеры шрифтов важны, когда речь заходит об установлении иерархии в тексте:

Размер заголовка по умолчанию в WordPress. (Источник: WordPress)

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

Вот пример опций, которые вы можете выбрать в WordPress:

Примеры насыщенности шрифтов, доступные в WordPress. (Источник: WordPress)

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

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

Чтобы дать Вам более ясное представление, вот пример из Mozilla о том, как использовать трекинг для изменения межбуквенного интервала

На примере трекинг: обычный, -1px, 1px

Интерлиньяж: Интерлиньяж, или интервал между строками, это расстояние между исходными линиями текста.. Как и в случае с трекингом, этот параметр можно настраивать для устранения проблем с плотностью текста.

Если у вас есть опыт использования специализированного программного обеспечения, вы уже должно быть знакомы с интерлиньяжем. Текст с одинарным интервалом. Текст с двойным интервалом. Или текст с полуторным интервалами. Это все касается интерлиньяжа.

Роль типографики в современном веб-дизайне.

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

‍Брендинг

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

‍Влияние на настроение

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

‍Дать вес сообщению

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

‍Поощрение чтения

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

‍Доступное сканирование

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

‍Улучшение доступности

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

Типографика для мобильного веб-дизайна: Что вам нужно знать

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

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

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

1. РАЗМЕР

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

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

Nielsen Norman Group предоставила исследование, проведенное MIT, в котором рассматривался именно этот вопрос. Какой размер лучше всего использовать для коротких строк текста заголовков?

‍Вот, что они выяснили:

‍Короткие, обзорные строки текста приводят к более быстрому чтению и лучшему пониманию, когда:

Они больше по размеру (а именно, 4 мм по сравнению с 3 мм).
Они состоят из прописных букв.
Ширина букв обычная.

‍Итого:

‍Строчные символы занимают на 26% больше времени для чтения, чем прописные, а сжатый текст — на 11,2% больше, чем обычный. Существует также значительная связь между регистром и размером, что позволяет предположить, что негативные эффекты от использования строчных букв усугубляются малым размером шрифта.
Интересно посмотреть на сайт NerdWallet. Хотя мне и нравится, как он выглядит, они нарушили ряд этих советов по размеру и стилю:

NerdWallet использует маленькие размеры шрифтов на мобильных устройствах. (Источник: NerdWallet)

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

‍Flywheel Sports, с другой стороны, отлично иллюстрирует этот момент.

Хороший выбор шрифтов Flywheel Sports для мобильных устройств. (Источник: Flywheel Sports)

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

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

2. ЦВЕТ И КОНТРАСТ

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

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

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

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

• Текст размером 18 пунктов или 14 пунктов, выделенных жирным шрифтом, должен иметь контраст 3 к 1.
• Текст, который не отображается в активной части веб-страницы, не обязательно должен соответствовать этому правилу.
• Контраст текста внутри логотипа может быть установлен по усмотрению дизайнера.

Если вы не знаете, как установить это соотношение между цветом вашего шрифта и фоном, на котором он расположен, используйте инструмент проверки цветового контраста, такой как WebAIM.

Пример использования инструмента проверки цветового контраста WebAIM. (Источник: WebAIM)

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

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

Хорошим примером является сайт Dollar Shave Club.

На этом сайте изображения в верхнем баннере главной страницы постоянно меняются. Шрифт всегда остается белым.

Баннер главной страницы Dollar Shave Club с фиолетовым фоном. (Источник: Dollar Shave Club)

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

Серый: #9a9a9a
Бежевый/персиковый: #ffd0a8
Фиолетовый: #4c2c59.
Вот контраст между этими цветами и белым шрифтом:
Серый: 2.81 к 1
Бежевый / персиковый: 1,42 к 1
Фиолетовый: 11.59 к 1.

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

Кроме того, на первый взгляд, я бы сказал, что текст «Try a risk-free Starter Set now» — это 10 пунктовый шрифт (а это всего около 13 пикселей). Таким образом, размер шрифта также работает против фактора читабельности, не говоря уже о плохом выборе цветов, используемых с более светлым фоном.

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

3. ТРЕКИНГ

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

Хотя Dove местами нарушает границы этого 40-символьного ограничения, я думаю, что их результат хорошо выглядит.

Dove в основном использует трекинг в пределах 40-символьного лимита. (Источник: Dove)

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

4. ИНТЕРЛИНЬЯЖ

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

Средний размер экрана смартфона с 2015 по 2021 год. (Источник: TechCrunch)

В среднем, мобильным пользователям нужно сделать 3-4 прокрутки, чтобы добраться до важной информации.Это довольно трудоемкий процесс. Это также означает, что их терпение уже будет на пределе. Как отметил NNG, мобильная сессия, в среднем, длится всего 72 секунды. Сравните это с сессией на настольным компьютером в 150 секунд, и вы поймете, почему это так важно.

‍Для вас это означает две вещи:

1. ‍‍Вам необходимо вырезать все лишнее на мобильной версии. Если это означает создание полностью отдельного и более короткого контента для мобильного, то сделайте это.
2. Будьте очень осторожны с интерлиньяжем.

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

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

Сайт Hill Holliday — это не только потрясающий ресурс для вдохновения, но и отличный пример грамотного использования интерлиньяжа.

Hill Holliday использует идеальное соотношение интервала между строками и абзацами. (Источник: Hill Holliday)

Различные ресурсы дадут вам разные рекомендации по интерлиньяжу. Так как вам необходимо учитывать доступность при проектировании для мобильных устройств, я предлагаю вам следовать принципам WCAG:
Расстояние между линиями должно быть 1,5 (или 150%, в зависимости от того, какое соотношение вы используете).

Расстояние между абзацами должно быть 2,5 (или 250%).

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

5. ШРИФТЫ

‍Прежде чем я разберу характеристики хорошего шрифта, я хочу взглянуть на стандартные шрифты Android и Apple. Я думаю, что мы можем многое взять, даже просто взглянув на эти варианты:

Android

‍Google использует два шрифта для своих платформ (как настольных, так и мобильных): Roboto и Noto. Roboto — это основной шрифт по умолчанию. Если пользователь посещает веб-сайт на языке, который не отображает Roboto, то Noto является резервной копией.

Это Roboto:

Набор символов Roboto. (Источник: Roboto)

Важно отметить, что в Roboto есть несколько семейств шрифтов на выбор и другие варианты шрифтов Roboto на выбор. (Источник: Roboto)

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

Apple

У Apple есть собственный набор рекомендаций по типографики для iOS, а также собственный шрифт: San Francisco.

Настройки и предложения по умолчанию для шрифта San Francisco. (Источник: San Francisco)

Как и во всем остальном, что делает Apple, формула типографики очень простая. И, знаете что? Она действительно работает. Вот она в действии на сайте Apple:

Apple использует свой собственный передовой опыт типографики. (Источник: Apple)

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

‍МОИ РЕКОМЕНДАЦИИ

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

1. Используйте только шрифт sans serif или serif. Если в вашем настольном сайте используется декоративный или рукописный шрифт, используйте что-то более традиционное на мобильном сайте.
   Тем не менее, вы не должны игнорировать декоративные шрифты вообще. В примерах Hill Holliday или Flywheel Sports (как показано выше), вы можете увидеть, как небольшие элементы нетрадиционного шрифта могут добавить немного специй во весь дизайн.
2. Никогда не используйте более двух шрифтов на мобильной версии. У посетителей просто нет возможности, чтобы визуально обработать столько вариантов.
3. Убедитесь, что два ваших шрифта дополняют друг друга. В частности, ищите варианты, которые используют одинаковую ширину символов. Дизайн каждого варианта может быть уникальным и хорошо контрастировать с другим, но все же должно быть некоторое единообразие в том, что вы предлагаете мобильным посетителям.
4. Избегайте шрифтов, в которых нет четкого набора символов. Например, сравните, как заглавные «i», строчная «l» и цифра «1» отображаются рядом друг с другом. Вот пример шрифта Myriad Pro с сайта Typekit:

Шрифт Myriad Pro. (Источник: Typekit)

Хотя число «1» достаточно различимо, заглавная «i» (первая буква в этой последовательности) и строчная «l» (вторая) слишком похожи. Это может привести к нежелательным паузам при чтении на мобильном телефоне.

Также не забудьте просмотреть, как ваш шрифт отображает сочетание букв «r» и «n» рядом друг с другом. Можете ли вы дифференцировать каждую букву или они выглядят как одна неразличимая единица? У мобильных посетителей нет времени останавливаться и выяснять, что это за символы, поэтому обязательно используйте шрифт, который дает каждому символу различимое представление.

‍

5) Используйте шрифты, совместимые с как можно большим количеством устройств. Лучшими вариантами будут: Arial, Courier New, Georgia, Tahoma, Times New Roman, Trebuchet MS и Verdana.

Список системных шрифтов для различных мобильных устройств. (Источник: tinytype)

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

Шрифт на сайте Typeform. (Источник: Typeform)

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

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

Заключение

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

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

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

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

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

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

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

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

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

Неправильный выбор шрифта снижает способность резонировать с конкретными людьми и передавать сообщение о бизнесе.

4 основных типа шрифтов

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

1. 
   Serif — эти шрифты включают маленькие линии или штрихи (известные как засечки), добавленные к более крупным буквам, символам, и цифры
2. Sans serif — эти шрифты имеют более минималистичный дизайн, поскольку в них отсутствуют дополнительные линии/штрихи на символах, цифрах и буквах
3. Script — шрифты, в которых особое внимание уделяется почерку, напоминающему почерк
4. Дисплей — художественные и привлекательные шрифты, часто используемые в декоративных целях

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

Соответствие шрифта бизнесу

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

Придерживайтесь правила трех

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

Выберите веб-безопасные шрифты

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

Тщательное исследование шрифта

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

Приоритет мобильных пользователей

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

Распространенные ошибки выбора шрифта, которых следует избегать

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

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

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

Open Sans — это шрифт без засечек, созданный Стивом Маттесоном и впервые выпущенный в 2011 году. Акцент шрифта на удобочитаемости, дружественном внешнем виде и отличной поддержке многих различных языков делает его одним из десяти лучших шрифтов для веб-сайтов.

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

Playfair display — еще один из лучших бесплатных шрифтов для веб-сайтов. Этот шрифт с засечками, разработанный датчанином Клаусом Эггерсом Соренсеном в 2011 году, использует влияние 18-го века, чтобы добиться внешнего вида, который очень хорошо подходит для заголовков и заголовков.

Merriweather — это шрифт с засечками, который очень легко читается на экранах даже при небольших размерах, что делает его главным кандидатом для основного текста, используемого в сообщениях в блогах клиентов, страницах «О страницах» и других текстовых страницах. Этот шрифт бесплатный и был разработан компанией Sorkin Type.

Безусловно, самый известный шрифт в этом списке. Helvetica — это шрифт без засечек, история которого восходит к 1957 году. Разработанный Haas Type Foundry в Швейцарии, Helvetica легко переводит из офлайн в онлайн, что говорит о его универсальности. Helvetica рекомендуется не из-за чего-то необычного, а из-за ее нейтральности, что делает ее хорошим безопасным вариантом, который позволяет другим элементам дизайна выделяться, не мешая. Helvetica — это шрифт премиум-класса, за лицензию на использование которого нужно заплатить.

Arvo — это бесплатный шрифт с засечками, хорошо известный своими отчетливыми блочными засечками. Антон Коовит разработал этот шрифт еще в 2010 году с целью создания чрезвычайно разборчивого шрифта, подходящего для экрана. На самом деле, сам Антон говорит, что создавал шрифт для «всех операционных систем и экранов». Этот шрифт отлично смотрится в заголовках и подзаголовках.

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

Lato — это шрифт с открытым исходным кодом, созданный польским дизайнером Лукашем Дзедзичем в 2010 году. Шрифт без засечек; теплота и разборчивость являются ключевыми характеристиками. Компании выиграют от профессиональной, но гостеприимной атмосферы, которую Лато может добавить к заголовкам или основному тексту, когда вы хотите быть серьезным в своих сообщениях, не отталкивая пользователей.

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

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

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

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

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

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

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

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

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

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

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

Креативный директор Джон Касселла (John Cassella), долгое время занимавший пост креативного директора, заявляет: «Используйте только стандартные безопасные веб-шрифты для оформления своей рассылки по электронной почте. Веб-безопасные шрифты — это кроссплатформенные шрифты, которые увеличивают вероятность того, что ваши предполагаемые шрифты будут отображаться как выбранные, и что любые требуемые замещающие шрифты будут аналогичными альтернативами».

Обычно используемые веб-шрифты включают:

• Verdana, Geneva, sans-serif
• Джорджия, Times New Roman, Times, с засечками
• Courier New, Courier, моноширинный
• Arial, Helvetica, без засечек
• Тахома, Женева, без засечек
• Trebuchet MS, Arial, Helvetica, без засечек
• Arial Black, Gadget, без засечек
• Times New Roman, Times, с засечками
• Palatino Linotype, Book Antiqua, Palatino, serif
• Lucida Sans Unicode, Lucida Grande, без засечек
• MS с засечками, Нью-Йорк, с засечками
• Консоль Lucida, Монако, моноширинный
• Comic Sans MS, курсив (используйте на свой страх и риск)

Awwwards.com рекомендует несколько веб-шрифтов Google, которые бесплатны, но могут иметь не самое высокое качество.