Google ru fonts: Google Fonts / Настройка шрифтов для проекта

Кириллица в Google Fonts: динамические антиквы

Эксперты

• Михаил Струков
• Шрифтовой дизайнер, выпускник курса Ильи Рудермана в БВШД и Плантиновского института типографики. Сотрудничает с CSTM Fonts и агентством Samarskaya & Partners

• Юрий Остроменцкий
• Шрифтовой дизайнер, сооснователь CSTM Fonts и type.today

• Илья Рудерман
• Шрифтовой дизайнер, сооснователь CSTM Fonts и type.today

Дисклеймер

Сегодня бесплатный шрифт не обязательно означает плохой. Увы, в кириллической части тут всё ещё минное поле, но есть и хорошие новости. Наша критика и наши советы не призваны стать истиной в последней инстанции: это лишь экспертная оценка трёх специалистов, находящихся в одной системе ценностей. К тому же всегда стоит помнить, что в дизайне нет запрещённых приёмов. В руках смелого, уверенного типографа любой баг может превратиться в фичу, но, прежде чем рисковать, нужно точно разобраться, что является багом.

Что такое динамические (старостильные) антиквы?

Шрифты с засечками, на формообразование которых оказало влияние письмо широким пером. Исторически в эту категорию попадают антиквы времен Ренессанса и барокко, а также их современные интерпретации. Для старостильных антикв характерны открытые формы знаков, наклонные оси овалов, невысокий контраст и выраженная разноширинность.

Оглавление

1
2
3
4
5

Хуан Пабло дель Перал (Huerta Tipográfica)

Шрифт назван в честь аргентинского музыканта Астора Пьяццолы, новатора в жанре танго. Выразительная графика с угловатыми каллиграфическими стыками штрихов — при некотором намёке на средневековые почерки, Piazzolla выглядит остро и свежо.

Практика У Piazzolla современный подход к пропорциям — ширины прямых и овальных знаков приближены друг к другу. Шрифт компактный, с крупными строчными — он будет эффективен и экономичен в текстовом наборе в малых кеглях, а благодаря яркому характеру сможет работать и как акцидентный.

В шрифте есть капитель, старостильные и обычные цифры Как правило, в современных шрифтах цифры по высоте равны заглавным буквам и стоят на базовой линии шрифта — поэтому их называют маюскульными или заглавными (lining, uppercase или caps figures). Старостильными или минускульными (oldstyle, lowercase) называют цифры высотой со строчные знаки, с выносными элементами — такими они были в старинных шрифтах, к которым и восходят динамические антиквы. Оба варианта цифр могут быть пропорциональными (разноширинные, для набора в тексте) и табличными (моноширинные, для удобной сверки чисел в таблицах).

Четыре варианта цифр в шрифте Piazzolla, сверху табличные, снизу пропорциональные:

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

Начертания 9 насыщенностей, от Thin до Black, с курсивами:

У каждой степени насыщенности есть диапазон оптических размеров: от 8 до 28 пунктов.

Шрифт доступен в вариативном формате с осями насыщенности и оптического размера.

Кириллица В Piazzolla качественная кириллица, хорошо подобраны конструкции, она соответствует латинской части по характеру.

В работе над кириллицей принимал участие болгарский шрифтовой дизайнер Крассен Крестев.

Мелковато выглядит кратка над Й — не хватает массы и контраста.

Интересно, что кириллические знаки, по сравнению с латинскими, сдвинуты вправо на кегельной площадке. Это не приводит к проблемам в наборе сплошного текста на кириллице, но при наборе многоязычного текста пробелы становятся неравномерными.

Кириллица — латиница — кириллица: второй пробел шире первого

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

Наш совет

Piazzolla — развитое шрифтовое семейство, практичное и выразительное, с качественной кириллицей, но небольшими техническими недочетами.

К оглавлению

Хуан Пабло дель Перал (Huerta Tipográfica)

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

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

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

Начертания В шрифте 5 насыщенностей от Normal до Black, с курсивами:

Капитель в отдельном семействе Alegreya SC — также в 5 насыщенностях.

Кириллица Кириллица стилистически соответствует латинице.

Конструкции знаков в целом уместные и синхронизированы с одноимённым гротеском.

Не совсем логичной выглядит отдельная форма кириллических Кк — их формы смело можно было копировать из латиницы

Портит картину Дд со скомканным левым нижним углом:

