Шрифты с засечками и без в чем разница

Разбираемся в основах типографики за 10 минут

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

Шрифты с засечками и без в чем разница. Смотреть фото Шрифты с засечками и без в чем разница. Смотреть картинку Шрифты с засечками и без в чем разница. Картинка про Шрифты с засечками и без в чем разница. Фото Шрифты с засечками и без в чем разница

Креативный директор агентства Agima

Типографика — это игра со словом, шрифтами и образами, благодаря которым получаются крутые концепты, как в этом видео:

Выравнивание текста

Выключка — это способ выравнивания текста. Есть 4 вида выключки: слева, справа, по центру и по ширине.

Шрифты с засечками и без в чем разница. Смотреть фото Шрифты с засечками и без в чем разница. Смотреть картинку Шрифты с засечками и без в чем разница. Картинка про Шрифты с засечками и без в чем разница. Фото Шрифты с засечками и без в чем разница

В вебе принято выравнивать текст по левому краю, потому что это привычно и текст так легко считывается.

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

Шрифты с засечками и без в чем разница. Смотреть фото Шрифты с засечками и без в чем разница. Смотреть картинку Шрифты с засечками и без в чем разница. Картинка про Шрифты с засечками и без в чем разница. Фото Шрифты с засечками и без в чем разница

Выравнивание по центру используют для одноколоночных сайтов со спокойной композицией и ровным построением.

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

Шрифты с засечками и без в чем разница. Смотреть фото Шрифты с засечками и без в чем разница. Смотреть картинку Шрифты с засечками и без в чем разница. Картинка про Шрифты с засечками и без в чем разница. Фото Шрифты с засечками и без в чем разница

Базовые правила

Типографьте текст перед публикацией. Используйте типограф Лебедева. Он учитывает десятки правил типографики: убирает висячие предлоги, ставит правильные кавычки, заменяет дефис на тире.

Шрифты с засечками и без в чем разница. Смотреть фото Шрифты с засечками и без в чем разница. Смотреть картинку Шрифты с засечками и без в чем разница. Картинка про Шрифты с засечками и без в чем разница. Фото Шрифты с засечками и без в чем разница

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

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

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

Шрифты с засечками и без в чем разница. Смотреть фото Шрифты с засечками и без в чем разница. Смотреть картинку Шрифты с засечками и без в чем разница. Картинка про Шрифты с засечками и без в чем разница. Фото Шрифты с засечками и без в чем разница

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

Источник

Знаменитые дизайнеры 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. Там можно найти исследования и про оптимальный межстрочный интервал, и про восприятие разных начертаний шрифта, и про различия читаемости в зависимости от размера.

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

Источник

С засечками или без: как подобрать корпоративный шрифт и разработать логотип

Шрифты с засечками и без в чем разница. Смотреть фото Шрифты с засечками и без в чем разница. Смотреть картинку Шрифты с засечками и без в чем разница. Картинка про Шрифты с засечками и без в чем разница. Фото Шрифты с засечками и без в чем разница

Самый распространенный цвет на логотипах мировых брендов — синий, а самый популярный тип шрифта — без засечек. Но это не все, на что стоит опираться при разработке лого. Маркетолог Logaster Игорь Волков рассказывает, как подобрать фирменный шрифт и создать айдентику.

Для чего нужен логотип

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

Буква «Т» на Tesla — это схематическое изображение части электромотора, а изогнутая стрелка под надписью Amazon — улыбка, которая означает клиентоориентированность компании.

Эмблема может быть текстовой (Coca-Cola, Nokia, Facebook), символьной (Apple, Twitter, Shell) или комбинированной (Adidas, Burger King, Adobe), но всегда выполняет такие задачи:

Как выбрать шрифт для логотипа

Анализ айдентики компаний из списка Fortune 500 показал, что 99,6% из них используют текст в логотипах. Чтобы подобрать фирменный шрифт, руководствуйтесь тем, какое впечатление вы хотите произвести на потребителей и какой характер передать.

1. Serif

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

Опрос продемонстрировал: люди воспринимают типографику с засечками как «красивую и элегантную». А исследование ученых из Wichita State University подтвердило: шрифты Serif чаще всего оценивают как «стабильные, практичные, зрелые, формальные».

Популярные шрифты с засечками: Times New Roman, Garamond, Georgia.

Бренды, которые используют Serif: Tiffany, Gucci, Burberry, The New York Times и Rolex.

2. Sans Serif

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

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

Популярные шрифты без засечек: Helvetica, Futura и Franklin Gothic.

Бренды, которые используют Sans Serif: Jeep, Panasonic, Target, Microsoft, Caterpillar.

3. Script

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

