Лучшие шрифты для сайта: 10 лучших шрифтов для вашего сайта 2020 года — Дизайн на vc.ru

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

Опубликовано: 2021-07-28

Прыгать вперед

В этой статье

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

• 4 совета по выбору лучших шрифтов для вашего сайта

• Совет №1: используйте легко читаемые шрифты

• Совет № 2: сделайте размер шрифта большим (достаточно)

• Совет № 3: не используйте слишком много шрифтов, размеров шрифта или цветов.

• Совет №4: используйте постоянные шрифты

• Как найти лучший шрифт для вашего сайта

• №1. Выясните, какое сообщение вы хотите, чтобы ваш шрифт отправлял

• # 2: протестируйте свои шрифты с аудиторией

• # 3: Если сомневаетесь, выберите общий шрифт

• Где найти лучшие шрифты для вашего сайта

• №1. Google шрифты

• №2. Fonts.com

• №3.

  Fontspring

• №4. Какой шрифт

• №5. Тип Деталь

• Как изменить шрифты на витрине Podia

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

Шрифты, вероятно, кажутся совсем не важными вещами при разработке своего веб-сайта.

Это оконные рамы в здании, верно?

Не совсем.

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

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

Это может все изменить.

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

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

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

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

Возьмем, к примеру, Mailchimp, который переименовал свой сайт в шрифт Cooper Light.

Почему они выбрали Cooper Light?

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

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

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

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

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

В качестве примера возьмем текст «Быстрая коричневая лисица».

На английском текст отлично читается шрифтом Merriweather.

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

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

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

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

Они также влияют на покупательское намерение вашей аудитории.

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

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

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

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

Какая здесь мораль?

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

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

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

4 совета по выбору лучших шрифтов для вашего сайта

Совет №1: используйте легко читаемые шрифты

Лучшие шрифты для веб-сайта — это легко читаемые.

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

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

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

Это также подтверждается этим исследованием, которое показало, что Verdana хороша для чтения длинных текстов на экранах.

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

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

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

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

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

Проще говоря, следуйте этому практическому правилу, состоящему из двух частей:

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

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

Например, Wild Side Design использует несколько шрифтов, которые привлекают внимание пользователей к различным частям их страницы.

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

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

Независимо от вашего сочетания шрифтов, вот суть:

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

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

Совет № 2: сделайте размер шрифта большим (достаточно)

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

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

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

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

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

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

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

Подвести итоги:

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

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

Совет № 3: не используйте слишком много шрифтов, размеров шрифта или цветов.

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

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

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

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

Это соответствует цветовой гамме бренда и гендерно-нейтральному позиционированию предметов домашнего обихода «сделай сам».

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

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

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

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

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

В основном:

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

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

Совет №4: используйте постоянные шрифты

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

Почему?

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

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

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

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

Доверие посетителей тоже должно происходить быстро. В наши дни люди оценивают надежность веб-сайта в течение 3,42 секунды, основываясь на его эстетической привлекательности.

Более того, соответствие между имиджем бренда и веб-сайтом также может привести к положительному отношению к бренду.

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

Amazon использует шрифт Amazon Ember на всей своей домашней странице.

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

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

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

Как найти лучший шрифт для вашего сайта

№1. Выясните, какое сообщение вы хотите, чтобы ваш шрифт отправлял

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

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

Научный журнал Nature выбрал шрифт Harding, потому что им нужен шрифт, который лучше отображает математические символы и формулы.

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

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

Рассмотрим широко используемый шрифт Times News Roman. Times New Roman казался более злым и забавным, чем Arial, когда участники исследования читали сатирические тексты, написанные шрифтом Times.

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

Участники, которые видели письмо, написанное на Gigi (которое вы можете увидеть ниже), сочли его более бунтарским и молодым, чем другие изученные шрифты. Участники также сочли Гиги менее стабильной и практичной.

Участники также считали автора электронного письма Джиджи менее профессиональным, заслуживающим доверия и зрелым человеком.

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

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

# 2: протестируйте свои шрифты с аудиторией

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

Ваш шрифт должен быть не только легко читаемым, но и приятным для чтения.

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

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

В отличие от людей, которые читают текст с плохим шрифтом и недооценивают время чтения в среднем на 24 секунды.

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

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

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

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

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

# 3: Если сомневаетесь, выберите общий шрифт

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

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

В одном исследовании участники экспериментов отдали предпочтение Verdana при чтении на экране компьютера. Участники также читали быстрее и имели меньше регрессов (обратное движение) при чтении текста с помощью Verdana.

Отдельное исследование показало, что участники предпочитали 12-точечный матричный шрифт Arial. Еще одно исследование показало, что участники читают быстрее при чтении шрифта без засечек.

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

Компании критиковали за использование одинаковых или похожих шрифтов в своих брендах — просто подумайте, насколько похожи шрифты, используемые Google, Airbnb, Spotify и Pinterest.

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

Тьерри сказал, что:

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

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

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

В основном:

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

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

Где найти лучшие шрифты для вашего сайта

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

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

Некоторые из лучших онлайн-литейных шрифтов:

№1. Google шрифты

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

Каждый из шрифтов в Google Fonts можно использовать бесплатно и в коммерческих целях.

№2. Fonts.com

Как и Google Fonts, Fonts.com предлагает тысячи шрифтов на выбор — более 150 000, если быть более точным.

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

№3. Fontspring

Fontspring — это производитель шрифтов, который также предлагает тысячи платных шрифтов.

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

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

№4. Какой шрифт

What Font — это расширение для детектора шрифтов веб-сайта, которое помогает вам идентифицировать шрифты на любой веб-странице.

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

№5. Тип Деталь

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

Сведения о типе раскрывают (естественно) подробности о многих популярных шрифтах, например, этот профиль для шрифта Neue Swift.

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

Теперь, когда вы знаете, где найти идеальный шрифт, узнайте, как легко изменить шрифты на витрине магазина Podia.

Как изменить шрифты на витрине Podia

Вы можете изменить шрифты своего веб-сайта в мгновение ока, если вы разместите свою витрину на Podia.

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

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

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

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

И вот так! Вы только что добавили уникальный шрифт в свою витрину.

У вас еще нет витрины, в которую можно было бы добавить шрифт? Получите его сегодня и подпишитесь на 14-дневную бесплатную пробную версию Podia.

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

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

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

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

• Используйте удобный для чтения шрифт

• Сделайте шрифт достаточно большим, чтобы его могли прочитать большинство (размер шрифта 18 или больше)

• Не используйте слишком много разных типов, размеров или цветов шрифтов.

• Поддерживайте постоянство использования шрифтов

• Выберите шрифт, который передает правильное сообщение о вашем бренде.

• Проверьте свой шрифт со своей аудиторией

• Используйте общий шрифт, если вы еще не можете решить, какие шрифты использовать

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

Новостная рассылка

Подпишитесь на нашу рассылку

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

Самые популярные шрифты для сайта и web-дизайна

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

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

Томас Лауринавичус (Tomas Laurinavicius) заинтересовался, какие шрифты любят больше всего использовать веб-дизайнеры в своей работе.

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

Кроме того, он взял короткое интервью у веб-дизайнеров с целью узнать, какой шрифт наиболее подходит в определенной ситуации. Результатами своего опроса Томас поделился на сайте hongkiat.com.

Опрос проводился в социальных сетях и микроблогах – Polldaddy, Forrst, Facebook и Twitter. В опросе приняли участие 34 дизайнера из 14 стран, которые, отвечая на вопросы о любимых шрифтах, объяснили, почему выбирают именно их.

Во время опроса веб-дизайнеры назвали 73 различных шрифта – 46 бесплатных и 27 платных.

Самыми любимыми шрифтами веб-дизайнеров оказались: Helvetica, Arial, Georgia, Gotham, Myriad Pro, DIN, Futura, League Gotic, Cabin, Corbel.

Нужно учитывать, что не все из представленных шрифтов имеют кириллическое начертание – тем более, в бесплатном варианте.

Далее показано два топ-10 – самые любимые бесплатные и платные шрифты.

Топ-10 любимых бесплатных шрифтов веб-дизайнеров

Опрошенные дизайнеры выбрали 10 лучших шрифтов для веб-графики. При этом не учитывались шрифты, по умолчанию установленные в операционную систему, такие как, Arial, Verdana, Times New Roman, Georgia или Tahoma. (Это немного странно – на первом месте шрифт, который есть в операционной системе).

1. Myriad Pro
2. League Gothic
3. Cabin
4. Corbel
5. Museo Slab
6. Bebas Neue
7. Ubuntu
8. Lobster
9. Franchise
10. PT Serif

