Знаменитые дизайнеры 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 человек, у половины из которых была дислексия.
На первое место по читаемости и у обычных людей, и у дислексиков вышел шрифт без засечек Arial (интересно, что схожая с ним до неразличимости Helvetica — на четвертом месте). Зато на втором месте неожиданно оказался моноширинный брусковый Courier.
Предпочтения же людей вообще однозначные: топ-3 шрифтов и у дислексиков, и у недислексиков — без засечек.
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
- Размытый
- Старый английский язык
- Пишущая машинка
- Кисть
Манфред Кляйн Скачать шрифт
Old Newspaper Types можно бесплатно с FontGet. Old Newspaper Types — это бесплатный шрифт для коммерческого использования, созданный Манфредом Кляйном. Old Newspaper Types — это шрифт кисти, который можно использовать на любом устройстве, таком как ПК, Mac, Linux, iOS и Android. Для этого шрифта доступен 1 стиль ( Старые газетные шрифты).
Тест-драйв Глифы Лицензия Витрина
Фильтры
Old Newspaper Types
Old Newspaper Types 9009 90 T0TF 9004 Download
Шрифты типа Old Newspaper Types
Barlos Random
Манфред Кляйн
1
Исторический Санс
Runsell Studio
2
Курительная текила
GemFonts
1
Хансиф
Каутсар Рахади
90Лино ЛеумИнверс
Манфред Кляйн
1
Нефть на воде
GemFonts
1
Triumph Tippa
Mieps
1
Юрин Переполнение
GemFonts
1
9
- 5
Mister Belvedere
GemFonts
1
Runish Mk
Manfred Klein
1
Паническое бегство
Манфред Кляйн
1
Веспасиан Шапки
Манфред Кляйн
1
Лейкерс
Гфонц
2
Holy Moly
Dcoxy — Грег Медина
2
Взлом дома
vladimirnikolic
6
Antaris Cf
[email protected]
1
Эрик Г.
3 Ugly0019
Манфред Кляйн
2
Филед Филед 19
GemFonts
1