18 главных правил классической типографики

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

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

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

Правило №1

Для оптимального удобства чтения выбирайте классические шрифты, проверенные временем. Каждый опытный дизайнер и верстальщик имеет постоянно используемый набор таких шрифтов, которые не преподносят «сюрпризов» на выводе. Наверняка в этот комплект входят такие известные гарнитуры, как Academy, Baskerville, Bodoni, Franklin Gothic, Futura, Garamond, Goudy, Helvetica, Petersburg, Times New Roman.

Рис. 1. Образцы шрифтов

Правило №2

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

Рис. 2. Не стоит использовать большое количество различных гарнитур в одной публикации

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

Правило №3

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

Рис. 4. Как видите, цель не достигнута — выделения не видно. Использованы шрифты Tahoma и Arial. Разницу может заметить только профессионал — при очень внимательном рассмотрении. Но мы ведь рассчитываем на обычного читателя, не так ли?

Рис. 5. Достаточно использовать один шрифт и для основного текста, и для выделений, изменяя всего лишь его насыщенность и/или наклон

Правило №4

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

Рис. 6. Строчные буквы имеют верхние и нижние выносные элементы, что облегчает процесс чтения. Прописные знаки являются более монотонными

Рис. 7. Сравните, насколько трудно читается верхний текст, набранный одними прописными буквами, и насколько удобнее читается текст внизу

Рис. 8. Конечно, в малых количествах, например для набора первых нескольких слов в абзаце, можно использовать только прописные буквы

Правило №5

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

Рис. 9. Тексты, набранные шрифтом от 8 до 12 пунктов, являются наиболее удобочитаемыми. Данный образец набран шрифтом Georgia Regular

Рис. 10. Сравните, как воспринимаются тексты, набранные шрифтами Times New Roman (вверху), Book Antiqua (в середине) и Garamond (внизу) одного размера

Правило №6

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

Рис. 11. Использование шрифта одного размера и насыщенности для основного текста и заголовка, разделенных пробелом

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

Рис. 13. Использование шрифтов размерам и насыщенности придает тексту бессистемный и неразборчивый характер

Правило №7

Избегайте применять слишком темные или слишком светлые шрифты. Принцип «золотой середины» в данном случае полностью себя оправдывает.

Рис. 14. Жирный контрастный шрифт не придает тексту особой привлекательности и не повышает удобочитаемость

Правило №8

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

Рис. 15. Использование шрифта типа Condensed и Expanded

Рис. 16. Использование шрифта с механически измененной шириной символов

Правило №9

Текст должен создавать ровную непрерывную текстуру. Соблюдайте правильные межсловные и межбуквенные расстояния.

Рис. 17. Сверху вниз: нормальный набор; набор с увеличенным межбуквенным расстоянием; набор с уменьшенным межбуквенным расстоянием; набор с увеличенным межсловным расстоянием

Правило №10

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

Правило №11

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

Рис. 18. Сверху вниз: текст с узким, нормальным и широким междустрочным расстоянием

Правило №12

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

Рис. 19. Четыре способа выравнивания текста

Правило №13

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

Рис. 20. Абзац, обозначенный отступом

Рис. 21. Другие методы обозначения начала абзаца

Правило №14

Не допускайте висячих строк. Висячая строка — это неполная концевая строка, приходящаяся на верхнюю границу колонки, или начальная строка, попадающая в самый низ колонки. Обычно устраняется путем вгонки и выгонки за счет межсловных пробелов или объединения двух-трех абзацев в один.

Правило №15

Делайте выделения в тексте, не мешающие потоку чтения. Не переусердствуйте: минимум выделений обеспечит максимальные результаты.

Рис. 22. Сверху вниз: способы выделения информации в основном тексте: применение курсивного и капительного начертаний; подчеркивание; цвет; использование другой гарнитуры, изменение насыщенности

Правило №16

Не нарушайте целостность рисунка шрифта. Правильно разработанный шрифт не содержит случайных пропорций и деталей. Если вам необходим более узкий или более широкий шрифт, используйте специально разработанные версии этого шрифта, такие как Condensed и Extended.

Рис. 23. Нарушение рисунка шрифта

Правило №17

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

Рис. 24. Примеры нарушения правила 17

Правило №18

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

Рис. 25. Черный текст на белом фоне — признанное классическое сочетание. Белый текст на черном фоне — сочетание, менее удобное для чтения

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

Источник: i-type.ru

25 правил типографики для начинающих дизайнеров — Лайфхакер

Выбираем правильный шрифт

1. Не используйте причудливые шрифты

Если у вас недостаточно опыта и знаний, даже не пытайтесь использовать необычные, затейливые шрифты. Будьте проще.

2. Забудьте о Comic Sans

Представьте, что вы его вообще никогда не видели.

3. Не избегайте стандартных, дефолтных шрифтов

Серьёзно, если кто-то вам говорит, что стандартные шрифты — это скучно, он просто не разбирается в типографике. То, как будет выглядеть шрифт, зависит от того, как он будет набран. Times New Roman может выглядеть по-настоящему здорово. И главное: пусть лучше текст будет скучным, чем уродливым или нечитабельным.

OmegaTransFer / Depositphotos

Смешиваем шрифты

4. Не используйте одновременно больше двух шрифтов

Экспериментировать с большим количеством шрифтов на начальном этапе не стоит. Двух вполне достаточно. Вы же не хотите превратить текст в разномастную ерунду, не так ли?

5. Смешивайте только контрастные шрифты

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

6. Выбирайте шрифты с одинаковой высотой букв

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

Набираем текст

7. Размер шрифта

Размер текста в вебе не должен быть меньше 13 пикселей. На мой взгляд, лучший выбор — в пределах 14–18 px. Не слишком большой и в то же время удобочитаемый.

8. Выбирайте правильную длину строки

Не верьте разговорам, что правильную длину строки можно получить, умножив размер шрифта на два. Это ерунда. Просто постарайтесь удерживать длину строки в пределах 45–75 символов. ГОСТ для печатных изданий рекомендует длину в 60 символов, но это, конечно, труднодостижимый идеал в условиях веба. И всё же к нему стоит стремиться. Определяйте на глаз, не является ли строка слишком длинной или слишком короткой.

9. Интерлиньяж должен соответствовать размеру шрифта

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

Абзац

10. Выравнивайте по левой стороне

Если вы не уверены, какую выключку выбрать, выбирайте выключку влево: варианты «Вправо» и «По ширине» в вебе редко себя оправдывают. В неровном крае нет ничего плохого. Выключенный влево текст легче читать, так как глаз видит чёткое визуальное окончание каждой строки. Но по-русски такой текст удобно читать, если строка не слишком длинная. Поэтому, если ваша строка больше 60 символов, попробуйте расключенный набор. Только не забудьте расставить переносы и проверьте, всё ли выглядит хорошо: несколько переносов подряд определённо затруднят чтение.

11. Избегайте большого числа переносов

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

12. Без отступа

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

13. Узкая колонка

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

14. Висячая пунктуация

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

15. «Вдовы» и «сироты»

Речь идёт о висячих строках. «Вдова» — это одно слово на целой строке в конце абзаца или очень короткая строка в конце текста или страницы. «Сирота» — это висячая строка, которая попадает на начало новой страницы или колонки. Их нужно избегать. Попробуйте уменьшить межбуквенное расстояние, перенести строку или отрегулируйте размер шрифта — в общем, не давайте «вдовам» и «сиротам» пробраться в свой текст.

16. Не злоупотребляйте пробелами

Чтобы начать новую строку, нажимайте Shift+Enter. Для начала нового абзаца нажмите Enter. Вот так всё просто.

Слова

17. Кернинг

Если вы неопытный дизайнер и у вас не намётан глаз на мельчайшие детали, не керните текст вручную.

18. Трекинг

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

19. Выделения в тексте

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

20. Строчные без разрядки

Не стоит увеличивать расстояние между строчными. Причина проста: снижается удобочитаемость.

21. Прописные с разрядкой

Увеличивайте расстояние между прописными. В этом случае читабельность возрастает. Обычно хорошо работает увеличение межбуквенного пространства на 10%.

22. Не пишите всё заглавными

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

23. Не используйте капитель без надобности

Если в шрифт не включено специальное капительное начертание, не используйте его вообще.

Буквы

24. Не изменяйте ширину букв

Просто не делайте это. Пожалуйста.

Числа

25. Числа прописью

Пишите числа прописью, это выглядит изысканно.

Типографика в веб-дизайне — правила и тренды современной типографики

“Веб-дизайн — это 95% типографики”, — сказал основатель компании Information Architect Оливер Райхенштейн. Так оно и есть: без качественной типографики ваш сайт будет неудобным для восприятия. В этой статье разберем основные виды типографики и современные тренды. Поехали!

Что такое типографика и зачем она нужна

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

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

Основные правила типографики

1. Чем проще — тем лучше. Даже если появилось множество новых интересных шрифтов, эмодзи, анимаций — не нужно использовать все их сразу. Сайт будет аляпистым и совершенно не стильным.
2. Сайт должен быть читабельным. Если выбирать между оригинальностью идеи и удобством для посетителя — любой веб-дизайнер не раздумывая выберет второе.
3. Главное должно отличаться от второстепенного. Хорошая типографика сразу показывает, что тут самое важное, а что нет. Если элементы сайта спорят между собой и взгляд посетителя мечется, не зная, что выбрать — значит, типографика хромает.
4. Правило золотого сечения. Мы уже писали о нем в статье про основные правила веб-дизайна. Если кратко — это деление элементов страницы сайта на пропорции в соотношении 3/2, или 5/3, и так далее. Чаще всего по этому принципу определяется соотношение рекламных блоков и текста.
5. Текст важнее. Графика должна не перетягивать одеяло на себя и отвлекать от контента, а дополнять его и привлекать к нему внимание. Текстовая информация чаще важнее, чем картинки — а значит, графика должна быть на службе у контента, а не наоборот.
6. Помните о гармонии. Не только в музыке она есть, как пелось в одной известной песне. На сайте все должно быть выполнено приятно глазу, гармонично и естественно. Хотите проверить? Просто дайте оценить сайт любому знакомому: пусть посмотрит свежим взглядом и выскажет честное мнение.

Основные понятия типографики и как их применять

О шрифт, ты — мир!

История шрифтов в типографике заставляет задуматься. На заре веб-дизайна считалось крутым использовать необычные шрифты по принципу “чем чуднее — тем моднее”. Со временем появилась тенденция к упрощению: сейчас предпочтение отдается простым крупным шрифтам. И обязательно читаемым.

Приведем несколько основных правил использования шрифтов на сайте:

1. Не используйте слишком много шрифтов. Мы все понимаем — хочется сделать свой сайт поярче и поинтереснее, но пожалуйста, остановитесь на двух-трех. Слишком большое количество шрифтов выглядит непрофессионально и нечитабельно. Подумайте о посетителе — легко ему будет подстраиваться под хотелки дизайнера? Да и сочетать много шрифтов будет непросто — как правило, в итоге таких экспериментов получается сборная солянка.

Например, хорошо сочетаются шрифты Georgia и Verdana — они визуально похожи и гармонично дополняют друг друга. Шрифты Baskerville и Impact, напротив, имеют разную ширину символов, и второй просто “убивает” первый.

2. Используйте стандартные шрифты. Если ваш веб-дизайнер — не суперпрофессионал, лучше не рисковать и выбрать знакомые всем true-шрифты, которые давно зарекомендовали себя. Это, например, системные Arial или Calibri, можно также использовать шрифты Google (это бесплатно) или Adobe Typekit (по подписке) или поюзать онлайн-конструкторы. Вариантов масса!

