Нашу «зефирную акцию» стоило затевать хотя бы ради знакомства с Ольгой Цымбал — копирайтером из G2 Grey Ukraine. Она похвалила за зефир, но поругала за шрифты, которые мы использовали на подставке для зефира. Мы попросили Олю провести нам мастер-класс по азам типографики — в результате получился этот пост. Уверены, это многим будет интересно и полезно.
Начнем, пожалуй, с шуточки: детям дизайнеров не дарят игрушки, они играют с шрифтами.
— Расскажи о себе? Насколько серьезно ты увлечена шрифтами?
Я работаю копирайтером-редактором, поэтому каждый день имею дело с определенным количеством текстовой информации, часто в сочетании с графической. Отдавая должное содержанию написанного, стилистике, грамматике, орфографии, я при этом не могу не обращать внимания на визуальное оформление текста.
Серьезно интересуюсь дизайном и шрифтами — это мое увлечение наверняка родом из 2001 года, когда в нашей семье появился первый компьютер и я целыми днями, забывая обо всем остальном, познавала возможности Paint и Microsoft Word, а также PowerPoint. Гораздо позже в мою жизнь пришли Corel Draw (на непродолжительное время), Photoshop, Illustrator. На очереди — InDesign.
То есть профильное лингвистическое образование совсем не означает пренебрежения визуальной культурой, а скорее наоборот.
Любовь к слову обязывает сделать так, чтобы на экране монитора, на бумаге или любой другой поверхности этому слову было удобно, уютно, чтобы оно «чувствовало» себя на своем месте и читатель уделил ему необходимую дозу внимания.
Все мы знаем о важности качественных иллюстраций, дизайна, содержания текста, но мало кто в нашей стране сегодня обращает внимание на типографику. Классическое определение типографики — графическое оформление печатного текста посредством набора и верстки с использованием норм и правил, специфических для этого языка. Основной аспект типографики — работа со шрифтами.
К сожалению, профессиональных шрифтовых дизайнеров в Украине сегодня можно сосчитать на пальцах, но оправдывать этим хаос в нашей типографике нельзя.
Это не преувеличение — если рисовать наши соотечественники умеют хорошо, дизайнить кое-как научились, то отношение к шрифтам чуть ли не наплевательское.
Тем не менее овладеть основными правилами качественной типографики и чувством стиля шрифта может каждый, причем самостоятельно — было бы желание. В своем рассказе я остановлюсь на нескольких главных аспектах шрифтоведения, а остальное любопытный читатель без труда найдет в интернете.
Представьте себе ситуацию: молодой человек, узнав о существовании модной профессии «дизайнер», овладевает основами графической компьютерной программы (чаще всего это «корыл», «король дров» или как только не называют Corel Draw) и создает свой первый макет. Креативы такого происхождения узнать несложно.
Их отличают безумная подборка шрифтов (творец словно демонстрирует их богатую коллекцию в своем компьютере), витиеватое оформление надписей, полное несоблюдение правил верстки, дикие цветовые сочетания. О технических моментах, вроде разрешения изображений или подготовке к печати речь вообще не идет.
Результат нашего героя вполне объясним желанием новичка попробовать все и сразу и особенностью национального менталитета — как все южане, большинство украинцев считает, что много и ярко — значит красиво. Этот этап проходят все дизайнеры — главное, не застрять в нем надолго.
Но улицам наших городов и сел не повезло — судя по вывескам, в постсоветском графическом дизайне рулят аматоры, в лучшем случае — профессионалы, безнадежно отставшие от времени.
Недолго думая, они используют в оформлении работ шрифтовые гарнитуры из стандартного набора Microsoft, причем часто далеко не самые достойные. К примеру, популярный шрифт Arial — это всего лишь видоизмененная Helvetica — лицо мировой типографики с 1957 года.
Но Helvetica «нет в компьютере», поэтому некоторые могут о ней даже не догадываться, хотя этот шрифт — настоящее спасение для начинающих.
Любой текст, набранный им, достойно выглядит и хорошо воспринимается — иногда, чтобы полностью преобразить макет, достаточно заменить унылый Arial благородной Helvetica. А набивший оскомину и пользующийся совершенно незаслуженной народной любовью Comic Sans был и вовсе разработан для технических нужд — отображения текстов реплик собачки-помощника в программе Microsoft Bob!
С точки зрения построения этот шрифт имеет множество недочетов и использовать его в наружной, печатной, интернет-рекламе просто неэтично и непрофессионально.
Знаете, я просто хочу спросить — зачем? Какого черта люди выбирают Comic Sans? Это просто поражает. Ведь существует более 200 шрифтов в Mac OS и Windows. В смысле, среди них есть куча шрифтов, которые намного лучше для чего угодно.
Но люди по-прежнему выбирают Comic Sans для наиболее отсталых, неуместных целей. Я создал Comic Sans, чтобы заполнить окошко для слов собаки-помощника в Microsoft Bob. Потом отдел маркетинга взялся за него и они включили этот шрифт в OEM версию Windows 95.
Вот тогда моя проблема и началась. Я не знаю, сможете ли вы понять, каково это, когда твоя жизнь определяется самым неуместно используемым шрифтом в истории.
Меня представляют как «парня, который создал Comic Sans», и я думаю, у людей инстинктивно негативная реакция на это. © Vincent Connare, создатель Comic Sans
Где же взять гарнитуру, отсутствующую в стандартном наборе? Можно просто скачать шрифтовой файл и установить на свой компьютер. Но некоторые шрифты придется покупать, и об этом многие заказчики (и даже дизайнеры!) вообще не знают.
В то время как крупные компании и масштабные проекты, как правило, имеют собственный фирменный шрифт, разработанный на заказ, и это должно не удивлять, а стать нормой.
Более того, в наше время бума брендинга территорий наряду с логотипом, слоганом и прочими внешними элементами бренда страны или города также стало хорошим тоном наличие специально созданного шрифта, отражающего дух и ценности местности.
Соответствие содержанию — один из главных принципов типографики. Она должна полностью подчиняться тексту, его смыслу и назначению, облегчать, а не усложнять восприятие.
Помните: не текст для типографики, а типографика для текста! Поэтому важно принимать во внимание психологическое восприятие шрифтов, знать их основные классификации, законы использования, сочетания с другими шрифтами, изображениями, в конце концов, с типом бумаги, если мы делаем печатное издание.
Выбирая гарнитуру, следует прежде всего обратить внимание на ее предназначение.
Текстовые шрифты обладают простыми линиями и формами, легко читаются и поэтому используются для набора основного массива текста. Акцидентные шрифты (декоративные, вычурные) — для выделения заголовков, подзаголовков, отдельных небольших вставок, так сказать, для украшения макета.
С ними нужно обращаться осторожно — большой текст, набранный такой гарнитурой, попросту нечитабельный, два разных акцидента сочетаются между собой в очень редких случаях, и к подбору декоративной гарнитуры, соответствующей содержанию текста и стилю дизайна, нужно подходить чрезвычайно продуманно.
Что касается сочетания шрифтов, то в рамках одного макета или проекта допускается использование двух, в крайнем случае — трех гарнитур.
Но это не касается начертания (различают прямое, курсивное), насыщенности (светлый, полужирный, жирный шрифты), ширины и кегля (размера), так как это переменные характеристики одной и той же гарнитуры.
С точки зрения конструкции различают три группы шрифтов: Serif (антиквы), Sans Serif (рубленые или гротески) и Slab (брусковые).
Антиквы — гарнитуры древнего происхождения, имеющие засечки — небольшие элементы на концах штрихов символов. Наличие засечек облегчает чтение, поэтому такие гарнитуры обычно используются в наборе книг и объемных статей в периодике (например, Baskerville, Garamond, Lazurski).
Рубленые шрифты появились гораздо позже и не имеют засечек. Они оптимальны для выделения абзацев и набора небольших по объему текстов, но не подходят для книг. Это такие гарнитуры, как Calibri, Myriad, Verdana.
Группу брусковых шрифтов отличают более заметные засечки, чем у антикв — по толщине они приближаются к основным штрихам букв. Такие гарнитуры (Baltica, Courier, Rockwell) занимают ведущее место по читабельности и часто используются в наборе книг, особенно детских.
О психологии восприятия шрифтов пишут и говорят, видимо, недостаточно.
Чего стоят одни официальные объявления в коридорах моей альма-матер, набранные «любимой» гарнитурой Comic Sans, или приглашения на вечеринку в клуб, оформленные Impact! Не буду углубляться в эту тему — она неисчерпаема, скажу лишь, что игривый шрифт напрочь убивает серьезность официального обращения, а строгий — не доносит всех эмоций сообщения неформального.
Узкие гарнитуры с острыми углами негативно настраивают читателя к тексту, а мягкие и округлые, наоборот, говорят о расположенности и дружелюбии. Чем жирнее шрифт и насыщеннее его штрихи, тем сильнее убеждающая сила текста, его «весомость».
Так что правильный выбор гарнитуры поможет вызвать у читателя требующиеся чувства и эмоции. Это следует учитывать даже в пользовании личной электронной почтой и уж наверняка в оформлении собственных визитных карточек, резюме, рекомендационных писем!
— А как насчет шрифтов для интернета?
Все мы сегодня так или иначе «живем» в сети. На мониторе законы типографики никуда не деваются, но здесь есть свои особенности. Если лучший шрифт для чтения с бумаги — Baskerville или Times, то на экране компьютера хотелось бы видеть больше текстов, набранных Verdana (оптимальный кегль — 10-12 пунктов).
Ученые установили, что при чтении с монитора эти гарнитура и размер наиболее удобны для глаз. Другие шрифты, подходящие для компьютеров и мультимедиа, — Tahoma, Trebuchet. На бумаге и в наружке их лучше не использовать.
Не менее важны для комфортного восприятия текста длина строки и интерлиньяж (междустрочный пробел).
Рекомендуемая длина строки в русском, украинском языках — 45-75 знаков с пробелами, интерлиньяж — 120% (для бумаги), 140% (для экрана) от кегля шрифта.
Слишком длинные и слишком короткие строки, слишком тесное или широкое междустрочное расстояние одинаково затрудняют чтение. Расстояние между буквами тоже имеет значение — текст не должен быть ни разреженным, ни уплотненным.
Разрядка позволительна только для слов или строк, набранных полностью заглавными буквами (но необходимо помнить, что подобный набор, так же как и курсивное начертание, в принципе затрудняет чтение, поэтому им не следует злоупотреблять)!
В отдельных случаях (в логотипе, заголовке) необходимо делать ручной кернинг — на глаз подбирать оптимальное расстояние между каждой парой символов. У любого дизайнера есть один или несколько любимых шрифтов, которые он или она использует чуть ли не в каждом своем проекте.
Есть и фанаты, работающие исключительно с двумя-тремя гарнитурами, но на мой взгляд это крайности. Среди моих гарнитур-фаворитов — Myriad, Officina, FreeSet, Futuris.
Как и подобает, ловлю кайф от Helvetica, хотя до дизайнера мне пока что далековато.
В общем, я симпатизирую современным рубленым шрифтам с четкими линиями и простыми формами, так как в графическом дизайне ценю минимализм и функциональность.
- Мои вкусовые предпочтения таковы, что я недолюбливаю антикву (может быть, потому, что работаю в рекламе, а не издаю книги), но гарнитура Georgia в этом плане — приятное исключение, радующее глаз как на бумаге, так и на мониторе компьютера.
У этого шрифта есть пикантная особенность — заметные выносные элементы цифр, по поводу которой мнения типографов кардинально расходятся. Лично мне эта деталь очень нравится! Georgia я использую довольно часто — ею набрано мое CV и один из комплектов визитных карточек. Второй комплект тоже набран антиквой — Trajan Pro.
Это строгий, но очень приятный шрифт, имитирующий латинское письмо эпохи Древнего Рима. Из акцидентных гарнитур иногда «балуюсь» веселенькой Maiandra.
В моем «черном списке» — Century Gothic, Monotype Corsiva и некоторые другие шрифты из стандартного набора Microsoft и арсенала доморощенных «креативщиков» — конечно же, и Comic Sans тоже!
В завершение хочу сказать, что незаслуженно забытые дореволюционные шрифтовые традиции и графическую школу Украины необходимо возрождать! Поэтому, чем больше людей заинтересуется типографикой, тем лучше для нас самих, нашей культуры, бизнеса, страны в целом.
Шрифтов, как и денег, много не бывает, но они тоже должны быть подлинными, то есть оригинальными и качественными.
И на правах копирайтера на всякий случай напомню, что даже самый изысканный шрифт и самая аккуратная и профессиональная верстка не спасут плохо написанный, безграмотный, неинтересный текст!
Обнаружили ошибку? Выделите ее и нажмите Ctrl + Enter.
Источник: https://netpeak.net/ru/blog/about_fonts_and_typography
Разбираемся в основах типографики за 10 минут
- Креативный директор агентства Agima Григорий Коченов в открытом занятии «Нетологии» рассказал об основах типографики, шрифтовых трендах, ключевых понятиях и правилах комбинирования шрифтов.
- Обучение в онлайн-университете: курс «Типографика: искусство работы с текстом»
- Типографика — это игра со словом, шрифтами и образами, благодаря которым получаются божественные концепты, как в этом видео:
Выравнивание текста
Выключка — это способ выравнивания текста. Есть 4 вида выключки: слева, справа, по центру и по ширине.
В вебе принято выравнивать текст по левому краю, потому что это привычно, и текст так легко считывается.
По правому краю выравнивают в редких случаях, например, цифры в таблицах. Это помогает соблюсти разрядность и визуально отделить определения от значений без дополнительных визуальных инструментов.
Выравнивание по центру используют для одноколоночных сайтов со спокойной композицией и ровным построением.
Выключка по ширине — это газетный стиль. Так верстают и книги, но для их верстки есть верстальщик, который трудится, чтобы сделать это качественно и гармонично, без разрывов между символами.
Базовые правила
Типографьте текст перед публикацией. Используйте типограф Лебедева. Он учитывает десятки правил типографики: убирает висячие предлоги, ставит правильные кавычки, заменяет дефис на тире.
Разбивайте текст на абзацы по смыслу. Смотрите, где по смыслу заканчивается одна мысль и начинается другая. Большинство дизайнеров придерживаются позиции: «Когда у нас есть текст, можно половину выкинуть и относиться к нему, как к рыбному тексту». Нет, так делать нельзя.
Не используйте «рыбу» — Lorem Ipsum или другую панграмму, выполняющую роль текстового заполнителя. Если поставите сначала Lorem Ipsum, а потом кириллицу, макет будет выглядеть иначе.
Соблюдайте баланс длины строки и межстрочного отступа. Чем длиннее строка, тем больше должен быть межстрочный отступ, так как при чтении длинных строк легко сбиться.
Чем больше между ними свободного пространства, тем проще найти нужную строку.
Средне-оптимальное значение межстрочного отступа, от которого можно отталкиваться — размер кегля основного шрифта, умноженный на полтора.
В небольших колонках, приближенных к газетным, межстрочный отступ можно уменьшать, но не делать меньше высоты шрифта, иначе все смешается:
Из-за межстрочного отступа 0,8 текст выглядит скомканным и трудно читается
Типы чтения
Два главных типа чтения — линейное и информационное.
Линейное чтение — это книги и лонгриды с одной колонкой, где главное — не отвлекаться и погружаться в текст.
Информационное чтение — когда читаем не всё от начала до конца, а выборочно сканируем статью в поисках нужных ключевых слов и решаем, какую часть текста прочитать. Это другой ритм и другое восприятие.
Пример статьи, подходящей для быстрого информационного чтения. Главные мысли выделены желтым. Источник: Т—Ж
Основные понятия в типографике
Трекинг — расстояния в строке между символами.
Кернинг — регулирование межбуквенного расстояния для каждой отдельной буквенной пары. Например, в сочетаниях букв AW или Го расстояние между буквами может быть нулевым или даже минусовым, потому что одна буква идеально сочетается с другой, как две части пазла. Без кернинга в некоторых комбинациях букв будут огромные непропорциональные апроши — межбуквенные пробелы.
Антиква — классический старый шрифт с засечками. Главная особенность — цепляет взгляд и замедляет чтение, благодаря чему читатель лучше усваивает информацию.
Гротеск — более современный шрифт без засечек. Читается легче и быстрее антиквы.
Брусковый шрифт отличается от обычной антиквы ровными прямоугольными засечками.
Рукописный шрифт выглядит так, будто его нарисовали кистью. Отличается плавными линиями с разной толщиной.
Прямое начертание — это классический машинописный шрифт.
Курсив — это легкий наклон букв вправо, как при рукописном письме. Читается и воспринимается хуже прямого начертания. Подходит для выделения небольших частей текста: подписей, врезок, цитат.
Графема — это общий скелет буквы. Букву можно нарисовать или сложить из чего угодно, но благодаря единой графеме вы сможете отличить А от Б.
Разные варианты написания буквы А, соблюдающие общую графему
Насыщенность определяется толщиной линий. Чем толще линии, тем выше насыщенность.
Контраст определяется разницей толщины штрихов. Чем больше разница между тонкими и толстыми линиями, тем выше контрастность.
Пример шрифта с высокой и низкой контрастностью
Шрифты с высокой контрастностью используют в модных журналах. Можно вообще отказаться от иллюстрации и собрать шрифтовые композиции, которые в соответствующем стиле будут смотреться круто и интересно, но у таких композиций низкая читаемость, поэтому использовать их лучше только в качестве акцидентных.
Пример использования акцидентного шрифта с высокой контрастностью
Акцидентный шрифт используют в заголовках, афишах, обложках книг, визитках и так далее. Его цель — привлечь внимание своей нестандартностью. Но чем необычнее выглядит текст, тем сложнее его читать, поэтому после акцидентного заголовка обычно идет текст классическим наборным шрифтом.
Наборный шрифт используют в книгах, лонгридах, статьях и любых больших массивах текста. Его главная задача — сделать так, чтобы читать было легко и приятно, а глаза не уставали. Чем выше читабельность, тем лучше.
- Примеры наборного и акцидентного шрифта
- Пропорциональный и моноширинный шрифты отличаются размерами литер.
- Наглядный пример отличий пропорционального шрифта от моноширинного
В моноширинном все буквы занимают одинаковую площадь, равную самой большой литере. Даже если английская буква i почти не занимает места, слева и справа от нее в моноширинном наборе будет много пустого пространства. Обычно его используют в таблицах, так как он помогает сохранить легкосчитываемую визуальную разрядность значений.
В пропорциональном занимаемая литерой площадь зависит от ее размеров: английская i будет занимать в 2-3 раза меньше места, чем n. Такой набор экономит свободное место, поэтому в печатных изданиях используют только его. Если напечатать книгу моноширинным шрифтом, ее объём и расход листов увеличится на 5-15%.
Обзор классических и трендовых шрифтов
Bodoni
Красивый классический шрифт, которому уже много столетий. Можно использовать для акцентов, но не подходит для длинного текста.
Meta
Универсальный шрифт, который можно использовать и для акцентов, и для набора, так как его легко читать. Был особенно популярен в конце 90-х.
- Headline News
- Разработан специально для британских школ, чтобы помочь детям усвоить закономерности классических графем и освоиться в письме.
- Futura
Futura — это классический геометрический гротеск и двадцатые годы, когда эстетизировалось промышленное производство. До этого в шрифтах прослеживались следы пера, а здесь пера не осталось: все формы и линии — это либо идеальный круг, либо прямая линия. Даже в сравнении с Gill Sans она выглядит более строгой и геометричной, если сравнить по буквам «a».
Источник: https://netology.ru/blog/razbiraemsya-v-osnovakh-tipografiki-za-10-minut
Типографика — основы типографики в графическом дизайне, определение, что такое верстка текста
С тех пор как дизайн стал профессией, типографика является одним из основных предметов в этой области. По сути, определением типографики является искусство доносить смысл до читателя или пользователя посредством визуального оформления наборного текста. Грамотная работа с текстом — база и залог успеха любого дизайнерского решения. Типографика — это еще и наука, изучению которой специалисты посвящают всю жизнь. Типографика в дизайне развивается и изменяется, вызывает споры и заставляет думать о прекрасном. Шрифт больше не должен быть незаметным — сегодня он может быть любым: забавным, витиеватым, неаккуратным, дерзким, нелогичным, а в лучших образцах — изящным.
Типографика включает сотни терминов и принципов, но сегодня мы разберем ее основы. Чтобы было легче их запомнить, рекомендуем добавить статью в закладки, а также записать самое важное и разместить конспект на видном месте.
Анатомия шрифта
Шрифт состоит из букв, и это не просто линии и круги, соединенные в знакомые формы. Каждая буква индивидуальна и формируется из множества элементов со своими названиями. Как и у людей, у букв есть характер, настроение и даже анатомические детали.
Для более ясного понимания, что такое типографика текста в графическом дизайне, мы собрали важные понятия в одной картинке — для наглядности и удобства. Время достать ручку и начать записывать!
Символы — это отдельные буквы, знаки пунктуации, цифры и прочие элементы, которые используются в типографском наборе.
Строчные буквы — это буквы обычной величины, используются для написания во всех случаях, кроме тех, когда по правилам орфографии и пунктуации требуется употребление прописной буквы.
Прописные буквы — это заглавные буквы, отличающиеся от строчных размером, а иногда и начертанием. С прописной буквы пишется первое слово в тексте и цитате.
- Линия шрифта — воображаемая линия, проходящая по нижнему краю строчных символов без учета нижних выносных элементов.
- Верхняя линия — воображаемая линия, проходящая по верхнему краю строчных символов без учета верхних выносных элементов.
- Верхний выносной элемент — элемент строчных букв, выходящий за верхнюю линию (например, в буквах б и в).
- Нижний выносной элемент — элемент строчных букв, опущенный ниже линии шрифта (например, в буквах у и ф).
Засечка (сериф) — короткий, обычно перпендикулярный штрих на конце буквы, с которого начинается и которым заканчивается основной штрих знака. У рубленых шрифтов засечки отсутствуют, отсюда и их название «sans serif» («без засечек»). 
Понятие шрифта и его характеристики
Вы наверняка слышали, что человек воспринимает чуть ли не 90% информации глазами, то есть зрительным путем. Точную цифру привести сложно, но ясно, что визуальный способ зачастую доминирует, если сравнивать его с аудиальным и тактильным восприятием.
Именно поэтому почти вся информация вокруг нас представлена в виде текста. Шрифт — это элемент типографики, который помогает донести ее правильно и быстро.
Не обладая достаточными знаниями о нем, дизайнер упускает изящные, а иногда и единственно верные способы решения задач.
Пора разобраться с основными правилами типографики в полиграфии: что представляет собой шрифт и какими характеристиками он обладает. Начнем с понятия гарнитуры.
Гарнитура — это семейство начертаний шрифта, имеющих общие стилевые особенности. Есть множество известных гарнитур: Helvetica, Futura, Roboto и другие.
Шрифт — это комплект строчных и прописных символов, знаков препинания, цифр и спецсимволов одного размера и начертания для отдельной гарнитуры.
Текст этой статьи набран гарнитурой Roboto, шрифтом Roboto Regular. Зачастую дизайнеры без углубленного знания о том, что такое типографика, совмещают понятия гарнитуры и шрифта и считают, что текст этого предложения «набран шрифтом Roboto». С точки зрения терминологии это грубая ошибка, но на качество повседневной коммуникации между дизайнерами она не влияет.
Начертание — это внешний вид шрифта. Большинство гарнитур предполагают стандартный набор начертаний: Regular (обычное), Italic (курсивное), Semibold (полужирное) и Bold (жирное).
Типографская система мер
Для верстки текста дизайнеры используют типографские приемы. Это не только правильный подбор гарнитуры и начертания, но и грамотная работа с расстояниями.
Дизайнер может работать с расстояниями между буквами, словами, строками, абзацами. Этот аспект может стать самым сложным для новичка. Напишите в х, если нужен подробный разбор по композиции и расстояниям в типографике.
В типографике есть четыре основных термина: кегль, интерлиньяж, кернинг и трекинг. Важно иметь четкое представление о каждом из них — обратное часто выдает уровень начинающих дизайнеров.
Кегль — размер буквы или знака по вертикали, включающий ее нижние и верхние выносные элементы. Единица измерения кегля — пункт (pt). Например, популярны кегли шрифта в 14, 16, 24 pt и многие другие.
Интерлиньяж (межстрочный интервал) — это вертикальный интервал между строками текста. Измеряется в пунктах, но его размер зависит от кегля шрифта. Интерлиньяж в 120 % от размера шрифта принято считать минимальным.
То есть при шрифте в 14 pt интерлиньяж составит по меньшей мере 17 pt. Размер межстрочного интервала зависит от кегля и начертания шрифта, а также от расположения текста, поэтому универсальной формулы по вычислению интерлиньяжа нет.
Теперь о понятиях в основах типографики, которые постоянно путают: кернинг и трекинг. Кернинг — это изменения расстояния между конкретными символами, а трекинг — между символами и словами. Трекинг позволяет разрядить или уплотнить текст, в то время как кернинг используется для повышения удобочитаемости символов.
Полезные советы и ресурсы по теме
- Прочитайте книгу Александры Корольковой «Живая типографика». Это базовое пособие о типографике для начинающих дизайнеров, которое доступно бесплатно.
- Еще один электронный ресурс, но по платной подписке — учебник «Типографика и верстка» издательства «Бюро Горбунова». Обратите внимание на оформление сайта — это лучшая реклама содержания.
- На начальном этапе полагайтесь на готовые подборки сочетаний гарнитур. Они есть на множестве сайтов: FontPair, Fontjoy, Canva Font Combinations и других.
- Используйте не более 2–3 гарнитур в одном проекте. Это правило универсально для задач любой направленности в типографике. Если вы только начинаете изучать что такое типографика, рекомендуем сперва ограничиться одной гарнитурой.
- Установите расширение WhatFont для Chrome или для Safari, чтобы быстро узнать название понравившегося шрифта.
- Типографика построена на акцентах. Используйте начертания и кегль, чтобы расставлять их и создавать структуру текста. Традиционно заголовок имеет жирное начертание и значительно больший кегль, чем основной текст. Например, он может быть выполнен шрифтом Helvetica Bold 48 pt, а основной текст — Helvetica Regular 14 pt.
Источник: https://geekbrains.ru/posts/typographics_basics
Блог
Друзья!
В этой статье я продолжу разбор наиболее частых ошибок начинающих дизайнеров.
Сегодня речь пойдет об использовании шрифтов. Знаете, как я могу отличить работу новичка от профессионала? Новичок, как правило, старается продемонстрировать в своей работе всё, чему он успел научиться.
Это проявляется в обильном использовании различных цветов, всевозможных эффектов и, разумеется, многочисленных шрифтов в одной и той же работе. Дизайнер-профессионал же напротив, как правило, использует один, в крайнем случае — два шрифта в рамках одного проекта, а также ограниченную цветовую палитру.
И если уж совсем не обойтись без графических эффектов, то старается свести их использование к минимуму.
Итак, если правило номер один для грамотного дизайна — это построение модульной сетки (см. статью «Свободное пространство и модульная сетка»), то правило номер два звучит так: ограничивайте количество шрифтов!
Минимальное количество шрифтов способствует соблюдению принципа единства и соответствия в дизайне. Чем меньше ваша работа содержит различных стилей и пестрит всевозможными цветами и шрифтами, тем осмысленнее и профессиональнее она выглядит.
Чаще всего дизайнер выбирает один шрифт для проекта. Причем характер выбранного шрифта дожен соответствовать креативной идее, либо настроению дизайна. Например, если мы делаем буклет, посвященный сотовому телефону третьего поколения, то нам скорее всего подойдет легкий современный шрифт без засечек.
А вот буклету на тему выставки импрессионистов в Эрмитаже больше подойдет классический, «прочно стоящих на ногах», шрифт с засечками. Вообще, удачный подбор шрифтов крайне важен в работе дизайнера, потому как несоответствие характера шрифта идее и характеру проекта может загубить всю работу на корню.
Иногда неоходимо использовать добавочный шрифт. В работе с двумя шрифтами — первый шрифт как бы подчеркивает настроение и характер работы и зачастую придает ей индивидуальность. Этот шрифт используют для заголовков и подзаголовков.
Иногда для этой цели дизайнеры используют необычные шрифты. Это делается вовсе не ради погони за оригинальностью, а с целью выделить конкретные части текста за счет усиления контраста по отношению ко второму более привычному шрифту.
Поскольку заголовков не так уж много в одной работе, то принцип контраста срабатывает безотказно, тем более, что заголовки значительно крупнее основного текста.
Второй шрифт, как правило, более привычен глазу и его задача не привлекать внимание зрителей, а выполнять чисто информативную функцию. Он должен легко читаться и не утомлять глаз.
Новички часто делают грубую ошибку, создавая большие текстовые фрагменты экстравагантным, трудно-читаемым шрифтом. К таким шрифтам я также отношу подавляющее большинство так называемых «рукописных» шрифтов.
Такие шрифты хороши, скажем, для маленькой поздравительной открытки, но не для работы с большим количеством текста.
Вот примеры хорошего применения шрифта:
Как вы видите, здесь используется всего два шрифта. Один для заголовков, а другой для основного текста. Такая работа выглядит изящно и последовательно.
А вот неудачное использование шрифтов:
Здесь я намеренно использую несколько необычных шрифтов, чтобы вы почувствовали дисгармонию и несоответствие такого дизайна. Не используйте слишком много шрифтов в своей работе! Нет ничего хуже работы, где перемешано 8 различных шрифтов, а тем более шрифров экстравагантных и трудно-читаемых.
Вот пример такой работы: 
Это не плод моей фантазии. Таких работ я видел множество, и выполнены они были, как правило, либо дизайнерами-новичками, либо любителями.
Если вы обратитесь к учебнику дизайна, то скорее всего найдете там рекомендации использовать шрифт без засечек для заголовков, а в качестве основного текста — с засечками.
Но это правило слишком общее и на практике его часто приходится обходить.
Поэтому напоследок ещё один маленький совет. Если шрифт заголовка выглядит современным, то в качестве основного шрифта лучше выбирать шрифт без засечек. Если же ваш первый шрифт старомодный, то основной шрифт должен быть с засечками.
Тема использования шрифтов неисчерпаема, поэтому невозможно рассказать обо всем в одной маленькой статье. По мере возможности, я буду делиться с вами своими знаниями о работе со шрифтами. Кстати говоря, в моем обучающем курсе по программе Индизайн, я уделяю большое внимание этой важной теме.
Поделиться в соц. сетях:
Источник: https://creativshik.com/o-kolichestve-i-kachestve-shriftov-v-graficheskom-dizajne/
Что такое типографика в веб-дизайне
Один из источников информации — это текст. Чтобы привлечь внимание читателя и выделить материал среди других, его стараются красиво оформить и сделать легким для восприятия. Направление, которое содержит в себе правила о расположении текста, выборе шрифтов и размеров, называется типографикой.
Чтобы сделать текст удобным для чтения и правильно подобрать шрифт, необходимо узнать, из чего состоит типографика и какие шрифты можно использовать на сайте.
Типографика — это оформление наборного текста. Его располагают на бумаге или экране, настраивают отступы и интервалы, подбирают шрифт. Хорошо проработанный материал смотрится лаконично и приятно. Легко читается, ощущается гармония.
Typography Playbook by Nguyen Le
До появления компьютеров правила типографики использовали для создания макетов книг, газет и плакатов. Теперь их применяют для удобного отображения информации на дисплее — в программах и на сайтах.
Правила типографики учитывают параметры шрифта, размеры текста, его расположение. Чтобы хорошо оформить текст, нужно знать, какие шрифты использовать на сайте, что такое начертание, каковы пропорции между основным текстом и заголовком.
Внешний вид сайта во многом зависит от используемых шрифтов. Правильно подобранный шрифт помогает читать быстрее. Обычно пользователь заходит на страницу, пробегает взглядом по тексту и сразу получает нужную информацию.
Если использовать какой-то необычный шрифт, рукописный или акцидентный, то читать станет сложнее. Скорее всего, посетитель сайта не станет тратить время на то, чтобы разобрать текст, и просто закроет страницу.
Чтобы решить, какой шрифт выбрать для сайта, нужно знать, какие бывают семейства, что такое начертание и классификация.
Шрифты отличаются характером, внешним видом, стилем. Какие-то — статические, какие-то передают динамику. Но все эти различия видит опытный человек, а простой пользователь, скорее всего, не заметит.
Главное визуальное различие шрифтов — засечки на буквах. Этот параметр называется классификацией шрифта. На сайтах чаще всего встречается две классификации: антиква и гротеск.
Антиква — шрифт с засечками, поэтому часто в названии есть слово serif («засечка»). Популярная антиква: Times New Roman.
Шрифт Times New Roman
Передает ощущения надежности и традиционности. Шрифт с засечками выглядит строго и классически. Используется в бумажных книгах, журналах и печатных изданиях. Длинный текст, набранный таким шрифтом, удобно читать.
Гротеск — классификация шрифта без засечек. В названии его часто встречается слово sans («без»). Популярные представители гротеска: Arial, Helvetica, Verdana.
Шрифт Arial
Гротеск ассоциируется с чем-то современным и легким. Его часто использует в чертежах и технической документации, в интерфейсах программ, на сайтах.
Гарнитура — это название одной шрифтовой семьи, которая состоит из разных начертаний.
Различные начертания шрифта Montserrat
Привычное начертание — нормальное (Regular), остальные начертания зависят от вида шрифта и цели, для которой его создавали. Отличаются друг от друга наклоном, пропорциями, толщиной, но имеют одинаковый характер.
Светлое (Thin, Light); нормальное (Regular); полужирное (DemiBold, SemiBold); жирное (Bold, Extra Bold)
Узкое (Narrow, Condensed); нормальное; широкое (Wide, Extended, Expanded)
Размер шрифта подбирают для каждого сайта индивидуально. Главное, чтобы читать текст на странице было комфортно.
Размер для обычного текста — 16-22 px. При этом длина строки не должна превышать 75 символов. Если текста мало, то его делают крупнее, а для статей и длинных записей — мельче.
Правильно подобранные размеры заголовков помогают создать контраст с основным текстом на странице. Для расчета пользуются коэффициентом из золотого сечения — 1,6.
Чтобы узнать размеры заголовков, кегль основного текста умножают на 1,6.
Заголовок 4: 18х1,6 = 27px.
Полученный результат умножают на 1,6 еще раз, чтобы узнать размер заголовка следующего уровня:
Заголовок 3: 27х1,6 = 40px.
Вычислить, какой размер шрифта на сайте лучше использовать, можно с помощью калькулятора. На основе параметров обычного шрифта он подбирает оптимальные размеры для заголовков.
Использование разных шрифтов на сайте помогает создать контраст и задает настроение во время чтения текста. Поэтому дизайнеры тщательно подбирают шрифты для сайта, анализируют разные сочетания.
Для выбора сочетания шрифтов нет каких-то определенных алгоритмов, потому что каждый проект индивидуален.
Обычно сочетают либо разные начертания одного и того же шрифта, либо выбирают два шрифта разной классификации. Комбинирование антиквы и гротеска помогает показать иерархию текста и добиться хорошей читабельности.
Самый простой способ подобрать пару шрифтов — просмотреть несколько, сравнить и проанализировать, какие пары подойдут.
Хорошие сочетания шрифтов
Искать шрифтовые пару удобно с помощью сервисов Паратайп и FontPair.
В интернете можно найти бесплатные и платные шрифты. И те, и другие шрифты можно использовать на сайте.
Источник: https://skillbox.ru/media/design/chto_takoe_tipografika/
Обзор шрифтов
Шрифт разделяется на категории (categories)- наиболее широкие, наиболее общие группы, организованные графической формой буквы или знака. Категория шрифта, кроме того, детализируется на классы (classes), или классификации (classifications), которые имеют общие специфические характеристики, как, например, толстые и тонкие штрихи (thick- and-thin strokes). Они, далее, разделяются на семейства (familes), или стили (styles), шрифта, имеющие общий дизайн. Семейства разделяются на конкретные гарнитуры шрифта (faces), как, например, обычный (regular), курсив (italic), жирный (bold), растянутый (extended) или сжатый (condensed).
Категории шрифта
Пять основных категорий шрифта- это шрифт с засечками (serif- сериф), шрифт без засечек (san serif- сансериф), рукописный шрифт (script- скрипт), декоративный (decorative- декорейтив) и смешанный (pi- пи).
Шрифт с засечками (serif)
Элементами, которые помагают идентифицировать шрифт с засечками, служат засечки, то-есть, штрих или черточка вверху или в основании литеры, или дужка или отросток ввиде шпоры на некоторых литерах.
Благодаря своему официальному, традиционному внешнему виду шрифты с засечками обычно используются так-же для того, чтобы передать консервативный, возвышенный образ.
За исключением шрифта «бодони» (Bodoni), эти гарнитуры шрифтов легко читаются и широко используются для длинных пассажей текста.
Шрифт без засечек (san serif)
Шрифты без засечек не имеют засечек (штрихов) вверху или в основании литеры. Благодаря хорошей читаемости этих шрифтов их используют для нанесения маркировки и этикеток.
Из-за того, что многие заголовки газет набираются в шрифтовой гарнитуре без засечек, мы привыкли ассоциировать «факты» со шрифтами без засечек.
При использовании шрифта, обращенного по отношению к фону, шрифтовая гарнитура без засечек- это хороший выбор.
Шрифт рукописный (script invitation)
Любая шрифтовая гарнитура, которая выглядит так, как будто она была создана пером или кистью, вне зависимости от того, слитно или раздельно написаны буквы, есть рукописная гарнитура (script).
Они часто используются для приглашений и извещений и иногда для логотипов. Используйте рукописные шрифты с осторожностью: они не приветствуются в некоторых дизайнерских школах, и они- не подходящие для определенных целевых аудиторий.
Рукописные шрифты легко различить.
Декоративный шрифт
Декоративные, или демонстрационные, гарнитуры шрифтов предназначены для использования в заголовках и для того, чтобы передавать определенный смысл. Нужно иметь ввиду, что декоративные шрифты могут быть чрезвычайно сложно задуманы и разработаны. Основным соображением для выбора шрифта всегда должна быть читаемость.
Пи (pi) шрифт
Пи- шрифты, часто называемые символьными, логограммами, используются для того, чтобы вставить в текст символы, которые повторно используются много раз. Пи- шрифт есть коллекция соответствующих символов. Они могут включать символы в математический шрифт, в логотип компании, блоки в кроссворд, рамки для страницы и картографические символы. Известны сотни Пи- шрифтов.
Семейства шрифтов
Семейство шрифтов есть набор шрифтов, которые имеют общую конструкцию начертания букв. Шрифты в пределах одного семейства являются близкородственными, использующими вариации основного начертания буквы. Некоторыми обычными вариациями является расширенный, сжатый, контурный, жирный и тонкий.
Стиль шрифта есть обработка изображения, которая может быть применена к любому шрифту: курсив (italic), жирный (bold), контур (outline) и т.д.
Этот вид стиля включается обычно как приложение в программное обеспечение текстового редактора или настольной издательской системы. Стиль шрифта обычно используется для того, чтобы добавить разнообразие или выразительность внутри текстовой части издания.
Не используйте курсив или жирный шрифт случайным образом, или у вас должны быть веские причины для использования стилей. Не применяйте жирный шрифт к определенному слову только потому, что абзац был целиком набран обычным шрифтом.
Выбор определенных стилей диктуется традицией: название кинофильмов, книг, журналов и любых опубликованных работ набираются курсивом. Иностранные слова также обычно набираются курсивом.
Когда мы разрабатываем дизайн для распечатки, мы должны правильно назначить курсив и жирный шрифт, иначе будете удивлены, когда ваша работа будет отображена.
Если мы выбираем из меню жирный шрифт или курсив, а для данного шрифта не существует версий в жирном шрифте или курсиве, то все то, что мы наметили распечатывать в выбранном стиле, будет напечатано в обычном стиле, или этот шрифт может быть заменен по умолчанию на шрифт «Courier».
Другая ловушка может подстерегать там, где случается, что мы щелкаем кнопкой мыши на опцию меню «Minion» и щелкаем на «bold», мы получим «Minion Semibold» («Миньон полужирный»). Если мы выбираем в гарнитуре шрифта «ITC Garamond Book» и щелкаем на «bold», мы получим «ITC Garamond Book». Всегда надежнее выбирать из меню шрифтов свой шрифт.
Кернинг, трекинг и лидинг
Хорошо использовать шрифт- это нечто большее, чем просто выбрать нужное семейство шрифтов.
Как выбранный шрифт будет выглядеть на странице, зависит в большей степени от плотности и рыхлости букв и от величины промежутков, оставляемых между строками.
Хотя эти элементы обычно известны как «межбуквенный пробел» и «межстрочный интервал», мы будем употреблять следующие названия элементов размещения пробелов на полосе набора: кернинг, трекинг и лидинг.
- Кернинг
- Трекинг
- Лидинг
Кернинг- уменьшение межбуквенного промежутка в характерных парах букв для обеспечения удобочитаемости. В программных средствах обработки текстов и в настольных издательских системах используются кернинговые пары букв шрифта по умолчанию. В большинстве профессионально разработанных шрифтов содержатся сотни или даже тысячи кернинговых пар. Некоторые сочетания букв, в особенности при больших размерах, могут выглядеть неуклюже без дополнительного кернинга. Трекинг- установка межбуквенного расстояния, в отличие от кернинга, корректирует межбуквенный пробел для ряда букв, а не просто пробел между двумя буквами. Если вы используете шрифт, выровненный по обеим полям, вы можете заметить, что в разных строках по всему тексту устанавливается различная ширина пробела между буквами. Использовать трекинг нужно с осторожностью- слишком много трекинга может сделать текст скрученным, нечитаемым.
Лидинг- это пространство между строками текста, измеренное от базовой линии одной строки до базовой линии следующей строки.
Межстрочный интервал должен быть достаточным для того, чтобы буквы не сталкивались друг с другом, позволяя иметь достаточную глубину для подстрочных элементов литеры и высоту- для верхних выносных элементов литеры, возвышающихся над основной строкой.
Пространство между строками должно делать чтение удобным для читателя. Лидинг зависит от слов в текстовом блоке: строка без литер с нижним выносным элементом может быть размещена более плотно, чем строка с многими буквами, спускающимися ниже базовой линии.
Область возможного при использовании шрифтов
Возможно использовать шрифт с засечками, чтобы передавать позицию традиционных, общепринятых ценностей и стабильности.
Использовать шрифт без засечек, чтобы обозначить иллюстрацииИспользовать шрифт без засечек, чтобы придавать современный вид, или для детских книжекИспользовать декоративный шрифт для обработки, придающей стиль новизныИспользовать декоративный шрифт скупо, расчетливоИспользовать декоративный шрифт только демонстрационного размера (24 пункта или больше)Использовать рукописный шрифт для извещений и приглашений
Использовать шрифт, соответствующий вашему посланию
Ограничения
Не используйте шрифт, состоящий из одних заглавных букв. Его трудно читать, чем шрифт, состоящий из заглавных и строчных був.Не используйте несколько различных гарнитур шрифта в пределах одного проектаНе аспользуйте шрифт без кернинга для демонстрационных целейНе оставляйте слишком много или слишком мало пространства между строками текста
Если вам интересно узнать, следует ли использовать со шрифтом специальный эффект, попробуйте это. Если вы все еще в сомнении, лучше этого не делайте.
Источник: https://paintmaster.ru/lesson9.php.php
Загрузка...
