Знаменитые дизайнеры vs научные исследования про читаемость шрифтов / Хабр

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

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

Мы в Тинькофф сравнили мнение знаменитых дизайнеров и ученых о том, какие шрифты легче читать: антикву(с засечками) или гротески(без засечек).


Почему я вообще этим занялась

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

«Да это же очевидно»,  —  подумала я и открыла «Википедию»:

Согласно общепринятому мнению [источник не указан 1902 дня], засечки направляют движение глаз вдоль строк при чтении крупных массивов печатного текста. Oни способствуют связи букв в единую линию, облегчая визуальное восприятие и удобочитаемость текста.

В «Википедии» пруфов не было, и я пошла к книжному шкафу.

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

Юрий Гордон «Книга про буквы от Аа до Яя», Откуда взялись и зачем нужны засечки, стр. 51

Вообще, личный взгляд Юрия Гордона  —  это довольно веский довод, но все-таки. Я поискала в статьях Яна Чихольда:

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

Ян Чихольд «Облик книги», О типографике, стр. 21


Ян Чихольд

Ну ладно, старинные мастера опирались на чутье, но, может, кто-то посовременнее объяснит с пруфами?
Сергей Сурганов, арт-директор «Медузы», дизайнер Notion:

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

Инструкция арт-директора «Медузы» Сергея Сурганова «Как выбрать шрифт»

Короче, у нас три довода:
«согласно общепринятому мнению»,
«на мой взгляд»,
«считается»,

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

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

Понятия: разборчивость vs читаемость

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

Засечки направляют взгляд по строке

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


Видео про саккады

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

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

Все различия оказались незначительными. Ой.

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


Шрифты с засечками и без засечек одинаково «держат» строку

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

Quantitative Analysis of Font Type’s Effect on Reading Comprehension Jaret Screws Clemson University Clemson, United States

Детям, в отличие от взрослых, легче читать шрифт без засечек

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


Детские азбуки с первой страницы Гугла

Ученые взяли 80 детей 10 лет и 80 детей на два года старше, попросили их найти в тексте нужное слово (скрининг-тест) и измерили, как быстро у детей получилось это сделать.


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

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

Performance differences between Times and Helvetica in a reading task Rudi W. De Lange, Henry L. Esterhuizen and Derek Beatty

А что насчет ребят с плохим зрением?

Исследований про слабовидящих людей и шрифт довольно много.
В Journal of Visual Impairment and Blindness было опубликован обзор 18 исследований, в которых общее количество испытуемых было более 1500 человек.
Вывод исследователей: для людей с плохим зрением шрифты без засечек, такие как Arial, Helvetica, Verdana или Adsans, более читаемые, чем шрифты с засечками.

The Legibility of Typefaces for Readers with Low Vision: A Research Review Elizabeth Russell-Minda, Jeffrey W. Jutai, J. Graham Strong, Kent A. Campbell, Deborah Gold, Lisa Pretty, and Lesley Wilmot.

Шрифты и дислексики

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


Страница, которая показывает текст так, как его видят люди с дислексией, на dyslexiarf.com

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

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

На первое место по читаемости и у обычных людей, и у дислексиков вышел шрифт без засечек Arial (интересно, что схожая с ним до неразличимости Helvetica — на четвертом месте). Зато на втором месте неожиданно оказался моноширинный брусковый Courier.


Предпочтения же людей вообще однозначные: топ-3 шрифтов и у дислексиков, и у недислексиков — без засечек.

The Effect of Font Type on Screen Readability by People with Dyslexia
LUZ RELLO and RICARDO BAEZA-YATES

Эмоции и шрифты

Может, дело не в скорости чтения и разборчивости, а в особом настроении, которое создают шрифты с засечками?
В Лаборатории исследований юзабилити ПО в Wichita State University попробовали разобраться, как люди воспринимают шрифты.
Участники заполняли опросник, где указывали, какими, по их мнению, характеристиками обладают разные шрифты.

Интересно, что шрифты с засечками оказались первыми в рейтинге как формальные, «взрослые», практичные и стабильные.

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

Perception of Fonts: Perceived Personality Traits and Uses By A. Dawn Shaikh, Barbara S. Chaparro, & Doug Fox

Для другого исследования взяли два сатирических отрывка из «Нью-Йорк Таймс»: один — о проблемах правительства, другой — о политике в образовании. Их напечатали в шрифтах Times New Roman и Arial одинакового размера и показали в случайном порядке 102 студентам университета, которые оценили их с помощью заранее заданных прилагательных.
Сатирические статьи, напечатанные Times New Roman, воспринимались как более смешные и злые, чем напечатанные Arial.

Emotional and Persuasive perception of fonts Samuel Juni, Julie S. Gross

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

