9 способов определить шрифты из изображений и веб-текста и как загрузить шрифты на свой сайт

Montserrat

Montserrat — это один из шрифтов, наиболее удобных для чтения. Без засечек, созданный Джульеттой Улановски в 1989 году — с тех пор невероятно распространённый. В Montserrat есть все варианты начертаний: от ультратонкого до жирного, — а также соответствующие курсивы.

У этого шрифта примерно одинаковое соотношение ширины и высоты, поэтому он удобен практически для всех типов проектов. За исключением, пожалуй, только интерфейсов и мобильных приложений. С 2019 года, когда в моду вошли широкие шрифты для заголовков (например, Druk Wide), Montserrat переживает новую волну популярности.

Примеры: welcometonext.com, melonfashion.ru, userflower.com.

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

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

Europe Bold 700

Семейство

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

Bold (Жирный)

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

700 — жирное (Bold)

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

001.001

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

FontMonger:Europe Bold

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

EuropeBold

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

Copyright (C) 1993; Type Market Ltd. Moscow, 119136, Box 20; phone:(095)1427712; Created by A.Kustov

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

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

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

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

Категории шрифта Europe Bold

Бесплатные шрифты, Кириллические шрифты, Латинские шрифты, Русские шрифты, Шрифты без засечек

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

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

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

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

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

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

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

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

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

Скачать шрифт Europe Bold

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

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

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

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

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

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

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

font-family: "Europe Bold";

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

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

Избранные шрифты Google

Проект Google Fonts был запущен в 2010 году, как одна из инженерных инициатив. Бесплатные web-шрифты аудитория восприняла очень тепло. На тот момент с платформы можно было скачать всего 14 разных шрифтов. А сейчас речь уже идёт примерно об 1 тыс. различных семейств (из них пока чуть более сотни поддерживают кириллицу).

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

Но обычные пользователи могут воспользоваться советами Google и обратить внимание на специальные подборки от дизайнеров IT-гиганта:

  1. IBM Plex – семейство корпоративных шрифтов от команды IBM Brand & Experience (BX&D) в гротескном стиле. Отличный выбор для комплексного оформления современных печатных изданий и сайтов.
  2. Суперсемейство шрифтов Superfamilies – специальная коллекция шрифтов с хорошей согласованностью стилей (с засечками и без них, для заголовков, выделения кода, цитат, обычного текста, вплывающих подсказок и т.д.). В подборку включены семейства Alegreya, Merriweather, Nunito, Roboto и Quattrocento.
  3. Коллекция обновлённых шрифтов — 2016 Fonts Refresh. Сюда вошли многие популярные шрифты, которым Google добавила поддержку разных языков, в том числе кириллицу. В подборку вошли Rubik, Pacifico, Quicksand, Inconsolata, Cabin, VT323 и Nunito.

Идеальные шрифты для сочетания «Заголовок-Текст»

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

  • Заголовок – Cormorant Garamond, основной текст – Proza Libre.
  • Заголовок – Libre Franklin, основной текст – Libre Baskerville.
  • Заголовок – Trirong, основной текст – Rubik.
  • Заголовок – Work Sans, основной текст – Taviraj.
  • Заголовок – Eczar, основной текст – Gentium Basic.

Оригинальные дисплейные шрифты от Google

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

  • Bungee
  • Rubik
  • Bungee Shade
  • Fruktur
  • BioRhyme
  • Monoton
  • Ewert
  • Gravitas One
  • Creepster
  • Black Ops One

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

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

  • Scope One
  • Arvo
  • Lora (bold)
  • Bitter
  • Copse
  • Sanchez
  • Trocchi
  • Cutive
  • Slabo (27px и выше)
  • Vesper Libre
Рейтинг
( Пока оценок нет )
Editor
Editor/ автор статьи

Давно интересуюсь темой. Мне нравится писать о том, в чём разбираюсь.

Понравилась статья? Поделиться с друзьями:
3D-тест
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: