ДЕНЬ 32
Про шрифт
СЕГОДНЯ:

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

РАЗБИРАЕМСЯ
Шрифты
Шрифт, как и цвет, формирует визуальное восприятие. Неудачное использование или плохой выбор шрифта могут испортить впечатление от визуальных работ. Почему шрифту надо уделять много внимания? Обратите внимание на городские рекламные вывески или названия магазинов – как много безвкусицы можно встретить просто гуляя по городу?
Формируем правила хорошего вкуса. В том числе и на дашбордах.
Правила работы с шрифтами
При разработке дизайна дашбордов, используйте только один шрифт (одно семейство шрифтов) и не более 3-4 размеров шрифта. Очень важно создавать иерархию шрифтов и поддерживать общую логику работы с данными.

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

Какой шрифт нужно использовать? Большинство современных шрифтов можно отнести к одному из двух классов: с засечками (serif) или без засечек (sans-serif).

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

Шрифты без засечек лучше подходят для коротких блоков текста, например, заголовков. Читатели на них обращают внимание. Дорожные знаки в Америке набираются Helvetica, шрифтом без засечек.
Иерархия шрифтов
Как еще можно влиять на восприятие текста? Использовать форматирование. Выделение главного. Цветовые контрасты для привлечения внимания. Усиление какой-либо части текста. Главное – не перестараться.

На дашбордах вы можете использовать элементы форматирования текста для того, чтобы выделить название показателя в заголовке (жирное начертание) или сделать небольшую сноску по одной из диаграмм (наклонное начертание).
СОВЕТ
Используйте темно-серый, не до конца черный, цвет для основного текста. Это придаст дашборду стиль. Такой текст лучше воспринимается аудиторией, т.к. он не настолько сильно контрастирует с белым фоном как чисто-черный.
https://logianalytics.com/dashboarddesignguide/dashboard-design-fundamentals/
Важнейшая вещь при дизайне – правильная комбинация текста и цвета. Задумывайтесь о ваших фоновых цветах и о том, как они будут гармонировать с цветом текста.
Избегайте использование темного текста на темном фоне (темно-синий, темно-розовый, темно-серый, коричневый...), точно также как избегайте светлый текст на светлом фоне. Текст должен быть контрастным.
По этому же правилу, не используйте зеленый текст на красном фоне. Это раздражает органы зрения и путает восприятие.

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

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

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

Латинский шрифт не был постоянным – он видоизменялся и существовал в различных формах. Общая его форма – шрифт Капитал (другое название Маюскул – "несколько больше") это шрифт торжественных надписей. Его задача – хранение на долгие годы важных событий. Этот шрифт не писали тростниковой палочкой по папирусу, не выдавливали в глине, а высекали в камне, по намеченному контору. Например, шрифт колонны Траяна – это Капитал. Он не свободно написан, а выстроен: все пропорции безупречны и размерены. Каждая деталь закономерна.
Шрифт колонны Траяна
Для больших религиозных или литературных текстов сформировался унициальный шрифт. В нем пытались сочетать достоинства капитального и курсивного шрифта. Быстрота начертания достигались тем, что штрихи принимали дугообразную форму и округляли углы.
Наибольшего расцвета рукописный шрифт достиг после крушения Римской империи, в эпоху Каролингов. Эту эпоху иногда называют "Каролингским возрождением". Шрифт этого периода получил название Каролингского минускула.
По мере развития культуры шрифтов, буквы все дальше отходили от свободного начертания и рукописности. Буквы становятся выше, уже. Вертикаль приобретает главенствующую роль. Увеличилась контрастность основного и соединительного штриха. Засечки уже не закругленные, а прямые.

Наиболее характерные формы новой антиквы сложились в шрифте Bodoni (Италия).
FUN FACT
Такой известный многим шрифт как Garamond – на самом деле творение Клода Гарамона – мастера эпохи французского Ренессанса 16 века. Он создал этот шрифт в 1540 для французского двора. Шрифт использовался в Королевской типографии и до сих пор считается одним из самых популярных и эталонных шрифтов.
До этого времени русский шрифт развивался по самостоятельному пути. Реформа Петра I, и создание «Гражданского шрифта» 1708 года должна была способствовать отрыв от консервативной культуры Руси и ее сближения с западом. В основе лежала русская скоропись, построенная по правилам Антиквы. С этого времени русский шрифт развивался в едином русле с латинским.
Реформа Петра I
С конца 19 века начинают появляться современные начертания шрифтов.
1890 год, Гротеск
Отказ от засечек
1880 год, Гротеск

Отсутствие засечек позволило делать буквы с разной насыщенностью
1925 год, шрифт Futura
Развитие шрифтов нового времени
1950 год, Helvetica, шрифт по которому сняли фильм
1990, шрифты цифровой эпохи: Verdana и Georgia
Главный штрих контрактов — мелкий шрифт.

// Автор неизвестен
ВДОХНОВЕНИЕ
Полезные ссылки по теме
Сегодня только практичное и краткое в ссылках о шрифтах.
... очень краткий курс
... и их правильном поведении на дашборде
... под разные устройства
МАТЕРИАЛЫ
Наши Артефакты
Помогут Вам лучше усвоить и вовремя вспомнить основные элементы методик, подходов, последовательностей действий, проверенных практик
Книги
Один пример, остальное гугль вам в помощь...
ТИПОГРАФИКА
Эмиль Рудер
Увлекательнейшее направление, где ограниченность в средствах выражения может формировать сильнейшее направление, во многом определяющее образ нашего современного мира. Листать всем.
Итоги этапа
Покопались в истории шрифтов. Посмотрели на примеры "хорошо" и "плохо" по использованию шрифтов на дашбордах. Усвоили принцип шрифтовой иерархии для практического применения навыков. Побродили по полезным ссылкам и ушли листать красивые альбомы с типографикой с мыслью "А может нарисовать свой шрифт для истории". На сегодня вроде бы все, а ошибок на дашбордах становится все меньше и меньше. Завтра разберем хиты плохих практик дашбордизма. Виз виз ура!!!
~
DATA YOGA CLUB