Внимание! Этот способ могут не применять те, кто хочет сразу громко заявить о себе или создать фирменный стиль сайта. Вот тут можно экспериментировать вволю — конечно, заручившись помощью хорошего дизайнера. С осторожностью обращайтесь с готическим, старославянским шрифтами, Comic Sans — они, как нам кажется, давно себя изжили и не всегда уместны. Хотя на многих ресурсах до сих пор популярны.

3. Буквы должны читаться! Есть некоторые шрифты, в которых отдельные буквы можно перепутать. Например, I и L в английской раскладке, “н” и “м”, “т” и “ш” — в русской. Особенно сложно бывает читателю, когда еще и расстояния между буквами маленькие. Остерегайтесь таких шрифтов!

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

Искусство цвета

1. Играйте на контрасте. Цвет текста и фона для него должны различаться. Серый на сереньком — так себе тренд. Чем больше бросается в глаза контраст — тем гарантированнее он привлечет внимание пользователей. Чем меньше шрифт, тем более он должен быть контрастным, и наоборот.

Какие цвета можно сочетать? Используйте базовые принципы сочетания цветов. В этой схеме нет черного и белого — они априори сочетаются с любым цветом. Наиболее контрастным, кстати, считается сочетание черного и желтого. Взять наш “Тинькоф-журнал” — они использовали это правило на все сто.

2. Смелее, детка! В моде техники градиента, дуплекс — использование двух цветов и их полутонов, трехмерные объемные изображения, картинки, нарисованные вручную и другие тренды веб-дизайна 2018 — ограничений практически нет. Все зависит от вкуса и чувства стиля вашего дизайнера.

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

Оформление текста

“Крылья, ноги, главное — хвост!” — если перефразировать фразу из культового мультика, то же самое можно сказать и о тексте. Цвет и шрифты, конечно, важны, но оформление текста все же играет главную роль в восприятии сайта посетителем. Рассмотрим современные тенденции оформления текста:

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

2. Форматируйте. Это незыблемое правило: если не хотите, чтобы ваш интересный и полезный текст превратился в одну большую простыню — ставьте заголовки и подзаголовки, не забывайте про маркированные списки. Обязательно выделяйте абзацы — сплошной текст читать просто невозможно. Считается, что оптимальная длина абзаца составляет 3-5 строк.

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

3. Забудьте про капслок! Тренд выделять главное капсом давно умер: сейчас большие буквы воспринимаются как крик и вызывают у читателя лишь негатив. Большие буквы уместны лишь в заголовках, да и то не всегда. Привлекать внимание с помощью капса уж точно не рекомендуется.

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

Эксперты говорят, что оптимальное количество символов на строку — не более 60. Если меньше — читатель будет слишком быстро возвращаться в начало строки и сбивать ритм чтения. Если больше — сложно будет сосредоточиться на тексте: пока подойдешь к концу строки, забудешь о том, что написано в ее начале.

Внимание! Это правило актуально для текстов, которые читаются с ПК. Если речь идет о мобильном устройстве, длина строки должна составлять не более 30-40 символов — больше в экран просто не влезет. Ну вы поняли: адаптивный дизайн — наше все.

5. Следите за межстрочным интервалом. Чем он больше — тем больше воздуха в тексте, тем проще читателю пробираться через слова и символы. Обычно размер интервала должен быть на 30% больше высоты символов. Посмотрите, какая колоссальная разница между первым и вторым примером!

Тренды типографики последних лет

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

Крупная типографика

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

• привлекает и удерживает внимание посетителя. Сложно не заметить крупные шрифты, яркие цвета и особое расположение самого важного текста на странице. На сайте интернет-магазина, например, таким текстом будет призыв к действию, информация о скидках и поступлении новых коллекций. На новостном сайте — самая актуальная в данный момент статья. Большой текст — как неоновая надпись в небе: ну посмотри же на меня, прочитай меня, выбери меня, купи меня;
• вызывает эмоции. Если написать одну и ту же фразу мелким и крупным шрифтом — посетитель стопроцентно отдаст предпочтение второму варианту. Вопрос еще и в том, как написать — если удастся воздействовать на чувства посетителя — велик шанс, что он вернется и станет вашим постоянным посетителем. Если за громким слоганом стоит личность создателя сайта — эффект может быть ошеломительным. Главное — не только сказать, но и кем это сказано;
• позволяет определить главное. Все слышали про эффект баннерной слепоты — когда посетитель бегло сканирует взглядом текст, не задерживаясь на отдельных элементах. Крупный заголовок или рекламный баннер позволяет отделить зерна от плевел и остановить взгляд на самом главном. Заголовок помельче — информация второго уровня важности. Ну и так далее.

Большие шрифты

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

Сломанные сетки

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

Больше движения!

Активно используйте гифки, анимацию, 3D-типографику — это оживляет сайт, привлекает внимание посетителей и выделяет ваш дизайн на фоне других. Особенно хорошо эти приемы работают при создании фирменного стиля сайта и персонализации личного бренда. За рубежом анимация давно популярна — у нас еще не все оценили ее возможности. Не упускайте шанс!

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

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

Фундаментальные знания, которые требуются для работы с текстом.

https://d2xzmw6cctk25h.cloudfront.net/post/1945/og_image/e46dc2c3d9a013547cfbe0b5aa5eb9bf.png

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

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

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

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

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

 

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

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

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

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

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

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

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

Засечка (сериф) — короткий, обычно перпендикулярный штрих на конце буквы, с которого начинается и которым заканчивается основной штрих знака. У рубленых шрифтов засечки отсутствуют, отсюда и их название «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.

25 правил типографики для начинающих дизайнеров

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

В статье «25 правил типографики для начинающих дизайнеров» вы найдёте 25 основных правил набора, без которых не обойтись в эпоху цифровых технологий.

Выбираем правильный шрифт

1. Не используйте причудливые шрифты

Если у вас недостаточно опыта и знаний, даже не пытайтесь использовать необычные, затейливые шрифты. Будьте проще.

