Типографике: Что такое типографика и какие шрифты использовать на сайте — руководства на Skillbox

Содержание

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 знаков. Но не забывайте включать переносы, а вручную проверяйте, чтобы всё смотрелось хорошо. Вы же не хотите целое нашествие переносов.

12. Избегайте переносов

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

13. Обойдитесь без отступов

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

14. Подписи

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

15. Висящие знаки пунктуации

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

16. Вдовы и сироты

Widow — вдова. по англ.

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

17. Не переусердствуйте с межсловным пробелом

Shift+enter требуется только для того, чтобы начинать новую строку. Нажимайте кнопку «enter» для начала нового абзаца. Всё просто.

Слова

18. Kёрнинг

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

19. Трекинг

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

20. Акценты в тексте

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

21. Не делайте разрядку в строчных

Этот текст нечитаем…

Причина проста: разрядка в прописных мешает читаемости.

22. Ставьте разрядку в прописных

Ставьте бОльшую разрядку между прописными. Читаемость всегда улучшается благодаря большему пространству между прописными. Значение в 10% отлично подойдёт.

23. Не набирайте текст капителью

Не набирайте капителью текст, длиннее одной строки.

24. Обойдитесь без малых прописных

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

Буквы

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

Выглядит нехорошо.

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

Цифры

26. Пишите цифры буквами

В целом: пишите цифры буквами. Это элегантно. Только не применяйте это правило к математическим штукам типа уравнений и процентов.

Спасибо за внимание,

Том — старший веб-дизайнер в GOG.com и фрилансовый продукт-дизайнер и арт-директор в Pixology.

Разбираемся в основах типографики за 10 минут

Два главных типа чтения — линейное и информационное.

Линейное чтение — это книги и лонгриды с одной колонкой, где главное — не отвлекаться и погружаться в текст.

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

Пример статьи для быстрого информационного чтения. Главные мысли выделены жёлтым

Трекинг — расстояния в строке между символами.

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

Пример кернинга. Буквы Го и AW можно подвинуть ближе друг к другу, так как их формы гармонично сочетаются

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

Гротеск — более современный шрифт без засечек. Читается легче и быстрее антиквы.

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

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

Прямое начертание — это классический машинописный шрифт.

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

Графема — это общий скелет буквы. Букву можно нарисовать или сложить из чего угодно, но благодаря единой графеме вы сможете отличить А от Б.

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

Насыщенность определяется толщиной линий. Чем толще линии, тем выше насыщенность.

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

Пример шрифта с высокой и низкой контрастностью

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

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

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

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

Примеры наборного и акцидентного шрифта

Пропорциональный и моноширинный шрифты отличаются размерами литер.

Наглядный пример отличий пропорционального шрифта от моноширинного

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

В пропорциональном занимаемая литерой площадь зависит от её размеров: английская i будет занимать в 2-3 раза меньше места, чем n. Такой набор экономит свободное место, поэтому в печатных изданиях используют только его. Если напечатать книгу моноширинным шрифтом, её объём и расход листов увеличится на 5-15%.

восемь правил типографики, которые спасут любой текст — Дизайн на vc.ru

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

11 332 просмотров

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

Исходный текст

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

1\Интерлиньяж

Добавьте воздуха тексту. Интерлиньяж (межстрочное расстояние) текста должен быть равен примерно 100–110% от размера шрифта для заголовков и 120–140% для обычного текста. Если размер заголовка 60 pt, то интерлиньяж должен быть равен примерно 66 pt. Это правило не строгое, потому что многое зависит от размера шрифта, его гарнитуры, ширины колонки и т.д.

Иногда для заголовков приходится делать интерлиньяж даже меньше кегля шрифта.

2\Тире и дефис

Соблюдайте правила русского языка, правильно расставляйте запятые, отличайте тире от дефиса. Тире на клавиатуре (Windows)— Alt + 0151.

3\Висячие предлоги

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

4\Кавычки-ёлочки

Используйте кавычки «ёлочки» вместо кавычек „лапок”. Лапки используйте только внутри ёлочек, если нужны кавычки внутри кавычек.

Пример: «… „…”… »

5\Висячая пунктуация

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

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

Неверный пример

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

6\Буква «ё»

Никогда не игнорируйте буквы «ё» и «й». Они имеют равно те же права на существование, что и остальные буквы.

7\Оишбки

Всегда проверяйте макет на ошибки, удаляйте двойные пробелы.

8\Кернинг

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

Финал

Спасибо за прочтение, но и вы выразите благодарность:)

Чтобы выразить её, перейдите и подпишитесь на мои соцсети.

Эстетика типографики — Дизайн на vc.ru

4838 просмотров

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

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

Элементы типографики

Гарнитура и шрифт

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

Линия строчных знаков

Средняя линия указывает на вершину строчных букв (или вершину x-высоты).

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

Базовая линия — это линия, на которой расположено большинство букв.

х-высота

Это расстояние между базовой линией и верхом строчных букв.

Кернинг

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

Интервал

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

Интерлиньяж

Интерлиньяж (Leading или line-height) — это расстояние между двумя строками текста. Хорошо продуманное расстояние делает текст более разборчивым, поскольку помогает глазу легче переходить от одной строки текста к следующей. Стандартный интерлиньяж составляет 120% размера шрифта, но он может варьироваться.

Негативное пространство

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

Различные классификации шрифтов

С засечками (Serif)

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

​Шрифт с засечками

Без засечек (Sans Serif)

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

​Шрифт без засечек

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

Каждая буква имеет одинаковую ширину. Часто используется в программировании. Для основного текста он не идеален, но его можно использовать для заголовков.

​Моноширинный шрифт

Дисплейный

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

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

Рукописный

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

​Рукописный шрифт

Лучшие практики

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

Airbnb

font-family: Circular​

Uber

​font-family: UberMove

Dropbox

​font-family: SharpGroteskWide

Evernote

​font-family: Soleil

Intercom

​font-family Graphik

Spotify

​font-family: Circular

Basecamp

​font-family: Graphik

Slack

​font-family: Slack-Larsseit

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

Рекомендации по улучшению типографики в пользовательских интерфейсах

Минимальное количество используемых шрифтов

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

Хорошая контрастность и выбор правильного цвета очень важны для разборчивости и восприятия

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

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

Используйте как можно меньше цветов для вашего контента (менее 3)

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

