Типографика для веб-дизайнеров
Платный курс от Controforma
1 модуль
Лицензии для покупки шрифтов
  • Десктоп версия. Можно делать картинки и т.д. но нельзя передавать треьтим лицам и нельзя шрифтовой файл менять.
  • Веб-лицензия. Можно только прикрепить к сайту. Есть ограничение по просмотрам в месяц.
Где приобрести шрифты:
-1-
Покупка
Myfonts.com
Fonrspring.com
Либо на сайте шрифтового дизайнера.

Базовая веб-лицензия — 10 000 просмотров в месяц.

-2-
По подписке
typekit.com (от Adobe) 107 шрифтов кириллический, 50$.
monotype.com — самый оптимальный вариант по кол-ву кириллических шрифтов, 15$
-3-
В аренду
skyfonts.com
fontstand.com
rentafont.com

Нужно ставить стороннее приложение.
-4-
Бесплатные
Анатомия буквы
«Скелет» шрифта виден в супер тонком начертании и «мясо» в жирном начертании.

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

Гуманистические - писали ширококонечным пером, открытая апертура — стремится к открытости (дружелюбный, динамичный. Его легко читать).
Более статичная по природе штриха. Закрытая апертура (уверенный, статичный)
Классификация шрифта
Гротеск (без засечек), Антиква (с засечками), Декоративный

Гротеск:

  • Гуманистический гротеск. Наследие ширококонечного пера. Контрастные штрихи. (Gill Sans, PT Sans, Mediator, Gill Sans).
  • Геометрический гротекст. Штрихи не обладает контрастом. Геометричен по скелету и мясу. (GT Walsheim, Proxima Nova, Graphik).

Антиква:

  • Гуманистическая (старого стиля) Влияние ширококонечного пера. Сильный наклон овалов. Умеренный контраст штрихов. Засечки плавно переходят в вертикаль. (Garamouns, Minion, Arno)
  • Переходная Поиск среднего состояния. Лёгкое влияние ширококонечного шрифта. Слабый наклон оси овалов. Средний контраст штрихов. (Georgia, Литературная, GT Secrtra).
  • Контрастная (классическая) Влияние остроконечного пера. Нет наклона оси овалов. Сильный контраст штрихов. Шрифт стремится к статике. Засечки под 90 град входят в вертикаль. (Bodoni, Didona).
Выбор шрифта для наборного текста
В графических редакторах и браузерах по-разному рендерятся шрифты. Нужно тестировать на разных платформах.

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

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

Правильная кириллица. Статья Александры Корольковой.
Подбор пары к шрифтовому шрифту
А нужна ли пара?

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

Аналитический подход
Три типа типографической системы:
  1. Диктатура. Два слоя восприятия. Яркий акцидентный шрифт — диктатор, остальные шрифты — рабы, которые больше похожи друг с другом (умеренный контраст, насыщенности, размер).
  2. Крепкий дуэт. Один эмоциональный (h1, h2), второй — функциональный партнёр. Постоянный диалог.
  3. Соло. Есть приём: иллюзия одного шрифта для всего текста. Для Заголовка тонкий, а для супер заголовка супер лайт, для текста - нормал. Ещё приём: одно начертание одного шрифта.

Иерархия при помощи контраста:
  1. Контраст размера. Есть калькулятор размера https://type-scale.com
  2. Контраст формы. Шрифты отличаются по скелету. (Futura и Garamound Italic). Антиква и гротеск.
  3. Контраст по пропорции. В заголовке очень узкий шрифт, а в наборе — широкий.
Контраст не может быть отчаянный. Находитесь в контексте бренда. Шрифты не должны спорить по настроению. Всегда наблюдайте, анализируйте.

Типографику сложно делать в Фотошопе и иллюстраторе.
Модуль 2. Строка. Сетка
Строка
Оптимальная длина строки: 45-75 знаков, высота 1,4 em. Для мобильных 32-38 знаков в строке 1.3-1.5 em
Em = самой большой букве (М) усреднённый размер букве.

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

