Новые бесплатные шрифты для ваших проектов

Mixfont

Генератор Mixfont моментально подбирает комбинации. Кнопка Get Started открывает «портал» в перебор сочетаний: сервис случайным образом комбинирует больше тысячи шрифтов в сотни тысяч пар.

Преимущество

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

Особенности

• Благодаря случайному подбору высока вероятность уникальных комбинаций. С другой стороны, в основе этих сочетаний не лежит теория типографики или фундаментальные законы эстетики: дизайнеру самому нужно оценивать каждую сгенерированную пару с точки зрения вкуса, целесообразности, логики использования.
• Если кликнуть по названию шрифта вверху страницы, то он зафиксируется, и генератор не будет его менять.
• Ввести свой текст вместо демонстрационного нельзя. А чтобы выяснить, поддерживает ли понравившийся вам шрифт кириллицу, понадобится его гуглить.
• Кнопки скачивания или покупки нет, но сервис генерирует html-коды и CSS-правила для интеграции шрифтов в сайт.

Как установить шрифт SpriteGraffiti на сайт

Для установки шрифта «SpriteGraffiti» на сайт необходимо скопировать все файлы шрифта в папку, например, «fonts/spritegraffiti». В файле стилей подключить шрифт, используя конструкцию CSS:

Скопировать в буфер обмена