Лл — очень тяжёлое окончание штриха. Дд, Лл, а также Ч — довольно узкие.

В более насыщенных стилях Д ещё больше расплывается вправо, а Лл меняет характер — теперь штрих слева резко обрублен.

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

В капители в роли У выступает латинская Y — результат механического копирования логики строчных знаков, дизайн которых идентичен в латинице и кириллице. Та же проблема замечена в Alegreya Sans.

Наш совет

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

К оглавлению

Георг Даффнер

EB (Egenolff – Berner) Garamond — реконструкция на основе спесимена, набранного Конрадом Бернером в печатне Эгенольфа в 1592 году. По этому образцу шрифтов Клода Гарамона (пожалуй, самому известному) создано множество цифровых версий — но именно эта распространяется по бесплатной лицензии.

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

Шрифт довольно светлый, с невысокими строчными и длинными выносными элементами — параметры, хорошо работающие в крупнокегельном наборе.

Как часто бывает при воссоздании шрифтов Гарамона, в качестве модели для курсива была взята работа Робера Гранжона. Материал взят из того же образца Эгенольфа—Бернера и оцифрован столь же прямолинейно, с минимумом компенсаций.

В знаковом составе — обычные и старостильные цифры — пропорциональные и табличные, набор римских цифр, готовые дроби, комплекты верхних и нижних индексов, числителей и знаменателей, знаки валют, математические символы, пиктограммы и политипажи Политипаж — типовое украшение, например листок, стрелка или маникула (указующий перст)

Начертания 5 начертаний от Normal до Extra Bold с курсивами, а также вариативный шрифт с осью насыщенности.

Более тяжёлые начертания — исторического образца для них не существует — удались хуже, неравномерны по насыщенности, есть проблемы с межбуквенными расстояниями. В примере заметна тёмная а с недостаточным внутрибуквенным белым, слипшиеся пары bu и rg, отлетевший лёгкий хвост в f.

Кириллица Кириллица явно спроектирована с оглядкой на Adobe Garamond Premier Роберта Слимбаха — при отсутствии исторического прототипа объяснить такие совпадения сложно. Впрочем, это точно не механическая копия — несмотря на одинаковые конструкции буквы различаются пропорциями и подходом к деталям.

Самое заметное отличие — использование более современных трапециевидных Дд и Лл в EB Garamond:

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

Кроме того, эта деталь по-разному выглядит в строчных и прописных буквах.

Очень длинный язык э. Буква з падает вправо, а слева от нее слишком много воздуха.

Ы в курсиве распадается на части, есть проблемы с межбуквенными расстояниями в АТ.

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

Наш совет

EB Garamond — прямолинейная реконструкция с концептуальными и частными заимствованиями из Adobe Garamond Premier. Качество хромает, при возможности лучше использовать оригинал.

К оглавлению

Кристиан Талманн

Cormorant — акцидентное семейство в духе антикв французского Ренессанса. Несмотря на отсылку к шрифтам Клода Гарамона, Cormorant не является прямой реконструкцией.

Практика Светлый и контрастный шрифт; гладкие кривые, длинные выносные, острые и тонкие засечки — всё подчинено задаче автора: передать изящество шрифтов Гарамона, «очистив» их от влияния технологий металлического набора. Из-за обилия мелких деталей шрифт лучше всего смотрится в крупных кеглях.

Типографические возможности: лигатуры, контекстные и стилистические варианты знаков, чувствительные к регистру символы, прописные и старостильные цифры (оба варианта табличные и пропорциональные), порядковые числительные, дроби, нижние и верхние индексы, математические символы, пиктограммы, политипажи. Есть болгарский и сербский варианты кириллицы.

Начертания Несколько стилей прямого начертания: основной Cormorant Roman, Cormorant Garamond с альтернативными конструкциями и увеличением внутреннего белого в нескольких знаках, Cormorant Infant с одночастными и упрощенными формами, капитель Cormorant SC и юникейс Cormorant Unicase. У стилей Roman, Garamond и Infant есть обычные курсивы, а у стиля Roman есть и вертикальный курсив — без кириллицы.

В каждом стиле 5 насыщенностей, от Light до Bold.

Кириллица Характер кириллицы в целом соответствует латинской части шрифта, но в разных начертаниях используются разные решения — и логика этих различий не всегда очевидна.

Разная конструкция буквы б — в Roman она соответствует скорее статической, а не динамической антикве. В Garamond кириллическая у почему-то отличается от латинской y окончанием нижнего выносного элемента.