Топ-10 любимых платных шрифтов веб-дизайнеров

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

1. Helvetica
2. Gotham
3. DIN
4. Futura
5. Neo Sans
6. Adobe Caslon
7. Skolar
8. Kautiva
9. Caecilia
10. Fedra Sans

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

 

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

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

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

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

Типы шрифтов

Шрифты делятся на два типа: с засечками и без них. Шрифты с засечками (например, Times New Roman) рекомендуется использовать в тех случаях, когда необходимо вызвать у читателя эмоции. Психологи объясняют это тем, что шрифты с засечками напоминают нашему сознанию рукописный или напечатанный на машинке текст. Такой шрифт интереснее читать. Засечки позволяют взгляду цепляться за буквы, в результате прочтение текста с засечками занимает меньше времени, чем текста без засечек.

Шрифты без засечек (Arial) применяются в строгой деловой переписке или правительственных отчетах. Это сухой официальный тип шрифта. Его не рекомендуется использовать на развлекательных порталах. Однако шрифт без засечек более понятен пользователю. При прочтении такого текста не возникает вопросов или сомнений.

Для текста на сайте нужно использовать хорошо читаемые шрифты

Также существуют геометрические типы шрифтов и рукописные.

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

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

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

Лучшие шрифты для сайта

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

Примером геометрических шрифтов являются Helvetica, Futura, и Gotham. Буквы в них, как будто вырублены топором. Четкие строгие линии, прямые и геометрически правильные углы. Такой шрифт подходит для сайтов официальных организаций: банков, страховых компаний.

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

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

Какие шрифты не использовать

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

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

Крутые сочетания шрифтов #2 — DEADSIGN

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

Уверен, вы замечаете многие многие шрифтовые тренды. Каждый год появляется популярный шрифт, который мелькает в проектах на Behance и Dribble. Сначала это был Gotham, затем Proxima и Avenir, а сегодня мы опять вернулись к Futura. Но нет никакого смысла бояться подобной цикличности.

Дизайн в своём развитии похож на петлю, также как и тренды в стилях архитектуры или моды. Появляется новое направление, достигает своего пика, а затем сменяется.

Но иногда нужно приостановиться, осмотреться и попробовать что-то свежее. Здесь я представлю набор хороших пар шрифтов, которые вы можете использовать в своих проектах. Описывая шрифт, я буду брать его название, кегль и иногда высоту строки в таком формате: *семейство шрифтов*, *кегль* +px, *высота строки* +px.

Плюс, я буду обращать ваше внимание на некоторые детали, которые нравятся именно мне.

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

На сайте Stampsy используется PF Bague Sans Pro для заголовков и шрифта интерфейса.

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

На главной странице они используют те же шрифты, но наоборот. Здесь шрифт текста — это Minion Pro Condensed, а текст заголовков — PF Bague Regular. В целом, эта страница смотрится свежо. Приятные цвета, нет избытка текста, перегружающего страницу. Мне нравится подход, в котором суть проекта отображается в пяти больших слайдах. Иногда трудно описать свой проект коротко и быстро, но всегда есть смысл попробовать так сделать.

В миниатюрной версии плеера также используется PF Bague. Он по-прежнему круто смотрится в интерфейсах. А ещё он лаконичен и сохраняет изюминку, цепляющую взгляд посетителя.

Это блок с рекомендованной статьёй. Оба шрифта остаются читаемыми даже в кегле в 14px.

На странице с подборками статей применяется несколько разных кеглей. Заголовок написан с помощью PF Bague в жирном начертании, 60px, а под ним Minion Condensed, 24px, 31px. Обратите внимание, как круто смотрится шрифт на зелёной кнопке.

Вот ещё один замечательный шрифт — GT Haptik, на сайте Fuzzco он используется везде. У этого шрифта знаки больше, чем у BF Bague. Побродив по сайту, вы увидите, что шрифт одинаково хорошо смотрится и в большом кегле, и в кегле 15px, что очень удобно для UI.

Fuzzco — хороший пример того, как умелое обращение со шрифтами и изображениями делает страницу привлекательной. У GT Haptik сильный характер, и он подойдёт не каждому сайту. Например, у него очень даже претенциозная цифра 0 и прописная R. Хотя шрифт всё равно крут.

Огромное спасибо ребятам из Fuzzco за новый шрифт в моём арсенале. Теперь буду пользоваться им по праздникам.

Exposure — сайт для людей, которые хотят делать красивые фото-истории. Мне нравится, что эти ребята тоже не боятся экспериментов со шрифтами и зачастую придумывают что-то новенькое. Основной шрифт на этом сайте — Europa с TypeKit. В напарники ему был выбран старый добрый Adobe Garamond Pro.

Заголовки написаны прописным жирным начертанием Europa, 40px, 60px; разрядка — 4px. Под ним используется Garamond в нормальном начертании. Как вы можете видеть на правой стороне скриншота, шрифт Europa отлично смотрится на кнопках и в сплошном тексте. На сайте Exposure правильно расставлены визуальные акценты и грамотно использованы прописные заголовки, текстовые области и кнопки.

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

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

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

На сайте Wonderland используется известный ITC Avant Garde. Шрифту уже 40 лет, но он всё ещё мило смотрится и остаётся популярным.

Второй шрифт на Wonderland — Neuzeit Grotesk. Если вы зададите для него кегль в 22px и межстрочный интервал в 35px, он становится очень даже читаемым и чистым. Это хорошо видно на этом огромном куске текста.

Ещё мне понравилась страница с контактами, на которой используется Neuzeit Grotesk 20px.

Жирное начертание заголовков с подчёркиванием ITC Avant Garde и тонкий, текстуальный Neuzeit Grotesk хорошо смотрятся вместе. Эта страница контактов, как и в случае с сайтом Fuzzco, содержит только текст. И из-за того, что дизайнер постарался сделать её лёгкой и чистой, она и выглядит понятной.

Визуальное представление этого сайта хорошо привлекает внимание посетителя. Шрифт заголовков — Playfair, кегль: 55px и высота строки: 55px. Помимо всей шикарности этого шрифта вам также понравится факт его полной бесплатности.

Шрифт текста верхней панели меню и слова «Congress» — жирное начертание Futura, 13px.

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

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

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

Основной текст — светлое начертание Helvetica Neue, 16px, 28px. Он превосходно контрастирует с жирным заголовком, а разреженный межстрочный интервал позволяет легко читать текст.

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

Небольшой, но аккуратный блок можно найти в разделе «Studio». Заголовок — полужирная Futura, 35px, 33px. Ниже идёт основной текст — тонкое начертание Playfair, 16px, 20px.

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

У сайта Readymag дизайн действительно продуман. Они часто экспериментируют со шрифтами и нередко результат получается просто здоровский.

Для заголовка главной страницы было выбрано сверхсветлое начертание Nobel, 84px, 82px. А ниже тоже используется Nobel, но 26px, 26px. Для меню используется уже знакомый Avenir Next, 19px, 19px.

У шрифта Nobel есть характер, и он отлично подходит для повествовательной формы представления контента. Вместе с обезличенной и понятной Helvetica этот шрифт можно применять в «креативных проектах» и показывать их «компетентной аудитории». Плюс, Nobel хорошо сочетается с Avenir Next.

На сайте Readymag с помощью этой пары был создан понятный и минималистичный дизайн. Обратите внимание на отступы и параметры шрифта, заданные в блоке с преимуществами продукта. Заголовок — светлое начертание Nobel, 64px, 80px; название каждого блока — полужирное начертание Avenir Next, 24px 30px; текст описания — нормальное начертание Avenir Next, 18px, 24px. А воздух между блоками придаёт всей композиции свободу и чистоту.

Avenir Next отлично подходит для заголовков и обычного текста. Он отлично вписывается и в UI. UI сайта Readymag — лишь один подобный пример. В огромных заголовках он мне больше напоминает хипстерские шрифты, а в обычном тексте в нём появляется больше геометричности и круглости, как в Proxima Nova.

С помощью Avenir Next вы можете выделять нужные блоки, применив прописное начертание шрифта в заголовке. Здесь разрядка задана в 2px, кегль: 13px, высота строки: 13px. Параметры текста ниже: 13px, 13px.

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

Но у сайта Readymag с этим всё в порядке. Для этого блока сайта они взяли Merriweather, который можно скачать с Google Fonts.

