Какие шрифты использовать на сайте: Самые лучшие Гугл шрифты для сайта или ПК – ТОП 15

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

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

Если линия слишком короткая, глазу придется слишком часто возвращаться, нарушая ритм читателя. Если строка текста слишком длинная, пользователю будет сложно сосредоточиться на тексте. Изображение: Material Design Для мобильных устройств вы должны использовать 30–40 символов в строке. Ниже приведен пример двух сайтов, просматриваемых на мобильном устройстве. Первый использует 50-75 символов в строке (оптимальное количество символов в строке для печати и для компьютера), а второй использует оптимальные 30-40 символов.

Пользователи получат доступ к вашему сайту с устройств с различными размерами экрана и разрешениями. Большинство пользовательских интерфейсов требуют текстовые элементы различных размеров (текст кнопок, метки полей, заголовки разделов и т. д.). Важно выбрать шрифт, который хорошо работает в разных размерах, чтобы обеспечить читаемость и удобство использования в любом размере. Шрифт Roboto от Google Убедитесь, что шрифт, который вы выбираете, может быть разборчивым на меньших экранах!

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

Во многих шрифтах слишком легко перепутать аналогичные формы букв, в частности “i” и “L” (как видно на изображении ниже), и маленькие расстояния между буквами, например, когда “r” и “n” выглядят как “m”. Поэтому, выбирая шрифт, обязательно проверяйте его в разных контекстах, чтобы убедиться, что это не вызовет проблем у ваших пользователей.

Текст, целиком написанный прописными буквами – отлично подходит в контекстах, которые не подразумевают чтение (например, акронимы или логотипы), но, когда ваше сообщение подразумевает чтение, не заставляйте своих пользователей читать текст, написанный заглавными буквами. Как уже упоминалось Майлсом Тинкером, в его знаковой работе “Легкость печати”, текст целиком написанный в верхнем регистре значительно замедляет скорость просмотра и чтения по сравнению с нижним регистром.

В типографике у нас есть специальный термин для расстояния между двумя строками текста – лидинг (leading) или межстрочный интервал. Увеличивая межстрочное расстояние, вы увеличиваете вертикальный пробел между строками текста, как правило, улучшая читаемость в обмен на ценное пространство экрана. Как правило, для хорошей читаемости межстрочный интервал должен быть на 30% больше, чем высота символов. Хорошо подобранное межстрочное расстояние улучшает читабельность. Изображение: Microsoft Было доказано, что правильное использование пробела между абзацами повышает понимание до 20%, как отметил Дмитрий Фадеев. Умение использовать пустое пространство заключается в том, чтобы предоставить пользователям легко усваиваемое количество контента, а затем удалять посторонние детали. Слева: Текст, строчки которого почти перекрывают друг друга. Справа: Хорошо подобранные интервалы способствуют читабельности. Изображение: Apple

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

• Маленький текст должен иметь коэффициент контрастности не менее 4,5: 1 по отношению к фону.
• Большой текст (при 14 pt жирный / 18 pt обычный) должен иметь коэффициент контрастности по крайней мере 3: 1 по отношению к фону.

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

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

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

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

Типографика существует, чтобы обеспечивать контент

Типографика должна обеспечивать контент таким образом, чтобы она никогда не добавляла когнитивную нагрузку на пользователя. У вас есть собственные советы по типографике в веб-дизайне? Или вы хотите получить более подробную информацию о упомянутых выше вопросах? Дайте мне знать в комментариях ниже! Подписывайтесь на UX Planet: Twitter | Facebook

Перевод статьи Nick Babich

Типографика: это что, подробный гайд

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

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

В статье разбираем, что такое типографика, а также на что обращать внимание при выборе шрифтов.

Нет времени читать статью? Найдите ее в нашем телеграм-канале и сохраните себе в «Избранном» на будущее.

Содержание статьи

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

Улучшает пользовательский опыт
Повышает узнаваемость бренда
Влияет на принятие решений

Элементы типографики и их влияние на сайте

