типографика что это такое

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

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

типографика что это такое. Смотреть фото типографика что это такое. Смотреть картинку типографика что это такое. Картинка про типографика что это такое. Фото типографика что это такое

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

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

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

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

типографика что это такое. Смотреть фото типографика что это такое. Смотреть картинку типографика что это такое. Картинка про типографика что это такое. Фото типографика что это такое

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

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

типографика что это такое. Смотреть фото типографика что это такое. Смотреть картинку типографика что это такое. Картинка про типографика что это такое. Фото типографика что это такое

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

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

типографика что это такое. Смотреть фото типографика что это такое. Смотреть картинку типографика что это такое. Картинка про типографика что это такое. Фото типографика что это такое

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

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

типографика что это такое. Смотреть фото типографика что это такое. Смотреть картинку типографика что это такое. Картинка про типографика что это такое. Фото типографика что это такое

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

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

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

типографика что это такое. Смотреть фото типографика что это такое. Смотреть картинку типографика что это такое. Картинка про типографика что это такое. Фото типографика что это такое

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

Источник

Что такое типографика и какие шрифты использовать на сайте

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

типографика что это такое. Смотреть фото типографика что это такое. Смотреть картинку типографика что это такое. Картинка про типографика что это такое. Фото типографика что это такое

типографика что это такое. Смотреть фото типографика что это такое. Смотреть картинку типографика что это такое. Картинка про типографика что это такое. Фото типографика что это такое

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

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

Что такое типографика

Типографика — это оформление наборного текста. Его располагают на бумаге или экране, настраивают отступы и интервалы, подбирают шрифт. Хорошо проработанный материал смотрится лаконично и приятно. Легко читается, ощущается гармония.

типографика что это такое. Смотреть фото типографика что это такое. Смотреть картинку типографика что это такое. Картинка про типографика что это такое. Фото типографика что это такое

До появления компьютеров правила типографики использовали для создания макетов книг, газет и плакатов. Теперь их применяют для удобного отображения информации на дисплее — в программах и на сайтах.

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

Как подбирать шрифты на сайт

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

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

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

Классификация шрифтов

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

типографика что это такое. Смотреть фото типографика что это такое. Смотреть картинку типографика что это такое. Картинка про типографика что это такое. Фото типографика что это такое

Главное визуальное различие шрифтов — засечки на буквах. Этот параметр называется классификацией шрифта. На сайтах чаще всего встречается две классификации: антиква и гротеск.

Антиква — шрифт с засечками, поэтому часто в названии есть слово serif («засечка»). Популярная антиква: Times New Roman.

типографика что это такое. Смотреть фото типографика что это такое. Смотреть картинку типографика что это такое. Картинка про типографика что это такое. Фото типографика что это такое

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

Гротеск — классификация шрифта без засечек. В названии его часто встречается слово sans («без»). Популярные представители гротеска: Arial, Helvetica, Verdana.

типографика что это такое. Смотреть фото типографика что это такое. Смотреть картинку типографика что это такое. Картинка про типографика что это такое. Фото типографика что это такое

Гротеск ассоциируется с чем-то современным и легким. Его часто использует в чертежах и технической документации, в интерфейсах программ, на сайтах.

Что такое гарнитура

Гарнитура — это название одной шрифтовой семьи, которая состоит из разных начертаний.

типографика что это такое. Смотреть фото типографика что это такое. Смотреть картинку типографика что это такое. Картинка про типографика что это такое. Фото типографика что это такое

Привычное начертание — нормальное (Regular), остальные начертания зависят от вида шрифта и цели, для которой его создавали. Отличаются друг от друга наклоном, пропорциями, толщиной, но имеют одинаковый характер.

Светлое (Thin, Light); нормальное (Regular); полужирное (DemiBold, SemiBold); жирное (Bold, Extra Bold)

Узкое (Narrow, Condensed); нормальное; широкое (Wide, Extended, Expanded)

Выбор размеров шрифта

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

типографика что это такое. Смотреть фото типографика что это такое. Смотреть картинку типографика что это такое. Картинка про типографика что это такое. Фото типографика что это такое

Размер для обычного текста — 16-22 px. При этом длина строки не должна превышать 75 символов. Если текста мало, то его делают крупнее, а для статей и длинных записей — мельче.

Правильно подобранные размеры заголовков помогают создать контраст с основным текстом на странице. Для расчета пользуются коэффициентом из золотого сечения — 1,6.

Чтобы узнать размеры заголовков, кегль основного текста умножают на 1,6.

