УРОК 2
ТИПОГРАФИКА
ФУНКЦИОНАЛЬНАЯ ТИПОГРАФИКА
ФУНКЦИОНАЛЬНАЯ ТИПОГРАФИКА
Ecли хотим сделать макет с качественной типографикой придется копаться в деталях и стать перфекционистом, где "почти" нас не устроит, а нужно идеально.
И самое главное понять, что типографика — это искусство визуального представления текста. Все остальное — лишь методы достижения конечной цели.
И самое главное понять, что типографика — это искусство визуального представления текста. Все остальное — лишь методы достижения конечной цели.
1. КЕГЛЬ
2. ДЛИНА СТРОКИ
3. КЕРНИНГ
4. ТРЕКИНГ
5. ИНТЕРЛИНЬЯЖ
6. ВИСЯЧИЕ СТРОКИ И ПРЕДЛОГИ
7. ВЫКЛЮЧКА
8. ЦИФРЫ, ТИРЕ, МИНУС И ДЕФИС.
9. ПРОБЕЛЬНЫЕ РАССТОЯНИЯ
2. ДЛИНА СТРОКИ
3. КЕРНИНГ
4. ТРЕКИНГ
5. ИНТЕРЛИНЬЯЖ
6. ВИСЯЧИЕ СТРОКИ И ПРЕДЛОГИ
7. ВЫКЛЮЧКА
8. ЦИФРЫ, ТИРЕ, МИНУС И ДЕФИС.
9. ПРОБЕЛЬНЫЕ РАССТОЯНИЯ
ЭЛЕМЕНТЫ:
A
V
ПЕЧАТНАЯ ТИПОГРАФИКА
ЭЛЕКТРОННАЯ ТИПОГРАФИКА
1. КЕГЛЬ
Это размер шрифта по высоте. Определяется в типографских пунктах. Для печати и для экранов разны стандарты.
От 9pt - до 12pt для основного текста. Заголовки могут быть абсолютно любого размера (зависит от задумки)
От 14pt - до 20pt для основного текста. Заголовки могут быть также абсолютно любого размера (зависит от задумки)
ПЕЧАТНАЯ ТИПОГРАФИКА
ЭЛЕКТРОННАЯ
ТИПОГРАФИКА
ТИПОГРАФИКА
2. ДЛИНА СТРОКИ
Это ширина блока набранного текста и в печати и на экране. Длина строки может влиять на скорость чтения. Слишком длинные строки уменьшают скорость чтения,
тк читателям нужно больше времени, чтобы вернуться к началу следующей строки;
тк читателям нужно больше времени, чтобы вернуться к началу следующей строки;
Идеальная около 66 символов
(включая пробелы и символы)
Но может быть и меньше, если речь
идет о верстки колонками, как в журналах
и газетах (от 30 символов в строке)
(включая пробелы и символы)
Но может быть и меньше, если речь
идет о верстки колонками, как в журналах
и газетах (от 30 символов в строке)
Оптимальная длина строки варьировалась от 45 до 75 знаков. Считается, что 66 знаков — это идеальная длина
3. КЕРНИНГ
Это уменьшение или увеличение расстояния между некоторыми парами букв в слове (в частности между треугольными и узкими буквами). Чтобы визуально расстояние между буквами казалось одинаковым.
ADOBE ILLUSTRATOR
оптический кернинг
метрический кернинг
В большинстве программ предназначенных для верстки текста применяется запрограммированные настройки кернинга. Метрический и оптический способ.
При оптическом способе расстояние между буквами устанавливается в соответствии со значениями из таблицы кернинговых пар, встроенной в файл со шрифтом и позволяет аккуратно выровнять шрифт, поэтому лучше на ней и остановиться.
При оптическом способе расстояние между буквами устанавливается в соответствии со значениями из таблицы кернинговых пар, встроенной в файл со шрифтом и позволяет аккуратно выровнять шрифт, поэтому лучше на ней и остановиться.
ADOBE INDESIGN
Проверить способ кернинга можно через свойства, окошко открывается через меню просмотр
Равномерное изменение межбуквенного расстояния. В отличие от кернинга, регулирующего расстояние между знаками в определенных парах («AV», «TA» и пр.), трекинг применяется к группе символов (слово, строка, абзац и т. д.).
4. ТРЕКИНГ
ADOBE ILLUSTRATOR
ADOBE INDESIGN
Также как и кернинг трекинг можно отредактировать через свойства, окошко открывается через меню просмотр
Межстрочный интервал. Расстояние между базовыми линиями (линия, на которой стоит шрифт) соседних строк.
5. ИНТЕРЛИНЬЯЖ
ADOBE ILLUSTRATOR
ADOBE INDESIGN
Также как и кернинг и трекинг интерлиньяж можно отредактировать через свойства, окошко открывается через меню просмотр
Если данное расстояние
будет слишком большим,
то читать такую
информацию будет
очень сложно, строчки
перестанут
восприниматься
единым текстом.
будет слишком большим,
то читать такую
информацию будет
очень сложно, строчки
перестанут
восприниматься
единым текстом.
Если данное расстояние будет слишком большим,
то читать такую информацию будет очень сложно,
строчки перестанут восприниматься единым текстом.
то читать такую информацию будет очень сложно,
строчки перестанут восприниматься единым текстом.
Если, расстояние будет слишком маленьким, это тоже повлияет на удобочитаемость. Строчки начнут слипаться и воспринимать такой текст будет также очень сложно
Чтобы было удобно читать и информация воспринималась легко, необходимо
настроить правильный интерлиньяж.
настроить правильный интерлиньяж.
При настройке правильного интерлиньяжа лучше всего отталкиваться от размера текста и длины строки.
Чем ДЛИННЕЕ СТРОКА, ТЕМ БОЛЬШЕ ИНТЕРЛИНЬЯЖ
120%
140%
Чем уже строка, тем интерлиньяж должен быть меньше
Чем строка шире, тем больше должен быть интерлиньяж. Так текст будет читаться лучше и информация восприниматься проще
Если в узкой строке (до 30-40 символов) размер текста 24pt, то интерлиньяж должен равняться 28,9 (округляем до 29 pt)
Если в строке от 40 до 60 сиволов. то при размер текста 24pt интерлиньяж должен равняться 33,6pt (округляем до 34 pt)
Например:
Чем БОЛЬШЕ РАЗМЕР ТЕКСТА, ТЕМ БОЛЬШЕ ИНТЕРЛИНЬЯЖ
При настройке правильного интерлиньяжа лучше всего отталкиваться от размера текста и длины строки.
Чем ДЛИННЕЕ СТРОКА, ТЕМ БОЛЬШЕ ИНТЕРЛИНЬЯЖ
Например:
При настройке правильного интерлиньяжа лучше всего отталкиваться от размера текста и длины строки.
Чем ДЛИННЕЕ СТРОКА, ТЕМ БОЛЬШЕ ИНТЕРЛИНЬЯЖ
Например:
ИНТЕРЛИНЬЯЖ В ЗАГОЛОВКАХ ВСЕГДА МЕНЬШЕ, ЧЕМ В ОСНОВНОМ ТЕКСТЕ
100%
т.е. при заголовке 20pt интерлиньяж будет также равняться 20 pt
т.е. при размере текста в 12pt интерлиньяж будет равняться 14,4 pt
120%
Для основного текста подойдут средние значения интерлиньяжа
150%
Для мелкого текста
интерлиньяж увеличиваем
интерлиньяж увеличиваем
т.е. при размере текста в 8pt интерлиньяж будет равняться 12 pt
При настройке правильного интерлиньяжа лучше всего отталкиваться от размера текста и длины строки.
Чем ДЛИННЕЕ СТРОКА, ТЕМ БОЛЬШЕ ИНТЕРЛИНЬЯЖ
Например:
20%
_
Если с висячими строками все давольно однозначно, то с предлогами все не так просто. В последнее время все чаще отказываются от их переноса.
Да, с ними верстка выглядит немного хуже, она не кажется такой чистой, но с ними текст становится читать немного легче. Т.к. по этим "висякам" пользователь понимает, что предложение не закончилось и переходит на следующую строку.
Да, с ними верстка выглядит немного хуже, она не кажется такой чистой, но с ними текст становится читать немного легче. Т.к. по этим "висякам" пользователь понимает, что предложение не закончилось и переходит на следующую строку.
6. ВИСЯЧИЕ СТРОКИ И ПРЕДЛОГИ
Висячая строка — это последняя строка в абзаце, расположенная в начале колонки, а также начальная строка абзаца, оказавшаяся в конце колонки. Она оторванна и висит отдельно от абзаца на предыдущей или последующей странице.
Висяки — это предлог, союз или однобуквенное слово в конце строки. Профессиональные корректоры рекомендуют его переносить на следующую строку.
втянуть
перенести
втянуть или переверстать текст по-другому
Какие же были вкусные блинчики у
бабушки в деревне!
бабушки в деревне!
Какие же были вкусные блинчики
у бабушки в деревне!
у бабушки в деревне!
Графически плохо, по смыслу отлично
Хорошо графически, но плохо с разделением мысли.
предлог у помогает понять, что смысл не просто во вкусных блинчиках, а именно в том, у кого они были
задержали дыхание, пока переходим на новую строку
ок, понятно
а вот как, тут продолжение!
Поэтому если у вас в тексте образовалась висячая строка, то тут однозначно перевёрстываем текст так, чтобы от нее избавиться (переносим слова или добавляемая в них переносы). А вот если есть висячие предлоги, то тут на ваш выбор, либо на выбор редактора/корректора, который будет вычитывать ваш текст.
Выключка — это способ выравнивания строк текста относительно выбранных границ или элементов макета.
Существует несколько видов основных вариантов выключки: по левому краю,
по правому краю, по центру.
И неколько не самых очевидных вариантов: выключка по форме, выключка по знаку,
в том числе и по пробелу. Ниже мы рассмотрим все варианты.
Существует несколько видов основных вариантов выключки: по левому краю,
по правому краю, по центру.
И неколько не самых очевидных вариантов: выключка по форме, выключка по знаку,
в том числе и по пробелу. Ниже мы рассмотрим все варианты.
7. ВЫКЛЮЧКА
Выключка по левому краю
Выравнивания строк текста относительно левого края текста, часто называется флаговой, так как имеет сходство с флагом, где есть жесткий левый край
и подвижный правый.
и подвижный правый.
Главная проблема выравнивания по левому краю — это гармоничный правый край.
Самое важное в такой верстке — баланс, чтобы справа не было слишком много переносов, чтобы край был не очень рваный и не слишком ровный (т.к. у нас выключка не по ширине), чтобы не была висячих строк, и "лесенок". Давайте все ошибки рассмотрим сразу на примере.
Типичные ошибки при верстке с выключкой по левому краю
висячие
предлоги
предлоги
резкие перепады
текста, "лесенка"
текста, "лесенка"
висячая строка
и снова перепад
и снова перепад
"лесенка"
и множество
переносов
+ висячая строка
и множество
переносов
+ висячая строка
Выключка по правому краю
Выравнивания строк текста относительно правого края текста, используется в случае, если мы хотим подчеркнуть графически элементы макета (фото, другой блок текста и т.д.).
Большие объемы текста лучше делать с выключкой по левому краю и избегать выключки справа, тк всем, кто читает слева направо, текст читать и воспринимать быстрее, если он будет выравнен по флаговому способу.
Большие объемы текста лучше делать с выключкой по левому краю и избегать выключки справа, тк всем, кто читает слева направо, текст читать и воспринимать быстрее, если он будет выравнен по флаговому способу.
Для выравнивания по правому краю актуальны все те же пункты, что и для выравнивания по левому краю. Следим за балансом. Чтобы справа не было слишком много переносов, чтобы левый край был не очень рваный и не слишком ровный (т.к. у нас выключка не по ширине), чтобы не была висячих строк, и "лесенок".
Выключка по центру
Выравнивания строк текста относительно центра текста.
Выравнивание по центру лучше всего подходит для небольших объемов текста: заголовков, выносок, цитат.
И для выключки по центру актуальны все теже проблемы, которые встречаются в выравнивании по правому и левому краям, но только в центровом выравнивани нужно следить уже за двумя краями сразу.
Выравнивание по центру лучше всего подходит для небольших объемов текста: заголовков, выносок, цитат.
И для выключки по центру актуальны все теже проблемы, которые встречаются в выравнивании по правому и левому краям, но только в центровом выравнивани нужно следить уже за двумя краями сразу.
"лесенка"
и множество
переносов справа
и множество
переносов справа
"лесенка"
висячая
строка
строка
висячий
предлог
предлог
висячий
предлог
предлог
Выключка по ширине
Выравнивания строк текста относительно центра текста.
Выравнивание по центру лучше всего подходит для небольших объемов текста: заголовков, выносок, цитат.
И для выключки по центру актуальны все теже проблемы, которые встречаются в выравнивании по правому и левому краям, но только в центровом выравнивани нужно следить уже за двумя краями сразу.
Выравнивание по центру лучше всего подходит для небольших объемов текста: заголовков, выносок, цитат.
И для выключки по центру актуальны все теже проблемы, которые встречаются в выравнивании по правому и левому краям, но только в центровом выравнивани нужно следить уже за двумя краями сразу.
"лесенка"
и множество
переносов справа
и множество
переносов справа
"лесенка"
висячая
строка
строка
висячий
предлог
предлог
висячий
предлог
предлог
Ecли хотим сделать макет с качественной типографикой придется
копаться в деталях и стать перфекционистом, где "почти" нас не устроит,
а нужно идеально.
копаться в деталях и стать перфекционистом, где "почти" нас не устроит,
а нужно идеально.
ФУНКЦИОНАЛЬНАЯ ТИПОГРАФИКА
Ecли хотим сделать макет с качественной типографикой придется копаться в деталях и стать перфекционистом, где "почти" нас не устроит, а нужно идеально.
Также выделяют 2 вида типографики в зависимости от ее использования и у каждого вида есть свои особенности
ПЕЧАТНАЯ ТИПОГРАФИКА
ЭЛЕКТРОННАЯ
ТИПОГРАФИКА
ТИПОГРАФИКА
Перед тем, как переходить к функциональной, творческой, электронной и печатной типографике мы с вами познакомимся рядом понятий, чтобы мы могли говорить на одном языке.
1. ШРИФТ, ГАРНИТУРА
2. КЛАССИФИКАЦИЯ ШРИФТОВ
3. НАСТРОЕНИЕ ШРИФТОВ
2. КЛАССИФИКАЦИЯ ШРИФТОВ
3. НАСТРОЕНИЕ ШРИФТОВ
ПЛАН УРОКА:
A
V
это объединение шрифтов, которые могут отличаться по начертанию и кеглю (величине шрифта), но одинаковые по характеру рисунка. У гарнитуры всегда есть свое название отдельное название.
ГАРНИТУРА —
ШРИФТ —
это полным набором знаков внутри гарнитуры.
Большинство отмечают «шрифт» и «гарнитуру» как одно и тоже понятие, но это полностью неверно. Гарнитура — намного шире, чем просто шрифт.
Например, Times New Roman — это гарнитура. А Times New Roman Bold (жирное начертание) — это шрифт
Например, Times New Roman — это гарнитура. А Times New Roman Bold (жирное начертание) — это шрифт
ГАРНИТУРА
ШРИФТЫ
КЛАССИФИКАЦИЯ ШРИФТОВ
Самая ГРАМОТНАЯ И ПРОФЕССИОНАЛЬНАЯ – это классификация по техническому стилю:
антиква, гротески, рукописные, акцидентные и так далее.
ВИДЫ ШРИФТОВ С ЗАСЕЧКАМИ
Группы шрифтов основанные на древнеримских надписях с засечками.
Засечки – это короткие штрихи на концах основных штрихов у знаков.
Засечки бывают односторонними и двусторонними.
Их форма может быть разнообразной
Засечки – это короткие штрихи на концах основных штрихов у знаков.
Засечки бывают односторонними и двусторонними.
Их форма может быть разнообразной
АНТИКВА (Serif)
АНТИКВА старого стиля (Old Serifs)
Группы шрифтов старого стиля появились в эпоху Ренессанса
в 15 – 17 веках.
Примеры таких гарнитур – Abobe Garamond Pro, Adobe Jenson, Nicolaus, Monotype Centaur
Использование: Антиква старого стиля смотрится изысканно и красиво.
Хорошо подходит для печатных изданий, серьезных организаций.
в 15 – 17 веках.
Примеры таких гарнитур – Abobe Garamond Pro, Adobe Jenson, Nicolaus, Monotype Centaur
Использование: Антиква старого стиля смотрится изысканно и красиво.
Хорошо подходит для печатных изданий, серьезных организаций.
Главная особенность – это наклонные овалы (отмечены красной линией)
и несимметричные засечки (отмечены красными кругами)
и несимметричные засечки (отмечены красными кругами)
Переходная АНТИКВА (Transitional Serifs)
Переход от старой антиквы начался в конце 17 века. Новый рисунок шрифта создавался для нужд короля Франции Людовика 4.
Примеры таких гарнитур – Baskerville, Caslon, Georgia и Bookman.
Использование: Переходная
антиква воспринимается также
изысканно, как и антиква старого стиля, но воспринимается более
серьезно из-за более "правильной"
формы
Примеры таких гарнитур – Baskerville, Caslon, Georgia и Bookman.
Использование: Переходная
антиква воспринимается также
изысканно, как и антиква старого стиля, но воспринимается более
серьезно из-за более "правильной"
формы
Главная особенность – вертикальными осями овальных букв, скруглёнными симметричными засечками.
На эту гарнитуру особенно сильно повлияло создание остроконечного пера
На эту гарнитуру особенно сильно повлияло создание остроконечного пера
АНТИКВА нового стиля (Modern Serifs)
Самая геометричная и правильная среди всех антикв.
За границей являлась основным шрифтом для набора текстов с конца 18 до начала 20 века; в СССР до конца 80-х годов, особенно для научной и технической литературы.
Примеры таких гарнитур – Bodoni, Didot, Computer Modern
Использование:
За границей являлась основным шрифтом для набора текстов с конца 18 до начала 20 века; в СССР до конца 80-х годов, особенно для научной и технической литературы.
Примеры таких гарнитур – Bodoni, Didot, Computer Modern
Использование:
Главная особенность – высокий контраст (разница вертикальных и горизонтальных штрихов), вертикальные оси овальных элементов.
Брусковая (Slab Serifs)
Это последний важный подтип антиквы.
Эти шрифты впервые были созданы в Англии в начале 19 века и сначала использовались только как титульные, но в 20 веке они стали популярны как основные газетные шрифты.
Примеры таких гарнитур – Clarendon, Memphis, Alfa Slab One
Использование: Книжно-журнальные издания преимущественно для заголовков и выделений отдельной информации.
Эти шрифты впервые были созданы в Англии в начале 19 века и сначала использовались только как титульные, но в 20 веке они стали популярны как основные газетные шрифты.
Примеры таких гарнитур – Clarendon, Memphis, Alfa Slab One
Использование: Книжно-журнальные издания преимущественно для заголовков и выделений отдельной информации.
Главная особенность – основными и соединительными линиями либо малозаметна, либо ее нет совсем, засечки мощные, прямоугольной формы.
ВИДЫ ШРИФТОВ БЕЗ ЗАСЕЧЕК
Гротески или рубленные шрифты (Sans-Serif)
Гротески – это шрифты без засечек. Они гораздо моложе антиквы, и впервые появились в конце восемнадцатого века. Вначале применялись исключительно как акцидентные, но в двадцатом веке стали использоваться для набора текста. Существует четыре подтипа гротесковых гарнитур: старые гротески, новые гротески, гуманистические и геометрические.
Примеры таких гарнитур –
Использование:
Примеры таких гарнитур –
Использование:
Главная особенность –
Старые гротески (Grotesque)
С
Примеры таких гарнитур –
Использование:
Примеры таких гарнитур –
Использование:
Главная особенность –
Новые гротески (Neogrotesques)
С
Примеры таких гарнитур –
Использование:
Примеры таких гарнитур –
Использование:
Главная особенность –
Гуманистические гротески (Humanist)
С
Примеры таких гарнитур –
Использование:
Примеры таких гарнитур –
Использование:
Главная особенность –
Геометрические гротески (Geometric Sans-Serifs)
С
Примеры таких гарнитур –
Использование:
Примеры таких гарнитур –
Использование:
Главная особенность –
Базовый принцип вёрстки макетов это — модульность.
Особенно это касается макетов с множеством текстовой информации
Особенно это касается макетов с множеством текстовой информации
В вёрстке полноправно участвует пустота, или контрпространство, а элементы вёрстки в модулях должны следовать правилу якорных объектов.
Я рекомендую начинать с самых крупных и важных, якорных объектов. В данном случае это заголовок акции. Якорные объекты должны находиться либо у краёв своего прямоугольника, либо в визуальном центре. Поскольку мы предполагаем, что модулей будет несколько, пока выберем произвольную высоту. Заголовок, подзаголовок и начало текста лучше не разрывать:
Я рекомендую начинать с самых крупных и важных, якорных объектов. В данном случае это заголовок акции. Якорные объекты должны находиться либо у краёв своего прямоугольника, либо в визуальном центре. Поскольку мы предполагаем, что модулей будет несколько, пока выберем произвольную высоту. Заголовок, подзаголовок и начало текста лучше не разрывать:
Самое главное не начинать с сетки. Как только вы ее наче́ртите, она сразу вас загипнотизирует. Перед глазами останутся линии и клетки, а материал уйдет на второй план. Хуже того: сетка не позволит принять композиционные решения, которые выходят за ее рамки.
Для начала сто́ит разобраться с материалом, его содержанием и структурой. Набросать на бумаге несколько вариантов конструкции. Расположить блоки в соответствии с их логическими отношениями. Выделить главное, расставить акценты, сгруппировать. Только когда конструкция будет найдена, можно примерить к ней подходящую сетку.
Для меня это самый быстрый способ визуализировать идею и одновременно первый этап проверки ее на жизнеспособность. Бумага свободна от ограничений графического редактора, не навязывает стандартных решений и не деформируют идею под себя.
Рекомендации
Для начала сто́ит разобраться с материалом, его содержанием и структурой. Набросать на бумаге несколько вариантов конструкции. Расположить блоки в соответствии с их логическими отношениями. Выделить главное, расставить акценты, сгруппировать. Только когда конструкция будет найдена, можно примерить к ней подходящую сетку.
Для меня это самый быстрый способ визуализировать идею и одновременно первый этап проверки ее на жизнеспособность. Бумага свободна от ограничений графического редактора, не навязывает стандартных решений и не деформируют идею под себя.
Рекомендации
- Чтобы подружить текст с картинкой, начните с простого: выровняйте их по одним направляющим, приведите к одинаковым размерам. Для обычной, неакцидентной, верстки этого вполне достаточно.
- Дальше смотрите на форму, направление, цвет, ритм, фактуру и другие параметры, которые можно связать.
- Если картинка на макете главная — занимает больше места и привлекает больше внимание — лучше подгонять текст по нее. Если главный текст, то, наоборот, пусть подстраивается картинка.
