что такое интерлиньяж шрифта

Универсальный способ настройки гармоничного интерлиньяжа

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

Магического соотношения не существует. Блоки текста будут выглядеть по-разному с разными шрифтами из-за различий Cap Height и X-height. Если 120% с большой вероятностью подойдёт для интерфейсных шрифтов — из-за того, что они создавались с определенным соотношением Cap и X-height — то с остальными возникают проблемы.

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

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

Спасибо за внимание, и классных вам дизайнов!

Интерлиньяж это расстояние между базовыми линиями, на всех пикчах показан межстрочный интервал. Дефолтным интерлиньяжем для книг считается 120%. В наше время в вебе всегда юзается 150-160% для наборного текста и порядка 120% для заголовков. Так полотно текста выглядит свободным. Утверждать что в настоящее время 120% для наборного текста это норма немного глуповато.

Это общепринятые правила эстетики среди современных дизайнеров и типографов.

Я не знаю, откуда вы взяли разницу между интерлиньяжем и межстрочным интервалом. Особенно учитывая, что в англоязычном сообществе всё это суть line spacing. Вот цитата из Вики: Интерлинья́ж (от фр. interligne, буквально — написанное между строк) — междустрочный пробел, расстояние между базовыми линиями соседних строк. В компьютерной вёрстке это понятие обычно называют «межстрочный интервал» (англ. line spacing).

Дефолтного интерлиньяжа для книг не существует. Он сугубо зависит от формата и самого шрифта, о чём пишут Ян Чихольд и Йозеф Мюллер-Брокманн.

В настоящее время юзается 150-160%, только потому что это наиболее ленивое решение, работающее кое-как, но почти всегда. Здесь же я делюсь с методом, который работает отлично и всегда.

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

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

Источник

Как подобрать оптимальный интерлиньяж: 4 совета и калькулятор

К выбору расстояния между строками (интерлиньяжа) необходимо отно­ситься очень внимательно, потому что как слишком длинные или слишком короткие строки влияют на удобочитаемость, так и интерлиньяж определяет вид полосы набора и, соответственно, удобочитаемость текста.

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

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

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

● По стандарту и из соображений удобочитаемости интерлиньяж обычно составляет 120 % от размера кегля использованного шрифта — таким образом, если текст набран кеглем в 10 пунктов, то интерлиньяж должен составлять около 12 пунктов. В случае, если использовано меньшее значение, строки текста будут слишком плотно расположены, а в случае, если интерлиньяж слишком велик, текст будет смотреться разорванным и не принадлежащим одному текстовому блоку.

● На интерлиньяж влияет множество факторов: гарнитура, размер шрифта, его полнота, длина строки, расстояние между словами и т.д. Чем длиннее строка, тем больше интерлиньяж. Чем больше размер шрифта, тем меньше интерлиньяж. Хорошее правило – устанавливать интерлиньяж на 2-5pt больше, чем размер шрифта, в зависимости от гарнитуры. Так что если шрифт 12pt, то интерлиньяж должен быть в 15 pt или 16 pt.

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

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

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

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

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

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

Удобочитаемость этих отрывков отличается из-за разной ширины текста. Поскольку в нижней части длина строки больше, становится более трудным выполнить возврат глаз от конца одной строки к началу другой без компенсации этого процесса увеличением межстрочного расстояния. Этот факт подтвержден исследованиями Mary C. Dyson (University of Reading) — «Long line lengths are said to need more interlinear spacing to ensure that the eyes locate the next line down accurately when executing a return sweep…», т.е. увеличение ширины текста требует увеличения межстрочного расстояния при одинаковом кегле шрифта.

Но как это математически выразить?

Ответ на этот вопрос проще, чем кажется на первый взгляд, потому что природа дала нам замечательный закон для красивой и эффективной соразмерности. Он проявляется в растениях, животных, формах галактик и даже в ДНК. Эта концепция соразмерности настолько распространена, что люди заметили её тысячи лет назад и используют в искусстве и архитектуре на протяжении всей истории. Конечно же речь идет о золотой пропорции.

Попытаемся применить её и для нашего случая по подбору оптимального межстрочного расстояния.
Мы уже пришли к выводу, что межстрочное расстояние I и размер шрифта F связаны между собой пропорционально. Это можно выразить таким соотношением:

I = F × k

Очевидно что под коэффициентом k следует понимать золотую пропорцию. Но, к сожалению, этого пока недостаточно. Потому что не учтен еще один параметр — длина строки, которая также влияет на восприятие текста.

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