Значит ли это, что все шрифты без засечек — безликие? Вообще, нет, но нейтральный шрифт с засечками менее нейтральный, чем нейтральный шрифт без засечек.

Читаемость шрифтов на электронных экранах

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


Разные типы сглаживания

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

Интересно, что самым читаемым оказался экранный шрифт со сглаживанием (а не напечатанный), и это шрифт без засечек — Arial. Второй после него  —  Verdana, тоже без засечек.
Зато без сглаживания лучше всего читалась Georgia  —  шрифт с засечками.

A STUDY OF THE READABILITY OF ON-SCREEN TEXT By Eric Michael Weisenmiller

Выводы

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

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

Если вас заинтересовала эта тема, можете провести собственное исследование: поискать на scholar.google.ru по запросу типа Font readability research. Там можно найти исследования и про оптимальный межстрочный интервал, и про восприятие разных начертаний шрифта, и про различия читаемости в зависимости от размера.

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

20 лучших веб-шрифтов HTML в 2022 году

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

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

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

Но самое главное, это должны быть веб-безопасные шрифты.


Что такое безопасные веб-шрифты?

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

Должен ли я использовать безопасные веб-шрифты для своего веб-сайта?

Краткий ответ: Конечно.

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

Вот 20 лучших веб-шрифтов HTML в 2022 году.


Arial (sans-serif)

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

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


Times New Roman

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


Courier New

Courier new – это старый газетный HTML-шрифт. Это правильный выбор для вас, если вы ищете простой моноширинный шрифт.


Arial Black (sans-serif)

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


Arial Narrow

Arial Narrow — один из 38 стилей семейства шрифтов Arial. По сравнению с исходным шрифтом этот стиль предлагает более гладкий дизайн.

Буквы кажутся узкими и сжатыми, с небольшим пространством между ними. Это делает Arial Narrow отличным выбором для минималистичных веб-сайтов.

Отличные варианты сочетания шрифтов включают более жирные шрифты без засечек, такие как Verdana и Geneva.


Candara

Candara впервые стала популярной благодаря ОС Microsoft Vista для улучшения читаемости на ЖК-дисплеях.

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

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


Verdana (sans-serif)

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


Garamond

Это тип шрифта старой школы, который впервые использовался в Париже 16-го века.


Times

Times — это хорошо читаемый шрифт с засечками благодаря заметному контрасту и сжатому стилю.

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

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

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

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


Georgia

Georgia — это настоящий веб-шрифт с простой линией без засечек и большим верхним размером. Буква почти вытянута, что облегчает чтение онлайн-шрифта.


Trebuchet MS (sans-serif)

Trebuchet MS – это еще один веб-безопасный шрифт без засечек, разработанный корпорацией Microsoft в 1996 году. Он обычно используется для основного текста многих веб-сайтов и может стать надежной альтернативой шрифту без засечек на вашем сайте. Он также может выглядеть не так «просто», как Arial.


Bookman Old Style

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


Helvetica

Helvetica — универсальный HTML-шрифт, поскольку его чистый дизайн подходит для любого типа дисплея.

Это популярный шрифт без засечек, используемый многими известными брендами. Например, Jeep, Microsoft, Motorola и BMW используют этот шрифт для своих логотипов.

Помимо этого, правительство США также использует Helvetica в своих налоговых формах.

Furthermore, this font type is designed for small size uses such as text displayed on e-readers and mobile devices.


Courier

Courier — самый известный шрифт в классификации шрифтов с засечками — он предустановлен во всех операционных системах.

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

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


Comic Sans MS

Comic Sans MS — шрифт для несерьезного письма. Он в основном используется для передачи шуток и несерьезных литературных материалов.


Didot (serif)

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


Palatino

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


Geneva

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

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


Calibri

Calibri — широко используемый и популярный шрифт. Это шрифт по умолчанию для различных известных программ, таких как пакет Microsoft Office и Google Docs.

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

Кроме того, Calibri работает с текстом самых разных размеров. Он очень разборчив и подходит как для цифровых, так и для экранных дисплеев.

Благодаря чистому дизайну этот шрифт подходит для всех типов веб-сайтов.


Optima

Optima черпает вдохновение в классических латинских заглавных буквах. Он используется для передачи элегантности благодаря большому интервалу и дополнительным штрихам.

С Optima у вас также есть возможность определить интервал между каждым символом.

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

Optima лучше всего подходит для использования на дисплеях, что можно найти в логотипах таких элитных брендов, как Estée Lauder и Marks and Spencer.


Заключение

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

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

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

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

Old Newspaper Types Шрифт Скачать БЕСПЛАТНО и похожие шрифты 019

Бесплатно для личного и коммерческого использования

Скачать шрифт

5

28

голосов

  • Бесплатно для коммерческого использования
  • Basic
  • Sans Serif
  • Размытый
  • Старый английский язык
  • Пишущая машинка
  • Кисть