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

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

Шрифты

Google Fonts

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

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

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

Fontstorage

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

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

Free Faces

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

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

Wordmark.it

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

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

Typeface

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

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

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

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 поможет начинающим дизайнерам развить насмотренность и научиться выбирать правильное расстояние между отдельными буквами в логотипах и заголовках. Выравнивайте буквы, набирайте очки и получайте оценки за лучшие решения.

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

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

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

Заключение

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