w ≈ I²

Имея математические соотношения, уже можно попытаться рассчитать оптимальные размеры текста. Немного напрягает «базовое математическое моделирование», про которое мы не имеем никаких подробностей, но будем надеяться, что оно проведено достаточно скрупулезно. Найденная математическая модель нашла своё воплощение в виде калькулятора и была размещена на сайте Golden Ratio Typography Calculator.

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

Если Вы введете только длину строки (Content width), то калькулятор покажет Вам лучшие комбинации интерлиньяжа/размера шрифта для этой ширины.

Если Вы введете размер шрифта и длину строки, вы получаете набор типографских параметров:
● Оптимизированные параметры для данного размера шрифта и ширины текста;
● Лучшие параметры для для данного размера шрифта и ширины текста;
● Вторичные лучшие параметры;
● Оптимальные параметры.

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

Источник

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

1. Размеры

Размер наборной строки. Для глаза читателя, длинные или короткие строки утомительны. Длинные – разрушают ритм, так как читателю трудно найти следующую строку текста. Единственная ситуация, в которой приемлемы короткие строки – малое количество текста. Для наилучшей читабельности длина строки должна быть между 40 и 80 символами, включая пробелы. Для дизайна с одной колонки текста 65 символов – идеальны.

Простой способ вычислить длину строки – использовать метод Роберта Брингхарста (Robert Bringhurst’s), который умножает размер шрифта на 30. То есть, если размер шрифта 10px, умножая его на 30 получим 300px или, приблизительно, 65 символов в строке. Код будет выглядеть приблизительно как:
p <
font-size: 10px;
max-width: 300px;
>
Я использую px так как это значительно упрощает расчеты, но можно использовать и em.

2. Интерлиньяж

Интерлиньяж это пространство между строками текста в теле заметки и оно играет большую роль для читабельности. Правильное разделение строк, позволяет читателю проще следить за строкой и улучшает внешний вид текста. Интерлиньяж так же изменяет типографический цвет текста, который является плотностью или же тоном композиции.
На интерлиньяж влияет множество факторов: гарнитура, размер шрифта, его полнота, обстоятельства(?), длина строки, расстояние между словами и т.д. Чем длиннее строка, тем больше интерлиньяж. Чем больше размер шрифта, тем меньше интерлиньяж. Хорошее правило – устанавливать интерлиньяж на 2-5pt больше, чем размер шрифта, в зависимости от гарнитуры. Так что если шрифт 12pt, то для веб интерлиньяж должен быть в 15pt или 16pt.

Определение верного интерлиньяжа требует определенной ловкости, но ниже приведен пример того, на что должен быть похож ваш код:
body <
font-family: Helvetica, sans-serif;
font-size: 12px;
line-height: 16px;
>

3. Обработка кавычек

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

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

4. Вертикальный ритм

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

Для того что бы поддерживать вертикальный ритм с помощью CSS, нужно, что бы расстояние между элементами и межстрочное расстояние (интерлиньяж) был равен размеру сетки базовых линий. Допустим, вы используете 15px сетку базовых линий, подразумевая, что между каждой линией сетки 15px. Интерлиньяж будет 15px и расстояние между параграфами тоже будет 15px. Вот пример:
body <
font-family: Helvetica, sans-serif;
font-size: 12px;
line-height: 15px;
>

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

5. Верхние и нижние висячие строки

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

К несчастью, нет простого способа предотвратить висячие строки с помощью CSS. Один из способов от них избавится был описан выше, еще один — jQWidon’t, плагин для jQuery, который размещает неразрывные пробелы между последними двумя словами элемента.

6. Выделение

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

Вот несколько способов выделения с помощью CSS:
span <
font-style: italic;
>

h2 <
text-transform: uppercase;
>

b <
font-variant: small-caps;
>
Имейте в виду, что font-variant работает только в случае, если шрифт поддерживает капитель.

7. Масштаб

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

Пример типографического масштаба определенного в CSS:
h1 <
font-size: 48px;
>

8. Подчищаем рваные края

Когда создается блок текста с выравниванием по левому или правому краю, не забудьте подчистить рваные края (неровные строки) и сбалансировать текст без всяких неожиданных «дыр» или неуклюжих форм текстовых блоков. Рваные края могут отвлекать читателя. Хороший край «мягкий», равномерный, без слишком длинных, или слишком коротких строк. Нельзя контролировать это с помощью CSS, так что для получения хороших краев надо вносить в текст ручные правки.