Подсказка: вы можете высчитать размер заголовка при помощи золотого сечения. Задайте фиксированный кегль основного шрифта — <p>. Например, нашим шрифтом будет Proxima, 19 px. Поскольку ширина вертикали сетки будет равна 18px, интерлиньяж контента будет таким — 18*2=36px.

Теперь нам нужно выбрать размер текста под заголовком. Возьмём золотое сечение 1*1,618 и умножим его на размер контента. 1,618*19=30,74~30px. По такой же формуле высчитаем размер заголовка: (1,618*19)*1,618=49,74~50px.

В этом случае получаем следующие размеры: основного текста — 19px, текста под заголовком — 30px, заголовка — 50px.

На сайте Dragone использована такая же пара шрифтов как и на Dogstudio. Сайты похожи и сами по себе, и мастерским уровнем своего исполнения. У меня даже иногда есть ощущение, что их делала одна студия. Заголовки — Playfair, 40px, 40px., основной текст — FuturaLight 17px, 27px.

Только посмотрите, как хорошо шрифты подходят друг другу! Они созданы друг для друга, хотя кажется, будто они из разных миров. Заголовок — Playfair, 30px, 30px. Выше использовано жирное начертание Futura Bold 11px, 25px, разрядка: 2px. Мне нравится чистота и лёгкость этой пары. Кажется, что здесь нет ничего ненужного — приятная картинка и понятный текст, создающий эмоциональную связь с иллюстрированным продуктом.

Мне очень нравится, как сочно выглядит футер. Кегль, цвет и высота строк отлично продуманы. Заголовок — жирное начертание Futura, 12px, letter-spacing: 2px. Пункты меню — Playfair, 13px, 18px.

На странице «Контакты» в заголовках используется тот же Playfair.

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

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

Если статья вам понравилась, поделитесь ей с друзьями и можете передать мне привет в Twitter. Ещё я завёл блоги в Tumblr и Pinterest, где доступны все скриншоты из этой статьи.

Мне также хотелось бы узнать, какие крутые пары шрифтов можете предложить вы. Если ваши варианты меня вдохновят, я обязательно напишу ещё одну статью.

Vladimir Kudinov — дизайнер и сооснователь @Designmodo

Самые легко читаемые шрифты для Интернета и печати

Освободи Себя лучший 12 шрифты которые легче читать

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

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

Почему шрифты так важны?

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

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

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

1) Грузия

Источник

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

2) Гельветика

Источник

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

3) Open Sans 

Источник

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

4) Вердана

Источник

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

5) Руни

Источник

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

6) Карла

Источник

Это отличный выбор для ясности. Его тонкий, равномерно расположенные символы идеально подходят для онлайн-контента, но они также отлично смотрятся при распечатке.

7) Робото

Источник

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

8) Ариал 

Источник

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

9) Neue

Источник

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

10) Тиса

Источник

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

11) Монтсеррат

Источник

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

12) Зыбучие пески

Источник

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

В заключение, есть много разных вариантов шрифтов.

Этот статью едва царапает поверхность! На рынке представлены сотни и сотни текстовых шрифтов и гарнитур.

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

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

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

Нет правильного или неправильного выбора.

Речь идет о том, чтобы выяснить, что больше подходит для того, чего вы хотите достичь.

Пропорциональные шрифты (Uniwidth) в дизайне, подборка с 15 лучших шрифтов — UXPUB

Пропорциональные (Uniwidth) шрифты имеют большой потенциал для использования в интерактивных интерфейсах. Это краткая подборка ряда доступных вариантов шрифтов.

Как веб / интерфейс / визуальный дизайнер, я много работаю с состояниями меток (selected, unselected, active, inactive, available, out of stock). Учитывая, что вы никогда не должны использовать цвет в качестве единственной визуальной подсказки (всегда помните о доступности), я часто прибегаю к помощи веса текста. Однако, если вы когда-либо работали с точно спроектированными интерфейсами, то знаете, насколько неприятно видеть, как ваши кропотливо размещенные метки сдвигаются, когда вы меняете вес текста с обычного на полужирный.

Решение этой проблемы: пропорциональные («uniwidth») шрифты, иногда также называемые «equal-width», «duplexed» или «multiplexed». И нет, я не имею ввиду моноширинные шрифты.

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

В моноширинном шрифте, таком как IBM Plex Mono, каждая буква имеет одинаковую ширину

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

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

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

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

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

На данный момент существует не так много ресурсов о пропорциональных гарнитурах. Пока что я нашел два ресурса: список «Equal-width fonts» от Identifont и коллекцию 2015 года «Uniwidth typefaces» от Дэвида Судвикса. Оба ресурса содержат значительное количество различных вариантов.

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

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

Recursive от Arrow Type

www.recursive.design

Recursive – это вариативный шрифт, созданный для «максимальной универсальности, контроля и производительности». Recursive доступен в пропорциональной и моно версии, и обе можно дополнительно контролировать по четырем осям: Weight, Casual, Slant и Cursive. Casual повторяет мягкие и изогнутые мазки кисти и добавляет немного веселья к серьезному шрифту. Recursive поддерживает широкий спектр языков, использующих латинский алфавит, включая вьетнамский. Он также содержит расширенный набор валют, символов, дробей и стрелок.

Recursive можно бесплатно загрузить с Google Fonts или Github, с открытым исходным кодом, под лицензией SIL Open Font License 1.1.

Источник: Arrow Type

PT Root UI от Paratype

www.paratype.com/fonts/pt/pt-root-ui

PT Root UI – это современный, серьезный шрифт без засечек, который бывает четырех типов (Light, Regular, Medium, Bold). PT Root UI специально спроектирован для чтения с экрана, интерфейсов и веб-сайтов. Он имеет широкую языковую поддержку, включая расширенную латиницу и кириллицу (включая азиатскую кириллицу), и содержит табличные цифры, знаки валюты, дроби и индексы, а также ряд стрелок и альтернативных форм.

PT Root UI можно бесплатно загрузить по лицензии SIL Open Font License (OFL) на веб-сайте Paratype.

Источник: Paratype

Golos UI от Paratype

www.paratype.com/fonts/pt/golos-ui

Шрифт Golos UI, также от Paratype, имеет три веса (Regular, Medium, Bold), а также доступен как вариативный шрифт. Golos UI в целом похож на PT Root UI, но имеет немного суженные пропорции. Он обладает широкой языковой поддержкой, включая расширенную латиницу и кириллицу (в том числе азиатскую кириллицу), и содержит табличные цифры, знаки валюты, дроби и индексы, а также ряд стрелок и альтернативных форм.

Golos UI можно бесплатно загрузить по лицензии SIL Open Font License (OFL) на веб-сайте Paratype.

Источник: Paratype

Grandstander от Etcetera Type Company

www.etceteratype.co/grandstander

Grandstander – это игривый вариативный шрифт без засечек, вдохновленный детскими книгами, который «понравится людям всех возрастов». Буквы изогнуты и слегка вздуты, что придает ему комическую эстетику. Grandstander поставляется в статической версии с девятью весами (от Thin до Black) с соответствующим курсивом. Вариативная версия имеет две оси: Weight и Slant. Он поддерживает «широкий спектр языков, использующих латинский алфавит» и включает в себя табличные цифры, а также дроби, альтернативы и лигатуры.

Grandstander можно бесплатно загрузить на условиях OFL (Open Font License) в Google Fonts и Github.

Источник: ETC

Angus от Black Foundry

black-foundry.com/fonts/angus

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

Angus можно купить на сайте Black Foundry.

Источник: Black Foundry

Halvar и Halvar Stencil Complete от TypeMates

www.typemates.com/fonts/halvar-and-stencil-complete

Halvar – это массивная система шрифтов, насчитывающая в общей сложности 162 стиля. Halvar и Halvar Stencil имеют три значения ширины (Wide, Normal и Condensed), а также девять весов (от Hairline до Black) с двумя вариантами курсива (Slanted и SuperSlanted). Halvar с громоздкими пропорциями и сложными формами представляет собой прагматичный гротеск. Halvar поддерживает расширенный латинский, греческий и кириллический алфавиты и имеет табличные цифры, надстрочные индексы, дроби, а также альтернативные символы.

Halvar можно приобрести на сайте TypeMate. Также доступен предрелизный вариант вариативного шрифта.

Источник: TypeMates

Service Gothic от HEX

hex.xyz/Service_Gothic

Service Gothic – это незавершенный вариативный шрифт, в настоящее время доступный только в верхнем регистре. Service Gothic включает 6 статических весов от Thin до Bold.

Первую версию Service Gothic можно купить на сайте Future Fonts.

Источник: Future Fonts

Urby и Urby Soft от TypeMates