Шрифты без засечек лучше для текста на экранах

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

Обратите внимание на ваш межстрочный интервал

Для оптимальной разборчивости межстрочный интервал должен быть около 140–180% размера вашего текста.

Уменьшите длину вашего текста

Длинная строка текста негативно влияет на читабельность и может сбить с толку, поэтому ограничьте длину строки до 70–80 символов.

Маленький текст нуждается в большем интервале

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

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

Обратите внимание на расстояние между буквами

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

Создайте хорошую иерархию для ваших текстовых элементов

Начиная с базового размера вашего основного текста, вы определяете типографский масштаб для всех других элементов (заголовков, подзаголовков и так далее). Хорошим инструментом для этого может быть type-scale.

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

При выборе шрифта для вашего продукта следует учитывать три критерия:

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

Заключение

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

Типографика в графическом дизайне | 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.

9 лекций по типографике

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

Шрифт в современном мире


Развитие Типографики | Иван Гладких

История письменности и типографики | Мария Мизерницкая

Швейцарская типографика феномен и стереотип

Типографика сайтов

Тагир Сафаев. Неочевидность латиницы в кирилловском алфавите

Motion-weekend. Константин Жаров: Типографика в моушн-дизайне

Эстетика и типографика — Илларион Гордон

60 минут о типографике

Типографика: искусство текста

4 — 2003

Маргарита Григорян

Основа основ

Типографика на практике

Цвет

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

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

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

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

Основа основ

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

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

Типографика на практике

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

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

Само собой, одной только широкоформатной рекламой применение типографики в рекламе не ограничивается — типографическое оформление с успехом применяется и в печатной рекламе. Основные задачи здесь остаются теми же – привлечь внимание, заставить сначала всмотреться в образ, а затем и вчитаться в текст. Хороший пример – реклама «Finances, Trust, Consulting», разработанная дизайн-студией Open Design. Она представляет собой изображение прозрачной призмы, на гранях которой сделаны надписи «Деньги – это наука» и «Деньги – это искусство». Художники из Open Design использовали оригинальное и остроумное типографическое решение, заменив некоторые из букв кириллицы в надписи «Деньги – это наука» на греческие, которые, как мы знаем со школьной скамьи, широко применяются в науке, а в строке «Деньги – это искусство» – на музыкальные символы. Таким образом, смысловая нагрузка рекламы гармонично сочетается с ее визуальным исполнением. Нестандартное же решение делает рекламу заметной.

Широко используется типографика и в дизайне упаковки, причем наиболее часто она находит применение в парфюмерно-косметической индустрии. Практически все упаковки духов, как и этикетки на флаконах, выполнены с использованием типографики. Классическим примером может служить оформление легендарных духов «Chanel № 5», дизайн коробки которых не менялся с самого момента их создания в 20-х годах прошлого века.