Шрифты и гарнитуры
Интерлиньяж, кернинг, трекинг
Цвет
Иерархия
Консистенция
Пустое пространство

Несколько советов по подбору шрифтов для сайта

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

Заключение

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

Давайте немного углубимся в то, почему на типографику обращают внимание.

Улучшает пользовательский опыт

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

Повышает узнаваемость бренда

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

Она влияет на tone of voice компании: для тона важно не только то, как текст написан, но и в каком виде он представлен пользователю.

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

Влияет на принятие решений

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

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

Читайте также: Как создать идеальное руководство по фирменному стилю

Элементы типографики и их влияние на сайте

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

Шрифты и гарнитуры

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

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

Шрифт бывает четырех основных видов: c засечками, без засечек, рукописный и декоративный.

Интерлиньяж, кернинг, трекинг

Это аспекты типографики, которые напрямую связаны с интервалами.

• Интерлиньяж — это пространство между строками.
• Кернинг — пространство между двумя отдельными символами или буквами.
• Трекинг относится к общему межбуквенному интервалу всего слова или фрагмента текста.

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

Цвет

Хотя цвет текста ограничен в большинстве типов печати, на онлайн-пространство это никак не влияет.

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

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

Читайте также: Как использовать цветовой круг Иттена

Иерархия

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

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

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

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

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

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

Читайте также: Что такое графический дизайн и как он влияет на бизнес

Консистенция

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

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

Вот наши советы:

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

Пустое пространство

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

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

Читайте также: Что такое визуальная коммуникация: как она работает и чем отличается от графического дизайна

Несколько советов по подбору шрифтов для сайта

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

Убедитесь, что шрифты соответствуют тону бренда

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

Избегайте использования заглавных букв

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

Ранжируйте шрифты по важности

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

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

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

Вторичный шрифт используют:

• для описания товаров,
• статей в блоге,
• описания компании и т. д.

В общем, им будет заполнено 90% информации на сайте. Текст (особенно лонгриды) невозможно читать, если там есть засечки или он вовсе выглядит рукописно или декоративно. Лучше использоваться что-то, что не будет раздражать глаза, например Arial.

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

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

Следите за длиной строки

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

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

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

Читайте также: Какой шрифт самый лучший для чтения с экрана?

Заключение

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

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

Высоких вам конверсий!

21-06-2022

Web — Используемые шрифты

Feel Goodsc. 2022

Предоставил Илья Наумов

Сайт студии don Gatac.

2021

Внесено вклад в Natacha Oliveira

Parks Alliance of Louisville2021

. Вклад Via Studio

. 2019

Предоставлено Контур

Readymag Websites of the Year 20222022

Contributed by Readymag

Festival Teal Brasil2022

Contributed by ESTUDIO CRU

Festeme Festival2022

Предоставлено Tiquismiquis Club

Сайт школы каллиграфии Артияc. 2022

Contributed by Andrij Shevchenko

Bolimówek House2022

Contributed by TINGE Studio

Kristin Peake Interiors website2020

Contributed by Kontour

Punch portfolio веб-сайт2022

Предоставлено Кейтой Ямадой

Munkerietc.

2022

Contributed by Frode Helland (Monokrom Skriftforlag)

Nacero2021

Contributed by Jan Maack

Solani Illustration portfolio website2022

Contributed by Keita Yamada

Веб-сайт The People vs. Rubber Bullets2022

Предоставлено Гильермо Бротонсом

Norlan Whisky Glass2022

Contributed by Kontour

Medienhaus Lectures 20212021

Contributed by Jonas Gerber

The Verge (2022 rebranding)2022

Предоставлено Милошем Митровичем

Выбор персонала

Repeat2022

Предоставлено Патриком Торресом

Веб-сайт SkyFi2022

Предоставлено Гильермо Бротонсом

2022

Contributed by Mucho

Amble redesign2022

Contributed by Kilotype

Staff Pick

College Lab2022

Contributed by Studio Ping Pong

Сайт проекта «Настоящее счастье»2017

Предоставлено Эбеном Соркиным

FIT.

2018

Предоставлено Darden Studio

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