Нормальный текст: 18px

Заголовок 4: 18х1,6 = 27px.

Полученный результат умножают на 1,6 еще раз, чтобы узнать размер заголовка следующего уровня:

Заголовок 3: 27х1,6 = 40px.

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

Сочетание шрифтов

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

типографика что это такое. Смотреть фото типографика что это такое. Смотреть картинку типографика что это такое. Картинка про типографика что это такое. Фото типографика что это такое

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

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

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

типографика что это такое. Смотреть фото типографика что это такое. Смотреть картинку типографика что это такое. Картинка про типографика что это такое. Фото типографика что это такое

Искать шрифтовые пару удобно с помощью сервисов Паратайп и FontPair.

Где брать шрифты

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

Бесплатные

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

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

Платные

Ищут в специальных магазинах или на сайтах владельцев — студий и дизайнеров.

Больше о типографике и шрифтах

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

Книги, которые помогут изучить основы типографики и узнать, как работать со шрифтами:

Углубиться в типографику, верстку и узнать об использовании шрифтов можно на курсе «Веб-дизайн с нуля» от Skillbox.

типографика что это такое. Смотреть фото типографика что это такое. Смотреть картинку типографика что это такое. Картинка про типографика что это такое. Фото типографика что это такое

Пишет про дизайн в Skillbox. Рисует макеты и верстает страницы для клиентов.

Источник

Что такое типографика: основы и правила

типографика что это такое. Смотреть фото типографика что это такое. Смотреть картинку типографика что это такое. Картинка про типографика что это такое. Фото типографика что это такое

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

Что же такое типографика?

Какое ей дать определение?

Говоря простым языком, типографика – это визуальное оформление текста. Это один из самых важных элементов композиции – и в цифровом и в печатном формате.

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

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

Что такое типографика?

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

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

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

типографика что это такое. Смотреть фото типографика что это такое. Смотреть картинку типографика что это такое. Картинка про типографика что это такое. Фото типографика что это такое

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

Основные виды гарнитуры

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

Например, Corbel – это гарнитура, которая включает Corbel Light, Corbel Bold Italic, Corbel Light Italic и другие шрифты.

типографика что это такое. Смотреть фото типографика что это такое. Смотреть картинку типографика что это такое. Картинка про типографика что это такое. Фото типографика что это такое

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

Антиква

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

типографика что это такое. Смотреть фото типографика что это такое. Смотреть картинку типографика что это такое. Картинка про типографика что это такое. Фото типографика что это такое

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

Их можно изменить, поэтому многие гарнитуры включают начертание курсивом и жирным, низкую капитализацию и другие стили.

Несмотря на то, что антиква отличается маленькими засечками в конце букв, у нее есть много вариаций. Одна из самых известных – Times New Roman.

типографика что это такое. Смотреть фото типографика что это такое. Смотреть картинку типографика что это такое. Картинка про типографика что это такое. Фото типографика что это такое

Гротеск

Гарнитура гротеск начала пользоваться популярностью с середины 20 века, и имеет более готический вид, в то время, как антиква считается “римским” стилем.

Символы данного вида гарнитуры более четкие, жирные и современные. Известным примером такой гарнитуры является Arial, который часто встречается в заголовках и объявлениях.

типографика что это такое. Смотреть фото типографика что это такое. Смотреть картинку типографика что это такое. Картинка про типографика что это такое. Фото типографика что это такое

Рукописная

Этот вид с изящными изгибами самый элегантный и художественный. Он появился в середине 20 века и обычно выглядит как рукописное письмо.

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

типографика что это такое. Смотреть фото типографика что это такое. Смотреть картинку типографика что это такое. Картинка про типографика что это такое. Фото типографика что это такое

Акцидентная

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

Многие бренды используют данную гарнитуру в дизайне логотипа. Два ярких примера логотипов, выполненных с акцидентной гарнитурой, – Disney и Fanta.

типографика что это такое. Смотреть фото типографика что это такое. Смотреть картинку типографика что это такое. Картинка про типографика что это такое. Фото типографика что это такое

Элементы типографики, которые нужно знать

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

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

Интерлиньяж

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

типографика что это такое. Смотреть фото типографика что это такое. Смотреть картинку типографика что это такое. Картинка про типографика что это такое. Фото типографика что это такое

Трекинг

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

типографика что это такое. Смотреть фото типографика что это такое. Смотреть картинку типографика что это такое. Картинка про типографика что это такое. Фото типографика что это такое

Кернинг

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

