3 заметки с тегом

шрифт

Дизайн-совет: зачем в мире столько шрифтов

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

Я бы выделил у шрифта несколько влияющих на них аспектов.

Носитель и технология

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

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

Известный всем шрифт «Таймс Нью Роман» был создан специально для газеты Таймс. В отличие от других газет у Таймс была хорошая бумага и шрифт мог использовать это преимущество. Процитирую сайт Паратайпа:
Новый ри­сунок оп­равдал ожи­дания Мо­рисо­на, ко­торый хотел соз­дать прив­ле­катель­ный текс­то­вой шрифт с вы­сокой удо­бочи­та­емостью и од­новре­мен­но по­вышен­ной ём­костью для печати на хо­рошей бумаге. Именно такой рес­пекта­бель­ный шрифт мог и удов­летво­рить тре­бова­ния ру­ководс­тва газеты «Таймс», и со­от­ветс­тво­вать ус­ло­ви­ям про­из­водс­тва газеты, а также предс­тав­ле­ни­ям ее чи­тате­лей.
http://www.paratype.ru/arts/TimesNewRoman

Мода и исторические периоды

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

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

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

Функция: какую задачу шрифт решает

Акцидентный привлекает внимание и создает атмосферу, текстовый создаёт как можно более равномерную полосу (она называется «серебро набора»), не отвлекает от чтения и всячески ему помогает. Экранный хорошо виден на плохом старом мониторе с низким разрешением, Вердана хорошо смотрится на плохом экране в мелком. Тонкие начертания снижают шум на картах, диаграммах и помогают создать информационные слои. Навигационные обычно имеют небольшие прописные и хорошо различимые строчные. Шрифт для автомобильных номеров затрудняет их подделку: из „о“ нельзя сделать „р“ или „q“, пририсовав сбоку палочку. Есть даже шрифты для дислексиков.

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

Что будет, если ошибиться с типом шрифта:

Эстетическая: насколько шрифт красив сам по себе

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

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

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

Разные ссылки

2016   дизайн-совет   шрифт

Дизайн-совет: темная и светлая темы

Андрей Чулков спрашивает:

Какое сочетание более благоприятно для глаз с точки зрения чтения или работы с текстами — темные буквы на светлом фоне или наоборот светлые буквы на темном фоне?

Чаще говорят, что текст вывороткой (светлым на черном или темном цветном фоне) трудно читать. Правило не жесткое, так нужно не всегда, Лебедев приводит его как пример того, что в дизайне правил нет (http://www.artlebedev.ru/kovodstvo/sections/99 ).

Мне удалось найти несколько исследований.

Темный на светлом лучше, если вокруг светло

http://www.tandfonline.com/doi/abs/10.1080/00140139.2013.790485
Темные сиволы на светлом фоне лучше читаются и именно такой вариант рекомендуется для читателей всех возрастов. (здесь и далее перевод мой)

https://www.quora.com/Usability-Are-there-any-studies-regarding-readability-of-inverted-light-on-dark-schemes-in-software-design
Томас Финни из Фонтлаба: при хорошем освещении черный цвет на белом фоне предпочтительней. Однако в темноте другие решения могут быть удачней.

Там же: на типографической конференции Тайпо Берлин в мае 2016 года Данин At Typo Berlin in May 2016, Nadine Шахин из Монотайпа рассказала о результатах исследования. Если коротко, лучше черный на белом. Но ночью для водителей белый слишком яркий, поэтому лучше использовать инверсную схему. Исследование продолжается.

Дэвид Огилви в своей книге «Огилви о рекламе» пишет, что реклама, набранная вывороткой приводит к трёхкратному падению числа откликов на неё.

https://blog.tatham.oddie.com.au/2008/10/13/why-light-text-on-dark-background-is-a-bad-idea/
Bauer, D., & Cavonius, C., R. (1980). Improving the legibility of visual display units through contrast reversal. In E. Grandjean, E. Vigliani (Eds.), Ergonomic Aspects of Visual Display Terminals (pp. 137-142). London: Taylor & Francis
Темный цвет на светлом фоне читается на 26% процентов лучше, чем светлый на темном.
Джейсон Харрисон (Jason Harrison) из университета Бритиш Коламбиа объясняет эти 26% так: людям с астигматизмом (примерно 50% всех людей) трудней читать светлое на темном, такая комбинация вызывает у них затуманивание шрифта.

Наверное, есть ещё исследования про усталость от экрана, но я их не встречал.

Синий мешает спать

https://justgetflux.com/research.html
На сайте флюкса собраны исследования о том, что вечером переизбыток синего освещения мешает засыпать. Флюкс подкрашивает экран в желто-красные оттенки после заката и делает нахождение за компьютером комфортней. Проверил на себе, рекомендую.

Хотя бы минимально контрастно

Консорциум в3ц занимается в том числе вопросами доступности сайтов. Их рекомендация — контраст не менее 4.5:1 для обычного текста и 3:1 для крупного.

Мой опыт

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

Выворотный шрифт кажется немного тоньше аналогичного на светлом, поэтому ещё надо делать чуть жирнее (хорошо, если в шрифте есть достаточно начертаний). На картинке ниже у светлого на черном + шаг толщины (medium против regular).

Выводы

  1. Если светло, то светлая тема лучше читается.
  2. Ночью лучше сильно понижать яркость и использовать ночную тему.

Дизайн-совет: рубленый шрифт

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

Первый — про рубленые шрифты в книгах.

Андрей Чулков спрашивает:

Прочитал что для книг нужен рубленый шрифт, это так?

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

Традиция для книг — с засечками

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

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

Специфические книги

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

Иногда книги печатаются рубленым шрифтом из-за стилистических требований или требований моды. Например, «Новая типографика» (http://www.artlebedev.ru/izdal/novaya-tipografika-2016/) неспроста набрана именно так. Во время написания книги (1920-е годы) гротеск сам по себе олицетворял современность и эту самую новую типографику. Было бы странно набирать её «старомодным» шрифтом.

Влияние личных предпочтений

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

Для закрепления

  1. Тот, кто заявил «для книг нужен рубленый шрифт» не шарит и слишком категоричен.
  2. Книги обычно набираются шрифтом с засечками, так сложилось исторически.
  3. Значимой разницы в технических параметрах: скорости считывания, различимости, числе ошибок между шрифтами с и без засечек не выявлено.
  4. Выбор шрифта — это не всегда вопросы считывания, это ещё вопросы ощущения, стиля, настроения, передачи эпохи.

Ссылки

Вот пример исследования: http://www.sciencedirect.com/science/article/pii/S0042698905003007
Вот ещё обзор исследований: http://digilinux.ru/2013/05/13/sans-serif-legibility/

2016   дизайн-совет   шрифт