www.typemates.com/fonts/urby

Urby Collection призван «объединить поразительный характер с технической функциональностью». Urby и его закругленный аналог Urby Soft выпускаются в пяти вариантах веса (от Thin до Black). Их можно использовать как взаимозаменяемые, поскольку они одинаковы по ширине для всех весов в обоих семействах. Urby Collection поставляется с расширенной поддержкой латинского алфавита и включает в себя линейные и табличные цифры, надстрочные и подстрочные индексы, дроби, порядковые числа и широкий спектр полезных декоративных элементов и геометрических фигур.

Urby Collection можно приобрести на сайте TypeMates.

Источник: TypeMates

Geóso от Finaltype

finaltype.de/de/projekte/geoso

Geóso – это гуманистический шрифт без засечек с геометрическим оттенком. Этот шрифт доступен в девяти весах (от Thin до Heavy) с соответствующим курсивом и является универсальным для каждого стиля. Geóso поддерживает расширенный набор латинских шрифтов и имеет обширную и сложную систему цифр, надстрочных, подстрочных и дробных знаков. В качестве бонуса Geóso содержит неуловимую немецкую заглавную букву ß и забавный набор кастомных смайлов.

Geóso можно приобрести на сайте FrontSpring.

Источник: Finaltype

FF Kaytek family от FontFont

www.fontshop.com/superfamilies/ff-kaytek

FF Kaytek – это «свежий взгляд на канцелярские гарнитуры 90-х». Это обширное суперсемейство, состоящее из четырех стилей: Slab, Sans, Headline и Rounded. FF Kaytek Slab и Sans имеют шесть весов (от Thin до Black) плюс соответствующий курсив, в то время, как FF Kaytek Headline и Rounded имеют по семь весов (от Thin до ExtraBlack/Black). Headline and Rounded стили дополняют друг друга и имеют более компактный вид, чем Slab и Sans. FF Kaytek пропорциональный по весу и курсиву в каждом стиле.

Суперсемейство FF Kaytek поддерживает расширенный набор латинских шрифтов и имеет старые цифры, дроби, а также надстрочные и подстрочные индексы.

FF Kaytek доступен в FontShop и MyFonts.

Источник: MyFonts

Bahnschrift от Saja Typeworks

docs.microsoft.com/en-us/typography/font-list/bahnschrift

Bahnschrift – это оцифрованная версия шрифта DIN, известного по немецким дорожным знакам. Bahnschrift был первым вариативным шрифтом Microsoft, имеющим две оси: Weight и Width. Существует статическая версия, которая включает пять весов и три ширины. Bahnschrift поддерживает расширенную латиницу (включая вьетнамский), а также кириллицу и греческий алфавит.

Bahnschrift доступен как часть операционной системы Windows 10.

Источник: Microsoft

FF Scala family от FontFont

scalafont.com

Семейство FF Scala – это классика печати. Спроектированный в 1991 году Мартином Майором, шрифт FF Scala с засечками в старом стиле был позже расширен версией без засечек, FF Scala Sans, основанной на общем скелете. Оба семейства имеют два веса (Regular и Bold) с соответствующим курсивом и двумя сокращенными стилями. Семейство FF Scala поддерживает расширенную латиницу и включает строчные и табличные цифры, надстрочный и подстрочный индекс, дроби, порядковые числа и фирменный набор декоративных стрелок.

Семейство FF Scala доступно для покупки на веб-сайте FontShop.

Источник: FontShop

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

Minérale от 205TF

www.205.tf/look/minerale

Minérale – это вариативный шрифт с необычными основами, грани которых пересекаются. Minérale «довольно сдержанный в своих самых тонких версиях, [но] становится более декоративным в более тяжелых версиях». Статическая версия шрифта имеет пять вариантов веса (от Extralight до Black) и соответствующий курсив. Все они являются пропорциональными (включая версии с курсивом). Minérale поддерживает расширенный набор латинских шрифтов и включает пропорциональные фигурные цифры, пропорциональные строчные цифры, табличные цифры, ординалы, стилистические альтернативы и стрелки.

Minérale можно приобрести на сайте 205TF.

Источник: 205TF

Climate Crisis Font от Helsinki Sanomat

kampanjat.hs.fi/climatefont/index.html

Шрифт Climate Crisis Font – удивительный вариативный шрифт, который пытается пролить свет на изменения климата. Ось веса шрифта основана на данных National Snow and Ice Data Center и прогнозах, предоставленных IPCC. Самый жирный шрифт представляет минимальную протяженность арктического морского льда в 1979 году, а самый легкий представляет собой прогноз на 2050 год.

Шрифт Climate Crisis Font поддерживает основной набор латинских шрифтов и имеет ограниченный набор надстрочных знаков и дробей.

Climate Crisis Font можно бесплатно загрузить в соответствии с лицензией SIL Open Font License (OFL) от Helsigin Sanomat.

Символы шрифта Climate Crisis Font неизменно широкие, но кажется, что они «тают» при выборе более легкого веса. Источник: Helsingin Sanomat

Handjet от Rosetta Type

www.rosettatype.com/Handjet

Handjet – экспериментальный трехкоординатный шрифт на основе сетки. Система шрифтов Handjet содержит 23 элементарных формы (например, квадраты, клевер и сердечки), размер которых можно изменять, создавая различный вес шрифта. Кроме того, можно использовать группы из меньших элементов 2×2 вместо одного элемента. Как и следовало ожидать от Rosetta Type, Handjet поддерживает широкий спектр языков: арабский, армянский, кириллицу, греческий, иврит и расширенную латынь. Он также включает дроби и достаточно забавные маленькие украшения.

Handjet можно купить за 0 евро на веб-сайте Rosetta Type.

Источник: Rosetta Type

Вывод

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

Для дальнейшего чтения по теме

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

Список «Equal-width fonts» от Identifont
http://www.identifont.com/equal-width.html

«Uniwidth typefaces» от Дэвида Судвикса
https://www.fontshop.com/people/david-sudweeks/fontlists/uniwidth-typefaces

В ответ на эту статью Индра Купфершмид собрала коллекцию uniwidth/multiplexed шрифтов от Fontstand. Спасибо!
https://fontstand.com/collections/69697/ab1ddd85e26deaf6647be009be6a1337

8 сайтов с бесплатными шрифтами

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

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

Google Fonts

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

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

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

Dafont

Dafont – один из старейших и лучших источников шрифтов. В коллекции этого сайта их более 40 тысяч. Для сравнения у Google Fonts – менее тысячи. Регистрироваться и создавать профиль не нужно. Просто заходите на сайт, выбирайте понравившийся и нажимайте кнопку «Скачать».

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

Чтобы увидеть инструмент предварительного просмотра, нажмите «Recently Added Fonts» или «Top Fonts». Затем наберите текст, который хотите увидеть в окне превью. Используйте расширенный поиск, если обычный выдал слишком много результатов, в которых сложно ориентироваться. Если же нужен какой-то конкретный шрифт, просто введите его название в форме поиска в верхней правой части страницы.

Urbanfonts

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

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

Fonts.com

Fonts.com продает коммерческие шрифты. Но так как платные нам не нужны, нас интересует в первую очередь интеграция этого сервиса с Google Fonts и SkyFonts. SkyFonts – десктопная программа для загрузки и управления шрифтами. Если вам нужна функция загрузки и установки файлов с Google Fonts в один клик, например, для работы в Photoshop — смело скачивайте эту программу.

После установки SkyFonts, кликните на кнопку Browse Google Fonts — откроется список доступных шрифтов. Если хотите выбрать одно или несколько семейств шрифтов, сделать это можно отметив в выпадающем меню опцию Add Entire Family — программа скачает и установит все необходимые файлы.

FontBundles

Сервис FontBundles поможет дизайнерам сэкономить пару долларов на покупке наборов премиальных шрифтов. Есть здесь и сотни бесплатных предложений, сгруппированных в секции «Free Fonts». Чтобы без ограничений скачивать и устанавливать файлы из этого раздела, нужно зарегистрироваться на сайте.

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

Fontspace

Коллекция на Fontspace включает в себя более 45000 шрифтов. Разработчики сервиса предпочли визуальный подход к отображению шрифтов. Помимо типового предварительного просмотра, в окне превью представлено и изображение от дизайнера. По умолчанию Fontspace отображает все шрифты. Чтобы видеть только бесплатные с лицензией на коммерческое использование, зайдите в раздел Fonts верхнего меню и выберите опцию Commercial-use.

Behance

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

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

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

Dribbble

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