типографика что это такое. Смотреть фото типографика что это такое. Смотреть картинку типографика что это такое. Картинка про типографика что это такое. Фото типографика что это такое

Выравнивание

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

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

типографика что это такое. Смотреть фото типографика что это такое. Смотреть картинку типографика что это такое. Картинка про типографика что это такое. Фото типографика что это такое

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

Иерархия

Иерархия помогает читателю сосредоточиться на главной части текста и определить, откуда начать и куда идти дальше по иерархии текста.

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

типографика что это такое. Смотреть фото типографика что это такое. Смотреть картинку типографика что это такое. Картинка про типографика что это такое. Фото типографика что это такое

Важные правила и советы для новичков

Читабельность в приоритете

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

Делимся полезными советами, как сделать текст эффектным:

типографика что это такое. Смотреть фото типографика что это такое. Смотреть картинку типографика что это такое. Картинка про типографика что это такое. Фото типографика что это такое

Используйте сетку

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

Если вы новичок, начните с простой сетки, чтобы понять, как она работает.

типографика что это такое. Смотреть фото типографика что это такое. Смотреть картинку типографика что это такое. Картинка про типографика что это такое. Фото типографика что это такое

Потом вы можете перейти к более сложным сеткам, однако помните, что вам не нужно загружать всю страницу элементами и текстом. Оставьте пустое пространство. Так вашему тексту будет легче “дышать”, а читателю – сконцентрироваться на важной информации.

Не поддавайтесь трендам

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

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

Лучшая теория – это практика

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

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

Подведем итоги

Проще говоря, типографика – это придание тексту визуальной составляющей. Ее проявления можно найти во всех сферах жизни.

Основных гарнитур четыре: гротеск, антиква, рукописная и акцидентная.

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

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

Источник

«О шрифте»: простые принципы хорошей типографики

Рассказываем, на что обратить внимание в работе со шрифтом.

типографика что это такое. Смотреть фото типографика что это такое. Смотреть картинку типографика что это такое. Картинка про типографика что это такое. Фото типографика что это такое

типографика что это такое. Смотреть фото типографика что это такое. Смотреть картинку типографика что это такое. Картинка про типографика что это такое. Фото типографика что это такое

Обложка: Polina Vari для Skillbox Media

типографика что это такое. Смотреть фото типографика что это такое. Смотреть картинку типографика что это такое. Картинка про типографика что это такое. Фото типографика что это такое

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

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

Эрик Шпикерманн — один из самых известных дизайнеров шрифта. Он разработал фирменный шрифт компании Audi, журнала The Есоnomist и систему знаков для уличной навигации в Берлине. В 1979 году он основал компанию MetaDesign, которая разрабатывала шрифты для Adobe, Apple, Mozilla и других гигантов.

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

Из материала вы узнаете:

типографика что это такое. Смотреть фото типографика что это такое. Смотреть картинку типографика что это такое. Картинка про типографика что это такое. Фото типографика что это такое

Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.

Индивидуальность

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

типографика что это такое. Смотреть фото типографика что это такое. Смотреть картинку типографика что это такое. Картинка про типографика что это такое. Фото типографика что это такое

Мастерство подачи информации заключается в том, чтобы читатель не отвлекался на мысли, что кто-то старательно упорядочивал на странице каждую строку, абзац и колонку. Дизайн, по крайней мере в данном случае, должен оставаться незаметным. Следовательно, и шрифт для подобной трудоёмкой работы нужен «невидимый», выглядящий естественно, чтобы читатель не замечал его как таковой.

Посмотрите на передовицу USA Today и заголовки других популярных газет. Даже если вы не знаете иностранные языки, индивидуальность типографики поможет легко понять, где пишут о ежедневных событиях, о финансах или о политике:

типографика что это такое. Смотреть фото типографика что это такое. Смотреть картинку типографика что это такое. Картинка про типографика что это такое. Фото типографика что это такое

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

типографика что это такое. Смотреть фото типографика что это такое. Смотреть картинку типографика что это такое. Картинка про типографика что это такое. Фото типографика что это такое

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

типографика что это такое. Смотреть фото типографика что это такое. Смотреть картинку типографика что это такое. Картинка про типографика что это такое. Фото типографика что это такое

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

Настроение

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

типографика что это такое. Смотреть фото типографика что это такое. Смотреть картинку типографика что это такое. Картинка про типографика что это такое. Фото типографика что это такое

типографика что это такое. Смотреть фото типографика что это такое. Смотреть картинку типографика что это такое. Картинка про типографика что это такое. Фото типографика что это такое

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

