Наша армия дизайнеров работает не покладая мышек, чтоб вы увидели ее скорее!
Страница еще в разработке
Типографика: что это такое простыми словами. Разбираем на пальцах
Узнайте, что такое типографика, из чего она состоит и как помогает делать сайты, презентации и дизайн более понятными и красивыми.
Что такое типографика
Типографика — это работа с текстом в дизайне. Помогает сделать текст удобным для чтения и приятным для восприятия с помощью выбора шрифта, размера, расстояний и расположения на странице.
Типографику можно разделить на 3 простых блока:
- Шрифты (буквы) — Как выглядят сами буквы: их стиль, форма, толщина, настроение.
- Настройка текста — размер, расстояние между буквами и строками, выравнивание — всё, что влияет на удобство чтения.
- Композиция — как текст расположен на странице: заголовки, абзацы, акценты, структура.
Шрифты
Понятие шрифта можно разделить на 3 части:
Стили/Виды шрифтов (Классификация)
Определяет общий стиль и характер семейства шрифтов.
Основные (90% дизайна строится на них):
- Антиквы — С засечками (Serif)
- Гротески — Без засечек (Sans Serif)
- Акцидентные — Декоративные (Display)
Дополнительно (используются реже и для специальных задач):
- Брусковые — шрифты с массивными прямоугольными засечками (Slab Serif)
- Моноширинные — все символы имеют одинаковую ширину (Monospace)
- Готические — стилизованы под средневековое письмо (Blackletter)
- Пиксельные — имитируют шрифты старых экранов и игр (Pixel)
- Рукописные — имитируют письмо от руки (Script)
Семейство шрифтов (Гарнитура)
Гарнитуру часто называют просто «шрифт», хотя технически это не совсем одно и то же. Гарнитруа - это конкретное семейство шрифтов внутри выбранного вида/стиля.
Например:
Например:
- Inter
- Arial
- Helvetica
- Times New Roman
- Gilroy
Варианты гарнитуры (Начертание)
Конкретный вариант шрифта, который может отличаться толщиной, наклоном или шириной.
Например:
Например:
- Light
- Regular
- Medium
- SemiBold
- Bold
- Italic
Настройка текста
Всё, что влияет на удобство чтения.
Размер текста (кегль/font size)
Определяет, насколько текст крупный.
👉 влияет на:
👉 влияет на:
- читаемость
- иерархию (заголовок / подзаголовок / текст)
Межбуквенный интервал (letter spacing)
- Кернинг — расстояние между конкретными парами букв (ручная корректировка)
- Трекинг — общее расстояние между всеми буквами (автоматическая)
- плотность текста
- аккуратность набора
Выравнивание текста (выключка/text alignment)
- по левому краю (самое удобное для чтения) / Left Align
- по центру (для коротких блоков) /Center Align
- по правому краю (редко) / Right Align
- по ширине (может создавать «дыры») / Justified
Длина строки (line length)
Сколько символов в одной строке.
📌 правило: слишком длинная — трудно читать слишком короткая — сбивается ритм
Коротко:
📌 правило: слишком длинная — трудно читать слишком короткая — сбивается ритм
Коротко:
- Для основного текста: Оптимально от 40 до 80 символов в строке включая пробелы, что примерно соответствует 7–10 словам.
- Для заголовков: Здесь можно проще: 1–3 слова в строке — максимум. Часто достаточно одного слова.
Супер простое объяснение:
- 👉 размер — насколько большой текст
- 👉 расстояния — насколько «воздушный»
- 👉 выравнивание — как текст читается и стоит на странице
Композиция текста
Композиция текста — это то, как текст расположен на странице и как он организован, чтобы его было легко читать и понимать.
Основные элементы:
Иерархия
Показывает, что в тексте главное, а что второстепенное.
👉 делается через:
👉 делается через:
- размер
- жирность
- отступы
- 📌 пример: заголовок → подзаголовок → основной текст
Отступы и интервалы
Расстояние между элементами текста: как между блоками, так и внутри них.
👉 работают на двух уровнях:
Внешние отступы — расстояние между текстом или текстовым блоком и другими элементами в дизайне.
Внутренние отступы — расстояние внутри одного текстового блока (например: между заголовком, подзаголовком и абзацами).
👉 влияет на:
👉 работают на двух уровнях:
Внешние отступы — расстояние между текстом или текстовым блоком и другими элементами в дизайне.
Внутренние отступы — расстояние внутри одного текстового блока (например: между заголовком, подзаголовком и абзацами).
👉 влияет на:
- структуру
- восприятие информации
📌 главное правило «Внутреннего и внешнего» 👉 внутренние отступы меньше, чем внешние
- внутри блока — всё связано → расстояние меньше
- между блоками — разные смыслы → расстояние больше
- помогает разделять смысл
- делает текст понятным без лишних слов
- создаёт порядок в макете
- Супер просто: 👉 близко = одно и то же 👉 далеко = разное
Выравнивание и сетка
Как текст «держится» на странице.
👉 текст должен:
👉 текст должен:
- быть выровнен
- подчиняться одной логике (сетке)
- 📌 хаотичное размещение = тяжело читать
Акценты
Выделение важного.
👉 делается через:
👉 делается через:
- жирный текст
- размер
- цвет
Разбиение на блоки
Деление текста на абзацы и смысловые части.
👉 помогает:
👉 помогает:
- быстрее сканировать
- легче понимать
Супер простое объяснение:
👉 композиция — это «как разложен текст»
👉 чтобы глаз шёл по нему легко и без усилий
👉 чтобы глаз шёл по нему легко и без усилий
Оцените статью
Читайте так же
💌 подписка