Популярные рукописные шрифты: Allura, Pacifico.

Бренды, которые используют рукописные шрифты: Kellogg’s, Coca-Cola, Virgin, Barbie, Kleenex.

4. Modern

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

Самые популярные шрифты группы: Futura, Bedini, Orgreave, Bodoni, Empire.

Бренды, которые используют шрифты Modern: Red Bull, Calvin Klein.

5. Display

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

Популярные шрифты группы: Jokerman, Bombing, Gigi.

Бренды, которые используют шрифты Display: Lego, Disney.

Как создать логотип: пять советов и три инструмента

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

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

Источник

Споры веб-дизайна: действительно ли нужно использовать шрифты без засечек?

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

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

Когда употреблять шрифты без засечек

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

Хотя все еще есть случаи, когда Sans Serif нужен:

Поприветствуйте экраны с широким разрешением

Шрифты с засечками и без в чем разница. Смотреть фото Шрифты с засечками и без в чем разница. Смотреть картинку Шрифты с засечками и без в чем разница. Картинка про Шрифты с засечками и без в чем разница. Фото Шрифты с засечками и без в чем разница

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

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

Уже в начале 2012 года, Якоб Нильсен из Nielsen Norman Group, которые фокусируются на исследовании и улучшении UX, отметил, что экраны с хорошим качеством меняют общий вид принципов типографики в веб-дизайне. Вот вывод из этого исследования:

Но сейчас мы начинаем наблюдать, что все больше дизайнеров используют эту идею.

Читаемость

Шрифты с засечками и без в чем разница. Смотреть фото Шрифты с засечками и без в чем разница. Смотреть картинку Шрифты с засечками и без в чем разница. Картинка про Шрифты с засечками и без в чем разница. Фото Шрифты с засечками и без в чем разница

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

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

Разборчивость

Шрифты с засечками и без в чем разница. Смотреть фото Шрифты с засечками и без в чем разница. Смотреть картинку Шрифты с засечками и без в чем разница. Картинка про Шрифты с засечками и без в чем разница. Фото Шрифты с засечками и без в чем разница

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

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

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

Советы по выбору шрифтов

Шрифты с засечками и без в чем разница. Смотреть фото Шрифты с засечками и без в чем разница. Смотреть картинку Шрифты с засечками и без в чем разница. Картинка про Шрифты с засечками и без в чем разница. Фото Шрифты с засечками и без в чем разница

Шрифты с засечками и без в чем разница. Смотреть фото Шрифты с засечками и без в чем разница. Смотреть картинку Шрифты с засечками и без в чем разница. Картинка про Шрифты с засечками и без в чем разница. Фото Шрифты с засечками и без в чем разница

Вы все еще зациклены на применении шрифта без засечек для вашего следующего проекта? Вот несколько советов для выбора лучшего варианта без засечек.

Заключение:

Что вы думаете об использовании шрифтов без засечек в интернете? Готовы ли дать ему шанс? Примеры из этой статьи показывают, как отличной веб-типографике не обязательно нужно быть без засечек.

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

Источник

Главное о шрифтах

Создать дизайн в VistaCreate очень просто: выбираете фото или видео в высоком разрешении, накладываете несколько дизайн-элементов — и добавляете текст. И вот как раз тут важно не промахнуться: если взять шрифты, которые не сочетаются, вы вряд ли будете довольны результатом.

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

Почему шрифты важны в графическом дизайне

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

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

Шрифты с засечками и без в чем разница. Смотреть фото Шрифты с засечками и без в чем разница. Смотреть картинку Шрифты с засечками и без в чем разница. Картинка про Шрифты с засечками и без в чем разница. Фото Шрифты с засечками и без в чем разница

Пять главных видов шрифтов

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

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

Нина Стрёсингер, шрифтовой дизайнер в Frere-Jones Type, критик в Йельской школе искусств.

Шрифты с засечками

Это группа всех шрифтов с маленькими черточками — засечками — на концах букв. На сегодняшний день существует огромная масса таких шрифтов в самых разных стилях, от римских Roman до барочных Didone. Дизайнеры шрифтов и эксперты в области типографики за пару секунд отличат старые шрифты с засечками от новых. Но никакой магии в этом нет: чтобы понять, как они отличаются друг от друга, просто посмотрите на классический Sabon, переходный Perpetua и современный Didot. Разница неочевидная, но она все-таки есть:

Шрифты с засечками и без в чем разница. Смотреть фото Шрифты с засечками и без в чем разница. Смотреть картинку Шрифты с засечками и без в чем разница. Картинка про Шрифты с засечками и без в чем разница. Фото Шрифты с засечками и без в чем разница