2. Забудьте о Comic Sans

Представьте, что вы его вообще никогда не видели.

3. Не избегайте стандартных, дефолтных шрифтов

Серьёзно, если кто-то вам говорит, что стандартные шрифты — это скучно, он просто не разбирается в типографике. То, как будет выглядеть шрифт, зависит от того, как он будет набран. Times New Roman может выглядеть по-настоящему здорово. И главное: пусть лучше текст будет скучным, чем уродливым или нечитабельным.

Смешиваем шрифты

4. Не используйте одновременно больше двух шрифтов

Экспериментировать с большим количеством шрифтов на начальном этапе не стоит. Двух вполне достаточно. Вы же не хотите превратить текст в разномастную ерунду, не так ли?

5. Смешивайте только контрастные шрифты

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

6. Выбирайте шрифты с одинаковой высотой букв

Высота строчных букв без выносных элементов — это расстояние от базовой до верхней линии шрифта, иначе говоря — величина очка строчных.

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

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

Набираем текст

7. Размер шрифта

Размер текста в вебе не должен быть меньше 13 пикселей. На мой взгляд, лучший выбор — в пределах 14–18 px. Не слишком большой и в то же время удобочитаемый.

8. Выбирайте правильную длину строки

Не верьте разговорам, что правильную длину строки можно получить, умножив размер шрифта на два. Это ерунда. Просто постарайтесь удерживать длину строки в пределах 45–75 символов.

ГОСТ для печатных изданий рекомендует длину в 60 символов, но это, конечно, труднодостижимый идеал в условиях веба. И всё же к нему стоит стремиться. Определяйте на глаз, не является ли строка слишком длинной или слишком короткой.

9. Интерлиньяж должен соответствовать размеру шрифта

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

Абзац

10. Выравнивайте по левой стороне

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

Но по-русски такой текст удобно читать, если строка не слишком длинная. Поэтому, если ваша строка больше 60 символов, попробуйте расключенный набор. Только не забудьте расставить переносы и проверьте, всё ли выглядит хорошо: несколько переносов подряд определённо затруднят чтение.

11. Избегайте большого числа переносов

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

12. Без отступа

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

13. Узкая колонка

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

14. Висячая пунктуация

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

15. «Вдовы» и «сироты»

Речь идёт о висячих строках. «Вдова» — это одно слово на целой строке в конце абзаца или очень короткая строка в конце текста или страницы. «Сирота» — это висячая строка, которая попадает на начало новой страницы или колонки. Их нужно избегать. Попробуйте уменьшить межбуквенное расстояние, перенести строку или отрегулируйте размер шрифта — в общем, не давайте «вдовам» и «сиротам» пробраться в свой текст.

16. Не злоупотребляйте пробелами

Чтобы начать новую строку, нажимайте Shift+Enter. Для начала нового абзаца нажмите Enter. Вот так всё просто.

Слова

17. Кернинг

Если вы неопытный дизайнер и у вас не намётан глаз на мельчайшие детали, не керните текст вручную.

18. Трекинг

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

19. Выделения в тексте

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

20. Строчные без разрядки

Не стоит увеличивать расстояние между строчными. Причина проста: снижается удобочитаемость.

21. Прописные с разрядкой

Увеличивайте расстояние между прописными. В этом случае читабельность возрастает. Обычно хорошо работает увеличение межбуквенного пространства на 10%.

22. Не пишите всё заглавными

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

23. Не используйте капитель без надобности

Если в шрифт не включено специальное капительное начертание, не используйте его вообще.

Буквы

24. Не изменяйте ширину букв

Просто не делайте это. Пожалуйста.

Числа

25. Числа прописью

Пишите числа прописью, это выглядит изысканно.

Источник: Лайфхакер

Фото на обложке и в статье: ShutterStock

10 правил типографики в интерфейсах

Гарнитура Roboto от Google.

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

Шрифт Vivaldi будет очень сложно читаться на маленьком экране.

Правило №5. Используйте шрифт с четко различимыми символами

Некоторые шрифты затрудняют восприятие похожих друг на друга букв, особенно таких как «i» или «L» (как в примере ниже). Эту же проблему может вызвать и слишком близкое расположение букв друг к другу. Например, «r» и «n», если их написать очень близко, напоминают букву «m». Поэтому при выборе шрифта обязательно проверяйте его в разных контекстах, чтобы убедиться, что он не вызовет проблем у пользователей.

Правило №6. CAPS — не всегда хорошо

Текст, написанный только заглавными буквами, подходит только для тех случаев, где не требуется его долгое прочтение (например, аббревиатуры или логотипы). Но там, где необходимо сосредоточиться, такой прием лучше не использовать. Как отметил Майлз Тинкер в своей работе Ligibility of Print, текст, написанный только заглавными буквами, существенно замедляет его прочтение по сравнению с тем же текстом, написанным строчными буквами.

Правило №7. Не минимизируйте расстояние между строками

В типографике используется термин для обозначения интервала между строками текста — интерлиньяж или межстрочный интервал. Увеличивая интервал, вы увеличиваете вертикальное пространство между строками текста, улучшая тем самым читабельность, но сокращая количество текста, который вы сможете разместить на площади экрана. Как правило, чтобы текст легко читался, межстрочный интервал должен быть на 30% больше высоты самих символов.

Правильный интерлиньяж улучшает читабельность. Картинка от Microsoft.

Как отмечает Дмитрий Фадеев, правильное использование пробелов между параграфами на 20% процентов улучшает понимание прочитанного материала и помогает пользователю легче «переварить» текст, который не перегружен лишними деталями.

Слева: Строки в тексте размещены очень плотно.
Справа: Правильное использование интерлиньяжа улучшает читабельность.

Правило №8. Убедитесь, что вы используете достаточно контрастные цвета

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

• Для текста с мелким шрифтом соотношение контрастов между текстом и его фоном должно быть не менее 4.5:1
• Для текста с крупным шрифтом (шрифт 14 жирный/18 нежирный и выше) соотношение контрастов между текстом и его фоном должно быть не менее 3:1