@font-face {
	font-family: "SpriteGraffiti";
	src: url("../fonts/spritegraffiti/spritegraffiti.eot"); /* IE9 Compat Modes */
	src: url("../fonts/spritegraffiti/spritegraffiti.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
		url("../fonts/spritegraffiti/spritegraffiti.otf") format("opentype"), /* Open Type Font */
		url("../fonts/spritegraffiti/spritegraffiti.svg") format("svg"), /* Legacy iOS */
		url("../fonts/spritegraffiti/spritegraffiti.ttf") format("truetype"), /* Safari, Android, iOS */
		url("../fonts/spritegraffiti/spritegraffiti.woff") format("woff"), /* Modern Browsers */
		url("../fonts/spritegraffiti/spritegraffiti.woff2") format("woff2"); /* Modern Browsers */
	font-weight: normal;
	font-style: normal;
}

Установить шрифт «SpriteGraffiti» для требуемого текста, поля, кнопки или другого элемента на сайте:

font-family: "SpriteGraffiti";

Пример применения шрифта «SpriteGraffiti»:

body {
	font-family: "SpriteGraffiti";
	font-size: 1rem;
	font-weight: normal;
	line-height: 1.2;
	color: #000;
	background-color: #fff;
}

Информация о шрифте SpriteGraffiti

Полное название шрифта

SpriteGraffiti Regular 400

Семейство

Начертание шрифта

Regular (Обычный)

Насыщенность шрифта

400 — нормальное (Normal)

Версия шрифта

Version 001.000

Идентификатор шрифта

Arsek&Erase: Sprite Graffiti: 2014

PostScript название шрифта

SpriteGraffiti

Авторское право на шрифт

Copyright (c) 2014 by Arsek & Erase. All rights reserved.

Поддержка символов

латинские буквы, русские буквы (кириллица), цифры, знаки препинания и пунктуации

Регистр букв шрифта

верхний (прописные буквы)

Категории шрифта SpriteGraffiti

Бесплатные шрифты, Граффити шрифты, Заглавные шрифты, Кириллические шрифты, Латинские шрифты, Русские шрифты

Предварительный просмотр SpriteGraffiti

Шрифт SpriteGraffiti с поддержкой латиницы

Предварительный просмотр шрифта «SpriteGraffiti» с прописными латинскими буквами (английский алфавит A-Z).

Шрифт SpriteGraffiti с поддержкой кириллицы

Предварительный просмотр шрифта «SpriteGraffiti» с прописными русскими буквами (кириллица, русский алфавит А-Я).

Шрифт SpriteGraffiti с поддержкой цифр

Предварительный просмотр шрифта «SpriteGraffiti» с цифрами (0 1 2 3 4 5 6 7 8 9).

Шрифт SpriteGraffiti с поддержкой знаков препинания и пунктуации

Предварительный просмотр шрифта «SpriteGraffiti» со знаками препинания и пунктуации (, . / ? ; ‘ : { } \ | ` ~ ! @ # $ % ^ & * ( ) — _ + =).

Скачать шрифт SpriteGraffiti

Шрифт SpriteGraffiti доступен для скачивания в 6 форматах: EOT, OTF, SVG, TTF, WOFF, WOFF2 (IE9 в режиме совместимости, IE6-IE8, Open Type Font, устаревшая iOS, Safari, Android, iOS и любой современный браузер).Внимание! Скачать шрифт SpriteGraffiti возможно только для некоммерческого использования!

Подробная инструкция по скачиванию шрифтов в статье «Как скачать шрифт на сайте»

Как установить шрифт SpriteGraffiti на сайт

Для установки шрифта «SpriteGraffiti» на сайт необходимо скопировать все файлы шрифта в папку, например, «fonts/spritegraffiti». В файле стилей подключить шрифт, используя конструкцию CSS:

Скопировать в буфер обмена

@font-face {
	font-family: "SpriteGraffiti";
	src: url("../fonts/spritegraffiti/spritegraffiti.eot"); /* IE9 Compat Modes */
	src: url("../fonts/spritegraffiti/spritegraffiti.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
		url("../fonts/spritegraffiti/spritegraffiti.otf") format("opentype"), /* Open Type Font */
		url("../fonts/spritegraffiti/spritegraffiti.svg") format("svg"), /* Legacy iOS */
		url("../fonts/spritegraffiti/spritegraffiti.ttf") format("truetype"), /* Safari, Android, iOS */
		url("../fonts/spritegraffiti/spritegraffiti.woff") format("woff"), /* Modern Browsers */
		url("../fonts/spritegraffiti/spritegraffiti.woff2") format("woff2"); /* Modern Browsers */
	font-weight: normal;
	font-style: normal;
}

Установить шрифт «SpriteGraffiti» для требуемого текста, поля, кнопки или другого элемента на сайте:

font-family: "SpriteGraffiti";

Пример применения шрифта «SpriteGraffiti»:

body {
	font-family: "SpriteGraffiti";
	font-size: 1rem;
	font-weight: normal;
	line-height: 1.2;
	color: #000;
	background-color: #fff;
}

В поисках Web-безопасных шрифтов

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

Отдельные шрифты можно назвать безопасными с некоторыми оговорками.

Основой для определения «безопасных» шрифтов послужили шрифты наиболее распространенной операционной системы Windows, которые кроме того используются в других ОС. Примером такого использования служит уже упоминавшийся пакет шрифтов Core fonts for the Web, который, согласно статистике, скачало множество пользователей Unix/Linux.

В это пакет входят следующие шрифты: Andale Mono, Arial Black, Arial, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, Webdings

Все они поддерживают кириллицу, что немаловажно для рунета

В набор шрифтов входящих в стандартную поставку Mac OS X (эта ОС имеет наибольшее распространение среди пользователей Mac OS) входят все шрифты набора Core fonts for the Web.

Таким образом на основе шрифтов Windows, использующихся в других ОС сформировался следующий список так называемых «безопасных» Web-шрифтов:

1. Arial
2. Arial Black
3. Comic Sans MS
4. Courier New
5. Georgia
6. Impact
7. Times New Roman
8. Trebuchet MS
9. Verdana

Шрифт Webdings содержит набор пиктограмм, поэтому не может использоваться для контента. Andale Mono не получает широкого применения, поскольку плохо годится для повседневного чтения текста с экрана и есть не у всех пользователей Windows.

Все эти шрифты есть у каждого пользователя Windows, Mac OS X и у подавляющего большинства пользователей Unix/Linux (т.е. у тех, которые установили у себя пакет Core fonts for the Web).

А как же быть с остальными? Ведь хочется, чтобы замысел дизайнера увидело как можно большее число пользователей!

Typespiration

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

Преимущество

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

Особенности

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

Как сочетать цвета: 8 сервисов в помощь дизайнеру.

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

Fontpair

Fontpair — это иллюстрированная библиотека пар и галерея популярных бесплатных шрифтов. Готовые пары здесь встроены в макеты веб-страниц.

Преимущество

Все шрифты — из бесплатной библиотеки Google Fonts.

Особенности

• Макеты веб-страниц показывают, как готовые комбинации выглядят «в бою». Они же служат референсами или источниками вдохновения — например, готовая карточка покажет, как смотрится пара Raleway и Nunito Sans на лендинге HR-стартапа.
• Под каждой иллюстрацией пары есть два редактируемых поля — в них можно ввести свой заголовок и текст. Там же — кнопка для скачивания обоих шрифтов.
• Небольшие визитки в галерее популярных Google-шрифтов демонстрируют варианты начертания и дают короткие советы по использованию. Например, визитка Comfortaa подсказывает, что он «дружелюбный», а надпись на карточке Bebas Neue предупреждает, что не стоит использовать его в теле текста.

Typotheque

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

Что такое лицензии на шрифты и как их правильно покупать? Читайте наш большой разбор.

Преимущество

Быстрая «примерка» шрифтов на компактном макете вёрстки.

Особенности

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

Обратите внимание: функция «копировать — вставить» работает плохо, поэтому текст в редактируемом поле лучше печатать.
Ручная подборка сочетаний работает по функции drag-and-drop: «захватывайте» шрифт из обширного списка и «бросайте» его на макет.

Adobe Fonts

Библиотека Adobe Fonts входит в платный пакет Adobe Creative Cloud. Он даёт доступ к 20 000 шрифтов и позволяет в один клик интегрировать их во все приложения Adobe.

Преимущество

Если есть подписка Adobe Creative Cloud, то дополнительно покупать шрифты не потребуется.

Особенности

Отдельного инструмента для комбинации шрифтов в Adobe Fonts нет, однако в разделе «Рекомендации» собраны примеры пар

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

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

Adobe Fonts предлагает сочетать шрифт Ethnocentric с Termina, Forma или Grenadine для оформления текста в стиле «мета».