Тренды шрифтов для сайта в 2023 году. Как выбрать и можно ли использовать стиль леттеринг?
Шрифт — это буквально почерк вашего бизнеса, важный визуальный элемент для создания правильного восприятия вашего бренда. Текст зачастую выступает главным способом коммуникации компании с клиентом. Использование гармоничных сочетаний шрифтов на сайте, в рекламных материалах и других составляющих айдентики помогает сформировать образ компании, отражающий ее позиционирование.
То, какой шрифт используется в веб-дизайне, косвенным образом влияет и на конверсию: посетители интернет-портала более лояльны к контенту, представленному читабельными — чёткими и различимыми шрифтами, в этом случае они с большей вероятностью станут постоянными клиентами.
Рассмотрим, каков же самый лучший шрифт для сайта и логотипа и какими могут быть критерии выбора подходящего шрифта, а также чем хорош стиль леттеринг и в каких случаях применим.
Популярные шрифты 2023 года
В трендах 2023 шрифты с засечками, ультратонкие линии, «сплющенные» буквы, контролируемый хаос, упрощение и минимализм, градиенты, надписи «от руки» и отсылки к ретро, брутализм, экспериментальные и сугубо декоративные шрифты, азиатская тематика, игры с объемом и формой.
Шрифты с засечками
Вносят настроение доцифровой эпохи: Recoleta, Voga, Magfirah, Selvina. Элегантные, декоративные, с налетом ретро, и особенно настроения ар-деко. Раньше их чаще всего можно было встретить в глянцевых журналах, презентациях, открытках, принтах. Теперь шрифты с засечками вновь завоевывают глобальное визуальное пространство в самых разных сферах.
Минимализм и современность
Подобным шрифтам присуща лёгкость, динамика, оригинальность, лаконичность, использование геометрических элементов в умеренном количестве. Это, к примеру: Codec Pro, Impossible, Nevrada, Cremona, Sofia Font, Black rovers Font, Agnostic Font, QSansPro, Mofita, Munich Sans.
Стремление к минимализму и лаконичности во всем от шрифтов до иллюстраций — это один из устойчивых трендов последних 5–10 лет. В 2023 одной из его «граней» станет использование ультратонких (и вытянутых вверх) шрифтов. Особенно эффектно они смотрятся в серой гамме, вызывая ассоциации с карандашным наброском.
Контртренд, в рамках того же минимализма — это, напротив, использование массивных акцентированных шрифтов (без засечек), максимально растянутых по ширине — своеобразный эффект «приплюснутого» текста (как в шрифтах Neutro и Vlaenella Bold). Впрочем, и тонкий шрифт также может быть растянут.
Еще один популярный прием, который часто используется одновременно с массивными буквами — это контурная типографика без заливки, то есть у отдельных букв или слов обозначен лишь контур. Это особенно удобно как способ расстановки визуальных акцентов — не меняя шрифта, можно визуально выделить отдельные моменты текстового послания.
Кроме того наблюдается массовая тенденция к упрощению/стилизации логотипов компаний. Это проявляется в том, что, а) международные бренды все чаще выбирают простой черный цвет, вместо яркости, б) упрощают или вовсе убирают из логотипа все графические элементы, оставляя одно лишь только шрифтовое название.
Одна из лучших иллюстраций озвученных тенденций — логотип BBC, за него в 2021 году компания заплатила 1,8 млн долл., что делает его одним из самых дорогих логотипов в мире. По сути это просто три белые буквы, расположенные в трех черных квадратах. И — в инверсивном варианте — наоборот.
Ретро стили
Всегда актуальны, создают налёт лёгкой ностальгии, романтики. В то же время могут подчеркивать немейнстримовый характер компании, проверенное временем качество или апеллировать к определенной временной эпохе, ее ценностям и настроению.
-
На пике популярности декоративная графика в духе конца XIX — начала XX века, когда дизайнеры отвергали стандартизацию и единообразие промышленной революции.
-
«Новой» классикой современности считается стилистика ар-деко с ее нарочитой декоративностью, орнаментальными мотивами, характерными шрифтами и геометрическими формами.
-
Минималистичная эстетика 70-х также в духе времени — стильные шрифты «старой школы», спокойная теплая цветовая палитра с мягкими тенями. Особенно актуально для упаковки и оформления больших объемов текстового контента.
-
Приходит мода на 90-е и 00-е, что находит отражение и в шрифтах. Так, эстетика 90-х диктует моду на яркие цветовые палитры, металлические оттенки, зернистые текстуры, некоторую брутальность. 00-е характеризуются неоновыми цветами, яркими бликами а-ля CD диск, технологичностью и футуристичными фантазиями.
-
Вечный» долгоиграющий тренд — романтика 60-х (толстые плавные изгибы букв, характерные для кино-постеров и пластинок тех времен — примеры: Aesthetic, Curious Type, Big Bro, Groovy, The Banthink). Примеры: Miami Vice, Alba, Nasalization, Rotola TH Pro, Liberta TA, 8th Avenue, 6th Aniversario.
Необычные рукописные шрифты
Использование ограничено логотипами и материалами фирменного стиля, но это очень мощный и актуальный инструмент, позволяющий передать настроение бренда и транслировать аутентичный образ. Создавая шрифт (или просто надпись) под конкретный проект, вместо того, чтобы выбирать из существующих шрифтов, вы гарантированно выделяетесь из массы «стандартных», а использование непринужденной манеры «от руки» и нарочитая небрежность добавляет легкости, стремительности, душевности, апеллирует к текущему моменту «здесь и сейчас».
Актуальным решением для оформления в частности логотипов является комбинация шрифтовой надписи с рисунком «от руки» — особенно это подойдет продуктам и услугам, которые так или иначе связаны с темой питания, ухода, красоты или же исповедуют принципы экологичности, традиционности, естественности.
Граффити, максимализм и брутализм
Как контртренд направленный против чрезмерного упрощения всего и вся, а также как элемент стиля 90-х, с отсылками к граффити и контркультурам — сегодня веб пространство захватывает так называемый максимализм. Его приметы — ошеломляющее количество визуальных элементов и шрифтов, максимальная детализация и насыщенность, броские сочные психоделические краски.
В шрифтовом плане здесь нельзя выделить какую-то определенную стилистику — это может быть что угодно. Важно, что шрифт также является важнейшей частью общей картинки, работающей на создание wow-эффекта.
Другой примыкающий тренд — брутализм, то есть дизайн «без дизайна», максимально простой, суровый и отметающий привычное представление о красивом. Например, может использоваться текстура бетонной стены, или синего экрана в духе первых компьютеров, или внутреннего интерфейса web-разработчиков «без украшательств». В плане шрифтов с брутализмом отлично сочетаются надписи в стиле граффити или выполненные от руки — именно они создают требуемый акцент и дают понять, что создатели намеренно «играют» со зрителем, ломая стереотипы.
Контролируемый хаос
Еще одно популярное сегодня направление — это шрифты «ломающие правила»: например, надпись, где все буквы разного размера, стиля или наклона, либо слово читается не слева направо, а по некой ломаной диагонали — то есть выглядит максимально непривычно и нестандартно.
3D шрифты
Эффект объема достигается с помощью использования различных текстур, теней, совмещения изображения разных по свойствам поверхностей (песок на камне, цветы на деревянной поверхности, бумажные аппликации, фантазийные 3d формы и проч.)
Анимированные шрифты
Тему объема и нестандартности продолжают анимированные движущиеся шрифты, которые могут быть легко использованы в web-среде в логотипах, заголовках, и проч. Полет фантазии дизайнера здесь ничем не ограничен — важно само изменение, динамика, процесс трансформации. На глазах зрителя шрифт одной конфигурации превращается в другой, меняется его форма, стиль, размер и наклон букв, появляются некие дополнительные визуальные эффекты.
Игра со слоями
На пике популярность «многослойные» геометрические шрифты, в которых буквы (и визуальные элементы) формируются из кругов, квадратов и прямоугольников в том числе со скругленными углами), наложенных друг на друга.
Другое направление игры со слоями — это размещение картинки поверх текста, а не наоборот. Первыми этот эффект начали применять на обложках журналов, но сейчас он шагнул далеко за пределы этой сферы и часто применяется и в веб дизайне, особенно на главном экране сайта. Картинка как бы частично закрывает текст (чаще всего — это логотип написанный крупным размером), что как бы намекает посетителю на то, что он попал на сайт достаточно известной компании, которая не нуждается в «выпячивании» своего названии и может легко быть узнана даже по характерному шрифту пару букв.
Чистая графика
Всегда свежа и актуальная чистая графика — то есть когда дизайнер создает шрифт, почти переходящий в рисунок, где буквы имитируют некие предметы, стебли растений, трехмерные формы, наполнены витиеватыми внутренними узорами или представлены в неких сложночитаемых, но визуально привлекательных начертаниях.
Многообразие возможностей здесь бесконечно — это может быть уникальный шрифт, разработанный под вашу компанию, где все буквы максимально непохожи друг на друга (но при этом создают некое заданное настроение). Иногда, достаточно декорировать таким образом всего несколько букв: например, первую, или все повторяющиеся — «О», «А», другие.
Одно из решений — использовать в надписи как бы несколько разных шрифтов. Например, базовая надпись будет выполнена в нейтральном шрифте без засечек, а отдельные буквы — в широком массивном шрифте с засечками. Иле же можно выборочно менять размер, цвет, обводку и заливку букв — то есть творить на стыке шрифта и иллюстрации.
Курс на Азию
Еще один устойчивый тренд — азиатская тема в дизайне. Использование иероглифов (или шрифтов напоминающих иероглифы), характерных персонажей и графических элементов из восточных мультфильмов и поп-культуры, традиционно азиатских узоров и орнаментов, иллюстраций (и шрифтов) в стилистике восточных татуировок — все это вызывает большой отклик и интерес у зрителей, уставших от диктатуры голливудского мира.
В более широком смысле сюда следует отнести и увеличивающийся интерес к любым традиционным культурами в принципе — эстетика славянских орнаментов, визуальное наследие Индонезии и Полинезии, традиционные росписи Африки и проч.
Назад в детство
Наконец, еще одним заметным трендом является создание логотипов, шрифтов и иллюстраций в так называемом детском стиле. В 2022 этот тренд проявился в использовании акцентированно скругленных букв — текучие, мягкие, или даже дутые и пухлые, без острых углов.
В 2023 акцент скорее всего будет смещен на соответствующий выбор цвета — комбинации конфетных, розовых, голубых, фиолетовых и желтых оттенков дополненные мультяшными персонажами, шрифтами «от руки» или объемными 3D шрифтами будут хорошо работать и часто использоваться, причем в сферам даже не связанных с детьми.
Вероятно, это связано с достаточно непростой атмосферой последних лет, когда жизнерадостность, беззаботность, беспроблемный подход стали особенно желанны.
Классика и элегантность
По-прежнемууниверсальны: Classic Roman ™, Galano Classic, George, Chloe — ведь они утончённы и легко читаемы. Шрифты Vaguely Fatal Font, Oleo Font, Le Royale, Roihu создают тёплую, непринуждённую атмосферу.
Какой шрифт выбрать для сайта?
При выборе шрифтов для корпоративного сайта нужно продумать каковы основные ценности компании, какая целевая аудитория будет приходить на сайт и какими эмоциями компания хочет зацепить и зажечь своих клиентов. Проанализируйте ваших клиентов: каков их возраст, интересы и потребности.
Шрифт как визуальная составляющая корпоративного стиля должен затрагивать эмоциональную сферу, быть конгруэнтным мотивам целевой аудитории. Например, сухой формальный строгий шрифт, которым печатаются бюрократические документы, точно не подойдёт блогу студии развития творчества у детей, а вычурные разноцветные буквы будут странно смотреться на серьёзном портале по медицинской тематике.
Шрифт должен находиться в гармонии с остальными элементами дизайна сайта — изображениями, фотографиями, фоном. Выбирайте шрифт в зависимости от того, на что нужно сделать акцент — на иллюстрацию или содержание? Например, в заголовках и подзаголовках допустимо применять визуально сложные шрифты, с деталями — для привлечения внимания и выразительности.
«Базовый» же шрифт — для отображения текстовых страниц сайта должен быть достаточно простым и нейтральным, хотя при этом вовсе не обязательно использовать «скучные» и всем привычные шрифты, можно выбрать и нечто более оригинальное.
Какие шрифты для сайта бывают? Классификация основных семейств шрифтов
Можно также опираться на классификацию семейств шрифтов, чтобы сориентироваться в примерном направлении, куда двигаться:
- Serif, или Антиква — группа шрифтов, имеющих засечки на буквах. Представители — Times New Roman, EB Garamond, Baskerville, Lora и др. Они считаются классикой — такими шрифтами напечатаны книги наших домашних библиотек. Serif можно использовать как для заголовков, так и для блоков с основным текстом. Согласно исследованиям, такие шрифты делают тексты более убедительными для восприятия, подчёркивают верность традициям.
- А вот шрифты группы Blackletter следует включать в тексты крайне дозировано — например, только в заголовках, поскольку это тяжёлые, трудно читаемые готические буквы: Deutsch Gothic, Portcullion, Proclamate Heavy.
- Есть шрифты с толстыми засечками, осовремененные — Slab-serif или брусковые: Rockwell, Courier New, Arvo. От них веет молодым, хипстерским бунтарским духом. Эти шрифты хорошо смотрятся при использовании в заголовках или в цитатах на интернет-порталах проектов, связанных с модой, стилем, искусством.
- Sans-serif или Гротеск — группа шрифтов, не имеющих засечки, довольно обширная и востребованная у дизайнеров. Шрифты этого семейства обладают хорошей читабельностью, они современные, новаторские, отлично подходят как для основного текста, так и для заголовков: Arial, Open Sans, Roboto и подобные. Один из популярных шрифтов — Helvetica, имеющий закруглённые буквы с чётко простроенной высотой.
- Существует ещё интересное семейство рукописных шрифтов: Script или Handwriting: Lucida Script, Pacifico, Allura, Satisfy и др. Эти шрифты относятся к неформальным, не очень читабельным, поэтому ими лучше оформлять выборочные элементы — например, заголовки или цитаты. Не подходят для официальных документов.
- К декоративным шрифтам, где нет соблюдения строгих принципов построения, относятся Display или Акцидентные: Fredericka, Fredoka One, Lobster Two. Они не подходят для длинных текстов, но ими хорошо писать заголовки, включать в дизайн логотипов.
Основными создателями и поставщиками профессиональных шрифтов для веб-дизайна и типографий выступают 2 компании: Fonts Adobe и Google Fonts. Приобретая их продукт, вы можете быть уверенными, что шрифт будет качественным, адаптивным на любой платформе и никуда не расползётся.
Сколько шрифтов можно использовать одновременно?
Оптимальное количество разных шрифтов, которые можно использовать в веб-дизайне — это 2.
На некоторых сайтах прекрасно уживаются и 3 шрифта, но всё должно быть продуманно и в меру. Должна соблюдаться чёткая иерархия, чтобы было понятно, какой шрифт за какой блок информации отвечает. Например, один из этих трёх шрифтов может быть основным, другой дополнительным, третий — для особенных акцентов.
При использовании без острой необходимости большого количества шрифтов разрушается внутренняя целостность сайта, структурированность; его контент делается менее читабельным и понятным. И в результате читатель начинает запутываться в этой аляповатости, особенно если каждый шрифт ещё используется в вариантах жирного, курсивного или подчёркнутого начертания.
Кроме того, если используется более 2–3 типов шрифтов, загрузка сайта может проходить медленнее. И есть риск, что потенциальный клиент покинет страницу, так и не дождавшись, пока там что-то появится.
Дополнительные советы
- Выбирайте шрифт, у которого есть несколько вариантов начертания: лёгкий, обычный, жирный. Это поможет создать структуру и иерархию заголовков, текстовых блоков, цитат и сносок на вашем сайте.
- Обращайте внимание, поддерживает ли выбранный вами шрифт кириллицу, латиницу, другие иностранные языки с умляутами у букв, на которых говорят ваши клиенты и сотрудники.
- Проверьте читаемость шрифта с точки зрения адаптивного дизайна: как шрифт отображается на экране мобильных гаджетов. Желательно протестировать, как отображаются шрифты в разных интернет-браузерах.
- Воспользуйтесь сервисами для проверки сочетаемости двух типов шрифтов, если появились сомнения, гармонируют ли шрифты на странице. Google Fonts предлагает подходящие варианты пар шрифтов; также есть полезный сервис fontjoy для анализа сочетаемости.
Какой шрифт выбрать для логотипа?
Шрифт, подобранный для логотипа, также, как и шрифт, подобранный для сайта, несёт определённый посыл, ассоциации, настроение, отражает позиционирование компании.
Чтобы выбрать оптимальный шрифт для логотипа, проведите небольшое исследование, выделив и описав:
- портрет вашего клиента — каков он;
- имидж вашей компании;
- что в компании ценят клиенты;
- какие ценности вашей компании вы хотите подчеркнуть;
- какими словами вы можете описать ваш бренд;
- какие эмоции связаны с вашим брендом.
Каждый логотип, включая входящий в него шрифт, имеет свою личность — может быть дружелюбным, серьёзным, изящным, игривым, надёжным, торжественным, hi-techи т. п. Одна из основных задач логотипа — делать компанию узнаваемой, вызывать доверие и лояльность целевой аудитории.
Советы как выбрать подходящий шрифт для логотипа
- Выбирайте простые, читабельные шрифты, подчёркивающие дух вашего бренда, ориентированные на правильное восприятие клиентом.
-
Шрифт должен быть различимым во всех ситуациях использования логотипа: на крупноформатных плакатах, на кузове автомобиля, на сайте, на экранах гаджетов, на визитках, на сувенирной продукции маленького размера, например, на корпоративных ручках.
- Оптимальный шрифт, подобранный для логотипа, всегда вне времени, поэтому осторожно рассматривайте трендовые шрифты: через несколько лет они могут уже стать нетрендовыми. Можно использовать 2 шрифта в логотипе, которые дополняют друг друга.
- Доверяйте подбор шрифта для логотипа профессиональному дизайнеру по айдентике, чтобы быть уверенными, что будут учтены все детали: соответствие шрифта существующему фирменному стилю, запросам и мотивации целевой аудитории.
Стиль леттеринг: в каких сферах и для каких аудиторий подойдут рукописные шрифты?
Если вы хотите выделить свой проект на фоне других, внести изюминку, вам поможет необычный шрифт, например стиль леттеринг или рукописный. Такой стиль может применяться в создании логотипов, баннеров, упаковки, визиток, наружной рекламы, айдентики в целом.
Леттеринг — это рисованная надпись, представляющая единую гармоничную стилизованную композицию. Интересно, что леттеринг был в моде уже в XIX веке, например его можно встретить на рисованных плакатах Альфонса Мухи, Тулуз-Лотрека.
В целом стиль леттеринг похож на каллиграфию, но его основное отличие в том, что в каллиграфии соблюдаются строгие правила и буквы пишутся, а в леттеринге — рисуются, дополняются иллюстрациями, деталями, элементами. Главные принципы леттеринга — это уникальность каждой буквы, написание каждого символа вручную.
Есть огромное количество разновидностей нового, современного леттеринга, вот только некоторые из них:
- Brush Lettering — письмо, созданное с помощью кисти или брашнепа.
- Chalk Lettering — письмо мелом, на меловых досках. Активно применяется в ресторанах, магазинах, на упаковке. Доска со словами, написанными мелом, не только носитель информации, но и креативное украшение интерьера.
-
Vintage Lettering применяется в дизайне фирменного стиля косметических, парфюмерных, алкогольных брендов.
- Back In USSR или советский леттеринг — стиль от художников-каллиграфов, оформляющих произведения советского кинематографа, книги, упаковки. Сейчас такое направление леттеринга пользуется успехом в оформлении полиграфии брендов молодёжной одежды, баров, арт-пространств.
- iPad Lettering — текст, создающийся с помощью планшета графическими дизайнерами.
Нужно учитывать предпочтения и профессиональную направленность ваших клиентов: рукописный шрифт прекрасно будет воспринят творческими молодыми людьми, но для целевой аудитории сайта солидной юридической фирмы он явно неуместен. Также, стиль леттеринг может иметь сложности в адаптивном дизайне: будучи хорошо читаемым на экране ноутбука, он не всегда различим на дисплее небольшого по размеру гаджета.
Рукописный шрифт выглядит очень хорошо в заголовках, в оформлении отдельных смысловых фраз или цитат, несёт посыл теплоты, неформальности, уюта, привлекает внимание. Идеально включать такой стиль в дизайн надписей для кофеен, проектов, связанных с искусством и модой, магазинов эксклюзивных авторских работ и продуктов.
Для основного текста использовать леттеринг не рекомендуется: такой текст сделается плохо читаемым, из-за того, что клиенту придётся вглядываться в буквы, чтобы понять их.
Профессиональный графический дизайнер, владеющий основами леттеринга и знаниями об основных правилах создания рисованной надписи, поможет вам создать уникальное представление вашего бренда или проекта.
Заключение
В идеале создание сайта происходит на базе имеющегося фирменного стиля, в котором прописаны и допустимые для использования шрифты. Если же такого руководства у компании нет, или имеется только логотип, то шрифт, подобранный для представления текста в веб-дизайне, должен соответствовать посылу, который несёт компания.
Оптимальный шрифт для сайта и логотипа должен быть запоминающимся, уникальным, разборчивым на любом носителе и поверхности, работающим на любой платформе.
Команда нашей веб-студии может решить все обозначенные задачи — от разработки айдентики (логотип, фирменный стиль, брендбук) до создания сайта. Айдентика включает в себя подбор подходящих шрифтов. Если же вы хотите перейти к созданию сайта минуя этап разработки фирменного стиля, то шрифты для него подберет дизайнер на этапе создания макетов.
Поделитесь материалом в социальных сетях
Нестандартные шрифты в макете сайта что делать?
Нестандартные шрифты в верстке: почему shit happens?
В сети есть множество инструкций для начинающих дизайнеров — о том, чего нельзя делать в макете.
Сибирикс
Например, посмотрите ILovePSD. Однако даже при соблюдении всех написанных гайдов, может возникнуть сложная ситуация — например, в случае, когда заказчик настаивает на использовании конкретного нестандартного шрифта.
Под давлением руководитель проекта «пропускает» указанный шрифт, дизайнер применяет его, заказчик утверждает. А веселее всех придется верстальщику.
Сначала немного теории
Небольшая иллюстрация:
Загадка: будут ли шестерни вращаться на конструкции номер 4?
Пусть вот эта эволюция шестеренок показывает то, как создается интернет-проект. А иконки человечков выше — будут специалистами, отвечающими за каждый этап работ.
Значит ли это, что первый работник более свободен в «производстве»? Что, к примеру, он может выточить шестеренку не с восемью зубцами, а с двенадцатью и повернуть ее на угол в 37,5 градусов? Значит ли это, что замыкающий производство работник должен больше всех париться: чтобы его шестеренка подошла по диаметру, положению, углу поворота?
Два раза нет. Чтобы производство происходило без сбоев и задержек, каждый из работников должен учитывать специфику работы на следующих этапах. Отгружать качественный продукт и не создавать лишней работы ни другим, ни себе в будущем.
Все стараются следовать указанной заповеди, но, как мы уже увидели, это не всегда получается. Иногда по неосторожности дизайнера, иногда по необдуманности решения PM’а, иногда из-за упертости заказчика.
Что делать верстальщику, когда в макете утвержден «небезопасный» шрифт?
Ну, все, кто знаком с версткой, знают про таблицы безопасных шрифтов:
С этими проблем не возникает: верстальщик задает в CSS шрифты в последовательности приоритетов — шрифты отображаются корректно под любыми браузерами.
Но если шрифт «небезопасный»?
Нам не подходит вариант с картинками вместо текста — это вообще ни в какие стандарты качества не лезет.
Вариант 1. Google Web FontsГугл создал свою базу шрифтов, которыми можно свободно пользоваться при создании дизайна и не задумываться о последствиях. Когда верстальщик получит макет, он просто укажет путь к нужному шрифту на сервере Гугла.
Корпорация Добра подарила миру целую кучу полезных вещей и не останавливается на этом.
Однако вариант с Google Web Fonts не всегда оказывается пригодным. Например, если дизайнер использовал шрифт, которого нет в базе (а там не так уж много кириллических шрифтов). Что делать? Менять на другой нельзя, потому что макет утвержден.
Вариант 2. Значение @face-font для CSSДля того, чтобы заработал этот способ, нужно произвести чуть больше действий. Вы находите нужный шрифт у себя на винчестере или в любой базе бесплатных шрифтов, загружаете в конвертер (например, в этот), получаете архив с готовым фрагментом кода и вашим шрифтом во всех возможных форматах.
Далее задача верстальщика сводится к прописыванию в CSS полученного кода и — сайт преображается в то, что себе представлял дизайнер.
Причем подо всеми браузерами. К примеру, старый IE 6 «ест» только шрифты в формате EOT, и благодаря @face-font вы получите корректное отображение шрифта на сайте и под IE (он будет ссылаться на файл в формате EOT, другие браузеры будут «тянуть» привычные им форматы TTF, OTF, SVG или даже WOFF).
Начальник, у нас проблемы! А именно, проблема кроется в словах: «или в любой базе бесплатных шрифтов». Наиболее уважаемые конвертеры (с лучшим результатом на выходе) отказываются генерировать платные шрифты, а остальные чаще всего генерируют их некорректно. Получается, что и этот способ не всегда подходит.
Вариант 3. Cufon для JavaScriptЕсть такая вещица, как Cufon. Состоит из двух частей: генератора шрифта (внешне работает по принципу конвертера из прошлого примера) и движка для рендеринга. Второй нужно скачать и подключить к вашему документу.
Итак, загружаем шрифт, тот преобразуется в некий промежуточный формат. Верстальщик выбирает элементы для прорисовки (да, именно для прорисовки — здесь шрифты будут «вырастать» на странице сайта в реальном времени путем рендеринга).
Получаем результат, который более-менее адекватно выглядит под разными браузерами.
Но!
У Cufon’а есть свои недостатки. Например:
- Страница будет грузиться дольше, из-за загружаемых сторонних файлов.
- Выделение и копирование такого текста происходит проблематично.
- Пока скрипт не «отработал», пользователь видит текстовую страницу со стандартными шрифтами.
История одного проекта, или «Буква О какая-то советская»
У нас был один заказчик, которому очень понравился шрифт Myriad Pro, коим дизайнер оформил все заголовки. Клиент прямо-таки влюбился в шрифт.
Макет утвердили, всех все устраивало, руководитель проекта с чувством выполненного долга передал дизайн на верстку.
И началось.
Естественно, что в «шрифтах для веба» от Гугла его не нашлось.
Сначала попробовали стандартные способы с заменой на похожие DIN Pro и PT Sans (тогда мы еще не знали о влюбленности клиента). Ожидаемо, что получили несгибаемый отказ. Аргументация как раз была из разряда: «в этих ваших шрифтах буква О выглядит слишком по-советски».
Попробовали конвертировать c помощью той же «Белки» в шрифт, пригодный для веба. Но Myriad Pro — шрифт коммерческий. Под разными браузерами получалось не айс.
Вот так отображается шрифт под разными браузерами:
А в ТЗ четко написано о том, что сайт должен корректно отображаться подо всеми перечисленными.
В результате так и получилось: сменили Myriad Pro на альтернативный шрифт (в верхнем меню это PT Sans Bold):
Как вывод: современные веб-технологии, конечно, стремятся к тому, чтобы избавить разработчиков от разного рода ограничений. Возможно, когда-то даже самые смелые идеи и дизайнерские решения можно будет с легкостью воплощать в готовом продукте. Но пока на достойную реализацию таких «смелых идей» уходит довольно много времени и сил верстальщиков. Неоправданно много.
Избавьте себя и разработчиков от дополнительных заморочек, используйте безопасные и конвертируемые шрифты.
3 лучших сайта для создания собственных шрифтов
Если вы ищете интересное занятие для детей, хотите сделать свой следующий онлайн-проект немного более представительным или просто хотите убить немного времени, вам следует подумать о создании собственного пользовательского шрифта.
Если вы когда-либо искали шрифты в Интернете, вы знаете, что существует бесчисленное множество доступных вариантов, но из такого количества вариантов может быть трудно найти тот, который соответствует вашим потребностям.
Создавая свой собственный шрифт, вы можете пропустить все поиски и сравнения и создать именно тот шрифт, который вам нужен. А вот и лучшие сайты для создания пользовательских шрифтов…
Calligraphr — это бесплатный онлайн-способ создания собственных пользовательских шрифтов, и начать работу с ним очень просто. После первого создания учетной записи и входа в систему вы сможете загрузить шаблон для широкого спектра различных языков.
Распечатайте этот шаблон и заполните его ручкой или карандашом, затем отсканируйте или сфотографируйте шаблон. Для облегчения этого на границе изображения есть четыре маркера. Затем все, что вам нужно сделать, это загрузить шаблон обратно в calligraphr, и ваш шрифт будет готов к загрузке. После этого все, что вам нужно сделать, это установить шрифт, и вы будете готовы к работе.
Связано: Как установить шрифты в Windows 10
Даже за 10 минут работы Calligraphr справляется неплохо, но на этом его возможности не заканчиваются. Calligraphr позволяет загружать созданные вами шрифты в форматах TTF или OTF, и после загрузки шрифты становятся вашими, и вы можете использовать их по своему усмотрению.
Настраиваемые шаблоны также предназначены для тех из вас, кто хочет немного больше или немного меньше места для создания своего шрифта, удобная функция для разработки более сложных шрифтов. Однако для нас наиболее полезной функцией является рандомизация символов, которая позволяет загружать две разные версии каждого из ваших писем. При наборе эти варианты случайным образом чередуются по мере того, как вы пишете, что придает тексту гораздо более естественный вид.
Наконец, Calligraphr поставляется с множеством премиальных опций, доступных для тех, кто готов платить за Calligraphr Pro. Это обновление позволяет использовать более широкий диапазон символов в ваших шрифтах и увеличивает количество случайных символов, которые вы можете создать, с двух до 15. И да, ваши шрифты по-прежнему будут доступны даже после истечения срока действия вашей учетной записи Pro.
Кроме того, Calligraphr Pro открывает возможность добавлять лигатуры (линии между буквами, которые так часто встречаются в рукописном письме), а также вручную регулировать расстояние между буквами между отдельными символами. Вместе эти функции создают еще более естественный шрифт, практически способный заменить ваш почерк.
Для тех, у кого нет доступа к принтеру или кто не хочет возиться с ручками и бумагой, Fonstruct — это бесплатный онлайн-инструмент для создания пользовательских шрифтов. Регистрация обязательна, и после входа на сайт открывается FontStructor, онлайн-редактор изображений, несколько похожий на Photoshop или Paint.
Алфавит расположен в нижней части экрана, а слева — множество различных форм, называемых кирпичиками. Сам FontStructor опирается на сетку, которую вы можете заполнить этими кирпичами, используя ряд различных инструментов, таких как фигуры и линии.
Вы можете просмотреть свой шрифт в любое время, чтобы увидеть все символы, которые вы создали. Это также позволяет вам напечатать пару строк, чтобы вы могли продемонстрировать свой FontStruction в действии. После того, как вы закончите, вы сможете загрузить свой собственный шрифт, но только в формате TTF.
FontStructor — это невероятно мощный инструмент для тех, кто готов потратить время и силы на работу с ним, о чем свидетельствует большое разнообразие FontStructions, доступных для загрузки в галерее FontStruct.
Вам также будет предложено добавить сюда свои собственные FontStructions, где каждый сможет скачать их бесплатно. Однако это совершенно необязательно для тех из вас, кто предпочел бы оставить свои творения при себе.
Fontstruct также позволяет вам стать покровителем FS, что добавляет ряд функций, таких как удаление рекламы и задержек, загрузка вашего шрифта в формате OTF и немного расширенный набор параметров FontStructor.
FontForge — самый мощный инструмент для создания шрифтов в этом списке и, как следствие, самый сложный. Хотя FontForge по-прежнему бесплатен, он не является онлайн-инструментом, а это означает, что вам необходимо загрузить редактор шрифтов, прежде чем вы сможете его использовать. Однако он доступен для Windows, Mac и Linux, поэтому для большинства из вас это, вероятно, не будет слишком большим препятствием.
Связанный: Как превратить ваш почерк в шрифт
После загрузки FontForge интерфейс может показаться немного пугающим. Он имеет макет, несколько похожий на FontStructor от Fontstruct, но не имеет сетки, которая поможет вам в создании. Вместо этого FontForge полагается на набор инструментов для рисования, которые позволяют создавать фигуры с помощью «редактирования Безье» (способ манипулирования кривыми с помощью серии линий).
Не волнуйтесь, если это звучит сложно. После небольшого эксперимента мы обнаружили, что редактирование Безье в основном интуитивно понятно и просто в использовании, а когда это было не так, мы смогли выяснить, почему с помощью обширной документации FontForge.
FontForge дает вам абсолютный контроль над всеми элементами вашего пользовательского шрифта, включая интервалы между словами, междустрочный интервал, метрики, кернинг и даже метаданные. После завершения вы можете создать свой шрифт в формате TTF или OTF, а также отшлифовать более мелкие детали, такие как удаление перекрытий.
Ищите новые шрифты для вдохновения
Теперь, когда у вас под рукой есть все инструменты для создания практически любого шрифта, который вы только можете себе представить, осталось только выяснить, что именно вы хотите создать.
Существует множество различных возможностей и столько же разных мест, с которых можно начать поиски. Все они бесплатны и могут дать толчок вашему воображению, когда дело доходит до создания собственного пользовательского шрифта.
Загрузить пользовательские шрифты | Webflow University
Примечание: Мы переходим на рабочие области, и эта статья была обновлена, чтобы отразить это изменение. Посетите сообщение в блоге, чтобы узнать больше об этих обновлениях и изменениях.
Если вы ищете похожий контент, описывающий поведение конкретной учетной записи, посетите наш исходный урок по загрузке пользовательских шрифтов.
Вы можете добавить дополнительные шрифты на свой сайт непосредственно из раскрывающегося списка Шрифт на панели «Стиль». Выберите Добавить шрифты , и вы будете перенаправлены на вкладку Настройки сайта > Шрифты . Там вы можете загружать и использовать свои собственные шрифты на своем сайте.
Если шрифт, который вы хотите использовать, доступен через шрифты Adobe (Typekit) или шрифты Google, вы можете добавить их через интеграцию на вкладке настроек сайта > Шрифты . Узнайте больше об интеграции шрифтов Adobe.
Полезно знать: Вам не нужен платный сайт или тарифный план Workspace для загрузки пользовательских шрифтов.В этом уроке вы узнаете:
- Как загрузить пользовательские шрифты
- Как выбрать правильный формат шрифта
- Как редактировать установленные шрифты
- Как определить резервные шрифты и настройки отображения
- Как протестировать ваши шрифты в Конструкторе
Как загрузить пользовательские шрифты
Если вы хотите использовать пользовательские шрифты на своем сайте, откройте Настройки сайта > вкладка Шрифты , прокрутите вниз до Пользовательские шрифты и загрузите туда файлы шрифтов.
Важно: Пожалуйста, прочитайте лицензионное соглашение вашего шрифта и убедитесь, что у вас есть разрешение на использование шрифта на вашем сайте, прежде чем загружать его. Узнайте больше о лицензировании и использовании шрифтов.
Ищете бесплатные шрифты? Проверьте: 9 мест, где можно найти бесплатные (и почти бесплатные) шрифты
Как правильно выбрать формат шрифта
Вы можете загрузить различные форматы файлов шрифтов на свой сайт Webflow.
Полезно знать: Максимальный размер файла шрифта составляет 2 МБ.Поддерживается большинством браузеров
- WOFF — Web Open Font Format (проверьте поддерживаемые браузеры)
- TTF/OTF — Шрифт TrueType и OpenType Font (проверьте поддерживаемые браузеры)
90224 Поддерживается несколькими браузерами После загрузки файлов шрифтов вы можете изменить имя семейства шрифтов, толщину шрифта и стиль шрифта. После того, как имена семейств шрифтов будут правильными и совпадут, вы сможете загрузить каждый файл шрифта на ваш сайт. Загруженные файлы появятся в Дизайнере, как только вы снова откроете свой сайт в Дизайнере. Вы всегда можете изменить свои пользовательские настройки шрифта. Вы также можете удалить загруженных шрифтов. Резервные шрифты обеспечивают максимальную совместимость между браузерами и операционными системами. Если браузер посетителя сайта не может загрузить ваш собственный шрифт, он переключается на резервный шрифт. Резервные шрифты автоматически создаются для каждого загружаемого вами семейства шрифтов. Вы можете отредактировать резервный шрифт для каждого семейства шрифтов и выбрать шрифт, к которому он относится, из списка доступных шрифтов. Вы также можете отредактировать настройки отображения шрифта, которые определяют, как загружаются шрифты на основе того, что уже сохранено браузером. Однако вы можете загрузить несколько различных форматов, чтобы обеспечить максимальную поддержку браузера. WOFF — хороший формат с максимальной совместимостью с браузерами и хорошим размером файла. Если у вас нет версии файлов шрифтов WOFF или WOFF2, вы можете использовать конвертеры шрифтов, найденные в Интернете. Как редактировать установленные шрифты
Как определить резервные шрифты и параметры отображения