Это значит, что в базе Dribbble можно легко найти масштабируемые шрифты для сайта. Регистрация не нужна, просто введите в поисковой строке сервиса «free fonts». Хотя коллекция не столь впечатляющая, как у Behance, здесь вы найдете немало современных, рукописных и антикварных шрифтов.

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

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

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

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

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

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

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

Почему шрифты вашего сайта имеют значение?

От чтения у вас болят глаза, правда?

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

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

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

Согласно исследованию JOSTOR, 70% потребителей считают, что большая часть рекламы не соответствует действительности, и стремятся только убедить потребителей покупать то, что им не нужно.И это несмотря на то, что компании ежегодно тратят на рекламу миллиарды.

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

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

Улучшить читаемость

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

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

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

Изменяйте размеры, вес и цвета, в основном, для подзаголовков и заголовков. Основной текст должен быть между 10 и 12 декабря.

Font также влияет на то, как читатели реагируют на ваш контент.

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

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

Исследование

Nielsen Norman Group показывает, что люди читают онлайн-контент по горизонтали слева направо, прежде чем перейти в крайнее левое положение. За каждым движением вниз следует меньшее движение по горизонтали с рисунком типа F.

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

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

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

Font влияет на общий вид вашего сайта.

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

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

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

Пример веб-сайта с отличными шрифтами

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

Теперь мы подошли к 10 лучшим шрифтам для вашего сайта. Давай проверим.

1. Times New Roman

Times New Roman, новая версия шрифта Times, является одним из наиболее часто используемых шрифтов на устройствах Windows.

Times New Roman в действии

2.Арво

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

Шрифт Arvo в действии

3. Монтсеррат

По словам основателя Джульеты Улановски, шрифт Montserrat призван «спасти красоту городской типографики в первой половине 21 века».Шрифт без засечек назван в честь Монтсеррат в Буэнос-Айресе, где проживает основатель.

Шрифт Montserrat в действии

4. Lato

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

Lato в действии

5. Roboto

Roboto — это собственный продукт Google. Самый загружаемый шрифт в Google Fonts — умный и стильный, удобный и профессиональный. Этот шрифт используется на устройствах Chrome OS и Android.

6. Открывается Sans

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

Open Sans в действии

7. Helvetica

Helvetica — фаворит среди дизайнеров, потому что он простой, нейтральный и идеально подходит для любого бизнеса или отрасли.Вот почему его используют самые популярные бренды, такие как BMW, Motorola и Jeep. Вы не ошибетесь с этим, независимо от вашего вида деятельности.

Helvetica в действии

8. Libre Baskerville

Опросы

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

Разработанный Пабло Импаллари, вы можете бесплатно получить шрифт с открытым исходным кодом из шрифтов Google.Он доступен полужирным, нормальным и курсивом. Версия, выделенная жирным курсивом, отсутствует.

Libre Baskerville в действии в Victory Group

Веб-сайт Victory Group является хорошим примером бренда, демонстрирующего свою ценность, приверженность, опыт и приверженность с помощью шрифта Libre Baskerville.

9. Освальд

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

Освальд в действии

10. Лига Спартанцев

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

League Spartan в действии

Как выбрать лучшие шрифты для своего сайта?

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

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

Выберите шрифт, соответствующий вашему сообщению или фирменному стилю.

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

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

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

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

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

Выберите шрифт, соответствующий типу аудитории, которую вы хотите привлечь

Чтобы определить клиентов, на которых вы хотите ориентироваться, а также то, что им нравится, задайте себе следующие вопросы:

• На какую возрастную группу вы ориентируетесь?
• Какой пол вы предпочитаете?
• К какой профессии или социальному классу они принадлежат?
• Имеют ли они более / менее располагаемый доход?

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

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

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

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

Совет для продвинутых: проверьте производительность вашего контента

После того, как ваш контент написан, вы хотите знать, как он будет работать на странице результатов поисковой системы. Вы можете опубликовать его и подождать несколько недель, чтобы увидеть, что происходит в Google, или сразу же получить представление о том, насколько хорошо ваш контент будет работать, с помощью Content Intelligence BiQ.

Введите URL своего содержания и целевое ключевое слово в поле поиска Content Intelligence.

Content Intelligence начнет анализировать ваш контент и покажет его общую производительность. Это включает его читаемость, оценку SEO, плотность ключевых слов и многое другое.

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

WordVector SEO покажет эффективность вашего ключевого слова.В то же время «Фундаментальное SEO» сообщает вам об эффективности SEO на странице.

Они вам помогут, если вы хотите быстро оценить эффективность вашего контента. Это выявит все критические ошибки SEO в вашем контенте.

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

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

Заключение

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

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

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

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

Как выбрать лучшие шрифты для своего сайта

Последнее изменение: 01.08.2020

Время Читать:

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

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

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

Зачем нужны шрифты

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

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

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

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

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

Источник изображения: Armani

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

Источник изображения: Vogue

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

Источник изображения: Mercedes-Benz

Найдите свое вдохновение

Прежде чем выбирать шрифты, всегда полезно сначала вдохновиться. Существуют библиотеки шрифтов, которые предоставляют бесплатные шрифты, такие как Google Fonts, Font Squirrel и Font Library.

Библиотеки шрифтов

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

Источник изображения: Adobe Fonts

Что касается вдохновения для ваших шрифтов, всегда разумно следовать последним тенденциям в типографике:

Bold and Loud — Шрифты, которые производят неизгладимое впечатление на пользователей. Они идеально подходят, если вы хотите подчеркнуть индивидуальность своего бренда с того момента, как кто-то нажимает на ваш сайт. Такие шрифты обычно подходят для заголовков, но не для основного содержания сайта.

Источник изображения: Huge Inc

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

Источник изображения: Libratone

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

Источник изображения: Sea Harvest

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

Источник изображения: Creative Booster

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

Источник изображения: DaFont

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

Источник изображения: Aviva

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

Источник изображения: Behance

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

Источник изображения: Behance

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

Источник изображения: MyFonts

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

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

Следуйте своему фирменному стилю

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

Во-первых, разберитесь с символом шрифта

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

Serif — Эти шрифты содержат небольшие отметки, называемые засечками, вверху и внизу каждой буквы. Это стиль, восходящий к Римской империи, и самый известный пример — это Times New Roman, широко используемая в журналах и новостных сайтах.

Другие бесплатные шрифты с засечками, которые хорошо работают:

• Мерриуэзер
• PT Serif
• Дисплей Playfair
• Лора
• Либре Баскервиль
• Плита Zilla
• Фоллкорн
• Noticia Text

Источник изображения: New York Times

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

Другие отличные бесплатные шрифты без засечек:

• Робото
• Open Sans
• Источник Sans Pro
• Fira Sans
• Noto Sans
• Work Sans
• Аримо

Источник изображения: DripPop

Современные — Современные шрифты, такие как Futura, Century Gothic или ITC Avant Grande, создают прогрессивное и стильное настроение.Они подходят для брендов предметов роскоши, моды, игр и других творческих индустрий.

Источник изображения: SandboxVR

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

Источник изображения: Maptia

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

Источник изображения: Disney

Выберите шрифты, соответствующие цели бренда

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

При оценке цели вашего бренда спросите (свою команду) следующее:

• В чем суть нашего бренда? — Каждый шрифт вызывает разные эмоции, поэтому вам нужно выбрать шрифт, который передает ощущение, которое лучше всего представляет ваш бренд.
• Наш бизнес — это долгосрочный или краткосрочный проект? — Вам нужен шрифт, подходящий для вашего проекта.Например, если вам нужен шрифт для художественного проекта, декоративная типографика — хороший выбор. Или, если у вас есть веб-сайт финансового учреждения, вам необходимо сообщить о безопасности и надежности с помощью выбранного шрифта.
• Традиционны ли мы или нам нужно выделяться? — Классический подход с использованием шрифтов, таких как Times New Roman или Garamond, демонстрирует надежность и условность. Или, если вы хотите заявить о себе, лучше всего подойдут отображаемые шрифты, содержащие уникальные элементы.
• Мы работаем визуально или по тексту? — Решите, как вы хотите передавать информацию на своем сайте. Вы хотите визуально перенаправлять пользователей к наиболее важной информации или полагаться на свой выбор шрифтов для лучшей иерархии контента? Выбирайте шрифты соответственно.

Проверить язык

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

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

Источник изображения: Audi

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

Убедитесь, что выбранные вами шрифты содержат символы «расширенной латиницы» (Ă, Ď, Ĵ, Œ), используемые во многих европейских странах.Существует множество семейств шрифтов, которые включают многоязычную поддержку, например Alegreya, Nunito, Roboto или Quattrocento. Они включают в себя широкий спектр символов, а некоторые из них даже поддерживают кириллические буквы.

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