При этом в обоих курсивах конструкции б совпадают и соответствуют прямой б из стиля Roman.

Буквы Ии, м в Garamond изменили конструкции и теперь отсылают к более ранним эпохам, напоминая капитальное письмо.

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

Заметны различия в характере Чч в разных регистрах и стилях, наиболее приемлемая — строчная в Roman и Garamond.

В арке прописной Ч из Cormorant Roman — нехарактерное для динамического шрифта распределение толщин.

В Roman и Garamond разная логика вертикальных засечек в большой и маленькой Тт. Кроме того, вертикальные засечки различаются в строчной т и твердом знаке.

Наш совет

Cormorant пригоден для использования, но вам потребуется незаурядная внимательность, чтобы разобраться в системе начертаний.

К оглавлению

Production Type

Текстовый шрифт, обращающийся к истории французского шрифтового дизайна, но современный и универсальный, хорошо подходящий для чтения с экрана: Spectral разрабатывался в первую очередь как шрифт для Google Docs и Google Sheets — офисных инструментов для совместной работы.

Образ Spectral был вдохновлён шрифтом 19 века (Elzévir № 9, выпущен словолитней Warnery в 1882 году) — но финальный продукт далеко отошёл от исторического образца, в том числе в вопросе формообразования. У Spectral характерные для динамической антиквы контраст, открытость знаков и оси овалов.

Практика Высокое качество контуров знаков. Графические решения применены последовательно и стилистически единообразно. Подход к параметрам и деталям прагматичный: простая графика, прямые и ортогональные штрихи, вертикальные срезы (в том числе в курсиве) — всё это способствует хорошей растеризации и общей чёткости даже на экранах с небольшим разрешением. Большие полуапроши могут показаться излишними, но именно благодаря им Spectral создает важный, спокойный ритм и прекрасно работает в наборе больших тексов.

Типографические возможности: капитель, чувствительные к регистру символы, лигатуры, стилистические альтернативы, прописные и старостильные цифры — табличные и пропорциональные, порядковые числительные, дроби, нижние и верхние индексы.

Начертания 7 насыщенностей — от Extra Light до Extra Bold, c курсивами.

Капитель — в отдельном семействе Spectral SC.

Кириллица Кириллица в Spectral нарисована Ильей Рудерманом и Юрием Остроменцким — двумя из трех авторов этого обзора.

Наш совет

Spectral доступен в коллекции type. today — как и в случае с Google Fonts, совершенно бесплатно. В версии на нашем сайте капитель входит в основной шрифт и есть полный знаковый состав — например, расширенная кириллица. К сожалению, сейчас в обоих официальных версиях шрифта слишком большое пространство между двумя частями буквы Ы — мы ждем, когда Гугл устранит этот недочет.

К оглавлению

Эксперты: Михаил Струков, Илья Рудерман, Юрий Остроменцкий

Перевод на анлийский: Дина Мингалиева

Disable and Remove Google Fonts — Плагин для WordPress

• Детали
• Отзывы
• Установка
• Поддержка
• Разработка

Improve frontend performance by disabling Google Fonts loaded by themes and plugins.

Совместимость плагина

Плагин шрифтов будет работать со всеми темами WordPress и был специально протестирован со следующими:

• Twenty Twelve
• Twenty Thirteen
• Twenty Fourteen
• Twenty Fifteen
• Twenty Sixteen
• Twenty Seventeen
• Twenty Nineteen
• Twenty Twenty
• Avada
• Enfold
• Sydney
• Hestia
• Hueman
• Vantage
• ColorMag
• Shapely
• OnePress
• JupiterX
• Storefront
• Divi Extra
• Zerif Lite

It will also remove Google Fonts loaded by the following plugins:

• Divi
• MailPoet
• Elementor
• Beaver Builder
• Revolution Slider

Помимо повышения скорости загрузки страниц, удаление ссылок на шрифты Google также может помочь с соблюдением GDPR и DSGVO.

Ошибки

If you find an issue with this plugin, please let us know here!

Внесение вклада

Anyone is welcome to contribute to this plugin.

Вы можете внести свой вклад различными способами:

1. Укажите проблему
2. Translate the Disable and Remove Google Fonts plugin into different languages
3. Оставьте отзыв или предложение по улучшению

Загрузите «Disable and Remove Google Fonts», активируйте, и всё!

Будет ли моя тема работать с «Disable and Remove Google Fonts»?

