0 added
0 removed
Original
2026-01-01
Modified
2026-02-21
1
<p><a>#статьи</a></p>
1
<p><a>#статьи</a></p>
2
<ul><li>13 июн 2023</li>
2
<ul><li>13 июн 2023</li>
3
<li>0</li>
3
<li>0</li>
4
</ul><h2>"Основы стиля в типографике": текст глазами опытного типографа</h2>
4
</ul><h2>"Основы стиля в типографике": текст глазами опытного типографа</h2>
5
<p>Рассказываем о выборе подходящего шрифта, работе с элементами типографики и построении гармоничного макета.</p>
5
<p>Рассказываем о выборе подходящего шрифта, работе с элементами типографики и построении гармоничного макета.</p>
6
<p>Изображение: издательство "Дмитрий Аронов" / Wilfrid Laurier University photograph collection / Аня Макарова для Skillbox Media</p>
6
<p>Изображение: издательство "Дмитрий Аронов" / Wilfrid Laurier University photograph collection / Аня Макарова для Skillbox Media</p>
7
<p>Журналист, автор статей про моду, искусство и дизайн. Кастомизирует одежду и влюбляет людей в английский язык.</p>
7
<p>Журналист, автор статей про моду, искусство и дизайн. Кастомизирует одежду и влюбляет людей в английский язык.</p>
8
<p>В книге "Основы типографики" типограф Роберт Брингхёрст описывает основные принципы и правила типографики, которые помогут сделать текст понятным и привлекательным для читателя. Книга станет настольным руководством для специалистов, которые хотят улучшить знания в области оформления текста и создания качественного дизайна.</p>
8
<p>В книге "Основы типографики" типограф Роберт Брингхёрст описывает основные принципы и правила типографики, которые помогут сделать текст понятным и привлекательным для читателя. Книга станет настольным руководством для специалистов, которые хотят улучшить знания в области оформления текста и создания качественного дизайна.</p>
9
<p><strong>Издатель -<a>Дмитрий Аронов</a>.</strong></p>
9
<p><strong>Издатель -<a>Дмитрий Аронов</a>.</strong></p>
10
<p>Роберт Брингхёрст - канадский поэт, типограф, переводчик, автор книги о дизайне и типографике.</p>
10
<p>Роберт Брингхёрст - канадский поэт, типограф, переводчик, автор книги о дизайне и типографике.</p>
11
<p>В своей книге Роберт объясняет базовые понятия типографики, а также помогает читателю вникнуть в стили и выравнивание текста, иллюзию движения и типографские ловушки.</p>
11
<p>В своей книге Роберт объясняет базовые понятия типографики, а также помогает читателю вникнуть в стили и выравнивание текста, иллюзию движения и типографские ловушки.</p>
12
<p>Из материала вы узнаете:</p>
12
<p>Из материала вы узнаете:</p>
13
<ul><li>как<a>продумывать типографику</a>текста так, чтобы она дополняла смысловую часть;</li>
13
<ul><li>как<a>продумывать типографику</a>текста так, чтобы она дополняла смысловую часть;</li>
14
<li>как<a>построить план работы</a>над текстом;</li>
14
<li>как<a>построить план работы</a>над текстом;</li>
15
<li>межбуквенный интервал, интерлиньяж, переносы -<a>инструкция и чек-лист</a>.</li>
15
<li>межбуквенный интервал, интерлиньяж, переносы -<a>инструкция и чек-лист</a>.</li>
16
</ul><p>Помните, что эти правила - не прямое руководство к действию. Знакомьтесь с советами Роберта Брингхёрста и разумно применяйте их в своей работе.</p>
16
</ul><p>Помните, что эти правила - не прямое руководство к действию. Знакомьтесь с советами Роберта Брингхёрста и разумно применяйте их в своей работе.</p>
17
<p>Независимо от того, про что текст, типографика играет ключевую роль в восприятии его читателем.</p>
17
<p>Независимо от того, про что текст, типографика играет ключевую роль в восприятии его читателем.</p>
18
<p>Подобно ораторскому искусству, музыке, каллиграфии - всему, что придаёт изящество содержанию, типографика, если она применена правильно, способна прояснить, облагородить, подтвердить или умело замаскировать смысл текста (или отсутствие смысла).</p>
18
<p>Подобно ораторскому искусству, музыке, каллиграфии - всему, что придаёт изящество содержанию, типографика, если она применена правильно, способна прояснить, облагородить, подтвердить или умело замаскировать смысл текста (или отсутствие смысла).</p>
19
<p>Поэтому шрифт должен быть лёгким для чтения, передавать эмоциональный тон текста, привлекать внимание читателя, и при этом не отвлекать от основного содержания.</p>
19
<p>Поэтому шрифт должен быть лёгким для чтения, передавать эмоциональный тон текста, привлекать внимание читателя, и при этом не отвлекать от основного содержания.</p>
20
<p>Упаковка товара дополняет продукт, не забирая на себя всё внимание покупателя. Продукт может существовать без упаковки, но ценность его уменьшится в разы. То же самое и с типографикой.</p>
20
<p>Упаковка товара дополняет продукт, не забирая на себя всё внимание покупателя. Продукт может существовать без упаковки, но ценность его уменьшится в разы. То же самое и с типографикой.</p>
21
<p>Типографика должна уметь шагать по знакомой местности, избегая тривиальности, отвечать изменению условий новыми решениями и не раздражать читателя собственной оригинальностью, самоуверенно добиваясь похвалы.</p>
21
<p>Типографика должна уметь шагать по знакомой местности, избегая тривиальности, отвечать изменению условий новыми решениями и не раздражать читателя собственной оригинальностью, самоуверенно добиваясь похвалы.</p>
22
Посмотрите, как разные шрифты и начертания передают настроение стихотворения<em>Изображение: издательство Дмитрия Аронова</em><p><strong>Перевод:</strong></p>
22
Посмотрите, как разные шрифты и начертания передают настроение стихотворения<em>Изображение: издательство Дмитрия Аронова</em><p><strong>Перевод:</strong></p>
23
<p>Находится ли она к востоку от Солнца</p>
23
<p>Находится ли она к востоку от Солнца</p>
24
<p>и ближе к Луне - или</p>
24
<p>и ближе к Луне - или</p>
25
<p>к западу от Луны</p>
25
<p>к западу от Луны</p>
26
<p>и востоку от Солнца?</p>
26
<p>и востоку от Солнца?</p>
27
<p>Прежде чем работать над типографикой, Роберт Брингхёрст советует провести исследование материала - это поможет уловить его логику и определить акценты, которые необходимо подсветить.</p>
27
<p>Прежде чем работать над типографикой, Роберт Брингхёрст советует провести исследование материала - это поможет уловить его логику и определить акценты, которые необходимо подсветить.</p>
28
<p><strong>Прочитайте текст</strong></p>
28
<p><strong>Прочитайте текст</strong></p>
29
<p>Звучит банально, но, к сожалению, это важный шаг, который часто пропускают дизайнеры. Без понимания содержания текста невозможно с ним работать.</p>
29
<p>Звучит банально, но, к сожалению, это важный шаг, который часто пропускают дизайнеры. Без понимания содержания текста невозможно с ним работать.</p>
30
<p>Роберт Брингхёрст считает, что отношение типографа к тексту должно быть таким же, как театрального режиссёра к пьесе или музыканта к партитуре. Если типограф хочет получить крутой результат, он должен знать каждую строчку или каждую ноту своего произведения, а значит, без чтения не обойтись.</p>
30
<p>Роберт Брингхёрст считает, что отношение типографа к тексту должно быть таким же, как театрального режиссёра к пьесе или музыканта к партитуре. Если типограф хочет получить крутой результат, он должен знать каждую строчку или каждую ноту своего произведения, а значит, без чтения не обойтись.</p>
31
<p><strong>Подумайте, как отразить логику текста с помощью типографики</strong></p>
31
<p><strong>Подумайте, как отразить логику текста с помощью типографики</strong></p>
32
<p>Попробуйте составить план материала и прописать тезисы его основных частей, чтобы сложилась общая картина того, о чём там говорится. Задайте себе вопросы: какое настроение текста, какой у него жанр, кто потенциальный читатель?</p>
32
<p>Попробуйте составить план материала и прописать тезисы его основных частей, чтобы сложилась общая картина того, о чём там говорится. Задайте себе вопросы: какое настроение текста, какой у него жанр, кто потенциальный читатель?</p>
33
Посмотрите, как разные шрифты в заголовках меняют восприятие текста<em>Изображение: издательство Дмитрия Аронова</em><p><strong>Определите, какой будет связь между текстом и другими элементами</strong></p>
33
Посмотрите, как разные шрифты в заголовках меняют восприятие текста<em>Изображение: издательство Дмитрия Аронова</em><p><strong>Определите, какой будет связь между текстом и другими элементами</strong></p>
34
<p>Фотографии, подписи, таблицы, примечания также влияют на восприятие материала. Заранее решите, как будет выглядеть макет с текстом, чтобы дополнительные элементы его не перегружали.<strong></strong></p>
34
<p>Фотографии, подписи, таблицы, примечания также влияют на восприятие материала. Заранее решите, как будет выглядеть макет с текстом, чтобы дополнительные элементы его не перегружали.<strong></strong></p>
35
<p>Полоса набора - карта мышления, а зачастую ещё и карта общественного порядка, при котором она набрана. А образ мыслей и общественный порядок имеют обыкновение меняться - к лучшему или к худшему.</p>
35
<p>Полоса набора - карта мышления, а зачастую ещё и карта общественного порядка, при котором она набрана. А образ мыслей и общественный порядок имеют обыкновение меняться - к лучшему или к худшему.</p>
36
Пример удачного расположения примечания в тексте<em>Изображение: издательство Дмитрия Аронова</em><p><strong>Выберите шрифт или группу начертаний, которые будут соответствовать тексту</strong></p>
36
Пример удачного расположения примечания в тексте<em>Изображение: издательство Дмитрия Аронова</em><p><strong>Выберите шрифт или группу начертаний, которые будут соответствовать тексту</strong></p>
37
<p>Когда дизайнер ознакомился с материалом, проанализировал его и составил предварительный макет, пора решать, как на страницах будет выглядеть типографика.</p>
37
<p>Когда дизайнер ознакомился с материалом, проанализировал его и составил предварительный макет, пора решать, как на страницах будет выглядеть типографика.</p>
38
<p>Раньше веб-дизайнеры и разработчики ограничивались шрифтами, которые устанавливались на компьютер. В интернете всё оформляли с помощью Arial, Times New Roman и Courier New. Благодаря разнообразию веб-шрифтов теперь у нас есть огромный выбор возможностей - и в них также очень важно не запутаться, выбрать наиболее подходящий вариант.</p>
38
<p>Раньше веб-дизайнеры и разработчики ограничивались шрифтами, которые устанавливались на компьютер. В интернете всё оформляли с помощью Arial, Times New Roman и Courier New. Благодаря разнообразию веб-шрифтов теперь у нас есть огромный выбор возможностей - и в них также очень важно не запутаться, выбрать наиболее подходящий вариант.</p>
39
Библиотека Google Fonts<em>Скриншот: сайт Google Fonts</em><p>Типографика - это искусство работы с этими вдвойне насыщенными элементами информации. Хороший типограф работает с ними с чувством, с толком, с расстановкой. Когда шрифт выбран неудачно, смысловое значение слов и зрительный ряд, заключённый в лидерах, вступают в противоречие, врут и фальшивят.</p>
39
Библиотека Google Fonts<em>Скриншот: сайт Google Fonts</em><p>Типографика - это искусство работы с этими вдвойне насыщенными элементами информации. Хороший типограф работает с ними с чувством, с толком, с расстановкой. Когда шрифт выбран неудачно, смысловое значение слов и зрительный ряд, заключённый в лидерах, вступают в противоречие, врут и фальшивят.</p>
40
<p><strong>Оформите текстовый блок так, чтобы он раскрывал каждый логический нюанс текста</strong></p>
40
<p><strong>Оформите текстовый блок так, чтобы он раскрывал каждый логический нюанс текста</strong></p>
41
<p>Это пункт, где дизайнер может извлечь максимум пользы из традиционной типографики и одновременно нуждается в новых решениях. В отличие от работы с печатью, в диджитал-среде редко есть возможность контролировать форму страницы. Поэтому важно помнить о том, как спроектировать текстовый блок, чтобы он элегантно адаптировался к форме экрана, на которой просматривается.</p>
41
<p>Это пункт, где дизайнер может извлечь максимум пользы из традиционной типографики и одновременно нуждается в новых решениях. В отличие от работы с печатью, в диджитал-среде редко есть возможность контролировать форму страницы. Поэтому важно помнить о том, как спроектировать текстовый блок, чтобы он элегантно адаптировался к форме экрана, на которой просматривается.</p>
42
<p><strong>Уделяйте внимание даже второстепенным деталям</strong></p>
42
<p><strong>Уделяйте внимание даже второстепенным деталям</strong></p>
43
<p>Даже после того, как вы сверстали макет и финально определились с выбором шрифта, пройдитесь по содержанию - возможно, из виду пропала важная цитата или пункт таблицы - осведомлён, значит, вооружён.</p>
43
<p>Даже после того, как вы сверстали макет и финально определились с выбором шрифта, пройдитесь по содержанию - возможно, из виду пропала важная цитата или пункт таблицы - осведомлён, значит, вооружён.</p>
44
<p>Даже в издании Платона или Шекспира есть второстепенные тексты: пагинация, нумерация действий и сцен, примечания, информация об авторских правах, имя и адрес издателя и хвалебные цитаты на обложке, не говоря уже о дополнительных материалах, присутствующих в самом тексте.</p>
44
<p>Даже в издании Платона или Шекспира есть второстепенные тексты: пагинация, нумерация действий и сцен, примечания, информация об авторских правах, имя и адрес издателя и хвалебные цитаты на обложке, не говоря уже о дополнительных материалах, присутствующих в самом тексте.</p>
45
<p>Когда все подготовительные этапы пройдены, можно приступать к выбору и адаптации типографики. Роберт Брингхёрст предлагает обратить внимание на следующие правила, но предупреждает - выбор любого элемента зависит от множества факторов - тип и размер текста, размера шрифта, длины линий. Дизайнеру стоит опираться на свой вкус и обязательно погружаться в контекст:</p>
45
<p>Когда все подготовительные этапы пройдены, можно приступать к выбору и адаптации типографики. Роберт Брингхёрст предлагает обратить внимание на следующие правила, но предупреждает - выбор любого элемента зависит от множества факторов - тип и размер текста, размера шрифта, длины линий. Дизайнеру стоит опираться на свой вкус и обязательно погружаться в контекст:</p>
46
<ul><li>Межбуквенный интервал должен быть оптимальным для конкретного шрифта и размера. Без засечек - это от 0,1 до 0,2, а с засечками - от 0,2 до 0,3. Например, если размер шрифта без засечек 30 пикселей, то межбуквенный интервал - 30 × 0,1 = 3.</li>
46
<ul><li>Межбуквенный интервал должен быть оптимальным для конкретного шрифта и размера. Без засечек - это от 0,1 до 0,2, а с засечками - от 0,2 до 0,3. Например, если размер шрифта без засечек 30 пикселей, то межбуквенный интервал - 30 × 0,1 = 3.</li>
47
<li>Следите, чтобы расстояние между буквами не было больше пробела или меньше внутренних расстояний букв.</li>
47
<li>Следите, чтобы расстояние между буквами не было больше пробела или меньше внутренних расстояний букв.</li>
48
<li>Межбуквенный интервал для заголовков и подзаголовков может быть увеличен, чтобы создать более эффектный визуальный образ.</li>
48
<li>Межбуквенный интервал для заголовков и подзаголовков может быть увеличен, чтобы создать более эффектный визуальный образ.</li>
49
<li>При выборе межбуквенного интервала необходимо учитывать тип направления чтения (слева направо или справа налево), используемый язык и традиции типографского оформления в стране или регионе.</li>
49
<li>При выборе межбуквенного интервала необходимо учитывать тип направления чтения (слева направо или справа налево), используемый язык и традиции типографского оформления в стране или регионе.</li>
50
</ul><em>Изображение: издательство Дмитрия Аронова</em><ul><li>Оптимальный интерлиньяж обеспечивает достаточное пространство между строками, чтобы текст был читаемым. Среднее значение - от 1,2 до 1,5. Если в тексте крупный шрифт - 1 или 1,1, а если мелкий - 1,5 или даже 2. Посчитать это можно так же, как межбуквенный интервал.</li>
50
</ul><em>Изображение: издательство Дмитрия Аронова</em><ul><li>Оптимальный интерлиньяж обеспечивает достаточное пространство между строками, чтобы текст был читаемым. Среднее значение - от 1,2 до 1,5. Если в тексте крупный шрифт - 1 или 1,1, а если мелкий - 1,5 или даже 2. Посчитать это можно так же, как межбуквенный интервал.</li>
51
<li>Не стоит использовать слишком большой или слишком маленький интерлиньяж: первый может сделать текст неразборчивым, а второй - некрасивым.</li>
51
<li>Не стоит использовать слишком большой или слишком маленький интерлиньяж: первый может сделать текст неразборчивым, а второй - некрасивым.</li>
52
</ul><em>Изображение: издательство Дмитрия Аронова</em><ul><li>Стоит оставить как минимум два символа на строке и перенести как минимум три.</li>
52
</ul><em>Изображение: издательство Дмитрия Аронова</em><ul><li>Стоит оставить как минимум два символа на строке и перенести как минимум три.</li>
53
<li>Не нужно оставлять конец слова, написанного через дефис, или любого слова длиной менее четырёх символов в качестве последней строки в абзаце.</li>
53
<li>Не нужно оставлять конец слова, написанного через дефис, или любого слова длиной менее четырёх символов в качестве последней строки в абзаце.</li>
54
<li>Лучше избегать более трёх последовательных строк через дефис и разрыва двух последовательных строк одним и тем же словом.</li>
54
<li>Лучше избегать более трёх последовательных строк через дефис и разрыва двух последовательных строк одним и тем же словом.</li>
55
<li>Не стоит начинать страницу с последней строки многострочного абзаца.</li>
55
<li>Не стоит начинать страницу с последней строки многострочного абзаца.</li>
56
</ul><p>Все эти правила сразу запоминать необязательно. Рекомендуем для начала запомнить то, что все внутренние расстояния должны быть меньше или равны внешним. Об этом мы подробнее рассказываем<a>в статье</a>.</p>
56
</ul><p>Все эти правила сразу запоминать необязательно. Рекомендуем для начала запомнить то, что все внутренние расстояния должны быть меньше или равны внешним. Об этом мы подробнее рассказываем<a>в статье</a>.</p>
57
<p>А вот чек-лист из пяти пунктов, который можно держать под рукой - каждый раз, когда работаете над типографикой текста, - проверяйте себя по этим пунктам:</p>
57
<p>А вот чек-лист из пяти пунктов, который можно держать под рукой - каждый раз, когда работаете над типографикой текста, - проверяйте себя по этим пунктам:</p>
58
<ul><li>Сфокусируйтесь на читабельности, если формат или идея не диктуют свои правила стилизации. Текст должен быть лёгким для зрительного восприятия.</li>
58
<ul><li>Сфокусируйтесь на читабельности, если формат или идея не диктуют свои правила стилизации. Текст должен быть лёгким для зрительного восприятия.</li>
59
<li>Используйте соответствующий шрифт. Выберите тот, который отражает жанр, смысловое и эмоциональное наполнение текста.</li>
59
<li>Используйте соответствующий шрифт. Выберите тот, который отражает жанр, смысловое и эмоциональное наполнение текста.</li>
60
<li>Соблюдайте пропорции. От корректности построения макета зависит общий вид материала.</li>
60
<li>Соблюдайте пропорции. От корректности построения макета зависит общий вид материала.</li>
61
<li>Не стесняйтесь оставлять больше открытого пространства. Не нужно заполнять каждую свободную ячейку на странице - открытое пространство помогает сфокусировать внимание на главном.</li>
61
<li>Не стесняйтесь оставлять больше открытого пространства. Не нужно заполнять каждую свободную ячейку на странице - открытое пространство помогает сфокусировать внимание на главном.</li>
62
<li>Используйте строчный, предложный и абзацный ритм: чередуйте длинные элементы с короткими, соблюдайте паузы.</li>
62
<li>Используйте строчный, предложный и абзацный ритм: чередуйте длинные элементы с короткими, соблюдайте паузы.</li>
63
</ul><p><strong>Другие обзоры книг для дизайнеров</strong></p>
63
</ul><p><strong>Другие обзоры книг для дизайнеров</strong></p>
64
<a><b>Попробуйте бесплатно 4 топовые профессии в дизайне</b>Пройдите бесплатный курс по дизайну. Добавьте 4 крутых кейса в портфолио и решите, в каком направлении развиваться дальше. Пройти курс→</a>
64
<a><b>Попробуйте бесплатно 4 топовые профессии в дизайне</b>Пройдите бесплатный курс по дизайну. Добавьте 4 крутых кейса в портфолио и решите, в каком направлении развиваться дальше. Пройти курс→</a>