Можно улучшить края с помощью переносов, но к сожалению CSS тут бессилен. Возможно, в «ближайшем» будущем CSS3 обеспечит некоторый контроль… Но несмотря на это – не все потеряно. Есть ряд решений на стороне сервера и на стороне клиента, которые осуществляют автоматическую расстановку переносов. Например phpHyphenator, Hyphenator или online генераторы.

Hyphenator.js это Javascript-библиотека которая осуществляет автоматическую расстановку переносов на стороне клиента.

Ресурсы для дальнейшего изучения

Об авторе

Антонио Карусон (Antonio Carusone) это графический дизайнер из Нью-Йорка и автор AisleOne, блога посвященного графическому дизайну и типографике, The Grid System, неуклонно расширяющегося ресурса о сеточной системе и части Thinking for a Living Network.

Источник

Интерлиньяж

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

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

Значение по умолчанию для автоинтерлиньяжа составляет 120% от кегля шрифта (например, для шрифта в 10 пунктов интерлиньяж равен 12 пунктам). При использовании автоинтерлиньяжа InCopy отображает его значение в скобках на палитре «Символ» в меню «Интерлиньяж».

A. Leading B. Text height C. Larger text size of one word increases leading for that one line.

Сведения об интерлиньяже в тексте на языке стран Азии

Позицию базы интерлиньяжа можно задать с помощью параметра «Позиция базы интерлиньяжа» в меню палитры «Абзац». При использовании значения по умолчанию (верхний/правый край круглой шпации) интерлиньяжа строк текста измеряется от верхнего края его круглой шпации до верхнего края круглой шпации следующей строки. Если выбрать строку и увеличить значение интерлиньяжа с помощью параметра «Верхний правый угол круглой шпации», интервал между выделенной строкой и следующей строкой увеличится, так как интерлиньяж направления измеряется от текущей строки до следующей строки. Все остальные значения параметра «Позиция базы интерлиньяжа» используются для измерения интерлиньяжа от текущей строки до предыдущей строки, поэтому в случае изменения значения интерлиньяжа с такими настройками аки строки станет выше текущей строки.

Задайте интерлиньяж в меню «Интерлиньяж» на палитре «Символ» или на панели «Управление». По умолчанию установлено значение «Авто». Если задан автоинтерлиньяж, значение интерлиньяжа будет отображаться в скобках в меню «Интерлиньяж» на палитре «Символ». Автоматическое значение может отличаться для текстовых фреймов и текста в сетках фреймов. Значение «Автоматический интерлиньяж» можно задать с помощью пункта меню «Выключка» на палитре «Абзац». Значение по умолчанию для автоинтерлиньяжа для текста во фреймах текста в InCopy составляет 175% от установленного размера шрифта. Для текста в сетках фреймов это значение составляет 100%, что позволяет выполнять выравнивание сетки для строк текста в сетке.

Если для выравнивания сетки установлено значение «Нет», задайте интерлиньяж текста в текстовом фрейме, используя значение «Интерлиньяж» на палитре «Символ». При установке любого значения выравнивания сетки, кроме «Нет», интерлиньяж будет применен в соответствии с настройками сетки из базовых линий.

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

Чтобы задать интерлиньяж для текста в сетках фреймов, вместо настройки значения интерлиньяжа, установите «Интервал между строками» в диалоговом окне настроек сетки фрейма. Значение интерлиньяжа для текста в сетке фрейма представляет собой сумму значений интервала между строками и размера сетки (размера шрифта). Другими словами, если размер сетки составляет 13Q, а интервал между строками — 10H, фактическое значение интерлиньяжа будет «23H».

Обратите внимание, что для текста, размещаемого в сетке фрейма, по умолчанию задано выравнивание сетки по центру. В данном случае значение между центром сетки и центром следующей сетки будет значением интерлиньяжа. Если для выравнивания сетки установлено значение «Нет», интерлиньяж будет применен от положения, заданного в сетке. Если для выравнивания сетки установлено значение «Нет», интерлиньяж будет применен в соответствии с значением, заданным в разделе «Интерлиньяж» на палитре «Символ».

Настройка интерлиньяжа в сетке фрейма является сложной задачей. Для размещаемого текста фактическое значения интерлиньяжа изменяется в зависимости от размера шрифта, значения интерлиньяжа и настроек гедори на палитре «Абзац». Обратите внимание на следующее:

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

