Презентация Типографика. Основные термины и понятия типографики
 Скачать 3.61 Mb.
|
|
Типографика Типографика • область графического дизайна, которая занимается шрифтами и текстом, но не только вопросами подбора шрифтов, а прежде всего вопросом использования текста в графических макетах. Основные термины и понятия типографики Гарнитура • шрифт или несколько шрифтов, имеющих стилистическое единство начертания. Состоит из набора знаков Антиква — классический старый шрифт с засечками Гротеск — шрифт без засечек Шрифты с засечками (Serif) • Шрифты с засечками имеют древнее происхождение, поэтому вызывают чувства элегантности, утончённости, изящности, кокетливости, шикарности, приверженности старым традициям, аристократичности. • Хорошо подходят как для наборного текста, так и для заголовков Шрифты без засечек (Sans Serif) • Эти шрифты появились только в 19 в. Они вызывают эмоции простоты, лёгкости, технологичности, геометричности, пропорциональности, реализма, серьёзности, некоторые даже брутальности. • Тоже хорошо подходят и для наборного текста, и для заголовков. Брусковый шрифт — отличается от обычной антиквы ровными прямоугольными засечками Рукописный шрифт выглядит так, будто его нарисовали кистью Прямое начертание — это классический машинописный шрифт Курсив — это легкий наклон букв вправо, как при рукописном письме Графема — это общий скелет буквы. Букву можно нарисовать или сложить из чего угодно, но благодаря единой графеме вы сможете отличить А от Б Контраст — определяется разницей толщины штрихов. Чем больше разница между тонкими и толстыми линиями, тем выше контрастность Акцидентный шрифт — используют в заголовках Наборный шрифт — используют в больших массивах текста Книгах, статьях В моноширинном все буквы занимают одинаковую площадь, равную самой большой литере В пропорциональном занимаемая литерой площадь зависит от ее размеров: английская i будет занимать в 2-3 раза меньше места, чем n Пропорциональный и моноширинный шрифты отличаются размерами литер Кегль — высота буквы, включающая в себя нижние и верхние выносные элементы. Измеряется в pt Интерлиньяж — межстрочный интервал. Расстояние между базовыми линиями соседних строк Трекинг — расстояния в строке между символами Кернинг — регулирование межбуквенного расстояния для каждой отдельной буквенной пары Выравнивание текста • Выключка — это способ выравнивания текста. Есть 4 вида выключки: слева, справа, по центру и по ширине Работа со шрифтами. Где брать, как подбирать и сочетать Как подобрать шрифт • Чтобы выбрать подходящий шрифт, нужно определить какие ассоциации и эмоции вызывает сам текст. • Сравните два варианта — какой шрифт на ваш взгляд подходит лучше для этого текста? Характер шрифта должен соответствовать вашей тематике Шрифт должен легко считываться Как сочетать разные шрифты Для создания оформления проекта часто используют шрифтовую пару — один шрифт для заголовков, а другой — для описания или наборного текста. Основные способы создания шрифтовой пары: • Разные начертания одного шрифта (Regular, Bold, Italic) • Шрифт с засечками + шрифт без засечек • Заголовок акцидентным шрифтом, а описание — более спокойным Разные начертания одного шрифта (Regular, Bold, Italic) заголовок — Arvo Bold, описание к заголовку — Arvo Regular Шрифт с засечками + шрифт без засечек заголовок — Impact, описание — Arvo Заголовок акцидентным шрифтом, а описание — более спокойным заголовок — Celestina Где брать шрифты? • Google Fonts — это каталог бесплатных веб-шрифтов от Google. С помощью этого сервиса вы сможете выбрать шрифт, посмотреть, как он будет выглядеть применительно к нужному тексту. А также подобрать шрифтовую пару. • Fontstorage — коллекция бесплатных шрифтов, отличается огромным количеством кириллических шрифтов, а так же наличием полигона, на котором вы можете посмотреть сочетание разных гарнитур и начертаний шрифтов. Правила оформления текстов • Типографьте текст перед публикацией. Используйте, например, типограф Лебедева . Он учитывает десятки правил типографики: убирает висячие предлоги, ставит правильные кавычки, заменяет дефис на тире. Кавычки В русских текстах используются «елочки» или „лапки“: «слово» „слово“ Во всех текстах на английском: “word” ‘word’ Тире Неправильно: Коляныча - за пивом послать! Правильно: Коляныча — за пивом послать! Тире не надо путать с дефисом — оно обычно в два-три раза длиннее: Разбивайте текст на абзацы по смыслу • Смотрите, где по смыслу заканчивается одна мысль и начинается другая Соблюдайте баланс длины строки и межстрочного отступа • Чем длиннее строка, тем больше должен быть межстрочный отступ, так как при чтении длинных строк легко сбиться Этот текст набран с отрицательным интерлиньяжем Этот текст набран с интерлиньяжем по кеглю Этот текст набран с большим интерлиньяжем • В конце заголовков, подзаголовков и слоганов точки не ставятся, а вот знак вопроса, восклицательный знак и многоточие ставятся. Точка в конце заголовка Оформление кнопок или призывов к действию: При выравнивании текста по левому краю следите за тем, чтобы правый его край был равномерным, т.е. чтобы не было вот такой скачущей красной лесенки: это выглядит некрасиво, и усложняет чтение, особенно если текста много При оформлении проекта рекомендуется брать 2 шрифта — один основной (для крупных заголовков), второй — для наборного текста, например, для подзаголовков и описаний Подчеркивание: • С появлением веб-сайтов этот вид выделения текста стал прочно ассоциироваться у нас с гиперссылками. Использование цвета в тексте Будьте очень осторожны с использованием цвета в тексте. Не делайте его разноцветным, лучше использовать цвет для акцентирования на важном: Когда писать букву «ё» В обычных печатных текстах буква «ё» употребляется выборочно в следующих случаях: Не стоит использовать обводку у текста Правильно оформляйте маркированные списки: Используйте визуальную иерархию заголовков: Затем увидишь этот текст Сначала ты прочтешь это Потом перейдешь к изучению этого текста А вот этот текст вообще мало кто читает Используйте достаточный цветовой контраст между текстом и фоном: Правильно оформляйте ссылки • vk.com/bsrnd • https://vk.com/bsrnd • https://vk.com/id23876181 Пр а веряйте текст на наличие оп ии сок, орфографических, синтаксических пунктуационных ошибок Теория близости • объекты, расположенные близко друг к другу, воспринимаются связанно Правая часть рисунка воспринимается как три столбика. Отсюда вывод: Внутренние расстояния элемента должны быть меньше внешних. Не правильно: Рассмотрим основы теории на примере букв: Я памятник себе воздвиг нерукотворный • Теория близости работает: буквы в словах должны быть ближе друг к другу, чем слова . Япамятниксебевоздвигнерукотворный • Как только расстояние между буквами приближается к ширине пробела, наступает хаос. Давайте применим то же правило к расстоянию между строками : слова связаны сильнее, поэтому и расстояния между словами должны быть меньше, чем между строками: • Я памятник себе воздвиг нерукотворный, К нему не зарастет народная тропа, Вознесся выше он главою непокорной Александрийского столпа. Для сравнения — тут межстрочный интервал (интерлиньяж) пережат и почти равен ширине пробела: • Я памятник себе воздвиг нерукотворный, К нему не зарастет народная тропа, Вознесся выше он главою непокорной Александрийского столпа. Расположим текст на плашке: Я памятник себе воздвиг нерукотворный, К нему не зарастет народная тропа, Вознесся выше он главою непокорной Александрийского столпа. Нет, весь я не умру — душа в заветной лире Мой прах переживет и тленья убежит — И славен буду я, доколь в подлунном мире Жив будет хоть один пиит. Слух обо мне пройдет по всей Руси великой, И назовет меня всяк сущий в пей язык, И гордый внук славян, и финн, и ныне дикой Тунгус, и друг степей калмык. Сделаем отступы от края плашки ощутимо больше расстояния между абзацами: Я памятник себе воздвиг нерукотворный, К нему не зарастет народная тропа, Вознесся выше он главою непокорной Александрийского столпа. Нет, весь я не умру — душа в заветной лире Мой прах переживет и тленья убежит — И славен буду я, доколь в подлунном мире Жив будет хоть один пиит. Слух обо мне пройдет по всей Руси великой, И назовет меня всяк сущий в пей язык, И гордый внук славян, и финн, и ныне дикой Тунгус, и друг степей калмык. Добавим заголовок: Я памятник себе воздвиг нерукотворный… Я памятник себе воздвиг нерукотворный, К нему не зарастет народная тропа, Вознесся выше он главою непокорной Александрийского столпа. Нет, весь я не умру — душа в заветной лире Мой прах переживет и тленья убежит — И славен буду я, доколь в подлунном мире Жив будет хоть один пиит. Слух обо мне пройдет по всей Руси великой, И назовет меня всяк сущий в пей язык, И гордый внук славян, и финн, и ныне дикой Тунгус, и друг степей калмык. Заголовок или подпись должны однозначно относиться к тексту. Сверстаем заголовок и текст следуя логике теории близости: буквы в словах связаны сильнее слов, слова связаны сильнее строк, строки связаны сильнее абзацев, абзацы связаны сильнее заголовка и текста, заголовок вместе с текстом связаны внутри формата: Я памятник себе воздвиг нерукотворный… Я памятник себе воздвиг нерукотворный, К нему не зарастет народная тропа, Вознесся выше он главою непокорной Александрийского столпа. Нет, весь я не умру — душа в заветной лире Мой прах переживет и тленья убежит — И славен буду я, доколь в подлунном мире Жив будет хоть один пиит. Слух обо мне пройдет по всей Руси великой, И назовет меня всяк сущий в пей язык, И гордый внук славян, и финн, и ныне дикой Тунгус, и друг степей калмык. В этой анимации дизайн формы шаг за шагом изменяется с помощью теории близости, и логически связанные элементы становятся ближе друг к другу: Полезные сервисы для работы со шрифтами: • canva.com — сервис для подбора шрифтов. • Whatfont — это приложение для браузера Google, которое поможет определить название понравившегося шрифта на любом веб-сайте. • WhatTheFont — а этот сервис поможет определить название шрифта по картинке. Интерактивные ресурсы с играми и упражнениями, которые помогут вам усовершенствовать свои знания по типографике Kern Type Ресурс, который позволяет потренировать ваше «чувство кернинга» (расстояние между отдельными буквами) Typewar Это игра, в которой вам нужно определить общие шрифты на основе одной буквы Shape Type Упражнения с использованием кривых Безье чтобы завершить формы различных букв из разных шрифтов |