Этот приём — очень сильный. Шпикерманн считает, что он может сделать сомнительную контору более презентабельной:

типографика что это такое. Смотреть фото типографика что это такое. Смотреть картинку типографика что это такое. Картинка про типографика что это такое. Фото типографика что это такое

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

Шрифт может охарактеризовать не только пару обуви или какую-то компанию, но и эмоции людей:

типографика что это такое. Смотреть фото типографика что это такое. Смотреть картинку типографика что это такое. Картинка про типографика что это такое. Фото типографика что это такое

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

Со словом joy (удовольствие) сложнее. В шрифте должны присутствовать динамика, открытые формы и уверенные штрихи. Поэтому Шпикерманн набрал его шрифтом Lithos и заглавными буквами, чтобы эмоция не терялась из-за выносных элементов j и y.

типографика что это такое. Смотреть фото типографика что это такое. Смотреть картинку типографика что это такое. Картинка про типографика что это такое. Фото типографика что это такое

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

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

типографика что это такое. Смотреть фото типографика что это такое. Смотреть картинку типографика что это такое. Картинка про типографика что это такое. Фото типографика что это такое

Функция

Типографика неразрывно связана с вёрсткой — от размера полей и формата зависит, какой интерлиньяж вы выберете, какой будет межсловный пробел и размер абзаца. А сама вёрстка зависит от задачи — где, когда и зачем человек будет пользоваться печатным продуктом.

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

1. Домашнее чтение. Читатель в спальне или в другом месте для отдыха. Важно, чтобы книгу или журнал можно было держать в руках и ничего вокруг не отвлекало. Лучший выбор для вёрстки книг — канон Ван де Граафа или золотой канон Яна Чихольда, которые часто используются в вёрстке книг. Они позволяют оставить достаточно места на полях, их удобно держать, и всё внимание читателя фокусируется на рассказе автора.

типографика что это такое. Смотреть фото типографика что это такое. Смотреть картинку типографика что это такое. Картинка про типографика что это такое. Фото типографика что это такое

типографика что это такое. Смотреть фото типографика что это такое. Смотреть картинку типографика что это такое. Картинка про типографика что это такое. Фото типографика что это такое

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

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

типографика что это такое. Смотреть фото типографика что это такое. Смотреть картинку типографика что это такое. Картинка про типографика что это такое. Фото типографика что это такое

типографика что это такое. Смотреть фото типографика что это такое. Смотреть картинку типографика что это такое. Картинка про типографика что это такое. Фото типографика что это такое

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

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

типографика что это такое. Смотреть фото типографика что это такое. Смотреть картинку типографика что это такое. Картинка про типографика что это такое. Фото типографика что это такое

типографика что это такое. Смотреть фото типографика что это такое. Смотреть картинку типографика что это такое. Картинка про типографика что это такое. Фото типографика что это такое

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

типографика что это такое. Смотреть фото типографика что это такое. Смотреть картинку типографика что это такое. Картинка про типографика что это такое. Фото типографика что это такое

типографика что это такое. Смотреть фото типографика что это такое. Смотреть картинку типографика что это такое. Картинка про типографика что это такое. Фото типографика что это такое

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

типографика что это такое. Смотреть фото типографика что это такое. Смотреть картинку типографика что это такое. Картинка про типографика что это такое. Фото типографика что это такое

Шрифт на экране

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

типографика что это такое. Смотреть фото типографика что это такое. Смотреть картинку типографика что это такое. Картинка про типографика что это такое. Фото типографика что это такое

Из-за этого вы не сможете заранее предугадать, как вёрстка будет смотреться на экране пользователя:

типографика что это такое. Смотреть фото типографика что это такое. Смотреть картинку типографика что это такое. Картинка про типографика что это такое. Фото типографика что это такое

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

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

типографика что это такое. Смотреть фото типографика что это такое. Смотреть картинку типографика что это такое. Картинка про типографика что это такое. Фото типографика что это такое

«Рабочие лошадки»

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

типографика что это такое. Смотреть фото типографика что это такое. Смотреть картинку типографика что это такое. Картинка про типографика что это такое. Фото типографика что это такое

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

Универсальные шрифты Шпикерманн называет «рабочими лошадками» — с их помощью можно решить рутинные задачи бизнеса максимально быстро и дёшево. У любого подобного шрифта должны быть:

В качестве «рабочих лошадок» Шпикерманн выделяет девять шрифтов:

Источник

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

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