Шрифты с засечками отлично смотрятся не только в печатных материалах (например, книг и журналов), но и в большом объеме цифрового текста — они упрощают чтение. В VistaCreate сотни шрифтов с засечками — и для своего дизайна вы можете взять любой из них! Скорее всего, вам приглянется мегапопулярный Antic Didone, который остается одним из главных представителей своей группы. Но кто знает — может, вам захочется поэкспериментировать.

Шрифты без засечек

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

Отличным примером таких шрифтов служат классические News Gothic, Helvetica, Century Gothic и любимый всеми Calibri. Как и шрифты с засечками, сначала такие шрифты были более простыми — с тяжелыми и толстыми линиями. А потом эти шрифты эволюционировали и приняли более элегантные, тонкие формы.

Шрифты с засечками и без в чем разница. Смотреть фото Шрифты с засечками и без в чем разница. Смотреть картинку Шрифты с засечками и без в чем разница. Картинка про Шрифты с засечками и без в чем разница. Фото Шрифты с засечками и без в чем разница

Чаще всего шрифты без засечек используют в заголовках, но некоторые из них (например, Arial и Proxima Nova) часто можно увидеть и в текстовых блоках. Просмотрите коллекцию шрифтов без засечек в VistaCreate и используйте их в своем тексте или в заголовках. А начать можно с универсального Prompt.

Брусковые шрифты

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

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

Но это не все популярные варианты брускового шрифта — например, шрифты American Typewriter, Rockwell и Clarendon тоже часто используется.

Шрифты с засечками и без в чем разница. Смотреть фото Шрифты с засечками и без в чем разница. Смотреть картинку Шрифты с засечками и без в чем разница. Картинка про Шрифты с засечками и без в чем разница. Фото Шрифты с засечками и без в чем разница

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

Рукописные шрифты

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

Вот несколько отличных примеров рукописных шрифтов — Snell Roundhand, Brush Script и Kaufmann.

Шрифты с засечками и без в чем разница. Смотреть фото Шрифты с засечками и без в чем разница. Смотреть картинку Шрифты с засечками и без в чем разница. Картинка про Шрифты с засечками и без в чем разница. Фото Шрифты с засечками и без в чем разница

Просмотрите варианты рукописных шрифтов в коллекции VistaCreate и примените любой из них к своим надписям, которые хотели бы выделить как-то по-особенному. К примеру, шрифт Playlist Script наверняка придаст вашему дизайну легкости и нежности.

Декоративные и акцидентные шрифты

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

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

Хорошие примеры этих шрифтов — Broadway, Bauhaus (который вдохновлен эстетикой Баухауса), Peignot, Stencil и Windsor. В коллекции VistaCreate масса декоративных шрифтов, и для каждого найдется своя пара. Возьмите, к примеру, Sigmar One и попробуйте соединить его с разными базовыми шрифтами — и увидите, как меняется настроение текста.

Шрифты с засечками и без в чем разница. Смотреть фото Шрифты с засечками и без в чем разница. Смотреть картинку Шрифты с засечками и без в чем разница. Картинка про Шрифты с засечками и без в чем разница. Фото Шрифты с засечками и без в чем разница

Как сочетать шрифты

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

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

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

Используйте шрифты одной гарнитуры

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

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

Шрифты с засечками и без в чем разница. Смотреть фото Шрифты с засечками и без в чем разница. Смотреть картинку Шрифты с засечками и без в чем разница. Картинка про Шрифты с засечками и без в чем разница. Фото Шрифты с засечками и без в чем разница

Используйте шрифты разных гарнитур

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

Пример ниже показывает, как удачно может выглядеть сочетания двух совершенно разных шрифтов в одном дизайне. Дизайнеры VistaCreate скомбинировали Montserrat и Mr Dafoe — и получилось очень ярко. Жирное начертание Montserrat идеально подходит для заголовков и основного текста, а изначально курсивный Mr Dafoe — органично подчеркивает устойчивость и вес основного текста.

Шрифты с засечками и без в чем разница. Смотреть фото Шрифты с засечками и без в чем разница. Смотреть картинку Шрифты с засечками и без в чем разница. Картинка про Шрифты с засечками и без в чем разница. Фото Шрифты с засечками и без в чем разница

Рукописные шрифты — отличный выбор, если хочется добиться эффекта «настоящести» написания. Но к сожалению, довольно часто их сложно читать, особенно в курсивном начертании. Поэтому для баланса лучше сочетать их с обычными. При этом подходе пользуйтесь правилом Парето: 80% текста наберите шрифтом, который легко считывается, а 20% — декоративным, рукописным, трафаретным или любым другим экспрессивным шрифтом.

Подытожим

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

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *