ДЕНЬ 33

Про шрифт
Вчера была важная тема KPI — «надежда и опора» дашборда.

СЕГОДНЯ

Потрясающе красивый отрезок Марафона, проходящий по визуально «вкусной» местности. Говорим о шрифтах, их использовании на дашбордах с учетом иерархии. Чтобы было не скучно, добавили немного истории. На полке книга о шрифтах и еще несколько в рекомендациях. Артефакт с выбором шрифта поможет убить время и даже занять детей. Не будем терять время… Побежали.

РАЗБИРАЕМСЯ

Шрифты

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

Правила работы с шрифтами

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

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

Дополнительная информация, которая не обязательна для чтения, написана совсем небольшим шрифтом. Это может быть источник данных или фильтры на дашборде. Те, кто часто работают с отчетом, уже знают это и не обращают на это внимания. А те, кто видят дашборд впервые, прочитают все сноски и пояснения, чтобы понять все правильно.
шрифты на дашборде
Какой шрифт нужно использовать? Большинство современных шрифтов можно отнести к одному из двух классов: с засечками (serif) или без засечек (sans-serif).

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

Шрифты без засечек лучше подходят для коротких блоков текста, например, заголовков. Читатели на них обращают внимание. Дорожные знаки в Америке набираются Helvetica, шрифтом без засечек.

Советы по стилю шрифтов

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

История шрифта

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

Пиктографические знаки каждый раз придумывались заново. Чем чаще появлялся объект в пиктограмме, тем легче он узнавался: следовательно можно было упростить его форму. Для узнаваемого знака расширялось смысловое поле: круг с лучами мог быть не только солнцем, но и днем, и светом. Так произошел переход от пиктограмм к идеограммам: символам фиксированного рисунка с устойчивой ассоциацией.
визуализация
Из картинок в звуки
Со временем шел процесс фонетизации письма: знаки стали обозначать не целые понятия, а отдельные звуки речи. Стали использоваться только первые звуки названий знаков. Все иероглифические системы знаков пришли к фонетической системе записей.

Финикийцы разработали свой алфавит под влиянием египетского линейного письма или протосинайского алфавита, но сделали значительное упрощение. Они стали использовать знаки только для обозначения согласных звуков, а гласные опускали. Таким образом, египетские знаки потеряли связь с обозначаемыми предметами и стали фонограммами.
история шрифта
1 – древнеегипетские иероглифы, обозначавшие целые слова.
2 – синайское иероглифическое письмо.
3 – финикийские буквы.
4 – греческий алфавит.
Греки не имели собственного алфавита, пока не заимствовали финикийский, адаптировав его к своему языку: добавили знаки для гласных звуков и придали буквам квадратные пропорции. Финикийский алфавит был проще и удобнее любой клинописи или иероглифов. Но греческий алфавит получился еще совершеннее: он состоял из 24 букв, обозначающих как гласные, так и согласные звуки. Греческий алфавит лег в основу латинского, а тот в свою очередь послужил основой алфавитов всех западноевропейских языков.

Латинский шрифт не был постоянным — он видоизменялся и существовал в различных формах. Одна из его форм — Капитал-шрифт (от латинского «maiusculus» — «несколько больше»), это шрифт торжественных надписей на камне или металле. Его задача — долгое хранение важных событий. Шрифт не писали тростниковой палочкой по папирусу, не выдавливали в глине, а высекали в камне по намеченному контуру.

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

Капитал-шрифт не свободно написан, а выстроен: все пропорции безупречны, каждая деталь закономерна.
Для книжной письменности в Римской империи с IV по VIII века использовался унициальный шрифт — это разновидность капитального шрифта с более круглыми и ровными формами букв. Благодаря этим округлостям шрифт чертили быстрее.
На латинский рукописный шрифт влияли народы и культуры, которые завоевывали территории бывшей Римской империи. В эпоху Каролингов была проведена реформа письменности, которая стандартизировала и унифицировала шрифт во всей Западной Европе. Шрифт этого периода называется Каролингский минускул.
Антиква
шрифт антиква
С появлением печати в Европе в XV веке буквы стали менять свою форму и отходили от свободного начертания и рукописности.
В эпоху Ренессанса появился антиква — стиль шрифта с простыми и регулярными формами букв. Буквы стали выше, уже и с вертикальной осью. Увеличилась контрастность основного и соединительного штриха. Засечки стали не закругленными, а прямыми.
Один из характерных примеров новой антиквы — шрифт Bodoni.
garamond
Факт
Итальянские шрифты вдохновили Клода Гарамона на создание известного шрифта Garamond. Он разработал шрифт в середине XVI века для печати книг по заказу французского короля Франциска I. Garamond и сегодня один из самых популярных эталонных шрифтов.
гражданский шрифт
Реформа Петра I
До XVIII века русский шрифт развивался по своему, древнеславянскому, пути. Реформа Петра I и создание гражданского шрифта 1708 года должны были способствовать отрыву от консервативной культуры Руси и ее сближению с западом.
Гражданский шрифт был создан на основе сравнения и анализа разных образцов русского письма, в том числе русской скорописи. Шрифт адаптировал формы букв русского письма к принципам антиквы.
Современные шрифты

В конце XIX века появляются современные начертания шрифтов.

Выделение текста

Как еще можно влиять на восприятие текста? Использовать форматирование. Выделение главного. Цветовые контрасты для привлечения внимания. Усиление какой-либо части текста. Главное — не перестараться.

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

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

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

// Автор неизвестен

ПРАКТИКУЕМСЯ

О датасете

Датасет содержит данные о поездках в такси Нью-Йорка за 2020-2021 гг.
Задание
Найдите и исправьте ошибки в дизайне шрифтов.

Скачать задание в виде книжки Tableau
Решение задания предыдущего дня

ВДОХНОВЕНИЕ

Полезные ссылки по теме

Сегодня только практичное и краткое в ссылках о шрифтах.

Типографика

... очень краткий курс

О комбинации шрифтов для Tableau

... и их правильном поведении на дашборде

Гайд по языкам, шрифтам

... и типографике

Дизайн шрифтов

... еще немного практики

Видео

Документальный фильм о типографике и шрифте Helvetica.
Helvetica documentary, 2007

Книги

Классика по искусству шрифта и композиции от швейцарского мастера и преподавателя. Аспекты типографического дизайна (форма, пропорция, ритм, контраст, цвет, гармония) со множеством примеров от автора и студенческими работами. Листать всем.
ТИПОГРАФИКА
Эмиль Рудер

МАТЕРИАЛЫ

иконки Tableau

The Font Awesome Free Icons
for Tableau

Кладезь бесплатных иконок в одной книжке.

Наши артефакты

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

Итоги этапа

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

Бежим Марафон в команде!

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