Например. Медиум 58-67 знака в строке. 21 px размер шрифта, 33px высота строки. - 1.57 em. Спикер использует эти параметры: 50-65 кол-во знаков, 1.4-1.6 em.
Сетка
Вертикальный ритм и горизонтальный, помогает организовать пространство в системе, облегчает восприятие и экономит время в разработке.

Показать сетку или нет.

Сетка строится на модулях.

Спикер использует модуль в 6px: высота строки - кратна, отступы между колонками - кратны, отступы от краёв - кратны и т.д.

12 колоночная сетка: 64 px и 48 px.

При адаптиве лучше подстроить сетку под удобство чтения. Сетка подстраивается под задачу.
12 колоночная сетка: 64 px и 48 px.
Модуль размера - например, h1 - 17 px, тогда h2 - 17/1,3=13px.
Приём для адаптива: заголовки набирать таким-же размером шрифта, как наборный текст, но болдом.
Проблемы для больших экранов
1
Дизайн только в 1200 px, по бокам остаётся большое пространство - огромные уши.
2
Плывёт строка. Для больших размеров экрана строка растягивается в длиную строку. Решение - зафиксировать параграф до какой-то величины.
3
Много однотипного контента - глазу не с чего начать.
Если сетка в какой-то момент начинает мешать, значит её следует переделать.
При построении сетки используйте модуль. Завязываем всё в систему.
Важно! Не заполнить блок текстом, а сделать текст читабельным.
Марковёрстка
Внешнее и внутреннее пространство.

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

Страница стоит из блоков. Решить основные блоки. Блок существует, если есть чёткие границы.
Не стоит чётко обозначать блоки.
Когда блоков много и все они чётко обозначены, глаз начинает уставать.
Как определить размеры блоков
Ширина блока определяется сеткой. Высота блока смотреть на расстояния между колонок. Важно помнить, самый главный блок — экран устройства.

Самое главное - логичная система.

Правила можно нарушать, смотреть по ссылке примеры: www.thefactoria.co/the-factoria
Правило якорных объектов (или силовые точки)
Силовые точки - углы блока или центр. Если объект располагаем в углу, не стоит забывать об внешних и внутренних отступах. Если фиксируем какой-либо блок (например, меню в левом верхнем углу), то усиливается первичный блок в рамках дисплея.

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

Основной принцип композиции - 3 объёма - большой средний и маленьких (лучше по золотому сечению - 100%, 66%, 33%).
    Делите страницу на блоки.
    Объект может стать блоком.
    Объект размещается по углам или центру.
    Пользуйтесь мерилом.
    Пустота такой же элемент выразительности, как и объект. Использовать его осознанно.
    Страница сложится только в том случае, если все элементы, включая пустое пространство, будут состоять в отношениях.
    Микровёрстка
    Точка входа
    Точка входа управляет вниманием. Она говорит «читай от сюда».
    Параграф, заголовок, буквица и фактоид.

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

    Прогонять текст через типограф.
    Параграф
    Швейцарский. Отбивает абзац пустой строкой.

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

    Фактоид - краткий факт без указания источника. Обычно это сноски на полях или выделенный факт в тексте. Часто используется в инфографике.
    Цифры
    Минускульные (oldstyle) для использования в наборе блока, построены по принципу строчных букв.
    Маюскульные (lining) Построены по логике (величине) построены по прописным (заглавных) буквам.

    Пропорциональные. Имеют разную ширину
    Табулярные. моноширинную, все одинаковой ширины. Используются для вёрстки таблиц.

    Используем фишки OpenType и Gliphs в фотошопе. Проверяй выбранный шрифт на наличие этих фишек.
    Трекинг (расстояние между буквами)
    14-11 px Требует разрядки и увеличения высоты строки
    16 px-30 px
    30px и более требует сжатия. По желанию или задумке.
    В больших заголовках можно умкеньшить трекинг и высоту строки для экономии пространства и сохранения общности.
    Трекинг может быть средством художественной выразительности.
    Объект стал блоком
    Оптическая компенсация.

    Когда увеличиваем кегль, слева меняется апрош, приходится вручную доводить до границы.

    У букв с овалами и кругами, требует доводки/оптической компенсации.

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

    Выключка по левому краю - самый безопастный вариант.

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

    Выравнивать шрифт оптически