Не устояли перед типографикой и просторы Всемирной сети. Существует довольно много Web-страниц, оформление которых построено исключительно на использовании оригинальной формы и начертания текста. Если такая страница с точки зрения дизайна создана грамотно, то она будет легко восприниматься зрителем и хорошо запоминаться. Поскольку в Web-дизайн типографика вносит элемент некоторой неформальности (все-таки в Интернете преобладает использование графических элементов для композиции и навигации), подобное оформление редко используется при создании корпоративных страниц, а вот среди сайтов дизайн-студий их становится все больше и больше. Один из наиболее известных и интересных сайтов такого рода – The Designers Republic (http://www.thedesignersrepublic.com/). Он представляет собой обширный каталог дизайнерских решений, и именно благодаря типографическому оформлению навигация среди огромного количества информации заметно упрощается. На главной странице The Designers Republic можно увидеть большую типограмму с надписью «Angryman» – текст, посредством монтажа превращенный в изображение «сердитого человека». Всмотревшись в эту типограмму, зритель увидит детали латинских литер, собранных в одно целое.

Часто в типограммах (или в «каллиграммах») на первый взгляд невозможно определить первоначальный облик отдельных символов, но, если присмотреться, можно различить их. При создании типограмм типографы обычно пользуются такими приемами, как искажение составных литер, изменение кегля и рисунка символов, а также намеренная деформация строк наборного текста. Самый простой и распространенный способ создания типограмм – верстка текста в форме описываемого в нем объекта (например, указатель, в котором размеры составляющих его букв подобраны таким образом, чтобы слово по форме напоминало стрелку). Но есть и более сложные разновидности типограмм, в которых текст становится нечитаемым, преобразуясь в картинку. «Angryman» с The Designers Republic – отличный тому пример.

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

Типографика пользуется огромной популярностью и у авторов художественных постеров и плакатов, которые давно уже выделились в самостоятельный жанр изобразительного искусства. Они, как и рекламные публикации, вынуждены апеллировать в первую очередь к визуальному восприятию. Однако жанр постеров и плакатов не органичен такими жесткими рамками, как, скажем, печатная реклама, и поэтому дает дизайнерам большую возможность художественного самовыражения; отсутствие заданных рекламодателем слоганов и формулировок превращают текст в полноправный инструмент графического оформления. Крупный формат плаката только усиливает его выразительность. Любопытный пример – антирасистский постер, созданный дизайн-студией Open Design. На нем изображены символы четырех мировых религий, каждый из которых собран из печатного текста, взятого из священной книги другой веры. Например, мусульманский полумесяц набран текстом из Торы, а шестиконечная звезда Давида – строками из Корана. Однако значение подобных постеров может остаться непонятным без сопроводительной пояснительной надписи. В данном случае это строки «Они – это мы» и «Мы – это они», расположенные на красной ленте, согнутой буквой V — символично, просто и понятно.

КомпьюАрт 4’2003

Начало графического дизайна: Типографика

Что такое типографика?

Типографика везде, куда бы мы ни посмотрели. Это в книгах, которые мы читаем, на веб-сайтах, которые мы посещаем, даже в повседневной жизни — на уличных знаках, наклейках на бамперы и на упаковке продуктов.

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

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

Общие типы шрифтов

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

Шрифты с засечками
Шрифты

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

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

Шрифты без засечек
Шрифты

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

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

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

Дисплейные шрифты бывают различных стилей , таких как скрипт, блэклеттер, заглавные буквы и просто фантазии.

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

Выбор шрифта

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

Шрифты, которых следует избегать

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

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

Объединение шрифтов

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

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

Прочие важные термины

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

Иерархия

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

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

Ведущий

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

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

Отслеживание

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

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

Кернинг

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

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

Собираем все вместе

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

Надеемся, вам понравилось изучать основы типографики!

Обязательно ознакомьтесь с остальными нашими темами о графическом дизайне, в том числе:

/ en / начало-графический-дизайн / цвет / содержание /

Я люблю типографику (ILT)

31 мая 2021 г.

Спустя более чем 50 лет Международная типографическая ассоциация (ATypI) решила отказаться от системы классификации шрифтов Vox-ATypI.Почему расставание? И какое это имеет значение? Можно ли что-нибудь получить от разработки систем замены? Нужна ли вообще классификация шрифтов? А что такое типографская собака?

читать

классификация типа образования

3 апреля 2021 г.

В выпуске № 3 журнала «Шрифты в фокусе»

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

читать

шрифта в фокусе новые шрифты

8 марта 2021 г.

«Женщины-литераторы» — первое из серии коротких интервью. Мы начнем со сбора четырех интервью с творческими людьми от Нью-Йорка до Сайгона: Линн Юн, дизайнер шрифтов, технолог и преподаватель из Нью-Йорка; Деб Пэнг Дэвис, дизайнер продуктов The 19th в Техасе; Колин Байк, дизайнер и художник из […]

читать

интервью

12 января 2021 г.

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

читать

избранных шрифта шрифты в фокусе

12 декабря 2020

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

читать

типографских первых

8 ноября 2020 г.

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

читать

эфемеры 19 века

19 октября 2020

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

читать

Эфемеры XIX века, художественная гравюра

28 сентября 2020

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

читать

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

3 сентября 2020 г.

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

читать

ренессанс эфемерной гравюры

20 августа 2020

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

читать

инициалы буквенные системы типа паратекст

10 правил, которые помогут вам управлять типографикой

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

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

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

Вот несколько практических правил, которым следует следовать при использовании функциональной типографики:

1. Выровнять по левому краю

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

2. Используйте один шрифт

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

3. Пропуск веса

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

4. Размер двойного кегля

Двойной или половинный размер кегля, который вы используете. Если вы используете 30pt для заголовка, добавьте 15pt для основного текста. Если вы хотите усилить драматизм, попробуйте увеличить размер в 3 или 4 раза.

5. Выровнять по одной оси

Создайте свой шрифт по одной главной оси и выровняйте элементы по линии сетки, которую вы установили.

6. Выберите любой шрифт

Используйте любой шрифт, который вам нравится, если это один из следующих: Akzidenz Grotesque, Avenir, Avant Garde, Bell Gothic, Bodoni, Bembo, Caslon, Clarendon, Courier, Din Mittelschrift, Franklin Gothic, Frutiger, Futura, Garamond, Gill Sans, Gotham, Helvetica, Letter Gothic, Memphis, Meta, OCRB, Rockwell, Sabon, Trade Gothic, Trajan и Univers.

7. Группировка с помощью правил

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

8. Избегайте углов

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

9. Помните о зазоре

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

10. Расслабьтесь, просто наберите

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

Типографика — Визуальный дизайн — iOS — Руководство по человеческому интерфейсу

Типографика

Apple предоставляет два типа семейств, которые вы можете использовать в своих приложениях для iOS.

Сан-Франциско (Сан-Франциско). San Francisco — это семейство шрифтов без засечек, которое включает SF Pro, SF Pro Rounded, SF Mono, SF Compact и SF Compact Rounded. SF Pro — системный шрифт в iOS, macOS и tvOS; SF Compact — системный шрифт в watchOS.Системные шрифты, разработанные с учетом визуальной ясности пользовательского интерфейса платформы, разборчивы и нейтральны.

Нью-Йорк (Нью-Йорк). New York — это шрифт с засечками, который обеспечивает уникальный тон, разработанный для дополнения шрифтов SF. NY работает также в контексте графического отображения (при больших размерах), как и в контексте чтения (при размерах текста).

Вы можете скачать шрифты для Сан-Франциско и Нью-Йорка здесь.

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

Интерполяция также обеспечивает оптический размер, который относится к созданию различных типографских рисунков для соответствия разным размерам. В iOS 14 и более поздних версиях системные шрифты поддерживают динамических оптических размеров , объединяя дискретные оптические размеры шрифта, такие как текст и отображение для SF Pro и SF Compact, а также Small, Medium, Large и Extra Large для Нью-Йорка, в единый сплошной дизайн.Такой дизайн позволяет интерполировать каждый глиф или букву для создания структуры, точно адаптированной к размеру точки.

ПРИМЕЧАНИЕ Использование переменных шрифтов в средстве дизайна, работающем в более ранней версии iOS, может привести к неожиданным результатам. В этом случае продолжайте использовать текст и отображение.

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

Гарнитуры, разработанные Apple

, поддерживают широкий диапазон толщины, размера, стилей и языков, поэтому вы можете создавать удобные и красивые впечатления от чтения во всем приложении. Когда вы используете стили текста с системными шрифтами, вы также получаете поддержку динамического типа и больших размеров специальных возможностей, которые позволяют людям выбирать размер текста, который им подходит.Конкретные значения см. В разделах «Размеры динамического типа» и «Размеры расширенного типа для специальных возможностей». Информация о размере, включая значения отслеживания, также доступна в Sketch, Photoshop и Adobe XD Apple Design Resources для iOS.

Система определяет API, которые упрощают использование шрифтов SF и NY; для руководства разработчика см. метод withDesign и структуру SystemDesign UIFontDescriptor.

SF Pro и SF Compact

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

SF Pro и SF Compact Поддержка:

  • Более ста языков с использованием латинского, греческого и кириллического шрифтов
  • Девять толщин — от сверхлегкого до черного — как вертикальные, так и курсивные
  • Регулируемый межбуквенный интервал, который автоматически регулируется в зависимости от размера текста
  • Строчные заглавные, дробные, нижние и верхние числа
  • Динамические оптические размеры

Для получения инструкций разработчика см. Свойство по умолчанию структуры SystemDesign.

SF Pro со скругленными краями и SF Compact со скругленными углами

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

Опора SF Pro Rounded и SF Compact Rounded:

  • Более ста языков с использованием латинского, греческого и кириллического шрифтов
  • Стойки девяти весов — от сверхлегкого до черного
  • Регулируемый межбуквенный интервал, который автоматически регулируется в зависимости от размера текста
  • Строчные заглавные, дробные, нижние и верхние числа
  • Динамические оптические размеры

Руководство разработчика см. В свойстве округления структуры SystemDesign.

SF Моно

SF Mono — это моноширинный вариант San Francisco, то есть шрифт, в котором все символы равны по ширине. Обычно вы используете моноширинный шрифт, когда хотите выровнять столбцы текста, например, в среде кодирования. Например, Xcode и Swift Playgrounds по умолчанию используют SF Mono.

ПРИМЕЧАНИЕ SF Pro использует функцию выравнивания таблиц OpenType для поддержки отображения моноширинных чисел и валют.

SF Mono поддерживает:

  • Более ста языков с использованием латинского, греческого и кириллического шрифтов
  • Шесть гирь — от легких до тяжелых — как вертикальные, так и курсивом
  • Моноширинный интервал для всех значений толщины (т. Е. Изменение толщины шрифта не приводит к перекомпоновке текста)
  • Динамические оптические размеры

Руководство разработчика см. В моноширинном свойстве структуры SystemDesign.

Нью-Йорк

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

NY поддерживает:

  • Более ста языков с использованием латинского, греческого и кириллического шрифтов
  • Шесть гирь — от обычного до черного — как вертикальные, так и курсивные
  • Регулируемый межбуквенный интервал, который автоматически регулируется в зависимости от размера текста
  • Динамические оптические размеры

Руководство разработчика см. В свойстве serif структуры SystemDesign.

Выбор шрифтов для улучшения вашего приложения

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

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

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

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

Измените интерлиньяж, чтобы улучшить читаемость или сэкономить место. Ведущий — это интервал между строками текста. В некоторых случаях макеты текста работают лучше, когда вы увеличиваете или уменьшаете это пространство. Когда вы отображаете текст в широких столбцах или длинных отрывках, большее пространство между строками (свободный интерлиньяж) может помочь людям сохранить свое место при переходе от одной строки к другой.И наоборот, если вам нужно отобразить две строки текста в области с ограниченной высотой — например, в строке списка — уменьшение расстояния между строками (жесткий интерлиньяж) может помочь тексту хорошо уместиться. Если вам нужно отобразить три или более строк текста, избегайте жесткого интерлиньяжа даже в тех областях, где высота ограничена. В системе определен API, позволяющий увеличивать или уменьшать расстояние между линиями на две точки; инструкции для разработчиков см. в разделах «Свободный и жесткий» (SwiftUI), а также traitLooseLeading и traitTightLeading (UIKit).

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

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

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

ПРИМЕЧАНИЕ iOS использует San Francisco в качестве системного шрифта для латинского, греческого и кириллического алфавитов, а также множества других гарнитур для других шрифтов.

Типоразмер динамического типа

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

  • x Малый
    Стиль Вес Размер (в точках) Ведущие (баллы)
    Большой заголовок Обычный 31 38
    Название 1 Обычный 25 31
    Название 2 Обычный 19 24
    Заголовок 3 Обычный 17 22
    Заголовок Полужирный шрифт 14 19
    Кузов Обычный 14 19
    Выноска Обычный 13 18
    Подзаголовок Обычный 12 16
    Сноска Обычный 12 16
    Подпись 1 Обычный 11 13
    Подпись 2 Обычный 11 13

    Размер точки основан на разрешении изображения 144 пикселей на дюйм для дизайна с @ 2x и 216 пикселей на дюйм для дизайна с @ 3x.

  • Малый
    Стиль Вес Размер (в точках) Ведущие (баллы)
    Большой заголовок Обычный 32 39
    Название 1 Обычный 26 32
    Название 2 Обычный 20 25
    Заголовок 3 Обычный 18 23
    Заголовок Полужирный шрифт 15 20
    Кузов Обычный 15 20
    Выноска Обычный 14 19
    Подзаголовок Обычный 13 18
    Сноска Обычный 12 16
    Подпись 1 Обычный 11 13
    Подпись 2 Обычный 11 13

    Размер точки основан на разрешении изображения 144 пикселей на дюйм для дизайна с @ 2x и 216 пикселей на дюйм для дизайна с @ 3x.

  • Средний
    Стиль Вес Размер (в точках) Ведущие (баллы)
    Большой заголовок Обычный 33 40
    Название 1 Обычный 27 33
    Название 2 Обычный 21 26
    Заголовок 3 Обычный 19 24
    Заголовок Полужирный шрифт 16 21
    Кузов Обычный 16 21
    Выноска Обычный 15 20
    Подзаголовок Обычный 14 19
    Сноска Обычный 12 16
    Подпись 1 Обычный 11 13
    Подпись 2 Обычный 11 13

    Размер точки основан на разрешении изображения 144 пикселей на дюйм для дизайна с @ 2x и 216 пикселей на дюйм для дизайна с @ 3x.

  • Large (по умолчанию)
    Стиль Вес Размер (в точках) Ведущие (баллы)
    Большой заголовок Обычный 34 41
    Название 1 Обычный 28 34
    Название 2 Обычный 22 28
    Заголовок 3 Обычный 20 25
    Заголовок Полужирный шрифт 17 22
    Кузов Обычный 17 22
    Выноска Обычный 16 21
    Подзаголовок Обычный 15 20
    Сноска Обычный 13 18
    Подпись 1 Обычный 12 16
    Подпись 2 Обычный 11 13

    Размер точки основан на разрешении изображения 144 пикселей на дюйм для дизайна с @ 2x и 216 пикселей на дюйм для дизайна с @ 3x.

  • x Большой
    Стиль Вес Размер (в точках) Ведущие (баллы)
    Большой заголовок Обычный 36 43
    Название 1 Обычный 30 37
    Название 2 Обычный 24 30
    Заголовок 3 Обычный 22 28
    Заголовок Полужирный шрифт 19 24
    Кузов Обычный 19 24
    Выноска Обычный 18 23
    Подзаголовок Обычный 17 22
    Сноска Обычный 15 20
    Подпись 1 Обычный 14 19
    Подпись 2 Обычный 13 18

    Размер точки основан на разрешении изображения 144 пикселей на дюйм для дизайна с @ 2x и 216 пикселей на дюйм для дизайна с @ 3x.

  • xxБольшой
    Стиль Вес Размер (в точках) Ведущие (баллы)
    Большой заголовок Обычный 38 46
    Название 1 Обычный 32 39
    Название 2 Обычный 26 32
    Заголовок 3 Обычный 24 30
    Заголовок Полужирный шрифт 21 26
    Кузов Обычный 21 26
    Выноска Обычный 20 25
    Подзаголовок Обычный 19 24
    Сноска Обычный 17 22
    Подпись 1 Обычный 16 21
    Подпись 2 Обычный 15 20

    Размер точки основан на разрешении изображения 144 пикселей на дюйм для дизайна с @ 2x и 216 пикселей на дюйм для дизайна с @ 3x.

  • xxx Большой
    Стиль Вес Размер (в точках) Ведущие (баллы)
    Большой заголовок Обычный 40 48
    Название 1 Обычный 34 41
    Название 2 Обычный 28 34
    Заголовок 3 Обычный 26 32
    Заголовок Полужирный шрифт 23 29
    Кузов Обычный 23 29
    Выноска Обычный 22 28
    Подзаголовок Обычный 21 28
    Сноска Обычный 19 24
    Подпись 1 Обычный 18 23
    Подпись 2 Обычный 17 22

    Размер точки основан на разрешении изображения 144 пикселей на дюйм для дизайна с @ 2x и 216 пикселей на дюйм для дизайна с @ 3x.

Доступность большего размера

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

  • AX1
    Стиль Вес Размер (в точках) Ведущие (баллы)
    Большой заголовок Обычный 44 52
    Название 1 Обычный 38 46
    Название 2 Обычный 34 41
    Заголовок 3 Обычный 31 38
    Заголовок Полужирный шрифт 28 34
    Кузов Обычный 28 34
    Выноска Обычный 26 32
    Подзаголовок Обычный 25 31
    Сноска Обычный 23 29
    Подпись 1 Обычный 22 28
    Подпись 2 Обычный 20 25

    Размер точки основан на разрешении изображения 144 пикселей на дюйм для дизайна с @ 2x и 216 пикселей на дюйм для дизайна с @ 3x.

  • AX2
    Стиль Вес Размер (в точках) Ведущие (баллы)
    Большой заголовок Обычный 48 57
    Название 1 Обычный 43 51
    Название 2 Обычный 39 47
    Заголовок 3 Обычный 37 44
    Заголовок Полужирный шрифт 33 40
    Кузов Обычный 33 40
    Выноска Обычный 32 39
    Подзаголовок Обычный 30 37
    Сноска Обычный 27 33
    Подпись 1 Обычный 26 32
    Подпись 2 Обычный 24 30

    Размер точки основан на разрешении изображения 144 пикселей на дюйм для дизайна с @ 2x и 216 пикселей на дюйм для дизайна с @ 3x.

  • AX3
    Стиль Вес Размер (в точках) Ведущие (баллы)
    Большой заголовок Обычный 52 61
    Название 1 Обычный 48 57
    Название 2 Обычный 44 52
    Заголовок 3 Обычный 43 51
    Заголовок Полужирный шрифт 40 48
    Кузов Обычный 40 48
    Выноска Обычный 38 46
    Подзаголовок Обычный 36 43
    Сноска Обычный 33 40
    Подпись 1 Обычный 32 39
    Подпись 2 Обычный 29 35

    Размер точки основан на разрешении изображения 144 пикселей на дюйм для дизайна с @ 2x и 216 пикселей на дюйм для дизайна с @ 3x.

  • AX4
    Стиль Вес Размер (в точках) Ведущие (баллы)
    Большой заголовок Обычный 56 66
    Название 1 Обычный 53 62
    Название 2 Обычный 50 59
    Заголовок 3 Обычный 49 58
    Заголовок Полужирный шрифт 47 56
    Кузов Обычный 47 56
    Выноска Обычный 44 52
    Подзаголовок Обычный 42 50
    Сноска Обычный 38 46
    Подпись 1 Обычный 37 44
    Подпись 2 Обычный 34 41

    Размер точки основан на разрешении изображения 144 пикселей на дюйм для дизайна с @ 2x и 216 пикселей на дюйм для дизайна с @ 3x.

  • AX5
    Стиль Вес Размер (в точках) Ведущие (баллы)
    Большой заголовок Обычный 60 70
    Название 1 Обычный 58 68
    Название 2 Обычный 56 66
    Заголовок 3 Обычный 55 65
    Заголовок Полужирный шрифт 53 62
    Кузов Обычный 53 62
    Выноска Обычный 51 60
    Подзаголовок Обычный 49 58
    Сноска Обычный 44 52
    Подпись 1 Обычный 43 51
    Подпись 2 Обычный 40 48

    Размер точки основан на разрешении изображения 144 пикселей на дюйм для дизайна с @ 2x и 216 пикселей на дюйм для дизайна с @ 3x.

Значения отслеживания

Чтобы помочь вам создать точные макеты интерфейса, используйте значения отслеживания, определенные системой для различных размеров SF Pro, SF Pro Rounded и New York.

  • SF Pro
    Размер (в точках) Отслеживание (1 / 1000em) Отслеживание (в баллах)
    6 +41 +0,24
    7 +34 +0.23
    8 +26 +0,21
    9 +19 +0,17
    10 +12 +0,12
    11 +6 +0.06
    12 0 0,0
    13 -6 -0,08
    14 -11 -0.15
    15 -16 -0,23
    16 -20 -0,31
    17 -26 -0,43
    18 -25 -0,44
    19 –24 -0,45
    20 -23 -0,45
    21 -18 -0.36
    22 -12 -0,26
    23 -4 -0,10
    24 +3 +0.07
    25 +6 +0,15
    26 +8 +0,22
    27 +11 +0,29
    28 +14 +0.38
    29 +14 +0,40
    30 +14 +0,40
    31 +13 +0,39
    32 +13 +0,41
    33 +12 +0,40
    34 +12 +0,40
    35 +11 +0.38
    36 +10 +0,37
    37 +10 +0,36
    38 +10 +0,37
    39 +10 +0,38
    40 +10 +0,37
    41 +9 +0,36
    42 +9 +0.37
    43 +9 +0,38
    44 +8 +0,37
    45 +8 +0,35
    46 +8 +0,36
    47 +8 +0,37
    48 +8 +0,35
    49 +7 +0.33
    50 +7 +0,34
    51 +7 +0,35
    52 +6 +0,31
    53 +6 +0,33
    54 +6 +0,32
    56 +6 +0,30
    58 +5 +0.28
    60 +4 +0,26
    62 +4 +0,24
    64 +4 +0,22
    66 +3 +0,19
    68 +2 +0,17
    70 +2 +0,14
    72 +2 +0.14
    76 +1 +0.07
    80 0 0
    84 0 0
    88 0 0
    92 0 0
    96 0 0

    Не все приложения выражают значения отслеживания как 1 / 1000em. Размер точки основан на разрешении изображения 144 пикселей на дюйм для дизайна @ 2x и 216 пикселей на дюйм для дизайна @ 3x.

  • SF Pro округлый
    Размер (в точках) Отслеживание (1 / 1000em) Отслеживание (в баллах)
    6 +87 +0,51
    7 +80 +0,54
    8 +72 +0,57
    9 +65 +0,57
    10 +58 +0.57
    11 +52 +0,56
    12 +46 +0,54
    13 +40 +0,51
    14 +35 +0,48
    15 +30 +0,44
    16 +26 +0,41
    17 +22 +0.37
    18 +21 +0,37
    19 +20 +0,37
    20 +18 +0,36
    21 +17 +0,35
    22 +16 +0,34
    23 +16 +0,35
    24 +15 +0.35
    25 +14 +0,35
    26 +14 +0,36
    27 +14 +0,36
    28 +13 +0,36
    29 +13 +0,37
    30 +12 +0,37
    31 +12 +0.36
    32 +12 +0,38
    33 +12 +0,39
    34 +12 +0,38
    35 +11 +0,38
    36 +11 +0,39
    37 +10 +0,38
    38 +10 +0.39
    39 +10 +0,38
    40 +10 +0,39
    41 +10 +0,38
    42 +10 +0,39
    43 +9 +0,38
    44 +8 +0,37
    45 +8 +0.37
    46 +8 +0,36
    47 +8 +0,37
    48 +8 +0,35
    49 +8 +0,36
    50 +7 +0,34
    51 +6 +0,32
    52 +6 +0.33
    53 +6 +0,31
    54 +6 +0,32
    56 +6 +0,30
    58 +4 +0,25
    60 +4 +0,23
    62 +4 +0,21
    64 +3 +0.19
    66 +2 +0,16
    68 +2 +0,13
    70 +2 +0,14
    72 +2 +0,11
    76 +1 +0.07
    80 0 0,00
    84 0 0,00
    88 0 0.00
    92 0 0,00
    96 0 0,00

    Не все приложения выражают значения отслеживания как 1 / 1000em. Размер точки основан на разрешении изображения 144 пикселей на дюйм для дизайна @ 2x и 216 пикселей на дюйм для дизайна @ 3x.

  • Нью-Йорк
    Размер (в точках) Отслеживание (1 / 1000em) Отслеживание (в баллах)
    6 +40 +0.23
    7 +32 +0,22
    8 +25 +0.20
    9 +20 +0,18
    10 +16 +0,15
    11 +11 + 12
    12 +6 +0.07
    13 +4 +0.05
    14 +2 +0,03
    15 +0 +0,00
    16 -2 -0,03
    17 -4 -0,07
    18 -6 -0,11
    19 -8 -0,15
    20 -10 -0.20
    21 -10 -0,21
    22 -10 -0,23
    23 -11 -0,25
    24 -11 -0,26
    25 -11 -0,27
    26 -12 -0,29
    27 -12 -0.32
    28 -12 -0,33
    29 -12 -0,34
    30 -12 -0,37
    31 -13 -0,39
    32 -13 -0,41
    33 -13 -0,42
    34 -14 -0.45
    35 -14 -0,48
    36 -14 -0,49
    38 -14 -0,52
    40 -14 -0,55
    42 -14 -0,57
    44 -14 -0,62
    46 -14 -0.65
    48 -14 -0,68
    50 -14 -0,71
    52 -14 -0,74
    54 -15 -0,79
    58 -15 -0,85
    62 -15 -0,91
    66 -15 -0.97
    70 -16 -1,06
    72 -16 -1,09
    80 -16 -1,21
    88 -16 -1,33
    96 -16 -1,50
    100 -16 -1,56
    120 -16 -1.88
    140 -16 -2,26
    160 -16 -2,58
    180 -17 –2,99
    200 -17 -3,32
    220 -18 -3,76
    240 -18 -4,22
    260 -18 -4.57

    Не все приложения выражают значения отслеживания как 1 / 1000em. Размер точки основан на разрешении изображения 144 пикселей на дюйм для дизайна @ 2x и 216 пикселей на дюйм для дизайна @ 3x.

20 типографских терминов, которые необходимо знать

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

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

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

Шрифт : цифровой файл шрифта. Это файлы, которые вы загружаете и помещаете в книгу шрифтов на вашем компьютере или веб-сайте, чтобы отобразить загруженный шрифт.

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

Serif : дополнительный штрих, добавляемый к концу основных вертикальных и горизонтальных штрихов формы буквы. При использовании в печатной форме шрифт с засечками считается наиболее разборчивым. Двумя распространенными вариантами шрифтов с засечками являются Times New Roman и Georgia.Впечатления от Serif традиционные, профессиональные и устоявшиеся.

Sans-Serif : когда в шрифте отсутствуют засечки. Sans производит впечатление сильного, современного, чистого и упрощенного. Обычными шрифтами без засечек являются Arial и Helvetica.

Курсив : шрифт, буквы которого наклонены вправо. Он используется специально для выделения или различия.

Базовая линия : воображаемая линия, на которой все персонажи сидят или отдыхают.

Средняя линия или Средняя линия : Линия, на которой заканчиваются не восходящие строчные буквы.

X-Height : расстояние между базовой линией и средней линией.

Высота заглавной буквы : Высота заглавной буквы, измеренная от базовой линии вверх.

Ascender : части строчных букв, расположенные над средней линией.

Descender : Обводка буквы, выходящая за пределы базовой линии.

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

Чаша : замкнутая изогнутая часть букв, включая d, b, o, D и B.

Лигатура : В гарнитуре это происходит, когда две или более буквы объединяются в один символ, например AE, представленный как æ.

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

Кернинг : интервал между символами.

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

Счетчик : Область буквы, которая полностью или частично заключена в форму буквы или символ.

Апертура : открывающееся или частично закрытое отрицательное пространство, создаваемое открытым счетчиком.

Двойная история : Тип письма с двумя счетчиками, в отличие от одноэтажной версии, у которой есть только один счетчик.

Узнайте больше об основах дизайна, включая типографику, в нашем коротком 4-недельном курсе Design 101.

Все, что вам нужно для изучения основ типографики

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

Конечно, я прочитал The Marketer’s Crash Course in Visual Content Creation и узнал несколько интересных приемов PowerPoint и Photoshop, которые очень помогли мне в моей работе по контент-маркетингу. Но я действительно хотел вывести свои дизайнерские навыки на новый уровень.

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

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

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

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

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

Щелкните заголовок раздела ниже, чтобы перейти к этому разделу:

Что такое типографика?

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

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

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

Изображение предоставлено: Designspiration

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

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

Почему типографика важна?

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

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

«Общий эффект — более легкий и современный текстовый блок», — пояснил Крис Миллс для BGR.

Кредит изображения: Mashable

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

«Различия между Helvetica и San Francisco тонкие, даже для опытного глаза, но они есть», — написала Лиз Стинсон для WIRED . «Хотя San Francisco по-прежнему строгий шрифт без засечек, он смелее и дружелюбнее, чем Helvetica Neue.Основанный на немецком шрифте DIN, San Francisco дает персонажам больше места для передышки, что облегчает чтение на относительно крошечных мобильных экранах. Высокий и тощий, San Francisco занимает мало места, как пользовательский шрифт Google Roboto, который можно считать близким родственником шрифта Apple ».

Вывод здесь? Маленькие детали имеют значение.

Фактически, один из немногих курсов в колледже, которые Стив Джобс изучал в колледже, был каллиграфией и типографикой, которые, по его мнению, сыграли решающую роль в успехе Apple.Как он однажды сказал в вступительной речи Стэнфордского университета: «Если бы я никогда не заглянул на этот единственный курс в колледже, в Mac никогда не было бы нескольких гарнитур или шрифтов с пропорциональным интервалом». Можете ли вы представить себе мир, в котором продукты Apple не ставили во главу угла красивый дизайн? Я точно не могу.

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

Кредит изображения: Awwwards

Кредит изображения: Awwwards

Кредит изображения: Awwwards

Кредит изображения: Awwwards

Готовы перейти к терминологии типографики? Пошли.

Определения и термины в типографике

Гарнитуры и шрифты

Если вы думали, что эти два слова взаимозаменяемы, вы не одиноки.Но на самом деле они означают две разные вещи.

Типограф

Ник Шерман однажды использовал отличную аналогию, чтобы объяснить разницу между терминами «гарнитура» и «шрифт». Он предложил сравнить эти типографские термины с музыкальными терминами «песня» и «mp3». Когда вы объясняете, насколько вам нравится конкретная мелодия, вы говорите: «Мне нравится эта песня!» Вы бы не сказали: «Мне нравится этот mp3!» Песня — это произведение искусства, а mp3-файл — всего лишь механизм доставки.

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

Если вы описываете физическое воплощение набора букв и символов, вам следует использовать термин «шрифт». Он относится к тому, что вы используете — будь то файл на вашем компьютере или ящик, полный металлических букв. Это осязаемое представление этого набора букв и символов.Например, Helvetica Bold и Helvetica Light Oblique — это шрифты.

Вот как можно использовать эти два термина в предложении:

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

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

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

Например, возьмем слово «Неисправный», как показано на рисунке ниже.

Вот как определяется каждый из терминов:

  • Базовая линия: Линия, в которой расположены буквы.
  • Высота заглавной буквы: Расстояние от базовой линии до верхней части заглавной буквы.
  • X-height: Расположенный между базовой линией и высотой заглавной буквы, это высота основной части строчной буквы. (В данном случае это буквы «а», «у» и «у.’)
  • Чаша: Изогнутая часть символа, охватывающая круглые или изогнутые части некоторых букв, таких как «d», «b», «o», «D» и «B.» (В данном случае это круглая форма, торчащая из буквы «а».)
  • Serif: Небольшой выступ, завершающий штрих буквы в некоторых гарнитурах. (В данном случае это маленькая ножка, торчащая из буквы «л».)
  • Descender: Самая длинная точка буквы, выходящая за пределы базовой линии.

Теперь давайте посмотрим на слово «flash»:

Вот как определяются эти термины:

  • Лигатура: Штрих, соединяющий соседние буквы. (В этом случае вы заметите, что буквы «f» и «l» сливаются вместе, образуя один символ.)
  • Стебель: Основание буквы, похожее на стебель цветка.
  • Корешок: Пышная часть буквы «s» — и только буква «s». Он получил свое собственное название, потому что корешок может быть почти вертикальным или в основном горизонтальным, в зависимости от шрифта.
  • Ascender: Часть буквы, которая выходит за пределы средней линии шрифта, т. Е. Выше, чем высота шрифта по оси x. (В этом случае вы также заметите, что буква «h» на самом деле выше, чем высота x.)

Все еще со мной? Еще несколько здесь. Давайте посмотрим на слово «Говядина»:

Вот как определяются эти термины:

  • Поперечная планка: Полоса, проходящая через внутреннюю часть буквы и соединяющая одну сторону с другой.(В данном случае это полоса внутри заглавной буквы «B»)
  • Счетчик: Пустое место в середине таких букв, как «B», «O» или «A.»
  • Окончание: Сужающийся конец таких букв, как «e» или «c».
  • Терминал : тип кривой, который вы видите в верхней части буквы «f» или в конце буквы «j».

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

Кернинг

Кернинг — это изменение пространства между двумя буквами. Например, посмотрите изображение ниже:

Здесь я использовал шрифт Franklin Gothic Medium, чтобы продемонстрировать естественное пространство, которое вы видите между двумя буквами T. Выглядит слишком уютно, правда? Настроив интервал между этими двумя буквами, вы сможете повысить удобочитаемость.

Отслеживание

Подобно кернингу, трекинг связан с изменением межбуквенного интервала.Однако вместо регулировки расстояния между двумя буквами отслеживание — это регулировка расстояния между всеми буквами всего слова. Смотрите разницу ниже:

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

Ведущий

Помните, в старшей школе вам приходилось дублировать эссе? Что ж, термины «одинарный пробел» и «двойной интервал» также можно назвать «интерлиньяжем», то есть расстоянием между базовыми линиями.Смотрите руководство в действии:

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

Иерархия

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

Вот пример того, как выглядит иерархия:

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

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

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

Классификация типов

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

Serif

Помните, когда я указал на маленькую ножку в слове «Неисправность?» Гарнитуры с такими ножками называются засечками. Вы можете увидеть, где я выделил эти маленькие ножки ниже:

Распространенные шрифты с засечками: Times New Roman, Georgia и Garamond.Если вы читаете роман, вы можете заметить, что основной текст — это шрифт с засечками. Это потому, что засечки намного легче читать в длинных печатных работах из-за различий между буквами.

Без засечек

По-французски слово «без» означает «без». Таким образом, термин «без засечек» буквально означает «без засечек». На изображении ниже вы заметите, что у слов нет засечек, как я указал красными стрелками.

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

Blackletter

Шрифты Blackletter, также известные как Gothic, Fraktur или Old English, известны своими драматическими толстыми и тонкими штрихами и замысловатыми завитками на засечках. Эти гарнитуры основаны на раннем рукописном письме — фактически, черные буквы использовались в Библии Гутенберга, одной из первых книг, когда-либо напечатанных в Европе.До 1500 года они были намного популярнее, чем сегодня.

Кредит изображения: SitePoint

Как вы понимаете, черные буквы довольно трудно читать, поэтому они обычно не используются для определения типа телосложения. Вы обычно видите их в заголовках, логотипах, плакатах и ​​знаках — например, на газетных табличках (логотип New York Times , кто-нибудь?) Или на заголовках сертификатов, дипломов или ученых степеней. Распространенные шрифты blackletter включают Cloister Black, Deutsche Zierschrift и Germanica.

Кредит изображения: SitePoint

Скрипт

Гарнитуры шрифтов

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

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

Изображение предоставлено: Пресс для лиственных пород

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

Кредит изображения: Font Haus

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

Типовые семейства

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

Например, вы увидите, что у Proxima Nova есть такие варианты, как полужирный, экстра полужирный, черный, обычный, светлый, светлый курсив и обычный курсив:

Придерживаясь одного семейства шрифтов, вы добавите разнообразия в ваш дизайн, сохраняя его единообразие и единообразие.

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

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

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

Отличные ресурсы для бесплатных шрифтов

  • «35 лучших бесплатных шрифтов, которые вы должны скачать»: Сообщение в блоге HubSpot, в котором собраны 35 лучших бесплатных шрифтов в Интернете.
  • Google Fonts: Сотни бесплатных шрифтов с открытым исходным кодом от Google, которые уже оптимизированы для Интернета.
  • Behance: Отличный ресурс для поиска красивых дизайнерских работ, включая уникальные шрифты, которые можно бесплатно загрузить.
  • HypeForType: Более 25 000 типографских дизайнов от ведущих дизайнеров, многие из которых доступны для бесплатной загрузки.

8 классных шрифтов, которые можно бесплатно скачать

1) Малиновый текст

