Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#подборки</a>

2 <ul><li>29 авг 2023</li>

3 <li>0</li>

4 </ul>Подборка сервисов, которые помогут быстрее и эффективнее работать с текстом в digital-дизайне.

5 Иллюстрация: Полина Честнова для Skillbox Media

6 Пишет про дизайн в Skillbox Media. Редактор и арт-директор собственного дизайн-бюро. Ведёт рассылку о текстах, типографике и дизайне.

7 Полина Старцева

8 Редактор.

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

10 Что это: простой бесплатный инструмент, который помогает подготовить текст к веб-вёрстке.

11 Зачем использовать: для экономии ресурсов. "Типограф" берёт на себя рутинную трудоёмкую работу: скрипт сам расставляет неразрывные пробелы, правильные кавычки и длинные тире, убирает пробелы перед знаками препинания. Особенно полезен, когда нужно отформатировать большой объём текста - статью, лонгрид, новость или запись в блоге.

12 Оттипографленный текст: сервис расставил неразрывные пробелы, чтобы при вёрстке не появились повисшие предлоги и союзыСкриншот: сайт "<a>Типограф</a>" / Skillbox Media<a>Попробовать</a>

13 Что это: приложение, которое дополняет стандартную раскладку клавиатур альтернативными и типографскими символами. Это расширение бесплатное, есть для Mac и для Windows.

14 Зачем использовать: для удобства набора.С этой раскладкой можно ставить правильное длинное тире или минус, ударение или знак бесконечности так же быстро, как обычные символы.

15 Если к клавиатуре не привязана типографская раскладка, то символ набирают через ввод кода. Например, открывающая кавычка на Windows - это сочетание Alt+0171, а закрывающая - Alt+0187. С раскладкой Бирмана такие комбинации запоминать не нужно: символы привязаны к отдельным клавишам и работают в сочетании с Alt или Alt+Shift. Например, Alt+D выдаст знак градуса °.

16 Шпаргалка для типографской раскладки Ильи Бирмана на MacИзображение:<a>Илья Бирман</a><a>Попробовать</a>

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

18 Зачем использовать: для развития глазомера. Умение вручную прорабатывать кернинг - полезный навык для графического, веб- или UX/UI-дизайнера, чтобы создавать визуально гармоничные заголовки или тексты на кнопках. Игра Kern Me учит выбирать правильное расстояние между отдельными буквами.

19 Выравнивайте буквы, набирайте очки и изучайте, где ошиблисьСкриншот: сайт<a>Kern Type</a>/ Skillbox Media<a>Попробовать</a>

20 Что это: задания, в которых на одном экране показаны пары макетов или одинаковых отрывков текста. Они свёрстаны по-разному - один нормально, другой плохо. Задача - проанализировать каждый и выбрать правильный.

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

22 Пары примеров в тренажёре повторяются по несколько разСкриншот: сайт<a>Maxim Ilyahov</a>/ Skillbox Media<a>Попробовать</a>

23 Что это: плагин для Figma, который работает с текстами на кириллице - расставляет неразрывные пробелы, кавычки двух уровней и букву Ё.

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

25 Изображение:<a>Mikhail Danilov</a><a>Попробовать</a>

26 Что это: набор инструментов - библиотека шрифтов, сервис для подбора и настройки стилей и плагин для определения шрифтов в браузере.

27 Зачем использовать: для проверки идей по поводу оформления текста. В разделе Font Playground можно сверстать отрывок, настроить шрифтовые пары, фон и проверить, как он может выглядеть в вебе.

28 В разделе Font Playground можно вручную "поиграть" с текстом и посмотреть, какие есть плюсы и минусы у разных решений. Например, в этом отрывке второй абзац оформлен с увеличенным Letter Spacing, и в пространстве неразрывных пробелов появились дырыСкриншот: сайт<a>Font Storage</a>/ Skillbox Media<a>Попробовать</a>

29 Что это: каталог исключительно бесплатных шрифтов. Он собран как авторская коллекция, и начертания разделены на шесть категорий - гротески, антиквы, брусковые, моноширинные, рукописные и акцидентные (или display).

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

31 Ресурс оформлен как удобная и эстетичная картотекаСкриншот: сайт<a>Free Faces</a>/ Skillbox Media<a>Попробовать</a>

32 Что это: приложение - менеджер шрифтов для Windows, macOS и Linux. Позволяет систематизировать шрифты по папкам, проектам, начертаниям, а также подбирать гарнитуры.

33 Зачем использовать: для порядка в коллекции и для наглядности. В бесплатной версии Fontbase можно закрепить сверху один пример шрифта и подбирать к нему пару. Шрифтов с открытой лицензией в приложении много: есть интеграция с Google Fonts и Typekit.

34 Ещё одна удобная функция - наборы без кириллицы видно сразуСкриншот: Fontbase / Skillbox Media<a>Попробовать</a>

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

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

37 Бесплатно Typeface можно пользоваться 15 дней, после чего необходимо оплатить Pro-версию. Это откроет больше функций: вы сможете сравнивать гарнитуры наложением, создавать шрифтовые пары, настраивать трекинг, экспортировать шрифты по проектам и тегам или создавать презентации для клиентов в формате .pdf. Для оплаты потребуется карта, выпущенная за пределами РФ.

38 Простой и минималистичный менеджер шрифтов для macOSСкриншот: приложение Typeface / Skillbox Media<a>Попробовать</a>

39 Что это: браузерное приложение-калькулятор, которое составляет типографические шкалы.

40 Шкалы шрифтов, или type scale, - это набор стилей заголовков, подзаголовков и основного текста, которые связаны единой пропорцией.

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

42 Type Scale упрощает работу дизайнера: сервис составляет такие типографические системы и рассчитывает относительные размеры каждого элемента. Причём они указаны не в пикселях, а в em: это не точная, а относительная единица измерения, которая зависит от главного элемента страницы - <html>. Например, если у <html> указан размер 80 пикселей, то 0,1 rem - это 8 пикселей.

43 Скриншот: сайт<a>Type Scale</a>/ Skillbox Media<a>Попробовать</a>

44 <a>Научитесь: Шрифт в дизайне Узнать больше</a>