какие существуют ошибки шрифта
Ошибки при работе со шрифтами
Содержание
Вступление
Часто мы даже не задумываемся о том, как шрифты могут повлиять на посещаемость блога и сделать контент более привлекательным.
По некоторым данным, сделав ошибку с выбором цвета вашего текста, возможно в разы сократить посещаемость. Даже если вы не сделаете такую ошибку, то вероятно, что сделаете другие, которые часто встречаются.
Использование крупных шрифтов
Наиболее часто встречается проблема с размером шрифта, тут вы можете потерять половину читателей.
Если просмотреть выборочно несколько блогов, скорее всего вы увидите, что чаще всего встречается шрифт размером 12 пикселей. Иногда используют шрифт чуть меньше. Присмотритесь к премиум шаблонам, в них тоже используется шрифт размером 12 пикселей, понятно, что тоже делается не просто так.
Но есть и другое мнение. Часть экспертов говорят о том, что лучше будет использовать шрифт с размером в 16 пикселей, так как он выглядит как 12 пикселей в печатном виде.
Никаких четких правил по размеру шрифта нет, главное, чтобы текст был читаем.
Использование темного шрифта на светлом фоне
Сейчас уже прошло время, когда было много сайтов с ярко-кислотными цветами шрифта на ярких фонах, которые мало кто мог читать, но многие думали, что это очень профессионально. Но еще довольно часто используют светлый шрифт на темном фоне, что тоже не всегда нравится читателям.
Использование белого текста на черном фоне еще довольно часто встречается, но его мало кто может читать долго, так как быстро устают глаза. Кроме того, это со временем может привести к слепоте. Согласно исследованиям так можно потерять примерно половину посетителей или даже больше.
Использование правильной ширины
Ширина строки с текстом тоже, оказывается, может влиять на удобство чтения текста. Если строка оказывается длиннее 75 символов, то читателю сложнее перейти на следующую строку.
Если ширина короче 45 символов, то тут тоже возникает проблема, при переходе к новой строчке глаза не отдыхают, что, соответственно, тоже не благоприятно для чтения.
Идеальной длинной считается в 60 символов, это конечно может создать некоторые проблемы при верстке или редактировании шаблона.
Правильная высота строки
Ошибки, связанные с высотой текста встречаются довольно редко, при использовании премиум шаблонов, как правило, ничего переделывать не нужно.
Использование текста с высотой строчки меньше 130%, приводит к непривлекательному виду и усложняет чтение тем, что сложнее переводить взгляд от строчки к строчке.
Но с другой стороны, высота, используемая в редакторах, которая 200% отделяет строчки слишком далеко, что выглядит не очень презентабельно.
Выравнивание текста по левому краю
Это больше относится к редактированию текста. Если не выравнивать текст, то глазам придется каждый раз искать начало строки, что увеличит время чтения и вызовет дискомфорт при чтении.
Также часто в блогах добавляют изображения, которые должны размещаются вверху слева, чтобы удобнее было читать и не разрывать текст.
Теперь можно зайти на ваш блог и проанализировать, какие ошибки вы допустили, и исправить их.
Дополнительная информация по теме
Описание основных функция для работы с типом переменных String в Visual Basic (VBA)
Статья о том, как происходит непосредственная передача данных между пользователем и удаленным компьютером по средствам cookie
Статья о неэффективности заработка на системах активной рекламы, то есть чтении писем рассылки
Рассмотрение нескольких аксиом при разработке программного обеспечения при групповом подходе
Самые распространённые ошибки при работе со шрифтом
Существует масса ошибок которые допускают дизайнеры когда начинают работать над размещением текста, заголовок, сносок и т.п. В этой статье мы попытаемся рассмотреть наиболее частые промахи и ошибки, что бы в дальнейшем избежать этих ошибок.
Самая главная ошибка у начинающих дизайнеров – искажение пропорций шрифта. Почему-то дизайнер считает что если он, например, растянет по вертикали надпись, то станет лучше.
Эту ошибку чаще всего допускают при верстке с целью впихнуть как можно больше текста в ограниченное пространство. Начинающий дизайнер даже не подозревает какой урон он наносит читабельности текстовому блоку, который он размещает. И не подозревает что читатель скорее всего перестанет читать этот текст не дойдя и до середины. Ниже представлено два варианта одного и того же текстового блока (у одного ширина символов 75%, а у другого 100%).
Напрашивается вопрос: «А как же быть? Что делать в такой ситуации?». Ответ прост.
1. Сокращать текст.
2. Увеличивать формат изделия, либо количество страниц.
3. Экономить на других элементах (уменьшать заголовки, фотографии, поля)
Следующая ошибка – это чрезмерное уменьшение межбуквенного расстояния. Делается это обычно в тех же ситуациях, что и уменьшение ширины символа. Выглядит это художество так:
Какую колонку вам приятнее прочитать? Конечно правую, ведь там буквы не слиплись и не приходится долго высматривать и разгадывать, какие буквы там спрятаны. А в 30% Российских газет дело обстоит именно так, как проиллюстрировано слева.
Ещё одна ошибка возникает, когда дизайнер не правильно задает контур для шрифта. Чаще всего это происходит, когда надо разместить текст поверх неоднородного фона. И чтоб пол слова не сливалось с фоном, дизайнер задаёт ему контур. А такой подход всего лишь на половину правильный. Пример:
На примере прекрасно видно что зрительно выгоднее воспринимается самый правый вариант. Но как достичь такого эффекта? Ведь контур по толщине одинаковый у среднего и правого варианта.
Всё очень просто. В среднем варианте задан контур в 1,5 pt к надписи. В свою очередь этот контур съедает 0,75 pt (половина от 1.5 pt) от площади надписи и шрифт становится тоньше, а соответственно уродуется. А в правом варианте мы задали контур в 3 pt (то есть съедается 1,5 pt и столько же идёт за границами надписи), а поверх наложена та же надпись, но вообще без контура. Соответственно половина толщины контура закрывается. И получаются те же 1,5 pt толщины контура, но они уже не съедают надпись по краям.
Конечно, есть исключения из правил, например, при создании логотипа. Но каждый дизайнер должен быть абсолютно уверен в правильности своих поступков, прежде чем исказить шрифт. И помните, что в большинстве случаев после искажения, шрифт станет только уродливее.
Ошибки в оформлении текста
Рукописные шрифты выглядят лучше с использованием нижнего регистра.
Использование только верхнего регистра плохо выглядит в рукописных шрифтах.
Не использован трекинг для рукописного шрифта.
Использование трекинга в рукописном шрифте выглядит неудачно.
Используйте нижний регистр в длинных текстах.
Даже если это что-то важное.
Не используйте исключительно верхний регистр в длинных текстах, используйте его только для коротких информативных сообщений.
Положительный трекинг (разрядка) подходит для верхнего регистра и небольших заглавных букв.
Трекинг в нижнем регистре снижает разборчивость, за исключением случаев применения сжатых шрифтов.
Масштабируйте ваши шрифты пропорционально.
Ссылка: www.type-scale.com
Избегайте масштабирования на глаз.
Для передачи контраста достаточно одного приема, не злоупотребляйте.
Одного приема обычно достаточно, поэтому выделите что-то полужирным, или подчеркнутым, или курсивом, или используйте большие буквы, или увеличьте интервал между буквами, но не всё сразу.
Использованы сразу 3 приема — Увеличен размер шрифта, Полужирный курсив, Подчеркнутый — в результате текст выглядит неудачно.
Используйте выравнивание по центру только для коротких текстов.
Размер шрифта 21 pt + Междустрочный интервал 34 pt: приятно для чтения.
Размер шрифта 21 pt + Автоматический междустрочный интервал: текст выглядит слишком сжато.
Используйте выравнивание по центру только для коротких текстов.
Продолжаем разговор о способностях человека воспринимать текст и о том, как, учитывая эти нюансы, сделать текст наиболее понятным.
Я приведу примеры удачного и неудачного использования шрифтов, выравнивания текста на странице и других тонкостей.
Один и тот же рукописный шрифт будет отлично смотреться, если слово написано в нижнем регистре. А вот если будет использован только верхний регистр, шрифт становится «нечитабельным». С регистрами вообще нужно быть аккуратным. В длинных текстах Caps лучше не использовать совсем, потому что текст становится похож на листовку с агитацией. Я заметил, русскоязычные пользователи соцсетей используют Caps, чтобы текст выглядел эмоциональным. Но это хорошо, только если сообщение состоит из одного предложения 😉
С нижним регистром тоже не все так просто: в нем лучше не использовать разрядку, так теряется разборчивость слова.
Если со шрифтами разобрались, давайте расширим горизонт и посмотрим на размещение текста на странице.
При масштабировании учитывайте один важный нюанс: шрифты должны меняться пропорционально.
Располагайте текст с оптическим выравниванием полей.
Если вам нужно выделить в тексте слово или предложение, чтобы сделать акцент на нем, используйте ОДИН из возможных приемов: выделите нужное полужирным (подчеркните / выделите курсивом / используйте большие буквы ), но не все сразу.
Дайте волю фантазии и разбудите в себе художника: не стоит полагаться на автоматические функции бездушной программы. Например, выравнивайте междустрочный интервал вручную, иначе текст будет выглядеть скучно.
Не выравнивайте по центру длинные тексты — это неудобно читать (см. предыдущий пост здесь). Если вы «подгоняете» текст для колонки и выравниваете его по вертикали, используйте переносы, так текст будет смотреться удачнее.
Как видите, все просто! Удачи и вдохновения!
Знаменитые дизайнеры vs научные исследования про читаемость шрифтов
Я работаю дизайнером около 10 лет. В дизайне не очень много объективных и проверяемых законов, и когда мне нужно было что-то выяснить, я искала информацию в профессиональных книгах, блогах крутых ребят, спрашивала у знакомых арт-директоров и приставала к людям в коридорах.
А потом узнала, что ученые уже сто лет как выяснили то, про что до сих пор спорят дизайнеры.
Мы в Тинькофф сравнили мнение знаменитых дизайнеров и ученых о том, какие шрифты легче читать: антикву(с засечками) или гротески(без засечек).
Почему я вообще этим занялась
Однажды мне нужно было написать инструкцию для джунов о том, как выбрать шрифт. Я написала, что для больших текстов лучше использовать шрифты с засечками, потому что глаза меньше устают от такого шрифта и засечки помогают держать строку.
Потом пришел редактор и откомментил: «Пруфы?»
«Да это же очевидно», — подумала я и открыла «Википедию»:
Согласно общепринятому мнению [источник не указан 1902 дня], засечки направляют движение глаз вдоль строк при чтении крупных массивов печатного текста. Oни способствуют связи букв в единую линию, облегчая визуальное восприятие и удобочитаемость текста.
В «Википедии» пруфов не было, и я пошла к книжному шкафу.
На мой взгляд, шрифт с засечками меньше утомляет при долгом чтении обычных, «бумажных» изданий, чем гротеск, по двум причинам. Во-первых, засечки подчеркивают окончания штрихов, становясь дополнительными «смыслоразличителями». Во-вторых, буквы с засечками несколько сложнее по форме, поэтому сильнее отличаются друг от друга, чем гротесковые. А наш читательский глаз больше нуждается в балансе индивидуальности и унификации, чем дизайнерский, который радуется зеркальной вылизанности.
Юрий Гордон «Книга про буквы от Аа до Яя», Откуда взялись и зачем нужны засечки, стр. 51
Шрифт без засечек только кажется простейшим. Его форму специально упростили для детей, а взрослым его читать труднее, чем антикву, ведь ее засечки служат не только для украшения.
Ян Чихольд «Облик книги», О типографике, стр. 21
Ян Чихольд
Ну ладно, старинные мастера опирались на чутье, но, может, кто-то посовременнее объяснит с пруфами?
Сергей Сурганов, арт-директор «Медузы», дизайнер Notion:
Используйте шрифт с засечками для длинных текстов
Когда вы оформляете любой длинный текст (статью, резюме, письмо, инструкцию), стоит использовать шрифт с засечками, то есть антикву. Считается, что длинный текст, набранный таким шрифтом, легче читать. В традиционной книжной верстке тоже используются именно антиквы, поэтому если вы делаете что-то похожее, то выбор ясен.
Короче, у нас три довода:
«согласно общепринятому мнению»,
«на мой взгляд»,
«считается»,
…
Книги не помогли, и я попробовала разобраться с помощью научных статей, есть ли какие-то доказательства, что шрифт с засечками легче, быстрее или приятнее читать, чем шрифт без засечек. Конечно, это не полноценный научный обзор. Но лучше, чем «согласно общепринятому мнению». Ссылки на статьи есть в конце каждого раздела.
Понятия: разборчивость vs читаемость
Разборчивость (legibility) шрифта зависит от точности начертания его элементов, что обычно означает возможность распознавать отдельные буквы или слова.
Читаемость (readability) напрямую связана с оптимальной компоновкой и планом всего тела текста.
Засечки направляют взгляд по строке
«Википедия» и еще миллион дизайнерских статей говорят, что засечки направляют движение глаз вдоль строк при чтении крупных массивов печатного текста.
Тут надо знать, что глаза не движутся плавно. Когда мы читаем или ищем какой-нибудь объект в поле зрения, глаза «скачут» от точки к точке, совершая быстрые движения, которые называются саккадами.
Видео про саккады
Более того, глаза совершают саккады, даже когда человек пытается сфокусироваться строго на одной точке.
Джаред Скрюз (Jaret Screws) провел эксперимент: попросил 10 человек прочитать несколько текстов и следил за движением их глаз с помощью специального оборудования.
Вот что получилось:
Измерили продолжительность фиксации взгляда, среднее количество слов между ними, амплитуду саккад и число раз, когда человек задерживался на одном и том же слове.
Все различия оказались незначительными. Ой.
Кажется, гипотеза о том, что взгляд движется легче по тексту, набранному шрифтом с засечками, не подтвердилась.
Шрифты с засечками и без засечек одинаково «держат» строку
Хотя тут есть подвох. В тесте использовался шрифт 128 pt. Это в десять раз больше, чем в обычной книге, и, возможно, исследование не очень корректно применять к обычному процессу чтения.
Детям, в отличие от взрослых, легче читать шрифт без засечек
Даже если это и не так, в это точно верят производители азбук. Попробуйте найти хоть одну азбуку с антиквой.
Детские азбуки с первой страницы Гугла
Ученые взяли 80 детей 10 лет и 80 детей на два года старше, попросили их найти в тексте нужное слово (скрининг-тест) и измерили, как быстро у детей получилось это сделать.
Контрольной группе оба раза давали одинаковый шрифт, а экспериментальной — сначала шрифт с засечками, а потом без
Различия получились статистически незначимые, и авторы говорят, что, кажется, нет никакой особенной разницы в разборчивости для детей шрифтов с засечками и без засечек.
А что насчет ребят с плохим зрением?
Исследований про слабовидящих людей и шрифт довольно много.
В 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 шрифтов и у дислексиков, и у недислексиков — без засечек.
Эмоции и шрифты
Может, дело не в скорости чтения и разборчивости, а в особом настроении, которое создают шрифты с засечками?
В Лаборатории исследований юзабилити ПО в Wichita State University попробовали разобраться, как люди воспринимают шрифты.
Участники заполняли опросник, где указывали, какими, по их мнению, характеристиками обладают разные шрифты.
Интересно, что шрифты с засечками оказались первыми в рейтинге как формальные, «взрослые», практичные и стабильные. А шрифты без засечек оказались первыми в рейтинге… нигде. То есть у них не оказалось какого-то ярко выраженного эмоционального следа.
Для другого исследования взяли два сатирических отрывка из «Нью-Йорк Таймс»: один — о проблемах правительства, другой — о политике в образовании. Их напечатали в шрифтах Times New Roman и Arial одинакового размера и показали в случайном порядке 102 студентам университета, которые оценили их с помощью заранее заданных прилагательных.
Сатирические статьи, напечатанные Times New Roman, воспринимались как более смешные и злые, чем напечатанные Arial.
Скорее всего, это тот же эффект нейтральности шрифтов без засечек, что и в первом исследовании.
Значит ли это, что все шрифты без засечек — безликие? Вообще, нет, но нейтральный шрифт с засечками менее нейтральный, чем нейтральный шрифт без засечек.
Читаемость шрифтов на электронных экранах
Большинство текстов мы читаем с электронных экранов. Электронные устройства и даже разные программы на одном устройстве по-разному обрабатывают шрифты.
Разные типы сглаживания
Ученые попробовали разобраться, как влияет сглаживание на читаемость.
Сравнивали четыре шрифта, напечатанные на бумаге, на экране со сглаживанием и без сглаживания
Интересно, что самым читаемым оказался экранный шрифт со сглаживанием (а не напечатанный), и это шрифт без засечек — Arial. Второй после него — Verdana, тоже без засечек.
Зато без сглаживания лучше всего читалась Georgia — шрифт с засечками.
Выводы
В статье есть обзоры всего нескольких статей. Еще пару дюжин я просмотрела, но не стала включать в статью, чтобы не делать ее бесконечной. На самом деле их еще больше. Но результат во всех примерно один и тот же: или отличия оказываются статистически незначимыми, или гротески немного обгоняют антикву.
Если вас заинтересовала эта тема, можете провести собственное исследование: поискать на scholar.google.ru по запросу типа Font readability research. Там можно найти исследования и про оптимальный межстрочный интервал, и про восприятие разных начертаний шрифта, и про различия читаемости в зависимости от размера.
Вряд ли это поможет стать принципиально более хорошим дизайнером, но добавит весомых аргументов.
Правила подбора шрифтов
Использование шрифта в сочетании с иллюстрациями
Каждая надпись, особенно в рекламной продукции, должна иметь свой художественный облик и, помимо смысловой нагрузки, нести в себе образность, способствующую эмоциональному зрительному восприятию.
Существуют особенности корректного применения шрифта и более тонкие, относящиеся уже не к рекламной продукции, а к применению в больших массивах текста, а именно в книгах, журналах, газетах и т.п. Если речь идет о создании сайта или рекламного объявления, дизайнерам приходится учитывать еще и другие условия: и общую тему, и характер текста, и место, и причину публикации и т.д. и т.п. Среди всех требований к подбору шрифтов можно выделить самое главное правило – для больших текстов шрифт должен быть легко читаемым. Остальные правила можно свести к следующим основным:
Общие правила подбора шрифтов
Размер шрифта
Гарнитуры с засечками намного более функциональны. Благодаря именно своим засечкам, они позволяют набирать тексты небольшого размера (в 10-12 пунктов) с потерей читабельности равной нулю. Но, к огромному сожалению, такие шрифты в своем большинстве не выразительны. Для заголовка лучше выбирать рубленый шрифт. Если не представляется возможным менять шрифт, тогда стоит прибегнуть к какому-либо приему выделения. Не злоупотребляйте шрифтами с засечками, если вы подбираете шрифт для компьютерных текстов. Чем шрифт проще, тем он легче читается.
Цвет шрифта
Средства выделения шрифтов
Прописные и строчные буквы
Выравнивание текста
Психология восприятия шрифта в текстах
Человеческий глаз воспринимает не отдельные буквы, а группы букв или слов. Это свойство глаза, охватывать группы букв, их форму, а также определённую длину строк является фактором, ускоряющим или замедляющим чтение. Поэтому, помимо рисунка шрифта не менее важно правильно выбрать его размер, расстояние между буквами, строчками, длину строк и расположение текста на странице или листе печатной продукции. По устоявшемуся мнению многих экспертов, строгие прямолинейные шрифты, обладающие «машинными», «техническими» качествами, привлекательнее для мужчин, а у женщин фаворитами являются более округлые и пышные шрифты с выраженными «хвостиками».
Различные исследования показали, что шрифты с засечками читаются легче, так как засечки помогают взгляду передвигаться от буквы к букве, и буквы при этом не сливаются друг с другом. С другой стороны, что буквы без засечек легче читать в шрифтах очень большого или очень малого размера. Но установить единообразные правила очень сложно (а если точнее, практически невозможно), так как кроме начертания, огромное значение имеет кегль шрифта, длина строк, интерлиньяж, свободное пространство и даже бумага. А если обратить внимание на то, что в последнее время течение моды поставило под вопрос саму удобочитаемость (для привлечения внимания используются причудливые шрифты и различные эффекты их размещения).