Соотношение контрастов текста и его фона не отвечает рекомендациям, поэтому его трудно прочитать

Соотношение контрастов текста его фона отвечает рекомендациям, поэтому его легко прочитать

Дальтонизм — это весьма распространенное заболевание, особенно среди мужчин (8% мужчин не могут различать цвета). Поэтому рекомендуется использовать дополнительные инструменты, помимо цвета, для выделения важной информации. Также старайтесь не использовать красный и зеленый в написании текста — при дальтонизме человек чаще всего не различает именно их.

Правило №10. Не используйте мигающий текст

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

Заключение

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

Задача типографики —
выгодно подчеркнуть контент

.

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

Источник: contented

26 правил цифровой типографики для начинающих

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

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

Эта статья — отличное начало вашего дизайнерского пути. Здесь собраны основные правила для новичков. 26 базовых принципов и советов об управлении текстами в цифровой сфере. Такое небольшое типографическое пособие для начинающих.

Выбор правильного шрифта

1. Не используйте причудливые шрифты

Если у вас недостаточно опыта и знаний, не используйте причудливые шрифты вообще. Будьте проще.

2. Шрифт Trajan Pro и не причудливый, и не старый

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

3. Забудьте о Comic Sans

И притворитесь, будто вы никогда его не видели.

4. Избегание шрифтов по умолчанию — это полный бред

Серьёзно. Если кто-то думает, что стандартные шрифты скучны, то он невежда. Всё дело в том, как вы распорядитесь этим шрифтом. Вот что определяет его внешний вид. Times New Roman может смотреться просто отлично. Вам нужно только сделать так, чтобы это увидели и другие люди.

Пусть лучше ваш текст будет скучен, чем некрасив или нечитаем.

Сочетание шрифтов

5. Не смешивайте больше, чем два шрифта

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

Для меня это главное правило. Я (почти) всегда стараюсь брать максимум 2 семейства шрифтов. Вы же не хотите получить кашу и полнейшее безобразие, верно?

6. Сочетайте только контрастирующие шрифты

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

Sans Serif + Serif: рукописный шрифт в паре с современным. Сохраняйте контраст. Два похожих шрифта рядом смотрятся неряшливо.

7. Но убедитесь, чтобы высота строчных знаков была схожей

Высота строчных знаков (x-height) — это высота строчных букв, измеряемая от линии шрифта. При подборе начертаний выбирайте их с похожей высотой. Это поможет вам держать градацию серого последовательной. Также текст будет легче читать, поскольку визуальная линия, по которой будет идти ваш взгляд, останется постоянной.

Настройка текста

8. Размер текста — Кегль

Кегль текста в абзацах на сайтах устанавливайте минимум на 13px. Я больше всего люблю 14-18px. Размер текста получается не слишком большим, и текст удобно читать.

9. Выбирайте верную длину строки

Уделяйте внимание строке, которая получается в два раза длиннее самого текста. Следите, чтобы длина строки варьировалась от 45 до 75 знаков. Считается, что 66 знаков — это идеальная длина, но ей трудно придерживаться на адаптивных сайтах. Просто смотрите за тем, чтобы строка была не слишком длинной и не слишком короткой.

10. Подбирайте межстрочный пробел, подходящий кеглю

Чтобы достичь баланса в блоке текста, воздух между строками должен быть примерно 150% от высоты строчных. Ещё проще — установить высоту строки, как 125% кегля.

Абзацы

11. Выравнивание по левому краю

Да. Если вы не уверены, как правильно выставлять пользовательские межсловные пробелы — не ставьте выключку. Просто выровняйте всё по левому краю. Рваный правый край — это хорошо. Намного легче читать, когда глазам есть, за что зацепиться в конце строки. Вы можете попробовать выключку по центру, если в строке больше 60 знаков. Но не забывайте включать переносы, а вручную проверяйте, чтобы всё смотрелось хорошо. Вы же не хот

Типографский дизайн: правила и термины, которые должен знать каждый дизайнер

1. Чаша; 2. Стебель; 3. Счетчик; 4. Рука; 5. Лигатура; 6. Терминал; 7. Позвоночник; 8. Восходящее устройство; 9. Апекс; 10. Засечки; 11. Ухо; 12. Спусковое устройство; 13. Ригель; 14. Finial; 15. Высота подъемника; 16. Высота крышки; 17. X-высота; 18. Исходный уровень; 19. Descender line

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

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

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

01. Выбор шрифта

Существует огромный выбор шрифтов, из которых вы можете выбрать

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

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

Даже среди платных опций такой большой выбор может быть огромным. Может возникнуть соблазн придерживаться классики. Если вы хотите расшириться и нуждаетесь в вдохновении, взгляните на эти вдохновляющие альтернативы Helvetica.

02. Размер

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

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

Ширина каждого символа известна как «установленная ширина». Он охватывает тело буквы и пространство, которое действует как буфер между одной формой буквы и другой.

Самым распространенным методом измерения шрифта является точечная система, которая восходит к 18 веку. Одна точка составляет 1/72 дюйма. 12 точек составляют одну пику — единицу измерения ширины столбца. Размер шрифта также можно измерять в дюймах, миллиметрах или пикселях.

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

Интерлиньяж описывает вертикальный интервал между каждой строкой текста. Он назван так потому, что во времена металлического набора для разделения строк использовались свинцовые полоски. Для разборчивого основного текста, удобного для чтения, общее правило состоит в том, что начальное значение должно быть любым между 1.В 25 и в 1,5 раза больше размера шрифта.

04. Трекинг и кернинг

Кернинг — это процесс настройки расстояния между символами для создания гармоничного сочетания. Например, там, где прописная буква «А» встречается с заглавной буквой «V», их диагональные штрихи обычно переносятся таким образом, чтобы верхний левый угол буквы «V» находился над нижним правым уголком буквы «А».