Играйте с сочетаниями шрифтов

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

• Playfair Display and Source Sans Pro
• Монтсеррат и Мерривезер
• Ралеуэй и Лато
• Элси и Робото
• Корбен и Нобиле
• Амарант и Open Sans
• Мерривезер и Освальд
• Танцевальный сценарий и Josefin Sans
• Sansita и Open Sans
• Балу и Монтсеррат
• Open Sans Condensed и Open Sans
• Алегрея с Лато

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

Open Sans и Roboto — Оба шрифта четкие и читаемые.Отличное сочетание, которое поможет вам выразить уникальное ценностное предложение вашего сайта.

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

Amatic SC и Josefin Sans — идеальное сочетание, если у вас есть художественный бренд. Лучше всего работает на белом или светлом фоне.Имейте в виду, что вы не должны переусердствовать с этой комбинацией. Это сделает ваш сайт трудным для чтения.

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

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

Путь к тому, чтобы стать хорошим веб-дизайнером

Бонусные подсказки

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

• Выберите дополнительные шрифты : Вы должны убедиться, что каждый шрифт будет иметь комплиментарное настроение с другим шрифтом и остальными вашими дизайнами. Как и в случае с людьми, противоположности могут привлекать внимание и в отношении шрифтов. Итак, если один из ваших шрифтов имеет отличительную индивидуальность, вы можете комбинировать его с более нейтральным шрифтом для лучшего баланса.
• Поддержание иерархии : Лучшими примерами иерархии шрифтов являются газеты и журналы. Они объединяют шрифты для различных текстовых компонентов, таких как заголовки, копии, подзаголовки и подписи к изображениям.Размер шрифта, толщина и интервал также помогают иерархии, которая позволяет пользователям намного проще просматривать.
• Подумайте о контексте : ваш дизайн и контекст сайта должны определять ваш выбор шрифтов. Все должно быть доступно для чтения независимо от размера шрифта. Контекст вашего дизайна должен соответствовать характеристикам личности вашего бренда. Это также должно относиться к гарнитурам как части их характера.
• Установить контраст : Вы можете добиться лучшего контраста шрифтов за счет их веса, интервала, размера, стиля, цвета и т. Д.Контраст может подчеркнуть отличительную роль каждого шрифта и выделить его среди других элементов на вашей странице.
• Не создавайте пары слишком похожих шрифтов : даже если у вас были самые лучшие намерения, пользователи могут подумать иначе, и они сочтут это спаривание противоречащим друг другу. Чтобы проверить, не выглядят ли ваши шрифты слишком похожими, разместите их рядом на странице и немного покоситесь, глядя на них. Если они выглядят одинаково, вам следует подумать о различиях между шрифтами и о том, следует ли использовать другой шрифт для их сочетания.
• Не используйте слишком много шрифтов : Практическое правило заключается в том, что вы не должны использовать на своем веб-сайте более двух или трех семейств шрифтов. Вам нужно обдумать свой выбор. У каждого шрифта должна быть определенная роль на вашем сайте, и если использовать не более трех разных шрифтов, все будет выглядеть на вашем сайте намного гармоничнее и упорядоченнее.

Завершение

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

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

Команда DevriX

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

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

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

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

Рекомендуемые шрифты

В настоящее время в Разделе 508 Закона о реабилитации 1973 г. не указаны требования к выбору доступного шрифта для веб-сайта. Однако Министерство здравоохранения и социальных служб США неофициально рекомендует следующие шрифты для файлов PDF: Times New Roman, Verdana, Arial, Tahoma, Helvetica и Calibri.

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

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

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

Дизайнеры, которые стремятся к максимальной разборчивости своих веб-сайтов, должны исследовать шрифты, созданные для читателей с дислексией или нарушениями зрения, такие как Read Regular, Lexie Readable и Tiresias.

Когда ничего не помогает, лучшим вариантом для доступного веб-сайта является популярный шрифт с чистым эстетическим оформлением без засечек.Некоторые из наиболее подходящих шрифтов в этом отношении — Arial, Helvetica, Lucida Sans, Tahoma и Verdana.

Другие особенности шрифтов для веб-сайтов

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

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

Бесплатное сканирование веб-сайтов

Хотите узнать, доступен ли ваш сайт? Запросите бесплатное сканирование веб-сайта.

Доступность в Пенсильвании | Шрифт Face

Содержание страницы

Общие рекомендации

Для онлайн-чтения шрифты без засечек (например,грамм. Arial, Verdana) обычно считаются более разборчивыми, чем шрифты с засечками (Times New Roman), узкие шрифты или декоративные шрифты. Декоративные и узкие шрифты, в частности, следует использовать только для заголовков и декоративных текстов.

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

Список рекомендуемых шрифтов

Ниже приведен список рекомендуемых шрифтов с примечаниями о удобочитаемости каждого из них. Шрифты доступны как на ПК, так и на Mac, если не указано иное.

Примечание. Подробные сведения о том, что улучшает читаемость, см. На веб-странице «Шрифты».

Настоятельно рекомендуемые шрифты

Шрифты	Банкноты
Вердана	Разработано для мониторов Microsoft. Многие сайты о доступности используют Verdana.
Lucida Sans (ПК) / Lucida Grande (Mac)	Относительно новый шрифт. Используется как системный шрифт Mac.
Тахома	Доступно в Microsoft
Грузия	Serif.Разработано для мониторов Microsoft.
Palatino (Mac) / Palatino Linotype (PC) / Book Antiqua (PC)	Serif. Традиционный печатный шрифт. Вес может быть небольшим.
Андика	Бесплатный шрифт без засечек от SIL, разработанный для начинающих читателей с четкими формами букв и поддержкой иностранных языков. Может также подойти читателям с некоторыми нарушениями чтения. Достань Андику.

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

Шрифты	Банкноты
Helvetica	Традиционный печатный шрифт.Доступно для Mac, Unix и более новых версий Windows. Некоторые формы букв можно перепутать.
Arial	Аналог Helvetica для Windows. Некоторые типографы предпочитают Helvetica, но в целом они похожи.
Калибри	Выпущено Windows для Office 2007 / Windows Vista. Хорошие различия между большинством символов, но высота x не особенно велика.
Требушет MS	Доступно от Microsoft.Хорошая высота по оси x, но некоторые формы букв (например, «g» и & «) считаются слишком необычными для некоторых читателей, особенно если проблема с грамотностью.
Готика века	Без засечек, немного ар-деко. Хорошая х-высота, но некоторые буквы можно перепутать. Вес легкий.
Книжник в старом стиле	Доступно от Microsoft. Традиционный шрифт с засечками, разработанный для удобочитаемости. Хорошая высота x, но может быть не на всех компьютерах.
Камбрия	Выпущено Windows для Office 2007 / Windows Vista.Хорошие различия между большинством персонажей и большая x-высота. Ширина немного уже, чем у некоторых шрифтов.
Чандара	Выпущено Windows для Office 2007 / Windows Vista. Похож на шрифт Optima с некоторыми функциями засечки.
Garamond	Доступно от Microsoft. Традиционный шрифт, но высота x относительно невелика, а вес невелик.
Times New Roman	Serif. Относительно небольшая x-высота, но в плане разборчивости неплохая.
Comic Sans	Некоторые считают его разборчивым, но также критикуют как «детский». Может быть подходящим для сайтов с более молодой аудиторией.

Декоративный: используйте только для крупного текста

Шрифты	Банкноты
Arial Черный	Доступно от Microsoft. Очень тяжелая.
Узкий Arial	Узкий шрифт, который, вероятно, слишком сжат для основного текста.
Haettenschweiler, Ударный	Доступно от Microsoft. Очень узкий и тяжелый.
Харрингтон	Доступно от Microsoft. буквенные формы очень нарядные, что может снизить скорость чтения.
Монотип Корсива	Шрифт с курсивом. Наклон курсивом может замедлить чтение.

Типографские детали

См. Раздел «Шрифты для веб-страницы», чтобы узнать больше о типографских функциях, используемых для оценки разборчивого шрифта.

Начало страницы

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

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

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

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

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

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

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

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

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

Awwwards.com рекомендует несколько веб-шрифтов Google, которые бесплатны, но могут иметь не самое высокое качество. (Однако учтите, что Microsoft Outlook не поддерживает веб-шрифты Google.) Они рекомендуют:

• Open Sans
• Josefin Slab
• Арво
• Лато
• Фоллкорн
• Абрил Фэтфейс
• Ubuntu
• PT Sans + PT Serif
• Старый стандарт TT
• Droid Sans

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

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

Рекомендации по размеру шрифта для адаптивных веб-сайтов (обновление 2021 г.)

Вы читаете «Размеры шрифтов в дизайне пользовательского интерфейса: полное руководство». Быстро переходите к другим главам: Введение · iOS · Android · Интернет · Принципы

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

Руководство по типографике для мобильных веб-сайтов

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

1. Размер основного шрифта должен составлять около 16 пикселей.

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

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

Один способ добраться:

1. Начать с 16 пикселей
2. Рассмотрите возможность уменьшения размера, если у вас (A) страница с интенсивным взаимодействием или (B) шрифт с особенно большими, легко читаемыми символами (например, Proxima Nova на изображении выше)
3. С другой стороны, вы можете быть гораздо более либеральными, исследуя размеры больше , чем 16 пикселей, но, в частности, если (A) у вас есть страница с большим количеством текста или (B) шрифт, который особенно трудно читать на заданного размера (например, Futura выше)

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

2. Размер вводимого текста должен быть

не менее 16px

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

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

Видео или этого не произошло, да ?:

Анимация любезно предоставлена ​​лихой Ste Grainer. Вы можете прочитать его статью о феномене автоматического масштабирования здесь.

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

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

Для вторичного текста — например, меньших меток, подписей и т. Д. — используйте размер на пару ступеней меньше — например, 13 пикселей или 14 пикселей .Я НЕ рекомендую уменьшать размер шрифта только на один , так как тогда его слишком легко спутать с обычным текстом. Вдобавок, когда текст менее важен, вы хотите стилизовать его так, чтобы четко передавал меньшее значение — часто используя, скажем, более светлый оттенок серого (что-то примерно на 70% ярче — хорошее место для начала. ).

4. Всегда просматривайте свои проекты на реальном устройстве

Золотым стандартом выбора размера мобильного шрифта является просмотра ваших дизайнов на реальном устройстве .Я не могу рекомендовать эту практику в достаточной степени, поскольку : ощущение дизайна мобильного приложения на экране вашего ноутбука — это на , отличающееся от того, когда вы держите его в руке. Как начинающий дизайнер, я был шокирован почти каждый раз, когда открывал на мобильном устройстве страницу, созданную мной на компьютере. Размеры шрифта, интервалы… все было не так. Так что используйте Figma Mirror или Sketch Mirror или любое другое приложение, которое вам подходит, но просматривайте свои проекты на устройстве .

5. Ознакомьтесь со стандартами Material Design и iOS.

Никогда не помешает узнать, что делают крупнейшие дизайн-системы в городе.Например:

• Размер шрифта по умолчанию в Material Design составляет 16 пикселей Roboto, а размер дополнительного шрифта — 14 пикселей (подробнее о стилях Material Design)
• Размер шрифта по умолчанию для iOS составляет 17 пикселей SF Pro, а размер дополнительного шрифта — 15 пикселей (подробнее о стилях iOS)

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

Руководство по типографике для настольных компьютеров

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

1. Полнотекстовые страницы .Статьи, блоги, новости и т. Д. Это страницы, на которых основная цель пользователя на странице — прочитать. С точки зрения взаимодействия очень мало — возможно, просто щелкнув несколько ссылок.
2. Интерактивные страницы . Приложения, которые требуют большего количества наведений, щелчков, поиска элемента в списке или таблице, редактирования, набора текста и т. Д. На странице может быть много текста, но это не то, что вы читаете, как книгу.

Нужен пример или два? Эта страница является страницей с большим количеством текста. Ваша лента на Facebook — это страница с интенсивным взаимодействием. У каждого свои проблемы, поэтому я буду рассматривать их отдельно. Имейте в виду, что оба варианта, вероятно, будут вам полезны. Страница «О программе» сумасшедшего веб-приложения по-прежнему содержит текста, . Страница «Контакты» в обычном блоге по-прежнему , много взаимодействий .

Полнотекстовые страницы

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

• 16px — абсолютный минимум для страниц с большим количеством текста
• 18px — размер шрифта лучше для начала. Вы не печатаете документ Word с одинарным интервалом; вы пишете для людей, сидящих в паре футов от мониторов десятилетней давности.
• 20px + — сначала может показаться неудобно большим, но всегда стоит попробовать в приложении для дизайна. Самый красивый и насыщенный текстом сайт в сети, Medium.com, по умолчанию имеет размер текста статьи 21 пиксель.

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

Взаимодействие — тяжелые страницы

Теперь для страниц с интенсивным взаимодействием вполне приемлемы меньшие размеры текста. Фактически, в зависимости от объема данных, которые ваш пользователь принимает одновременно, даже текст размером 18 пикселей будет неудобно большим. Посмотрите на свой (веб) почтовый ящик, посмотрите твиттер, посмотрите любые приложения, которые вы используете, для которых требуется сканирование , , а не , чтение , посмотрите приложения, которые показывают вам данных — вам будет трудно найти устойчивый абзацы текста размером 18 пикселей.Вместо этого нормой является 14–16 пикселей. Но не будет только один размер шрифта . Вероятно, будет меньших размеров для менее важных вещей и больших размеров для более важных вещей (заголовки, субтитры, субтитры и т. Д.), И все это будет объединено в гигантский солянка.

А теперь важная часть: для любой страницы с интенсивным взаимодействием размер шрифта МЕНЬШЕ определяется некоторыми нисходящими декретами («шкалы шрифтов», я смотрю на вас 😠), чем конкретными потребностями каждого фрагмента текста и взаимодействие между ними.

Например:

• Имена событий имеют размер 12 пикселей, это стиль шрифта, полностью отсутствующий в рекомендациях по материальному дизайну. Тем не менее, учитывая, что им нужно уместить 7 столбцов на экране шириной всего 1440 пикселей, а многие события довольно короткие, это идеальный выбор размера шрифта. Любое меньшее и страдает разборчивость. Чем больше, тем больше названия событий будут обрезаться слишком часто. Дизайн — это компромисс, малыш. Если вы не можете назвать компромисс, на который идете, вероятно, вы делаете его не в том месте.
• Ярлыки часов дня («12 вечера», «13:00» и т. Д.) Имеют размер шрифта: 10 пикселей. Это еще один стиль, полностью отсутствующий в рекомендациях по материальному дизайну. Тем не менее, горизонтальное пространство имеет большое значение. Каждое событие в любом случае помечается временем начала. Почему , а не , уменьшают размеры левых этикеток?
• Даты имеют размер 48 пикселей. Опять же, не нашел в руководствах по материальному дизайну. В данном случае я не знаю, почему они не использовали 45 пикселей, что соответствует официальному размеру «Дисплея 2», но я скажу следующее: если бы это был я, я бы, вероятно, сделал размер 48px жирным шрифтом, а здесь жирный шрифт будет проблемой.Это привлекло бы тоже много внимания. Так что я бы все равно изменил стиль.

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

Как можно меньше шрифтов

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

Давайте разберемся:

1. Размер шрифта заголовка . Это самый большой размер шрифта на вашей странице. Используйте его для заголовка или заголовков разделов. Если у вас есть заголовки и заголовков разделов, вы почти наверняка должны использовать здесь два разных размера шрифта.
2. Размер шрифта по умолчанию . Это наиболее распространенный размер шрифта на вашей странице, и его следует использовать для всего основного текста, а также для большинства элементов управления, таких как текстовые поля, раскрывающиеся списки, кнопки и меню.Основная ошибка в заголовке, которую делают здесь начинающие дизайнеры, заключается в том, что для элементов используются много размеров шрифта, которые все должны быть на один размер шрифта.
3. Размер дополнительного шрифта . Это размер шрифта — обычно примерно на 2 пункта меньше размера шрифта по умолчанию — который вы используете для менее важных деталей сайта. Вспомогательная информация и статистика, иногда подписи и т. Д.
4. Размер шрифта Tertiary / caption / label / wildcard . Очень часто вам понадобится еще один размер шрифта.Иногда это происходит из-за того, что ваша информация настолько иерархична, что вам нужен третичный стиль даже более сдержанный, чем второстепенный стиль. В других случаях вы можете использовать прописные буквы для меток или кнопок — и из-за увеличенного визуального веса прописных букв вы хотите использовать немного меньший размер для самого текста (помните: балансируйте всплывающее вверх против всплывающего вниз). Итак, этот четвертый размер шрифта является чем-то вроде подстановочного знака. Не каждому дизайну это нужно, но многим это нужно. Мое единственное предупреждение: насколько это возможно, по умолчанию используется согласованность .

