Типографика

Цвет

БУКВАМИ

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

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

№8

№7

№6

№5

№4

№3

№2

Правило №1

Во-первых, не используй больше 3-4 кеглей в одном макете.

Пример:
Основной текст — 16px
Подзаголовок — 16 х 1,5 = 24px
Заголовок — 24 х 1,5 = 36px

Формула расчета размера кегля:
каждый следующий кегль = текущий кегль х 1,5

Как высчитать соотношение кеглей

№1

№8

№7

№6

№5

№4

№3

Правило №2

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

Правила для идеального интерлиньяжа:

Чем длиннее строка — тем больше интерлиньяж. Если строка 70+ символов → коэффициент 1.6-1.8.

2. Чем крупнее шрифт — тем меньше коэффициент. Заголовок 32px → интерлиньяж 38px (×1.2). Текст 16px → интерлиньяж 24px (×1.5).

Что за коэффицент?

Для печати: 1.4–1.5 (например, кегль 12pt × 1.5 = 18pt интерлиньяж)
Для веба: 1.5–1.8 (например, кегль 16px × 1.6 = 25.6px)

Формула расчета:
Интерлиньяж = Кегль × Коэффициент

Как рассчитать интерлиньяж (межстрочное расстояние)

№2

№1

№8

№7

№6

№5

№4

Правило №3

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

Сегодня ярлык вещей Maison Margiela . уже не чисто белый, хотя на нём по-прежнему нет названия бренда. Зато есть ряды чисел, одно из которых обведено кружком—на первый взгляд абсолютно случайным образом. На самом деле число соответствует линии продукции, а вот сама привязка уже логике не поддается: 0 — это кутюрная линия Artisanal, 1 и
4 — два обозначения для разных частей женской линии, 8 — очки, 12 — украшения, а 22 — обувь. Есть и другие, но точно не все 23: например, номеров с 15 по 21 вовсе не существует. Может,это задел на будущее

Пробелы важны

двойные пробелы — это не ок

нет пробела после знака препинания — это не ок

тире без пробелов — это не ок

№3

№2

№1

№8

№7

№6

№5

Правило №4

Небольшая подсказка: чтобы не проставлять неразрывные пробелы руками, открой плагин Sbol Typograph в фигме и он сделает это за тебя

Как перенести предлог? Только не через Enter! Чтобы поставить неразрывный пробел вместо обычного нажми CTRL+SHIFT+ПРОБЕЛ (на винде) или OPTION+ПРОБЕЛ (на маке). Так ты «привяжешь» предлог к следующему слову

Сегодня ярлык вещей Maison Margiela . уже не чисто белый, хотя на нём по-прежнему нет названия бренда. Зато есть ряды чисел, одно из которых обведено кружком—на первый взгляд абсолютно случайным образом. На самом деле число соответствует линии продукции, а вот сама привязка уже логике не поддается: 0 — это кутюрная линия Artisanal, 1 и
4 — два обозначения для разных частей женской линии, 8 — очки, 12 — украшения, а 22 — обувь. Есть и другие, но точно не все 23: например, номеров с 15 по 21 вовсе не существует. Может,это задел на будущее

За висячие предлоги и союзы больно бьют

№4

№3

№2

№1

№8

№7

№6

Правило №5

Когда-нибудь
через 6–12 месяцев
ты — дизайнер

- – — это все разные черточки

«—» — тире

«–» — полутире

«-» — дефис

№5

№4

№3

№2

№1

№8

№7

Правило №6

"What is this?"
«Что это такое?»
«А что это за „лапки“?»

Кавычки должны быть правильными

кавычки внутри кавычек

русские кавычки

английские кавычки

№6

№5

№4

№3

№2

№1

№8

Правило №7

Формула: кегль х 30
Пример: 16px x 30 = 480px (оптимально для веба).

Если считать в количестве символов, то примерно 50-85 символов/одна строка (включая пробелы) — это золотая середина. Тут мы говорим именно про среднестатистический наборный текст, не про заголовки

А как я рассчитал оптимальную длину строки? Опять по формуле

Вот так уже сильно лучше смотрится и сильно проще читается, согласен?

Не тяни текст во всю ширину макета, так читать не удобно. Нет ну может тебе такое нравится, но обычно всем не удобно.

№7

№6

№5

№4

№3

№2

№1

Правило №8

<- тыкай по выключкам, чтобы узнать про каждую

Да, конечно, ты можешь использовать любой из предложенных вариантов выючки, НО!

Верстай от левого фланга, ради всего святого

№7

№6

№5

№4

№3

№2

№1

Правило №8

<- тыкай по выключкам, чтобы узнать про каждую

Да, конечно, ты можешь использовать любой из предложенных вариантов выючки, НО!

Верстай от левого фланга, ради всего святого

№7

№6

№5

№4

№3

№2

№1

Правило №8

<- тыкай по выключкам, чтобы узнать про каждую

Да, конечно, ты можешь использовать любой из предложенных вариантов выючки, НО!

Верстай от левого фланга, ради всего святого

№7

№6

№5

№4

№3

№2

№1

Правило №8

<- тыкай по выключкам, чтобы узнать про каждую

Да, конечно, ты можешь использовать любой из предложенных вариантов выючки, НО!

Верстай от левого фланга, ради всего святого

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

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

Вот мы и закончили изучать буквы, я тебя поздравляю!

скачать памятку