Мы на 99,99 % уверены в этом. Если нет, то обратитесь в службу поддержки.

Easy & Perfect

thank you for this!

Thanks for this helpful plugin! greetingxxxx from germany

Einfach zu installieren Auf meine Frage wurde sofort geantwortet.

The plugin does not need any settings, so it is absolutely easy. In my case the Fonts could be removed successfully.

It is not removing all the google fonts. Even though Divi is listed. Pretty upsetting now a days, when there is so much going on about google fonts.

Посмотреть все 32 отзыва

«Disable and Remove Google Fonts» — проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:

Участники

• Danny Cooper

«Disable and Remove Google Fonts» переведён на 16 языков. Благодарим переводчиков за их работу.

Перевести «Disable and Remove Google Fonts» на ваш язык.

Заинтересованы в разработке?

Посмотрите код, проверьте SVN репозиторий, или подпишитесь на журнал разработки по RSS.

See changelog.txt for the complete ‘Disable and Remove Google Fonts’ changelog.

Мета

• Версия: 1.4.4
• Обновление: 6 дней назад
• Активных установок: 100 000+
• Версия WordPress: 4. 8 или выше
• Совместим вплоть до: 6.0.3
• Языки:

  Chinese (Taiwan), Dutch, Dutch (Belgium), English (UK), English (US), German, German (Austria), Greek, Italian, Persian, Russian, Spanish (Colombia), Spanish (Ecuador), Spanish (Mexico), Spanish (Spain), Spanish (Venezuela) и Swedish.

  Перевести на ваш язык

• Метки:

  Disable Google FontsdsgvoGDPRgooglegoogle fonts

• Дополнительно

Оценки

Посмотреть все

• 5 звёзд 30
• 4 звезды 0
• 3 звезды 1
• 2 звезды 1
• 1 звезда 0

Войдите, чтобы оставить отзыв.

Участники

• Danny Cooper

Поддержка

Решено проблем за последние 2 месяца:

45 из 56

Перейти в форум поддержки

Добавить Шрифты Google | Webflow University

Добавьте шрифты Google в настройки вашего проекта и используйте их в своем проекте Webflow.

 

У этого видео старый интерфейс. Скоро будет обновленная версия!

Клонировать этот проект

Стенограмма

Вы можете добавить дополнительные шрифты в свой проект непосредственно из раскрывающегося списка шрифтов на панели «Стиль». Просто выберите , добавьте шрифты , и мы перенесем вас в настройки вашего проекта → Настройки шрифтов . Там вы можете выбрать и добавить шрифтов Google в свои проекты.

Использование шрифтов Google — это лишь один из трех способов импорта дополнительных шрифтов в проекты Webflow. Два других — это шрифты Adobe (Typekit) и пользовательские шрифты, доступные во всех планах.

В этом уроке

• Просмотр шрифтов Google
  
• Добавление шрифта Google в проект
• Удаление шрифта Google 

Просмотр шрифтов Google

, посетите Google fonts [↗] , чтобы просмотреть в реальном времени коллекцию бесплатных веб-шрифтов Google. Оказавшись на странице Google Fonts, вы можете просматривать и сортировать различные категории и проверять, как будут отображаться шрифты. Это дает вам лучшее представление о том, как будет выглядеть шрифт определенного размера и толщины, прежде чем вы добавите его в свой проект Webflow.

Добавление шрифта Google в ваш проект

Когда вы определитесь с выбором, перейдите в свой проект Webflow:

1. Выберите шрифт из раскрывающегося списка под Настройки проекта → Шрифты → Шрифты Google

2. Выберите весовые варианты, языки и сценарии, которые вы хотите использовать для своего проекта. Вы всегда можете вернуться к этому позже, чтобы добавить или удалить выбор.

3. Добавить шрифт 

Выбранные шрифты будут доступны в конструкторе Webflow при следующей его загрузке. Обновите конструктор, если он у вас уже открыт.

Необходимо знать
Шрифты Google, которые уже доступны в Designer, например Lato, не будут отображаться в списке шрифтов Google в разделе Настройки проекта → шрифты .

Удаление шрифта Google

Чтобы удалить шрифт Google из проекта, просто удалите его в Настройки проекта → шрифты → шрифты Google.

Необходимо знать
Элементы в проекте, к которым все еще прикреплен шрифт после его удаления, по-прежнему будут отображаться как выбранные, но он будет отображаться как Times New Romans.