Имеет смысл? Давайте двигаться дальше.

Перейти к главе 4: Принципы и ресурсы

Одна заключительная нота 😎

Если вы здесь впервые, возможно, вас заинтересует:

• Изучите дизайн пользовательского интерфейса, мой полнометражный онлайн-видеокурс по дизайну пользовательского интерфейса
• The Design Newsletter, информационный бюллетень для 50 000+ человек с оригинальными статьями по дизайну, цель которых — дать вам тактические советы по улучшению ваших навыков UX / UI.

Некоторым людям есть что сказать о новостном бюллетене.

Благодарность за информационный бюллетень по дизайну

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

Триша Литтлфилд
Основатель, TheSimpleWeb

Каждый раз, когда я получаю от вас письмо, я говорю: «Черт, это длинное письмо! Я ни за что не буду читать все это », а затем я начал читать и сказал:« Черт возьми, это чертовски блестяще », и прочитал все это.

Жан-Филипп
UX Strategist, Freelance

Подписано более 50 000 человек.
Нет спама. Отпишитесь в любое время.

отличных веб-шрифтов для вашего веб-сайта: полный список

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

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

В этой статье мы сузим ваш выбор до 19 лучших шрифтов для веб-сайтов.

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

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

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

Лучшее сочетание для этого шрифта включает шрифты без засечек, такие как Roboto, Open Sans, Montserrat и Lato. Эти сочетания дают чистый и современный основной текст для веб-дизайна.

Создавайте, создавайте и развивайте свой бизнес с Zyro

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

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

Вы можете попробовать соединить его с Times New Roman, Alternate Gothic и Pacifico.

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

Arvo — это шрифт с плоскими засечками. Он создает контраст за счет толщины обводки, что делает его идеальным для заголовков.

Для основного текста шрифты с засечками, такие как PT Sans, Open Sans и Montserrat, очень хорошо дополняют Arvo.

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

Кто не слышал о знаменитом Times New Roman? Первоначально он был разработан для лондонской газеты The Times еще в 1932 году.

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

В качестве шрифта с засечками Times New Roman предлагает отличную читаемость, поскольку шрифт хорошо работает с маленькими размерами.

По этой причине веб-сайты с длинными блоками текста, такие как блоги и редакции, хорошо подходят для Times New Roman.

Благодаря простоте шрифта без засечек Open Sans отлично подходит как для заголовков, так и для основных копий.

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

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

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

Вы можете видеть этот шрифт в паре с другими шрифтами без засечек, такими как Montserrat, Roboto и Lato.

Третий шрифт в списке — Lora.

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

Лучшее сочетание для Lora — это шрифты без засечек, такие как Montserrat и Open Sans, особенно в жирном стиле.

Этот шрифт легко читается и читается как на бумаге, так и на экране.

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

Неудивительно, что изначально Алегрея создавалась для литературы. Тем не менее, его использование расширилось.

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

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

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

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

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

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

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

Однако его также можно использовать для основного текста небольшими частями. Соедините его с другими шрифтами без засечек, такими как Open Sans и Montserrat, для дополнительного вида.

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

Поскольку шрифт предлагает широкий спектр стилей, Titillium безопасно использовать в качестве заголовка, подзаголовков и основного текста.

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

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

Zyro — самый простой способ создать сайт

На первый взгляд Exo может напоминать Titillium.

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

Exo используется для подзаголовков и основного текста из-за его плавных изгибов и четких краев.

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

Совместите Exo с другими шрифтами без засечек, такими как Roboto и Open Sans, чтобы получить аккуратный и современный веб-сайт.

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

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

Попробуйте смешать и сопоставить Монтсеррат с двумя его родственными семьями: Montserrat Alternates и Montserrat Subrayada.

Вы ищете шрифт, предназначенный для чтения с экрана? Libre Baskerville — отличный выбор.

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

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

Если вы хотите создать неподвластную времени красоту, соедините Libre Baskerville с Playfair Display в качестве заголовка.

Но если вы ищете более повседневный веб-дизайн, просто соедините Libre Baskerville с такими шрифтами без засечек, как Open Sans, Roboto или Lato.

Альтернативная готика сильна и привлекает внимание из-за своих высоких букв.

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

Чтобы дополнить буквенные формы Alternate Gothic, соедините шрифт с гарнитурами с засечками в качестве основной копии. Это сочетание создаст класс и элегантность.

Темы веб-сайтов, дополняющие этот шрифт, — туризм, путешествия и природа.

Следующим за Playfair Display и Alternate Gothic в качестве шрифта для отображения является Pacifico.Этот шрифт имеет творческий, выразительный и дружелюбный стиль.

Несмотря на то, что Pacifico выглядит забавно, при правильном соединении он создает ощущение элегантности.

Используйте его со шрифтами без засечек, такими как Roboto, Montserrat и Open Sans.

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

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

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

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

Если вы хотите создать веб-сайт с элегантным дизайном, не сомневайтесь, выберите «Малиновый текст» в качестве заголовка.Соедините его со шрифтами без засечек, такими как Montserrat или Roboto.

Стабильный шрифт без засечек, который не отвлекает. Он чистый, без каких-либо украшений и лишних деталей. Этот шрифт создает ощущение стабильности, объективности, чистоты и современности.

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

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

Как и многие другие шрифты в этом списке, Poppins имеет множество стилей, от тонких, очень светлых, до очень жирных и черных — каждый с курсивом.

Этот шрифт без засечек является многоязычным шрифтом компании Indian Type Foundry (ITF). Это означает, что символы подходят для индийских и латинских шрифтов.

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

Этот шрифт обычно сочетается как со шрифтами с засечками, так и со шрифтами без засечек, такими как Playfair Display и Roboto.

Почему важен веб-шрифт?

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

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

Веб-безопасные шрифты раньше ограничивались шрифтами Microsoft, такими как Arial, Helvetica, Times New Roman и некоторыми другими.

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

Службы веб-шрифтов

, такие как Google Fonts, Adobe Typekit и Font Squirrel, получили широкую популярность благодаря своим безопасным веб-шрифтам.

Фирменный стиль

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

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

Каждый шрифт попадает в одну из этих четырех категорий характеристик, а именно:

• Традиционные, респектабельные, удобные и надежные — эта категория тесно связана со шрифтами из гарнитур с засечками, таких как Times New Roman, Libre Baskerville, и Alegreya .Они идеально подходят для новостных, развлекательных и информационных сайтов, а также для печати.
• Современный, современный, минималистичный и чистый — эта категория тесно связана со шрифтами без засечек, такими как Arial, Open Sans, Roboto, и Titillium . Эти шрифты лучше всего использовать для Интернета, поскольку они читаются в небольших размерах.
• Сильный, стабильный и определенный — эта категория тесно связана со шрифтами современных гарнитур и шрифтов с плоскими засеками, такими как Playfair Display, Arvo, Quicksand, и Pacifico .Современные шрифты делают ваш сайт прогрессивным, стильным и шикарным. Гарнитуры Slab-serif отлично подходят для заголовков из-за их толстого и блочного стиля с засечками.
• Романтичный, элегантный, красивый и винтажный — эта категория тесно связана с такими шрифтами, как Crimson Text, Pacifico, Lora, и Playfair Display . Они также могут происходить от шрифтов с засечками. Однако обычно они написаны курсивом — отсюда элегантность и винтажный вид.

Читаемый

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

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

Гибкий

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

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

Дополнительный

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

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

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

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

Конструктор веб-сайтов

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

Лучшие шрифты для веб-сайтов безопасны для Интернета

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

Разные шрифты вызывают разные эмоции.

Чтобы сообщить о надежном и авторитетном веб-сайте, рассмотрите возможность использования шрифтов с засечками, таких как Playfair Display, Times New Roman, Lora, Alegreya, Libre Baskerville, или Crimson Text .

Если вы хотите создать чистый и минималистичный веб-сайт с разборчивой основной копией, используйте шрифты без засечек, такие как Arial, Open Sans, Roboto, Titillium, Exo, Montserrat, PT Sans, или Poppins .

Для более декоративных заголовков используйте четкие и четкие шрифты, такие как Arvo, Comic Sans, Alternate Gothic, Pacifico, или Dosis .

Знайте свой бренд, выберите голос, а затем подумайте о своем шрифте.

Мы надеемся, что теперь вы готовы выбрать шрифт для своего веб-сайта.Удачи.

Zyro — самый простой способ создать сайт

.