Вот тот, который отлично подходит для основного текста.Согласно Google Fonts, он был предназначен для производства книг, поэтому его легко читать. Но в то же время есть много чего, что делает его особенным: фигурки в старинном стиле, маленькие заглавные буквы, флероны, математические символы и тому подобное. Он доступен в трех стилях — Обычный, Светлый и Полужирный — вместе с курсивом этих начертаний.

2) Харматтан

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

3) Торкао

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

4) Царь Василий

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

5) Мерриуэзер

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

.

6) Пуаре Уан

Poiret One — мой давний фаворит.В Google Fonts он описан как «свежий, декоративный, геометрический гротеск с оттенком ар-деко и конструктивизма». Он изящный, простой, декоративный и отлично подходит для коротких текстов. Попробуйте использовать его на больших вывесках, этикетках, плакатах, футболках, заголовках или заголовках.

7) Настоящий север

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

8) Храбрость

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

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

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

Хотите больше советов по типографике? Прочтите этот пост о взаимосвязи между шрифтами и чувствами.

Примечание редактора: этот пост был первоначально опубликован в июне 2014 года и был обновлен для обеспечения свежести, точности и полноты.

Типографика

— Система углеродного дизайна

Типографика

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

Типовые маркеры и наборы

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

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

Есть два набора заголовков, один производительный и один экспрессивный. Различия Между производительным и экспрессивным стилями в основном проявляется в заголовках. Помимо названий токенов, которые специально откалиброваны для product vs. редакционные дизайнеры (например, $ label-01 против $ caption-01) — Поддерживающий и Основной стили имеют одинаковые значения как в «Продуктивном», так и в «Выразительном» наборах.

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