Если не изменить размер шрифта (размер сетки) сетки фрейма, но при этом на палитре «Символ» сделать размер шрифта размещаемого текста больше интервала между строками и размера сетки, гедори будет определен автоматически, а также можно будет выполнить выравнивание по сетке с шагом 0,5 строки, то есть 1,5, 2, 2,5 и 3 и так далее, если для гедори установлено значение «Авто». Если для гедори не установлено значение «Авто», текст будет выровнен по сетке в соответствии с этим значением, и при большом шрифте символы будут накладываться друг на друга.

Если оставить размер шрифта (размер сетки) сетки фрейма без изменений, но при этом на палитре «Символ» настроить гедори размещаемого текста на значение, которое будет больше суммы значений размера сетки и интервала между строками, интерлиньяж будет применен к следующей строке, если для него установлено значение «Авто». Например, если размер сетки фрейма будет составлять 13Q, а интервал между строками — 10H, при интерлиньяже в 24H текст будет размещаться в каждой второй строке. При установке значения 47H текст будет размещаться в каждой третьей строке. Любое значение параметра «Интерлиньяж», отличное от автоматического, будет игнорироваться.

Изменение интерлиньяжа

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

Источник

Типографика в графическом дизайне

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

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

Анатомия шрифта

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

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

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

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

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

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

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

Верхний выносной элемент — элемент строчных букв, выходящий за верхнюю линию (например, в буквах б и в).

Нижний выносной элемент — элемент строчных букв, опущенный ниже линии шрифта (например, в буквах у и ф).

Засечка (сериф) — короткий, обычно перпендикулярный штрих на конце буквы, с которого начинается и которым заканчивается основной штрих знака. У рубленых шрифтов засечки отсутствуют, отсюда и их название «sans serif» («без засечек»).

Понятие шрифта и его характеристики

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

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

Гарнитура — это семейство начертаний шрифта, имеющих общие стилевые особенности. Есть множество известных гарнитур: Helvetica, Futura, Roboto и другие.

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

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

Начертание — это внешний вид шрифта. Большинство гарнитур предполагают стандартный набор начертаний: Regular (обычное), Italic (курсивное), Semibold (полужирное) и Bold (жирное).

Типографская система мер

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

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

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

Кегль — размер буквы или знака по вертикали, включающий ее нижние и верхние выносные элементы. Единица измерения кегля — пункт (pt). Например, популярны кегли шрифта в 14, 16, 24 pt и многие другие.

Интерлиньяж (межстрочный интервал) — это вертикальный интервал между строками текста. Измеряется в пунктах, но его размер зависит от кегля шрифта. Интерлиньяж в 120 % от размера шрифта принято считать минимальным. То есть при шрифте в 14 pt интерлиньяж составит по меньшей мере 17 pt. Размер межстрочного интервала зависит от кегля и начертания шрифта, а также от расположения текста, поэтому универсальной формулы по вычислению интерлиньяжа нет.

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

Полезные советы и ресурсы по теме

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

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

Анатомия шрифта

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

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

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

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

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

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

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

Верхний выносной элемент — элемент строчных букв, выходящий за верхнюю линию (например, в буквах б и в).

Нижний выносной элемент — элемент строчных букв, опущенный ниже линии шрифта (например, в буквах у и ф).

Засечка (сериф) — короткий, обычно перпендикулярный штрих на конце буквы, с которого начинается и которым заканчивается основной штрих знака. У рубленых шрифтов засечки отсутствуют, отсюда и их название «sans serif» («без засечек»).

Понятие шрифта и его характеристики

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

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

Гарнитура — это семейство начертаний шрифта, имеющих общие стилевые особенности. Есть множество известных гарнитур: Helvetica, Futura, Roboto и другие.

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

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

Начертание — это внешний вид шрифта. Большинство гарнитур предполагают стандартный набор начертаний: Regular (обычное), Italic (курсивное), Semibold (полужирное) и Bold (жирное).

Типографская система мер

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

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

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

Кегль — размер буквы или знака по вертикали, включающий ее нижние и верхние выносные элементы. Единица измерения кегля — пункт (pt). Например, популярны кегли шрифта в 14, 16, 24 pt и многие другие.

Интерлиньяж (межстрочный интервал) — это вертикальный интервал между строками текста. Измеряется в пунктах, но его размер зависит от кегля шрифта. Интерлиньяж в 120 % от размера шрифта принято считать минимальным. То есть при шрифте в 14 pt интерлиньяж составит по меньшей мере 17 pt. Размер межстрочного интервала зависит от кегля и начертания шрифта, а также от расположения текста, поэтому универсальной формулы по вычислению интерлиньяжа нет.

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

Источник