Предоставлено Sharp Type

Сайт дактилоскопииc. 2022

Предоставлено Пэтом Холмом

ребрендинг c. 2019

Предоставлено made in

Личность и залог Späti Holzbau2018

Предоставлено веб-сайтом Kontour

• 90C Club. 2022

  Предоставлено Стефани Басоли

  Google Frightgeist 20222022

  Предоставлено Дэвидом Гоббером

  ПИСЬМА

  Studio MIMI Identity and Websity2022

  . Вклад République Studio

  LUDIC. 2021

  Тип производства

  Брендинг колледжа искусств и дизайна Мураc. 2020

  Предоставлено Kontour

  Веб-сайт Etribes2021

  Внесено в эксплуатацию Emtype Foundry

  Gurudutt Perichetla Portfolio Websity (2022) 2022

  , внесенный в San Atlantis

  TATTU. 2022

  Предоставлено Флорианом Рунге

  Новый европейский Баухаус. Видение из Испании 2022

  Предоставлено Милошем Митровичем

  Isodope2022

  Contributed by F37®

  TeaTime Pictures branding2020

  Contributed by Tylor Reimer

  Layer Performance landing page2022

  Contributed by Jonas Pelzer

  Для сайта Исландии 2020

  Предоставлено Emtype Foundry

  • Utrecht University website and logo2022

    Contributed by Eben Sorkin

    Clam-O-Naise2022

    Contributed by Sarah Gardner

    Staff Pick

    Propel2022

    Предоставлено TYPE. WELTKERN®

    Munken Creator2022

    Предоставлено Juno Hamburg

    Pinkish Pods2022

    Предоставлено F37®

    Брендинг Great Earthc. 2021

    Contributed by Kontour

    Climes (2022 rebranding)2022

    Contributed by Cohesiv Studio

    Dragonfly website2022

    Contributed by Patrick Torres

    Здравствуй Культур! program booklet2022

    Contributed by Thomas Hirter

    KARAK branding and website2022

    Contributed by Ivo Gabrowitsch

    Staff Pick

    Boutique portfolio website2021

    Contributed by Emtype Foundry

    • Визуальная идентификация Европейского центра блокчейнc. 2021

      внесен в систему в

      Балкон2021

      Вклад в тип. Weltkern®

      Landesmuseum Nater Und Mensch Oldenburgc. 2022

      Внесли свой вклад Moritz Kleinsorge

      All Black Digital2022

      , внесенный в Teguh Arief

      Gazoline —

      Gazoline III 14

      Art 9021.0003

      Внесен в JAF

      Talk с веб -сайтом Moon2022

      • 000
        • 000
          .
          9000.
          .

          Начните свой бизнес с Shopify

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

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

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

          Каковы основы шрифтов веб-сайтов?

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

          Рейтинговые шрифты

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

          • Основной шрифт — наиболее заметный шрифт, который следует использовать в заголовках, баннерах и заголовках (крупный текст).
          • Дополнительный шрифт — используется для меньшего основного текста. Это должен быть самый читаемый шрифт.
          Шрифт
          • Accent — используется для специальных элементов на веб-сайте, таких как кнопки. Это может быть шрифт, используемый на логотипе бренда.

          Три основные категории

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

          • С засечками – с небольшими линиями на концах штрихов, называемыми засечками. Подходит для основного, среднего или акцента.
          • Sans-serif — чистые шрифты без засечек. Также подходит для любого из трех рангов шрифта.
          • Scripts — шрифты, похожие на человеческий почерк. Обычно лучше всего подходит для основных и акцентных шрифтов.

          Часто задаваемые вопросы о шрифтах для веб-сайтов

          Что важнее всего при выборе гарнитуры или шрифта?

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

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

          Достаточно ли бесплатных шрифтов для моего сайта?

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

          Могу ли я заплатить за шрифт, если захочу?

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

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

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

          Авенир

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

          Garamond

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

          Haettenschweiler

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

          Бодони

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

          Mistral

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

          Простые в создании бизнес-сайты

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

          No related posts.