Попробуйте Webflow — это бесплатно

Был ли этот урок полезен? Дайте нам знать!

Спасибо за отзыв! Это поможет нам улучшить наш контент.

Свяжитесь с нашим сообществом

Свяжитесь со службой поддержки

Что-то пошло не так при отправке формы.

Связаться со службой поддержки

У вас есть предложение по уроку? Дайте нам знать

Спасибо! Ваша заявка принята!

Ой! Что-то пошло не так при отправке формы.

Откройте для себя наши курсы, связанные с этим уроком, и узнайте больше!

Руководство по клиенту по редактору

Промежуточное звено

CMS & Dynamic Content

Новичок — промежуточный

Перемещение вашего бизнеса онлайн

начинающий

Webflow 101 Crash Crash

Beginner — Промежуточный

The Best Fonts Fonts, Best Fonts, Best Fonts, Best Fonts, Best Fonts, Best Fonts, Best Fonts, Best Fonts, Best Fonts, Best Fonts, Best Fonts. Популярность

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

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

В этом посте мы рассмотрим 25 лучших шрифтов Google, отсортированных по популярности. Затем мы поделимся советами о том, как создать идеальное сочетание шрифтов, и обсудим лучшие практики использования веб-шрифтов в WordPress. Давайте начнем!

25 лучших шрифтов Google для вашего сайта

Вы ищете новые шрифты для своего сайта? Вот некоторые из самых популярных шрифтов Google, которые помогут вам выбрать идеальный шрифт для вашего контента.

5 Лучшие шрифты с засечками

Шрифты с засечками имеют крошечные штрихи (или «засечки») на концах каждой буквы. Эти шрифты имеют очень классический вид и излучают авторитет и традиции. Они могут передать доверие и надежность, что делает их идеальными для газет, журналов и серьезных деловых сайтов.

Давайте посмотрим на некоторые из лучших шрифтов в этой категории.

1. Roboto Slab

Roboto Slab содержит открытые кривые, которые позволяют буквам заполнять столько места, сколько им нужно. Он может обеспечить плавное чтение и хорошо сочетается со многими шрифтами без засечек, такими как Lato и Open Sans.

2. Merriweather

Merriweather был разработан, чтобы его было приятно читать на экране. Он имеет очень большую высоту по оси x и умеренное диагональное напряжение. Благодаря своему традиционному виду Merriweather является идеальным вариантом для литературных изданий и новостных сайтов. Кроме того, вы можете прекрасно комбинировать его с Merriweather Sans.

3. Playfair Display

Созданный под влиянием дизайна 18-го века, этот шрифт соответствует тому периоду. Он передает сильное чувство авторитета, а жирный шрифт может выделить ваш текст. Этот шрифт хорошо сочетается с шрифтом Georgia или его собратом Playfair Display SC.

4. Lora  

Lora — это современный хорошо сбалансированный шрифт с засечками, уходящий своими корнями в каллиграфию. Благодаря своим матовым изгибам и закругленным засечкам Lora достигает уникального внешнего вида с умеренным контрастом. Это делает его отличным выбором как для заголовков, так и для основного текста.

5. PT Serif

PT Serif разработан для «Государственных шрифтов Российской Федерации». Буквы кажутся немного вытянутыми, а также жирными и четкими. Как переходный шрифт с засечками и гуманистическими окончаниями, он отлично подходит для PT Sans.

Получите содержимое, доставленное прямо в ваш почтовый ящик

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

5 лучших шрифтов без засечек

Шрифты без засечек часто считаются более современными и неформальными по сравнению со шрифтами с засечками. Поскольку у них четкие буквы без штрихов, их намного легче читать на экране. Таким образом, они часто используются в блогах.

1. Roboto

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

2. Open Sans

Будучи гуманистическим шрифтом без засечек, Open Sans был разработан с прямым ударением, открытыми формами и нейтральным внешним видом. Это делает его отличным выбором для печатных, веб- и мобильных интерфейсов благодаря превосходной читаемости форм букв.

3. Lato

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

4. Монтсеррат

Монтсеррат был вдохновлен старыми плакатами и вывесками Буэнос-Айреса. Таким образом, он отражает красоту городской типографики. Однако его сделали светлее, что делает его более подходящим для длинных текстов.

5. Poppins

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

5 Лучшие шрифты дисплея

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

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

1. Bebas Neue

