В статье мы расскажем:
- 4 основных правила выбора шрифта
- Подсказки по выбору шрифта для работы
- Выбор шрифта в зависимости от поставленной задачи
- Подходящий шрифт для книги
- Распространенные ошибки при выборе шрифтов
Как выбрать шрифт и не попасть при этом впросак, задумываются даже именитые дизайнеры. Тип шрифта, размер букв, межбуквенное расстояние и цвет – все имеет значение. Выбор должен основываться на знании правил типографики, это гораздо эффективнее «игры со шрифтами».
С засечками и без, готические, романтические и декоративные – всего существует несколько тысяч видов шрифтов, и пользоваться ими всеми, само собой, не представляется реальным. Да и не нужно. Для решения стандартных задач, когда речь не идет о создании совершенно нового шрифта для голливудского блокбастера (впрочем, даже там не всегда заморачиваются), достаточно понимать, какой вид лучше использовать в контексте.
С засечками или без?
Обычно шрифты с засечками (короткими штрихами на концах букв; так называемые serif-шрифты: Times New Roman, Garamond, Georgia) используются в печати. На бумаге такие шрифты воспринимаются хорошо, при чтении глаза устают меньше.
Следовательно, для веба обычно используются шрифты без засечек (так называемые sans-serif: Arial, Verdana, Trebuchet, Helvetica), потому что на экране, в отличие от бумаги, засечки превращаются в помехи, которые только усложняют восприятие текста. При этом важно оставлять нормальное межстрочное расстояние, чтобы глаз визуально мог отделять одну строчку от другой.
Считается, что любые правила можно нарушать, так что шрифты с засечками на сайте использовать можно… но очень-очень аккуратно и в исключительных случаях. Например, шрифтом с засечками можно набрать заголовок, чтобы сделать его еще более отличающимся от основного текста.
Кстати, есть еще шрифты monospace (Courier, Lucida Console, Monaco). Они похожи на шрифты для пишущей машинки, а сейчас используются для оформления кода.
Нюансы при выборе почтового шрифта
Еще несколько тонкостей, которые помогут создать хорошее шрифтовое оформление вашего письма.
Проверьте, есть ли все нужные символы и начертания
Шрифт состоит из глифов — этим термином называют буквы, цифры и всякие специальные символы, то есть все элементы шрифта. Проверьте, есть ли в понравившемся вам шрифте все глифы, которые могут понадобиться в рассылках. Например, знаки валют, надстрочные и подстрочные символы и так далее. Иначе придется подставлять их из другого шрифта, и будет некрасиво.
В начале статьи мы показали шрифт Georgia c «прыгающими» цифрами. Смотрите, что получится, если заменить их на цифры из Times New Roman:
Цифры из Times New Roman в тексте, напечатанном Georgia
Дизайнер сразу заметит несоответствие. Если вы не дизайнер, присмотритесь: цифры из Times New Roman явно тоньше в линиях и выглядят более бледными, к тому же выбиваются из общих очертаний Georgia.
Декоративные шрифты вставляйте картинкой
Если используете редкий декоративный шрифт, в письмо его лучше вставлять изображением. Тогда меньше риска, что у получателя не окажется красивого почтового шрифта и надпись отобразится Arial.
Если присылаете письмо, где важный текст оформлен как изображение, помните, что у некоторых пользователей загрузка картинок по умолчанию отключена. Чтобы смысл письма от этого не пострадал, не забывайте прописывать alt текст к изображениям. Об особенностях работы с изображениями, шрифтами и другими элементами при верстке писем расскажет наша статья.
Выбирайте запасной шрифт для каждого уровня текста
При верстке письма всегда выбирайте несколько шрифтов для каждого уровня текста с помощью свойства font-family. Если на компьютере пользователя нет основного указанного шрифта, отобразится запасной. Например, font-family: Helvetica, Arial, sans-serif означает, что текст отобразится у получателя шрифтом Helvetica, а если этого шрифта нет, то Arial. Если нет обоих, то любым системным шрифтом без засечек.
Источники шрифтов
При выборе шрифта не забывайте про лицензию — ворованные шрифты грозят не только муками совести, но и проблемами с законом (а оно вам надо?). Сейчас существует множество разных бесплатных шрифтов, и вы легко найдете что-то подходящее для вашего сайта. Итак, где искать бесплатные шрифты.
Google Fonts
https://fonts.google.com/
Читайте также:
Один из самых известных сборников бесплатных шрифтов. Присутствует латиница, кириллица и другие популярные и не очень языки; всего 900 семейств. Есть несколько фильтров — например, можно отсортировать шрифты по толщине букв, наклону или ширине.
Тексты можно редактировать, так что сразу можно посмотреть, как будет выглядеть нужная фраза в этом шрифте.
FontSpace
https://www.fontspace.com/
Здесь представлено больше 37 тысяч бесплатных шрифтов. Есть даже с пиктограммами (например, шрифт Trees Go с деревьями). Шрифты распространяются под разными лицензиями; некоторые нужно купить для того, чтобы использовать в коммерческих целях.
1001 Free Fonts
https://www.1001freefonts.com/
Еще один сайт с бесплатными шрифтами. Шрифты разделены на категории: например, в категории “Famous” (знаменитое) можно найти шрифты из «Парка Юрского периода» или «Черепашек-ниндзя».
FontStruct
https://fontstruct.com/
Ресурс для тех, кто хочет создать шрифт самостоятельно. Если такого желания нет, то можно заглянуть в галерею, где есть созданные другими пользователями шрифты.
Font Squirrel
https://www.fontsquirrel.com/
Еще один сайт со множеством разных шрифтов. Помимо бесплатного раздела, в нем есть раздел с платными шрифтами (Almost Free Fonts), где продаются шрифты с очень хорошей скидкой.
DaFont
https://www.dafont.com/
Здесь можно найти бесплатные шрифты для личного и коммерческого использования. Есть интересная категория шрифтов “Foreign look”, которые стилизованы под буквы из алфавитов разных стран: русские, арабские, азиатские и другие.
Urban Fonts
https://www.urbanfonts.com/
Здесь есть платные и бесплатные шрифты — вторые выделены в отдельный раздел “Free”.
Abstract Fonts
https://www.abstractfonts.com/
Еще одна коллекция с постоянно пополняющимися шрифтами.
А если ищете какие-нибудь оригинальные платные шрифты, посмотрите в MyFonts. Там довольно большая коллекция всевозможных шрифтов.
Подсказки по выбору шрифта для работы
Наглядно увидеть, как будет выглядеть ваша идея на конкретном сайте, можно на Typ.io, где собраны шрифты со всего Интернета. Под каждым образцом можно найти его описание в CSS.
Дополнительно можно изучить любимые сайты, посмотреть, какие шрифты при их создании использовались. Неплохим инструментом является расширение What The Font для Chrome. Проводя мышкой по шрифту можно изучать его прямо в интернет-пространстве.
- Идеи для сочетаний.
Можно использовать не только шрифты, но и их сочетания, что тоже не менее важно. Если сделать это грамотно, то, во-первых, дизайн становится более читабельным, а во-вторых, создается зрительная иерархия информации.
Для того чтобы найти подходящее сочетание, начать следует с Typewolf, где собраны варианты с различных интернет-ресурсов. Здесь же можно найти статьи и рекомендации с глубоким погружением в типографику.
Неплохим источником для поиска подходящего сочетания шрифтов является FontPair, особенно Google Fonts. Здесь предоставлена возможность фильтрации стилистических комбинаций, к примеру, Serif и Serif, Sans-Serif и Serif.
В Интернете можно найти и готовые сочетания шрифтов от разных дизайнеров: Typography: Google Fonts Combinations Volume 2 или Typography: Google Fonts Combinations. Как вариант, воспользуйтесь сайтами типа Dribbble или Behance и введите в строку поиска «fontpairing» (сочетание шрифтов).
- Выберите свои шрифты.
Благодаря проведенным исследованиям и вдохновившись ими, можно переходить к выбору типографики. Главное в этой работе – придерживаться таких принципов, как разборчивость и смысл, а также интересный дизайн.
В вопросе о том, как выбрать шрифт, следует ориентироваться в первую очередь на то, что он должен легко читаться и соответствовать цели согласно общепринятым меркам. Не забывайте о том, для какого текста он будет использоваться, например, для основного – один, для заголовков – другой.
Если вы используете сочетание шрифтов, то не берите более трех вариантов. К тому же они должны быть скомпонованы таким образом, чтобы создавался контраст. Это позволит управлять взглядом читателя, то есть в первую очередь он обратит внимание на заголовок, а затем на основной текст. Кроме того, используя разные цвета, размеры шрифтов и «вес», можно создать визуальный контраст.
- Скачивайте бесплатные шрифты.
Нужно отметить, что одними только стандартными шрифтами обойтись вряд ли получится, однако сегодня нет проблемы в том, чтобы найти бесплатные, не пиратские варианты в Интернете. Это может быть даже акция в магазине, пробная версия либо работа начинающего шрифтовика.
На сегодняшний день Google Fonts является местом, где можно найти немало бесплатных кириллических шрифтовых семей (около 76), в каждой из которых по несколько начертаний. Также можно просматривать распродажи и акции в самом крупном интернет-магазине MyFonts, где, воспользовавшись расширенным поиском, можно найти множество кириллических начертаний (более 100).
Можно попытать счастье и поискать бесплатные шрифты в тематических сообществах, а также скачать пробные версии на сайтах производителей. Однако распространенной данную практику назвать нельзя. При этом нужно учитывать, что бесплатные шрифты не всегда отличаются хорошим качеством, к тому же не все они подойдут для коммерческих целей, поэтому обязательно нужно читать лицензию.
- Купите шрифт, если хотите чего-то большего.
Нужно сказать, что самый большой выбор шрифтов все же можно найти у тех, кто их продает. Одним из таких магазинов является MyFonts. Здесь только кириллических шрифтов представлено около 2 000. Также можно обратиться к сайтам-словолитням, то есть компаниям, занимающимся созданием шрифтов (Colophon, Parachute, Commerical Type, RadimPesko, Grilli Type. К российским относятся «Студия Лебедева», Type.today, «Паратайп», Letterhead, Brownfox.
На такие сайты можно заходить не только для того, чтобы купить какой-то шрифт, но и просто для вдохновения, поскольку производители, продавая свой товар, стараются представить его максимально привлекательным. Там можно убедиться в том, что даже самый скучный гротеск может быть использован в разных вариациях. На Fonts In Use еще больше примеров применения шрифтов.
Если говорить о стоимости, то начертание шрифта обойдется примерно в 3 000 рублей, причем цена за обычный, жирный или курсив будет той же. Можно и сэкономить, для этого придется купить сразу всю шрифтовую семью, оптом получится дешевле.
При использовании нестандартного шрифта его необходимо либо включить в файл-исходник, либо передать получателю отдельно, чтобы на другом компьютере он отображался правильно.
- Создайте типографический стайлгайд.
Завершительным этапом является создание типографического стайлгайда. Это позволит стандартизировать типографику в разных дизайнах, которые вы используете.
Можно создать общие стили текста с помощью программы типа Sketch, что позволит их быстро вставлять в зависимости от идеи проекта. На этом же этапе в типографические показатели вносятся окончательные правки относительно «веса», цвета и размера.
При выборе цвета необходимо ориентироваться на собственную палитру, выбирая гармонирующий с ней тон.
При создании стайлгайда должны быть учтены следующие моменты: цвет, размер и названия шрифтов, а также примеры их использования.
Сравнение скачанных шрифтов и Google шрифтов.
Незаменимым является сервис по сравнение уже скачанных к себе на компьютер шрифтов https://wordmark.it/ . Просто введите название вашей организации в строку на главной странице и нажмите кнопку Enter на клавиатуре. Сайт моментально покажет вам как будет выглядеть написание названия используя каждый шрифт, скачанный на ваш компьютер.
Также наверху вы можете нажать на кнопку Google Fonts, после чего сайт покажет вам, как будет смотреться нужный текст со всеми вариантами с сайта Google Fonts.
Вы можете помечать стили которые вам понравились после этого нажать на иконку сравнения в правом верхнем углу сайта. Вы попадете на страницу где будут показаны только понравившиеся шрифты для логотипа, чтобы вам удобно было сравнить их между собой и выбрать финальную версию.
