Шрифти теж мають почуття - Граємо зі шрифтами - Medium
Я нещодавно помітив, як сильно впливають на мої відчуття при читанні такі, здавалося б, незначні речі, як шрифт і відстань між літерами.
Правильний вибір шрифту, а також відсутність бічних меню та спливаючих вікон значно спрощують і покращують процес читання.
Такі веб-сайти, як Medium, Signal vs. Noise та Zen Habits, це все одно, що студії йоги у світі контенту. Те, як на цих сайтах представлена інформація, утихомирює мене під час читання і дозволяє повністю сконцентруватися на історії, ні на що не відволікаючись.
Ви тільки погляньте на різницю між Meduim та Cracked:
Експонат А) Medium
Експонат Б) Cracked
Порівнявши ці два сайти, одразу розумієш, який із них змушує нас почуватися паршиво.
Поекспериментувавши з поданням матеріалів у блозі Crew, я зрозумів, що нашу схильність до певних шрифтів та компоновок можна пояснити з погляду науки.
Як ми читаємо
При читанні наші очі рухаються певним чином, слідуючи так званим шляхом сканування.
Ми ділимо пропозиції на шматочки (саккади) та паузи (періоди фіксації). Ось шлях сканування типового користувача.
Отже, чому це має значення? При проектуванні вигляду тексту важливо розуміти, як ми читаємо, адже тоді ви зможете безпосередньо вплинути на зв'язок читача з матеріалом за допомогою правильного шрифту або компонування.
Чому правильний шрифт нам приємніший
Почавши писати цей пост, я ще не був упевнений, що знайду наукове пояснення того, що ми належимо до певних шрифтів певним чином.
Я думав, що вибір шрифту — це насамперед мистецтвоз невеликою дрібкою науки.
Так мені здавалося, поки я не натрапив на дослідження психолога Кевіна Ларсона. Ларсон присвятив свою кар'єру дослідженням шрифтів і нещодавно провів у Массачусетському технологічному інституті (MIT) важливе дослідження про те, як шрифт та компонування впливають на наші емоції.
У ході дослідження двадцять добровольців – десять чоловіків та десять жінок – розділили на дві групи. Кожному гурту показали свою версію журналу The New Yorker; одній - версію, де компонування, шрифт і розташування картинки були виконані грамотно, а інший - версію з поганим компонуванням:
Дослідники з'ясували, що читачі почувалися погано при прочитанні уривка з поганим компонуванням. Іноді вони навіть хмурилися. М'яз, що зморщує брову (лат. Musculus corrugator supercilii) пов'язана з мигдалеподібним тілом мозку - зоною, що відповідає в нашому мозку за емоції.
Тим часом, тим учасникам експерименту, які читали статтю з гарним компонуванням, здалося, що вони витратили на прочитання менше часу, і вони почували себе краще.
У цих людей відзначається вищий когнітивний фокус, ефективніший розумовий процес і яскраво-виражене почуття ясності.
Дослідники зробили висновок, що добре спроектоване середовище читання не обов'язково означає вищий рівень розуміння, але справді викликає у читача приємні відчуття, надихаючи та спонукаючи до дії.
Вплив культури на переваги у шрифтах
Одним із пояснень нашого особливого ставлення до деяких шрифтів є культура.
Наприклад, шрифти Courier були створені за образом і подобою старовинних меморандумів, надрукованих на машинці:
Для багатьох людей Helvetica пов'язана з американським урядом, аджесаме цей шрифт використовується для головних декларацій.
Від цих асоціацій складно відбутися, і це потрібно враховувати при виборі шрифту. Ось як виглядав би сайт Банку Америки, якби на ньому використовувався шрифт Impact, який асоціюється з заголовками новин:
Справжній сайт Банку Америки:
Сайт Банку Америки зі шрифтом Impact (який асоціюється з заголовками новин):
Коли шрифт змінюється на Impact, Банк Америки перестає вселяти довіру.
Оскільки шрифти створюються людьми, у ньому зазвичай вкладається певний зміст. Ніхто не вибиратиме шрифт, який у його культурі асоціюється з якимось настроєм, протилежним тому, що він хоче випромінювати.
Як зробити контент кращим
Якість контенту - це, без сумніву, найважливіше, але і те, як ви уявляєте цей контент (за допомогою шрифтів і компонування) заслуговує на увагу.
Як казав французький поет Пол Клодель,
"Секрет шрифту в тому, що він каже."
Тож у якій формі уявити слова, щоб викликати в людей приємні почуття? Ось вам кілька методів, які можуть стати вам у нагоді, представлених експертами у сфері друкарні:
1) Виберіть шрифт-якір
Дизайнер шрифтів Джессіка Хіш рекомендує спочатку вибрати шрифт для контенту, який займає основне місце у вашому проекті (найчастіше це шрифт основного тексту).
Саме на підставі цього шрифту ви будете вибирати інші шрифти, наприклад, для заголовків та підзаголовків.
Шрифти із засічками (Serif fonts) — Літери з коротенькими лініями, що виходять за краї літери. Вважаються більш формальними та традиційними. Найкраще підходять для друку.
Шрифти без засічок (Sans-serif fonts).засічок. Вважаються неформальними та грайливими. Найкраще підходять для цифрового тексту.
Рукописні шрифти — Нагадують текст, написаний від руки, і часто використовуються для офіційних запрошень. Чи не ідеальні для основного тексту.
Декоративні шрифти Неформальні шрифти, які вважаються оригінальними. Найкраще підходять для заголовків, а чи не для основного тексту.
Рукописні та декоративні шрифти не дуже підходять для читання онлайн. Більшість таких шрифтів виглядають нерозбірливо, а через це падатиме швидкість читання, адже вам знадобиться більше часу на розпізнавання літер.
Ви ж не хочете, щоб читач через слово запитував себе: "Це літера 'а' чи 'е'?"
Коли ми напружуємо очі у спробі розрізнити слово, наш мозок витрачає надто багато енергії на розпізнавання.
Декоративні шрифти підійдуть для такого контенту, на який ми дивимося лише мигцем, наприклад, для логотипу. А ось прочитати кілька параграфів, написаних таким шрифтом, буде складно.
При виборі шрифту для основного тексту краще зупинитися на звичайних шрифтах із засічками або без.
Деякі експерти в області типографіки рекомендують використовувати шрифти без засічок для читання онлайн, тому що якість роздільної здатності екрана зазвичай нижче, ніж якість друку. Але, оскільки роздільна здатність екранів стає все краще і краще, шрифти із засічками стають все більш "читаними" онлайн. Сайти повні контенту, такі як Medium, використовують шрифт із засічками (можливо, щоб надати сайту відтінку друкованого видання).
Найважливіше при виборі шрифту переконатися, що букви легко помітні, щоб вашим читачам не довелося витрачати дорогоцінну розумову енергію на впізнання букв.
Хіш має один трюк, який дозволяє переконатисяу виборі шрифту. Вона радить влаштовувати обраним шрифтам Il1-тест:
2) Зробіть розмір шрифту більше 12 pt
У 1929 році було проведено дослідження під назвою "Гігієна читання". Дослідники намагалися визначити, який розмір шрифту найбільше підходить для читання. Розглядалися такі розміри шрифту: 6pt, 8pt, 10pt, 12pt та 14pt.
Дослідники дійшли висновку, що розмір 10pt – найефективніший для читання. Проте, з 1920-х років багато що у сприйнятті змінилося.
Оскільки ми все більше читаємо з цифрових носіїв, а роздільна здатність екранів стає все краще, змінюється і підхід до читання. Багато дизайнерів говорять, що розмір 16px – це новий 12px.
Недавнє дослідження показало, що шрифти більшого розміру здатні створити сильніший емоційний зв'язок.
Medium надає один із найприємніших (на мою особисту думку) просторів для читання, а вони використовують шрифт розміру 22px. На інших моїх улюблених сайтах також використовуються шрифти розміру більше 20px:
37Signals: Signal vs. Noise - 22px
Zen Habits - 21px
Так, використовувати шрифт розміром більше 30px швидше за все не найкраща ідея, але багато блогів досі пишуться шрифтом від 10px до 12px. Спробуйте трохи збільшити розмір свого тексту! Якщо у вас зараз 12px – збільште до 16px, а якщо у вас 18px – спробуйте 22px.
Ви самі відчуєте різницю.
3) Слідкуйте за довжиною рядка
Довжина рядка — це відстань, на яку простягається пропозиція на сторінці. Ідеальна довжина рядка знаходиться в інтервалі від 50 до 75 символів.
Ось приклад найдовшого рядка із сайту Zen Habits. У ній 78 символів та її довжина — близько 6,5 дюймів (близько 16,5 см):
Доведено, що така довжина рядка самимефективним чином допомагає читачам рухатися за їх “шляхом сканування”.
Якщо рядок занадто короткий, ритм читання читача постійно порушуватиметься, оскільки очам доведеться занадто часто повертатися до лівого краю сторінки.
За дуже довгих рядків читачеві складно знайти початок і кінець рядків. Тобто читачеві буде складно перевести погляд на наступний рядок і не перестрибнути випадково через кілька рядків.
Дослідження показують, що на підсвідомому рівні наш розум отримує заряд енергії, коли перемикається на наступний рядок (за умови, що це не надто часто), але ця енергія зменшується в міру того, як ми читаємо рядок.
Ось довжина рядка на вищезгаданих сайтах:
Medium - 75 символів
37 Signals: Signal vs. Noise - 76 символів
Zen Habits - 78 символів
4) Стежте за інтервалами
Адекватні інтервали між літерами дуже важливі, щоб при читанні погляд міг плавно ковзати по рядках. Чим щільніше один до одного розташовуються літери, тим складніше розпізнавати форму кожної літери.
Подивіться ще один приклад від Джесіки Хіш: вона порівнює читабельність шрифтів Helvetica і Avenir. Хіш рекомендує Avenir, оскільки в ньому інтервали більше:
Читач почувається краще, якщо інтервали налаштовані правильно. Ось 5 рекомендованих комбінацій шрифтів, наданих Google Web Fonts. У цих шрифтів хороші інтервали, які підходять для читання великих блоків тексту.
Я вирішив застосувати ці поради на практиці у розсилці Crew. Ось порівняння початкової розсилки та розсилки з оновленим дизайном:
З новим шрифтом і збільшеним розміром вміст розсилки став відчутно приємнішим.
“Люди пробачать ваші недоліки, будуть слідувати вашомуприкладу і співати вам хвалу, якщо ви винагородите їх позитивними емоціями”
Дуже важливо пам'ятати, що, незважаючи на науково-обґрунтований зв'язок між сприйняттям інформації та дизайном, ніякий дизайн не врятує, якщо поганий контент.
Спочатку добре напишіть. Потім створіть чудовий дизайн.
Мобільний додаток «Нотатки про психіку» Mental Notes
Корисний інструмент для струшування мозку. Підкидає ідей як залучити, утримати та звернути увагу користувача
Mental notes - це колода з 53 карток з описом психофізіологічних моделей поведінки людей, які лежать в основі принципів веб-дизайну. Вони допомагають дизайнерам, проектувальникам краще зрозуміти поведінку користувачів та знайти ефективні рішення при створенні дизайну інтерфейсів.