Generated with Avocode. Generated with Avocode. Generated with Avocode. Group 15 close hat Generated with Avocode. Generated with Avocode. Generated with Avocode. Generated with Avocode. Generated with Avocode. Generated with Avocode. path40

10 инструментов для работы со шрифтами и версткой

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

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

Шрифты

Google Fonts

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

Сервис с бесплатными шрифтами Google Fonts.

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

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

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

Fontstorage

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

Во-первых, на сайте широкий выбор кириллических начертаний — сейчас доступны 492 шрифта на русском языке. Во-вторых, во вкладке Font Playground вы можете сверстать часть текста, настроить цвета, фон и проверить, как будет выглядеть ваш текст на сайте. В-третьих, у сервиса есть плагин для браузеров Chrome, Firefox, Яндекс.Браузер и Opera. С его помощью вы можете определить шрифт и кегль гарнитуры на сайте, не открывая код.

Так выглядит инструмент Font Playground: на настройку стилей ушло три минуты.

Free Faces

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

Верстка и сетка самого сайта оставляют приятное впечатление.

Wordmark.it

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

Так выбирать фирменный шрифт гораздо легче.

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

Typeface

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

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

В лицензированной версии программы вы можете сравнивать гарнитуры, создавать шрифтовые пары, настраивать трекинг, экспортировать шрифты по проектам и тегам или создавать презентации для клиентов в формате .pdf. Лицензия стоит 1 429 рублей.

Простой и минималистичный менеджер шрифтов для компьютеров на macOS.

Fontbase

Инструмент, аналогичный Typeface, только для Windows, macOS и Linux. Позволяет систематизировать шрифты по папкам, проектам, начертаниям.

Есть интеграция с Google Fonts и Typekit, возможность подбирать шрифтовые пары и разрабатывать айдентику для компаний, интернет-изданий и наружной рекламы. Для комфортной работы вы можете настроить цветовую гамму и фон в приложении. Лицензионная версия стоит 3 доллара в месяц, или 29 долларов в год.

Fontbase помогает быстро и эффективно управлять шрифтами.

Верстка

Типограф

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

Типограф студии Артемия Лебедева.

Типографская раскладка Ильи Бирмана

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

Ранее, чтобы поставить символ, нужно было знать наизусть код этого символа. Например, открывающая кавычка на Windows ставилась сочетанием Alt+0171, а закрывающая — Alt+0187. Больше не нужно запоминать коды: символы привязаны к отдельных клавишами и работают в сочетании с Alt или Alt+Shift. Например, чтобы набрать знак градуса °, используйте сочетание Alt+D. Для кавычек второго уровня „“ зажмите Alt+Shift+< и Alt+Shift+>. Программа работает на macOS и Windows.

Шпаргалка для типографской раскладки Ильи Бирмана.

Kern Me

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

С игрой Kern Me время летит незаметно.

Тренажер Ильяхова

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

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

Шутливые тексты в заданиях делают тренажер увлекательным и нескучным.

Заключение

Сетка, шрифтовая пара, кернинг, правило внутреннего и внешнего — понятия, с которых следует начинать в дизайне. На курсе «Веб дизайн с 0 до PRO» вы научитесь работать со шрифтами, освоите инструменты графического и веб-дизайна и узнаете, как верстка и типографика влияют на качество ваших работ.

Курс «Веб-дизайн с 0 до PRO»
Годовой практический курс для тех, кто хочет освоить веб-дизайн с самого начала с индивидуальным наставником, сделать отличное портфолио и получить первые заказы или стажировку в студии.
  • Живая обратная связь с преподавателями
  • Неограниченный доступ к материалам курса
  • Стажировка в компаниях-партнёрах
  • Дипломный проект от реального заказчика
  • Гарантия трудоустройства в компании-партнёры для выпускников, защитивших дипломные работы

Комментарии

0
Чтобы оставить комментарий,  авторизуйтесь
Хочешь получать персональную подборку статей по дизайну?
Подпишись на рассылку Skillbox
Новогодняя распродажа курсов
Посмотреть