Bebas Neue — отличный вариант для заголовков. У него четкие линии и элегантные формы. Благодаря расширенному набору символов и функциям OpenType это семейство особенно подходит для профессиональных пользователей. Кроме того, он хорошо сочетается со шрифтами с засечками и без засечек, такими как Montserrat и Playfair Display.

2. Омар

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

3. Comfortaa

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

4. Abril Fatface

Этот шрифт вдохновлен тяжелыми шрифтами заголовков, которые использовались в рекламных плакатах в Британии и Франции 19-го века. Его четкие изгибы и высокая контрастность помогут вам привлечь внимание читателей.

5. Alfa Slab One

Благодаря стильному и современному внешнему виду Alfa Slab One излучает насыщенный черный цвет. Это привлекательный шрифт с толстыми и закругленными символами.

5 Лучшие рукописные шрифты

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

Давайте посмотрим на некоторые из лучших рукописных шрифтов.

1. Dancing Script

Как следует из названия, Dancing Script — это живой, непринужденный сценарий, в котором буквы подпрыгивают и слегка меняются. Шляпки большие и простираются ниже базовой линии, создавая дружелюбный, спонтанный вид.

2. Pacifico

Pacifico — это оригинальный рукописный шрифт, вдохновленный американской культурой серфинга 1950-х годов. Он был заказан Google и претерпел несколько итераций. Это забавный шрифт, который может добавить индивидуальности вашему контенту.

3. Shadows Into Light

Shadow Into Light излучает женственность благодаря красивым закругленным краям и изгибам. Это делает его идеальным шрифтом для веб-сайтов, ориентированных на женскую аудиторию.

4. Инди-цветок

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

5. Предостережение

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

5 Лучшие моноширинные шрифты

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

1. Roboto Mono

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

2. Inconsolata

Inconsolata была разработана для печати листингов кодов и вдохновлена ​​отсутствием «программных шрифтов». Таким образом, это блестящий шрифт, если вы хотите добиться внимания к деталям для рендеринга с высоким разрешением.

3. Source Code Pro

Source Code Pro имеет те же вертикальные пропорции, что и Source Sans. Однако буквы немного растянуты. Это делает его идеальным для сред кодирования.

4. IBM Plex Mono

IBM Plex Mono может похвастаться превосходной читаемостью в печатном, веб- и мобильном интерфейсах. Этот шрифт с нейтральным, но дружелюбным шрифтом в стиле гротеска отлично подходит для отображения фрагментов кода. Кроме того, он хорошо работает с Plex Sans и Serif.

5. Space Mono

Буквенные формы Space Mono, разработанные для редакционного использования в заголовках и типографике, сочетают в себе геометрическую основу и гротескные детали. Шрифт обладает многими качествами, часто встречающимися в шрифтах заголовков 19-го века.60-е годы.

Как создать идеальное сочетание шрифтов для вашего сайта

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

Вы можете использовать такой инструмент, как Font Pair, чтобы получить идеи для комбинаций:

Кроме того, на веб-сайте Google Fonts можно найти несколько советов по сочетанию шрифтов. Например, он предлагает советы по объединению шрифтов внутри семейств и сочетанию шрифтов одного и того же дизайнера шрифтов, такого как Epilogue и Anybody.

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

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

Рекомендации по использованию Google Fonts в WordPress

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

1. Сведите к минимуму задержки загрузки страницы

Чтобы создать веб-сайт с хорошим дизайном, важно учитывать взаимодействие с пользователем (UX), поисковую оптимизацию (SEO) и основные веб-жизненные показатели. Эти факторы могут помочь вам поддерживать стабильный поток трафика, повышая вероятность превращения посетителей в клиентов. Быстрое время загрузки играет большую роль в производительности вашего сайта.

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

Чтобы выбрать стили, которые вы хотели бы использовать, не загружая все семейство шрифтов, посетите специальную страницу шрифтов и щелкните знак плюса ( + ) рядом с вашими предпочтительными стилями:

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

2. Выберите шрифт, который регулярно обновляется

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

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

3. Убедитесь, что ваш контент доступен 

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

Вы можете изменить размер и цвет шрифта, чтобы сделать его более четким. При этом важно следовать Руководству по доступности веб-контента, чтобы обеспечить легкий доступ к вашему контенту для всех пользователей. Кроме того, вы можете использовать такие инструменты, как Color Contrast Checker, чтобы проверить удобочитаемость текста.

Оптимизируйте свой сайт с помощью шрифтов

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