Какие шрифты: Какие шрифты лучше использовать для оформления сложных данных — Дизайн на vc.ru

Содержание

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

Перевод материала типографа Джонатана Хофлера о том, как делать презентации, аннотации, отчёты и другие официальные документы понятными и приятными для чтения.

52 135
просмотров

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

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

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

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

Стратегии для маленьких шрифтов

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

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

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

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

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

Работаем со списками

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

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

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

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

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

Работа с комплектом знаков

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

С такими символами, как *, † и ‡ пользователи еще разберутся, а вот с их повторением вроде **, †† и ‡‡ — или §, || и # в зависимости от того, к чему вы привыкли в своей компании, будет уже сложнее. Если в тексте больше трёх сносок, лучше придерживайтесь всем понятного нумерованного списка в верхнем индексе.

Chronicle Text Grade 2 Pro

Супериндексы включены в каждый шрифт H&Co, у которого есть версия Pro, а также они есть в Gotham, Ringside и Inkwell. Совет: в тексте отмечайте сноски с помощью супериндексов, которые возвышаются над прописными буквами. Но в самих сносках лучше пользоваться числителем, потому что он расположен ниже. Так связь нумерации с текстом сноски лучше видна, и пункты сносок чётче визуально отделены друг от друга.

Цифры, цифры, цифры

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

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

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

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

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

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

Креативный выбор

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

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

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

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

В нашей коллекции Numbers есть шрифты Indicia, Claimcheck, Revenue и Greenback, в которых цифры имеют одну ширину, то же самое с интересными цифрами в любой насыщенности в шрифте Inkwell Blackletter.

Индивидуальные рекламно-информационные материалы бренда

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

Шрифты Office — это адаптация часто используемых шрифтов от H&Co, специально созданная для использования их в таких бизнес-решениях, как Word, Excel и PowerPoint. Это те же самые семейства шрифтов, чьи ScreenSmart версии хорошо использовать для мелкого текста и чьи профессиональные комплекты знаков подходят даже для самых сложных данных.

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

А ещё эти шрифты выгружаются в формат TrueType для максимальной совместимости даже с самыми старыми операционными системами.

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

Какие шрифты использовать в рассылке | Блог Unisender

Советы

Чтобы ваши письма дочитывали до конца

Мы в Telegram

В канале «Маркетинговые щи» только самое полезное: подборки, инструкции, кейсы.

Не всегда на серьёзных щах — шуточки тоже шутим =)

Подписаться

Станьте email-рокером 🤘

Пройдите бесплатный курс и запустите свою первую рассылку

Подробнее

Шрифт — это важно

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

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

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

Какие шрифты в письмах используют чаще всего

Безопасные шрифты для рассылок

4 правила выбора шрифта

Как использовать элементы стиля

Какие шрифты в письмах используют чаще всего

Сравним популярные шрифты в рассылках.

Helvetica

Шрифт №1 в Европе и США. Создан в Швейцарии в 1957 году. Простой, изящный, нейтральный и универсальный. Без засечек. Helvetica — самый популярный шрифт в айдентике мировых брендов. Toyota и Skype, McDonalds и Nestle выбрали его для общения с потребителями.

Преимущества Helvetica — простота и гармоничность. Шрифт идеален, если хотите понравиться всем.

Arial

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

Оба выставлены по умолчанию в популярных почтовых сервисах: например, Apple Mail использует Helvetica, Gmail — Arial (если браузер не поддерживает Arial, происходит автоматическое переключение на Helvetica).

Кириллицу Arial и Helvetica создали англоговорящие шрифтовики, и они учли не все особенности языка. Некоторые буквы выглядят идентично (п-л, ы-ь, ц-и, ч-н).

Не рекомендуем Arial и Helvetica в длинных текстовых письмах. Будет выглядеть стильно, но однообразно.

Georgia

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

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

Verdana

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

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

Times New Roman

Разработан в 1932 году специально для лондонской газеты The Times. Популярен в России, особенно в официальных документах, коммуникациях государственных органов и вузов.

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

«Безопасные» шрифты для рассылок

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

Без засечек:

  • Arial
  • Arial Black
  • Tahoma
  • Trebuchet MS
  • Verdana

С засечками:

  • Courier
  • Courier New
  • Georgia
  • Times
  • Times New Roman

Многие популярные почтовики постепенно добавляют поддержку веб-шрифтов. Например, Gmail и Apple Mail.

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

Ах, да… Десктоп-версии Outlook будут переводить любой шрифт в Times New Roman. С этим можно бороться, если вы немного разбираетесь в верстке. Добавляем в email этот код:

<!--[if mso]>
<style type=”text/css”>
. fallback-text {
font-family: Arial, sans-serif;
}
</style>
<![endif]-->

А затем используем класс «fallback-text», когда нужно избавиться от стандартного Times New Roman:

<td class=”fallback-text”h4">Поделиться

СВЕЖИЕ СТАТЬИ