IBM Plex Sans

IBM Plex Serif

IBM Plex Mono

 
 

семейство шрифтов: «IBM Plex Sans», «Helvetica Neue», Arial, без засечек;

 
 

семейство шрифтов: 'IBM Plex Serif', 'Georgia', Times, serif;

 
 

font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono',

'Bitstream Vera Sans Mono', Courier, моноширинный;

Шкала типа IBM построена на одном уравнении.Формула для нашей шкалы была создан, чтобы обеспечить иерархию для всех типов опыта. Формула предполагает что y₀ = 12 пикселей:

75
rem пикселей
0,75 Plex 12
0,875 Plex 14
1 Plex 18
1,25 Plex 20
1,5 Plex 24
1.75 Plex 28
2 Plex 32
2,25 Plex 36
2,625 Plex 42
3
3 Plex
3,75 Plex 60
4,25 Plex 68
4,75 Plex 76
5,25 Plex 84 Plex 92
 
 

Xn = Xn-1 + {INT [(n-2) / 4] + 1} * 2

Xn: размер типа шаг n Xn-1: шаг n-1 размер шрифта

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

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

Мы предлагаем использовать IBM Plex Light, Regular и SemiBold для цифровых технологий. Полужирный шрифт идеально подходит для заголовков разделов, но не должен использоваться для длинный текст.

Полужирный (600)

Обычный (400)

Свет (300)

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

Оставить комментарий

Добавить комментарий

Ваш адрес email не будет опубликован.

© 2019 Штирлиц Сеть печатных салонов в Перми

Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми.