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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

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

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

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

Шрифты и гарнитуры

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

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

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

И тут точность формулировок критически важна. Если попросить напечатать текст «шрифтом Acumin», будет совершенно непонятно, какое именно начертание нужно.

Чем различаются шрифты

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

Наличие или отсутствие засечек

Засечки — это перпендикулярные выступающие элементы.

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

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

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

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

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

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

Контрастность шрифта

Контрастность шрифта — разница между основными и соединительными штрихами. Если одни штрихи значительно тоньше других, это шрифт с высокой контрастностью. Если все штрихи одинаковые — контрастность отсутствует. Взгляните на предыдущий пример: шрифт в надписи Milk Chocolate контрастный, а в названии Hershey’s — нет.

Апертура

Апертура — это открытость знаков. Оценить ее можно по буквам, образующим незамкнутую фигуру — проще всего по букве «С». Если она больше напоминает незамкнутый круг, апертура маленькая, а если похожа на полукруг — апертура большая.

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

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

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

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

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

Насыщенность

Насыщенностью называют толщину линии по отношению к размеру буквы. Например, жирные начертания (Bold или Black) обладают большей насыщенностью, чем Regular.

Соотношения ширины и высоты знаков

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

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

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

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

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

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

Наклон основных штрихов

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

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

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

Наклон осей овалов

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

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

Соотношение ширины разных букв

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

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

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

Наборные и акцидентные шрифты

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

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

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

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

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

Виды шрифтов

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

Антиквы

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

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

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

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

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

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

Такие шрифты выглядят изящно и утонченно:

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

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

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

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

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

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

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

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

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

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

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

Эти шрифты появились в в XIX веке. Они напоминают антикву, но контрастность у них небольшая, а засечки — массивные и широкие.

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

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

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

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

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

Гротески или рубленые шрифты

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

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

Сейчас гротески применяют и для заголовков, и для набора основного текста.

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

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

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

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

Геометрические гротески смотрятся лаконично и современно:

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

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

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

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

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

В 50-е годы XX века начали появляться закрытые равноширинные шрифты с широкими буквами и почти без контраста. Их назвали неогротески или новые гротески. Самый известный пример — гарнитура Helvetica.

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

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

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

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

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

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

Изредка скрипты бывают наборными, но обычно это акцидентные шрифты.

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

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

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

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

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

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

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

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

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

Настраиваемые параметры текста

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

Кегль — это размер шрифта, он измеряется в пунктах. Размер считается с учетом выносных элементов — например, «хвостика» буквы «у» или «шляпки» буквы «б». Поэтому при одинаковом кегле шрифты из разных гарнитур могут казаться разного размера — у одних более длинные выносные элементы, чем у других.

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

Некоторые расстояния при применении метрического и оптического кернинга могут совпадать, а другие будут существенно различаться. Посмотрите на пример ниже: между буквами «к», «е» и «р» при оптическом кернинге расстояние заметно меньше:

Источник

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

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

Самый распространенный цвет на логотипах мировых брендов — синий, а самый популярный тип шрифта — без засечек. Но это не все, на что стоит опираться при разработке лого. Маркетолог 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.

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

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

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

Источник

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

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

Источник

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

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