Другие материалы из этой рубрики

Не пропускайте новые статьи

Подписывайтесь на соцсети

Делимся новостями и свежими статьями, рассказываем о новинках сервиса

«Честно» — авторская рассылка от редакции Unisender

Искренние письма о работе и жизни. Свежие статьи из блога. Эксклюзивные кейсы
и интервью с экспертами диджитала.

Оставляя свой email, я принимаю Политику конфиденциальности

Наш юрист будет ругаться, если вы не примете :(

Как запустить email-маркетинг с нуля?

В бесплатном курсе «Rock-email» мы за 15 писем расскажем, как настроить email-маркетинг в компании. В конце каждого письма даем отбитые татуировки об email ⚡️

*Вместе с курсом вы будете получать рассылку блога Unisender

Оставляя свой email, я принимаю Политику конфиденциальности

Наш юрист будет ругаться, если вы не примете :(

Как узнать, какие шрифты используются на веб-сайте • WPShout

Фред Мейер

/
Обновлено: 4 апреля 2023 г.

Опубликовано в: Краткие руководства
Сложность: Начальный, Средний

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

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

Вот демо-видео:

А вот текстовое резюме:

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

  1. Откройте инспектор браузера. В Chrome или Firefox вы можете сделать это, щелкнув правой кнопкой мыши и выбрав «Проверить». Ctrl+Shift+I (Windows) или Cmd+Shift+I (Mac) также должны работать.
  2. Перейдите к элементу, шрифт которого вас интересует. Вы можете сделать это, либо щелкнув «Проверить» на самом элементе, либо перейдя к элементу в объектной модели документа (DOM) инспектора браузера, его карте следующих HTML-элементов, составляющих сайт. (Обратите внимание на то, какие разделы страницы подсвечиваются при перемещении по DOM.)
  3. Найдя правильный элемент, перейдите на вкладку «Вычислено» в инспекторе и прокрутите вниз до семейства шрифтов  атрибут. Там указан шрифт элемента.

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

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

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

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

  1. Загрузите изображение с сайта (щелкните правой кнопкой мыши > «Сохранить изображение как» или другим способом) и загрузите его в интерфейс Matcherator.
  2. Используйте синее поле выбора, чтобы выбрать часть изображения, шрифт которого вы хотите проанализировать. (Вы должны увидеть, как программа начинает размещать маленькие «рамки» вокруг вещей, которые она идентифицирует как символы шрифта.)
  3. Нажмите «Сопоставить!»

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

 

Спасибо, что прочитали, и идите разбирайтесь со шрифтами для веб-сайтов!


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

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

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

Начнем!

Подпишитесь на наш канал Youtube

  • 1
    Почему вы можете захотеть проверить, какой шрифт использует веб-сайт

  • 2
    Как узнать, какой шрифт используется на веб-сайте (3 доступных метода)

    • 2. 1
      1. Идентифицируйте шрифты с помощью инструмента «Инспектор браузера»

    • 2.2
      2. Найдите шрифты через расширение для браузера

    • 2.3
      3. Обнаружение шрифтов в изображениях

  • 3
    Заключение

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

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

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

Как узнать, какой шрифт использует веб-сайт (3 доступных метода)

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

1. Определение шрифтов с помощью инструмента Browser Inspector

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

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

.

Если вы предпочитаете использовать сочетание клавиш, попробуйте Ctrl+Shift+I для Windows или Linux. Если вы используете Mac, эквивалент Cmd+Shift+I.

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

.

Затем перейдите на вкладку Computed и найдите «семейство шрифтов»:

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

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

2. Поиск шрифтов через расширение браузера

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

Некоторые такие надстройки включают:

  • Fontanello:  Это бесплатное расширение позволяет найти название шрифта, толщину, стиль и т. д., выделив его и щелкнув правой кнопкой мыши во время просмотра.
  • WhatFont: Еще больше упрощая определение шрифта, WhatFont позволяет просматривать название шрифта, просто наведя на него курсор.
  • CSS Peeper: Созданное специально для веб-дизайнеров, это расширение немного более надежное и может предоставить вам дополнительные сведения из кода CSS веб-страницы.

Однако каждое из этих расширений имеет различную поддержку браузера. WhatFont доступен для Firefox, Chrome, Safari и Internet Explorer. Fontanello, с другой стороны, доступен только для Firefox и Chrome. CSS Peeper — это специальный инструмент для Chrome, который вы не сможете использовать ни с какой другой платформой.

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

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

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

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

3. Обнаружение шрифтов в изображениях

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

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

Затем он вернет страницу результатов с несколькими шрифтами, которые похожи, если не полностью совпадают с тем, который вы пытаетесь идентифицировать:

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

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

Заключение

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

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

  1. Определите шрифты с помощью инструмента инспектора браузера.
  2. Поиск шрифтов с помощью расширения браузера, например WhatFont.
  3. Обнаружение шрифтов в изображениях с помощью WhatTheFont.