Кернинг похож на отслеживание, но это не одно и то же. Отслеживание — это процесс настройки расстояния между всеми символами в слове, который применяется равномерно.

05. Мера

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

Существует ряд теорий, которые помогут вам определить идеальную меру для вашей типографики. Одно эмпирическое правило состоит в том, что ваши строки должны быть длиной в 2-3 алфавита (то есть 52-78 символов, включая пробелы).

06. Иерархия и масштаб

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

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

Следующая страница: Глоссарий типографских терминов

,

Что такое типографика? Подробное описание всех терминов и правил

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

Типографика может вызывать чувство, напоминать вам об определенном бренде или создавать атмосферу. В брендинге подумайте о смелости логотипа FedEx (с хитрой скрытой стрелкой!) Или о классическом стиле черных букв заголовка The New York Times.Для редакционного набора подумайте о макете вашего любимого журнала. А на телефоне подумайте о том, как разные шрифты используются в разных приложениях.

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

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

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

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

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

Дизайнеры работают над объединением исторических принципов и современного мышления для создания гармоничных результатов, которые часто должны работать как в печати, так и в пикселях.Начиная с XI века в Восточной Азии (да, Иоганнес Гутенберг на самом деле не изобрел печатный станок), шрифт был результатом работы между создателем шрифта и наборщиком. К 1800-м годам созданные буквы были превращены в металлические блоки. Каждый шрифт или общий дизайн превращали в шрифты, которые затем продавали в типографии.

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

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

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

Понимание шрифта, шрифта и выбора

Правильный выбор типа может передать ваше сообщение мгновенно.Но плохой выбор может полностью изменить намеченное сообщение.

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

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

Некоторые цифровые компании используют этот термин как синонимы, а такие программы, как Microsoft Word, позволяют пользователям выбирать шрифт и настраивать размер и вес, комбинируя эти два определения. Но для ясности шрифты разрабатываются типографами или дизайнерами шрифтов, в то время как шрифты являются вариациями внутри семейств шрифтов.

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

Веб-дизайнеры стали использовать слово «шрифт» вместо гарнитуры шрифта, поскольку HTML использует «начертание шрифта» для определения семейства, за которым следуют такие атрибуты, как размер и цвет, чтобы быть более конкретными. Кроме того, CSS использует «семейство шрифтов» как синоним гарнитуры, а затем размер и вес как атрибуты. Различные уровни плотности включают очень светлый, нормальный, средний, полужирный, полужирный, очень жирный и ультра черный.

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

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

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

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

Несмотря на изобилие вариантов, есть те, кто считает, что лучше всего придерживаться того, что всегда работало.Мастер дизайна Массимо Виньелли в своей публикации «Канон Виньелли» утверждал, что дизайнеру следует использовать только базовую коллекцию классических шрифтов, чтобы избежать визуального загрязнения, которое, по его мнению, происходит в мире дизайна. Виньелли использовал всего шесть гарнитур: Bodoni, Futura, Times и Helvetica; плюс Garamond и Century Expanded.

Но, в конце концов, независимо от того, содержит ли ваша библиотека шрифтов 200 шрифтов или шесть (как предлагает Виньелли!), Наиболее важным является то, как вы понимаете и создаете шрифт для работы в каждом отдельном проекте графического и брифинга.

Правила типографики

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

1. Весы, обеспечивающие единообразную структуру
2. Иерархия, определяющая организацию и направление
3. Контраст для подчеркивания светлых участков
4. Повторение для единообразия и знакомства
5. Выравнивание для получения четкого и структурированного изображения

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

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

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

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

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

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

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

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

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

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

Применение основ типографики при верстке

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

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

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

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

В то время как свойства типа помогают расположить буквы на сетке, классификация типов больше связана со стилем и формой символов, а также с тем, как дизайнер решает использовать их в отображаемых шрифтах или шрифтах заголовков. Прекрасным примером этого является разница между шрифтом с засечками и без засечек. Засечки — это небольшое расширение буквы, например небольшая кривая в конце штриха. Подумайте, например, о заглавной букве «I». В отличие от простой прямой вертикальной линии, засечки — это небольшая перпендикулярная линия, проходящая как вверху, так и внизу букв.Более современный вид — «без засечек», то есть убраны засеки, что придает буквам более простой вид.

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

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

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

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

Список типографских терминов

См. Ниже полный список основных типографских терминов.

Если вы хотите погрузиться в более подробную анатомию шрифтов, наша команда преподавателей Shillington рекомендует невероятный Глоссарий типов Typography Deconstructed.

• Выравнивание : результат выравнивания букв по ссылке, такой как поле
• Апертура : белое пространство в конце открытого счетчика
• Apex : верхняя точка соединения двух штрихов
• Рычаг : когда шток с одного конца не прикреплен к штоку
• Ascender: стержень строчной буквы, выступающей над высотой x.
• Обратный наклон : наклоненный назад курсив
• Ball Terminal : шаровое продолжение буквы
• Базовая линия: воображаемая строка, на которой лежит строка текста.
• Полужирный : жирный шрифт любого шрифта, часто используемый для выделения.
• Чаша: обычно круглая или эллиптическая форма, которая является основной формой букв, таких как C, G, O в верхнем регистре и b, c, e, o, p в нижнем регистре.
• Кронштейн: изогнутое соединение между основанием и засечками некоторых шрифтов. Не все засечки — это засечки в квадратных скобках.
• Каллиграфия : искусство письма с помощью очень специфического инструмента (например,г., ширококонечное перо, кисть и т. д.)
• Высота заглавной буквы : высота заглавных букв, измеряемая от базовой линии до верхней части заглавной буквы. Он основан на плоских буквах сверху и снизу, например H или E. Заглавные буквы с изгибами, например B, C, D, G, O, Q и S, выступают немного выше и ниже заглавной буквы. высота, чтобы они были оптически похожи по размеру на другие буквы.
• По центру : когда текст выровнен по центру текстового фрейма, с лоскутом слева и справа от текстового фрейма
• случаев, когда основной текст выравнивается внутри текстового фрейма, образуя лоскут с обеих сторон
• Символ : буква, цифра, знак препинания или символ
• Набор символов : полный набор символов для любого заданного веса шрифта
• Счетчик: пустое пространство, заключенное в форму буквы, заключенное полностью, как в «d» или «o», или частично, как в «c» или двухэтажное «a».
• Поперечина : штрих поперек стержня (как в горизонтальной линии букв «T», «H», «E» и т. Д.)
• Descender: основа строчной буквы, которая расположена ниже базовой линии, например g, j, p, q и y.
• Ухо: обводка прилагается к чаше строчной буквы g. Некоторые типографы используют тот же термин для строчной буквы r.
• Ellipsis : символ, состоящий из трех точек.
• Extended : символ увеличенной ширины, такой как знак ударения
• Сетка : воображаемое или фактическое расположение вертикальных и горизонтальных линий для выравнивания
• Descender : когда часть буквы опускается ниже базовой линии
• Дисплей : категория шрифтов, которая в основном используется для заголовков и подзаголовков из-за их большого веса и / или подробного характера
• Font Color : используется в веб-дизайне для указания цвета
• Размер шрифта : высота шрифта.Обычно он измеряется в точках (8, 10, 12 и т. Д.) От исходного уровня к исходному.
• Толщина шрифта : толщина шрифта (светлый, обычный, средний, полужирный)
• Крючок : изогнутая арка (например, на букву «f»)
• Hand-lettering : создание собственных писем с нуля для конкретной цели / клиента.
• Курсив : символы с наклоном вперед, разработанные в начале 1500-х годов.
• Шарнир : ход соединяется со штоком
• По ширине : случаи, когда текст выравнивается по левому и правому краю в текстовом фрейме, без тряпки с обеих сторон
• Кернинг: интервал между отдельными парами символов.
• Интерлиньяж : горизонтальное расстояние между двумя строками текста, измеряемое от базовой линии до базовой линии. В некоторых случаях это может называться «высота строки».
• По левому краю : текст выровнен по левому полю
• Ножка : короткий ход вниз
• Лигатура: встречается, когда две или более буквы соединяются в один символ.
• Ссылка: обводка, соединяющая чашу и петлю строчной g.
• Строчные: символов в нижнем регистре — это не заглавные буквы алфавита. Они составляют основную часть письменного текста, причем прописные или заглавные буквы используются в основном только для начала предложений или имен собственных. Термин «нижний регистр» произошел от времен металлического шрифта, когда наиболее часто используемые буквы находились под рукой в ​​нижнем регистре, а менее часто используемые заглавные — в более труднодоступных прописных.
• Моноширинный : пример шрифта, в котором каждый символ имеет одинаковую ширину
• Сирота : отдельное слово, которое появляется в начале страницы.
• Размер кегля: расстояние от верха самого верхнего восходящего элемента до низа самого нижнего восходящего элемента — это размер кегля любого данного шрифта. Первоначально это была высота лицевой стороны металлического блока, на котором была отлита каждая буква.
• Тряпка : неровный вертикальный край блока типа. Может быть с левой стороны, с правой стороны или с обеих сторон.
• Читаемость : степень, с которой текст читается
• Выровнен по правому краю : когда текст выровнен по правому полю с тряпкой на левой стороне текстового фрейма
• Sans Serif : без продолжения штрихов на символах
• Serif: штрих, проведенный под прямым углом или наклонно поперек руки, основы или хвоста буквы.Он встречается на вертикальных и горизонтальных штрихах некоторых символов. Засечки также могут попадать в разные категории, например, плоские или тонкие.
• Плечо : изогнутый ход соединен со штоком
• Стебель: Вертикальный штрих в форме буквы. Можно найти как в нижнем, так и в верхнем регистре.
• Напряжение : изменение ширины штриха по диагонали или вертикали буквы
• Штрих : любой линейный элемент на букве
• Swash : добавление декоративного штриха
• Системный шрифт : основной шрифт, используемый операционной системой компьютера
• Терминал: любой штрих, не заканчивающийся засечками, является окончанием.Он может быть как прямым, так и изогнутым.
• Отслеживание : расстояние между всеми буквами в строке текста. Это также называется межбуквенным интервалом.
• Классификация типов : тип символов на основе стиля
• Свойства типа : свойства, позволяющие разместить символы на сетке
• Дизайн гарнитуры : процесс создания полного набора символов определенного стиля. Это могут быть символы верхнего и нижнего регистра, математические символы, знаки пунктуации, цифры и т. Д.
• Размер шрифта: расстояние от верха самого высокого зажима до низа самого нижнего зажима. Обычно он измеряется в баллах.
• Набор текста : процесс размещения больших объемов текста (например, книги, журнала и т. Д.) И обеспечение его разборчивости и читаемости.
• Прописные буквы: заглавных букв являются прописными буквами алфавита. Заглавные буквы обычно используются в начале предложений и в качестве первой буквы имен собственных.Термин «прописные буквы» произошел от времен металлического шрифта, когда менее используемые заглавные буквы сохранялись в более труднодоступных прописных, в то время как наиболее часто используемые буквы находились ближе к концу, в нижнем регистре.
• Вершина : нижняя точка, где соединяются два штриха
• Widow : одно слово в отдельной строке в конце абзаца или столбца.
• X-Height : высота строчных букв в любом заданном шрифте.Измерение основано на высоте буквы «x». Строчные буквы с изгибами (например, a, c, e, o, s, u и др.) Обычно немного выступают ниже и выше x-высоты, чтобы выглядеть оптически похожими по размеру на другие буквы

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

Надеюсь, вам понравился этот фундаментальный обзор типографики в дизайне.Если вы не разбираетесь в этом анализе, вам стоит подумать об изучении графического дизайна! Узнайте больше о том, как стать графическим дизайнером всего за 3 месяца полный рабочий день или 9 месяцев неполный рабочий день в Shillington в Нью-Йорк , Лондон , Манчестер , Сидней , Мельбурн или Брисбен .

,

Глоссарий типографских терминов — Дизайн типографики: правила и термины, которые должен знать каждый дизайнер

A

Aesc

Произносится «ясень», это лигатура из двух букв — «а» и «е». Aesc происходит от древнеанглийского, где он представлял гласную дифтонга, и успешно перекочевал в другие алфавиты, включая датский и исландский.

Апертура

Суженное отверстие глифа, как видно на букве «е». Изменение размера апертуры напрямую влияет на разборчивость формы буквы и, в конечном итоге, на читаемость.Апертуры могут быть «закрытыми» (здесь показаны оранжевым) или «открытыми» (зеленые).

Apex

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

Плечо

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

Ascender

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

B

Базовая линия

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

Чаша

Чаша относится к красивым замкнутым частям букв. Они отображаются как в нижнем (b), так и в верхнем регистре (B).

Клюв

Изогнутая клемма наверху букв, таких как «a», «c», «f» и «r».Названы так потому, что немного похожи на птичий клюв.

Двухкамерный

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

Кронштейн

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

C

Высота крышки

Высота заглавной буквы над базовой линией.

Копировальная установка

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

Счетчик

Закрытая или частично закрытая часть букв, таких как ‘c’, нижняя часть ‘e’ и ‘g’. Показано оранжевым цветом выше. Будьте осторожны, чтобы не перепутать столешницы и миски.

Поперечина

Перекладина соединяет два штриха, как в «H». Не путать с поперечным штрихом, который прорезает основу таких букв, как «т».

Cursive

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

D

Descender

Часть буквенной формы, которая находится ниже базовой линии. В нижнем регистре это означает «p», «y» и «q» и иногда применяется к прописным «J» и «Q».

Диакритический

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

Дингбат

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

Дисплейный шрифт

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

Буквица

Буква большого размера, обычно используется в начале абзаца.Он «опускается» на две или более строк текста, но также может подниматься вверх. Приведенный выше пример взят из серии Daily Drop Cap Джессики Хиш.

E

Ушко

Небольшой штрих, идущий от верхней правой стороны чаши строчной буквы g, как показано в примере. Он также может появляться в нижнем регистре «r».

Ethel

Лигатура букв «о» и «е».

Em тире

Em — длинное горизонтальное тире (-), равное текущему размеру текста в пунктах.Иногда его называют «бараниной», чтобы отличить его от очень похожего по звучанию En. Это ширина буквы «м».

En dash

«Орех» для друзей, En (-) — это горизонтальная черта размером в половину Em (-). Это ширина буквы «n».

Глаз

Глаз похож на счетчик, но вместо этого относится конкретно к заключенной части буквы «е».

F

Finial

Конический или изогнутый конец, который появляется на таких буквах, как «e» и «c».

Fleuron

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

Тег HTML5, который переносит типографику в Интернет с гарнитурами, непосредственно встроенными в веб-страницы. Для получения дополнительной информации ознакомьтесь с нашим руководством по веб-типографике.

G

Глиф

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

Grapheme

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

Желоб

Промежутки между разворачивающимися страницами книги или журнала или вертикальный зазор между двумя столбцами текста.

J

По ширине

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

K

Кернинг

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

L

Интерлиньяж

Интерлиньяж описывает вертикальный интервал между каждой строкой текста. В старину для разделения строк текста по вертикали использовались настоящие свинцовые полоски; соглашение об именах сохраняется.

Разборчивость

Легкость, с которой можно отличить одну форму буквы от другой. Это улучшает читаемость, но не то же самое.

Петля / лепесток

Нижняя часть буквы «g» известна как петля или лепесток.Он может быть открытым (вверху справа) или закрытым (слева). Его также иногда называют хвостом — термин, который также занимает нижнюю часть буквы «у».

Логотип

Буквенная часть любой марки или удостоверения личности. Логотип можно взять отдельно от его графического спутника.

Лигатура

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

M

Маникюра

Символ стрелки. Также известен как кулак епископа (перестаньте хихикать в ответ) или ранний смайлик.

Моноширинный

Моноширинный шрифт распределяется равномерно

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

O

OpenType

OpenType — это формат шрифта, разработанный Microsoft и Adobe. Он вытеснил и улучшил шрифты TrueType и PostScript.

Наклонный или наклонный римский

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

Сирота

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

P

Pica

Длина одной шестой дюйма, pica связана с длиной строки и шириной столбца. В одном пикселе 12 точек или 16 пикселей.

Pilcrow

Символ абзаца (¶).Теперь он отмечает наличие возврата каретки, но когда-то считалось, что это означает изменение темы в плавном тексте.

Point

Стандартное типографское измерение, равное 1/12 пики или 1/72 дюйма.

R

Читаемость

Читаемость означает легкость, с которой блок текста можно сканировать на глаз.

S

Serif

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

Sidebearing

Горизонтальное пространство по обе стороны от формы буквы, отделяющее ее от других букв.

Корешок

Основной изогнутый штрих строчной или заглавной буквы «S».

Squoosh

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

Шпора

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

Шток

Вертикальный полный штрих в вертикальном положении.

T

TDC

Клуб типографов — типографическая организация, базирующаяся в Нью-Йорке.

Tittle

Великолепно наводящее на размышления название для точки над буквами «i» и «j».

Терминал

Тип кривой в конце штриха, который не является засечками. Примеры включают формы слезы: «наконечник», «шар», «клюв» и «слезы».

X

x-height

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

Подробнее:

,

10 правил типографики — слепые

Как вы можете быстро применить типографские правила, чтобы восстановить контроль над своими макетами, следуя этим 10 золотым правилам типографики? Эти правила взяты из того, что я узнал, поступив в Art Center College of Design.

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

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

Правило 01

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

Правило 02

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

9000 3.