15 шрифтов для печати, сайтов, логотипов и приложений: часть вторая

Устоявшиеся шрифтовые пары

Есть, в принципе, устоявшиеся пары, которые можно брать и использовать. Например, Baskerville и Gill Sans. Видим жирное начертание в заголовке, шрифт с засечками, текст написан шрифтом без засечек. Также достаточный контраст – мы видим разницу между этими двумя шрифтами.

Также Garamond и Verdana (рис.7).

Рис. 7 Пример сочетания Garamond и Verdana

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

Proxima Nova и Palatino – тут наоборот, мы используем Proxima Nova заголовки – это шрифт без засечек (рис.8). И Palatino, может быть, можно использовать для каких-то книжных наборов, для наборов, возможно, статей. Palatino + Proxima Nova (рис.9).

Рис.8  Пример сочетания Proxima Nova и Palatino

Рис.9  Пример сочетания  Palatino и Proxima Nova

Еще один пример – PT Sans и PT Serif. Это шрифты, которые находятся в составе одной гарнитуры, то есть, так называемые шрифты одной природы. То есть, Sans в заголовке, Serif в основном тексте (рис.10).

Рис.10 Пример сочетания  PT Sans и PT Serif

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

Helvetica + Times (рис.11).

Рис.10 Пример сочетания Helvetica и Times

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

Рис.11 Пример сочетания Times italic и Helvetica Neue

Покрытие [ править ]

По состоянию на 29 декабря 2020 года насчитывается 195 шрифтов Noto, из которых 156 — это стиль без засечек , 29 — стиль с засечками , а остальные 10 шрифтов не классифицируются как шрифты с засечками или без засечек. Шрифт Noto Color Emoji работает только под Android и Linux и не может быть установлен под macOS или Microsoft Windows .

Шрифты Noto охватывают 150 из 154 скриптов, определенных в Unicode версии 13.0 (выпущенной в марте 2020 года), а также различные слоги и эмодзи, которые не относятся к конкретному скрипту.

По состоянию на октябрь 2016 года все скрипты, закодированные до версии Unicode 6.0 (выпущенной в октябре 2010 года), были покрыты шрифтами Noto, хотя не все символы, определенные в версии Unicode 6.0, были покрыты. В частности, только около 30 000 из 74 616 унифицированных идеографов CJK, определенных в Unicode версии 6.0, были покрыты шрифтами Noto. Ни один из 53 скриптов и 1 блока, закодированных между версиями Unicode 6.1 и 11.0, не был охвачен шрифтами Noto, хотя некоторые символы, эмодзи и символы, добавленные в существующие скрипты после версии 6.0, были охвачены. Целью разработки «Фазы 3» является охват всех символов Unicode версии 9.0, за исключением большинства унифицированных иероглифов CJK за пределами базовой многоязычной плоскости .

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

Система 5: С засечками для чтения / Без засечек для маркировки

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

Пример из жизни: New York Times особенно хорошо смешивает шрифт NYT Cheltenham с засечками для чтения и шрифт NYT Franklin без засечек для марикровки данных. Несмотря на то, что это два совершенно разных шрифта, они работаю вместе, потому что буквы имеют дополнительную апертуру, большую X-высоту и одинаковую ширину штриха при соответствующих весах.

На следующем графике отображена такая система с использованием шрифта Lora для заголовка и подзаголовка и шрифта Libre Franklin для содержимого маркировки.

Используемые шрифты: Lora — шрифт Google, оптимизированный для экрана, но также хорошо подходящий и для печатных проектов. Текст диаграммы — Libre Franklin, это шрифт на основе Franklin. Он относится к группе шрифтов, вдохновленных оригинальным шрифтом Franklin Gothic, созданным примерно в 1910 году.

Указанные в тексте шрифты и системы являются взаимозаменяемыми. Ниже приведён список упомянутых гарнитур:

1. Lato
2. Assistant
3. Noto Sans
4. Source Sans Pro
5. Libre Franklin

Это шрифты, подходящие для заголовков:

1. PT Sans
2. Merriweather
3. Lora

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

X-высота

X-высота — это высота строчных букв. Так как строчные буквы иногда имеют разную высоту, этот параметр измеряется с помощью буквы «х».

Х-высота напрямую влияет на то, насколько шрифт читаем при небольших размерах. Взгляните на изображение выше. Все эти шрифты имеют размер в 10 пунктов. Какой шрифт вы считаете наиболее читабельным? Gill Sans и Athelas имеют меньшую Х-высоту, что затрудняет чтение текста. Open Sans, Noto Sans и Lato имеют большую Х-высоту, что обеспечивает удобство чтения при небольших размерах. При выборе шрифта для визуализации данных выберите шрифт с большой Х-высотой.

Обратите внимание: у Lato хорошая высота по оси Х, но укорочена длина линии.
Если ваша визуализация имеет ось Х с ограниченным пространством, вы можете рассмотреть более сжатую гарнитуру, как, например, Lato

Шрифт и характер текста

Шрифты имеют собственный язык и помимо текста несут в себе определенную информацию

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

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

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

Шрифтов очень много, поэтому при поиске подходящего, думайте о том, какие ассоциации он вызывает у вас. Если в чем-то не уверены – вспомните о правиле «ЛУЧШЕ — ПРОЩЕ»

Приведем несколько классических примеров использования шрифтов:

1. Шрифты с засечками категории Serif (Times new roman, Garamond Text, Angelica Pro, Theano и другие) считаются классическими для печатных изданий.

2. Более современные шрифты без засечек из группы Sans Serif (Helios Antique, Bronto, Helvetica, Roboto) используются на десктопах и мобильных приложениях.

3. Такие шрифты как Comic Sans, Curls, Papyrus считаются устаревшими и вместо них лучше использовать варианты, которые меньше отвлекают пользователей от смысла текста.

4. Популярность набирают новые шрифты, вытесняющие классические Roboto и Helvetica

Среди тех, на которые можно обратить внимание при выборе шрифта для вашего проекта, следующие:

• Leto Sans
• Geometria
• AngelicaPro
• Gotham
• Circe
• Google Product Sans
• San Francisco

Правила подбора шрифтовых пар

Со времен первой печатной книги создано много шрифтов. Как прекрасных так и ужасных. Поэтому не все годятся для страниц вашего проекта. Давайте разберемся почему?

Правило 1: «Мы с Татьяной ходим парой»

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

Однако шрифтовая абракадабра на странице не дизайнерский моветон, а сложности для того, кто смотрит страницу

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

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

Правило 2: «Гармония в контрасте»

Шрифты одной пары обязаны быть в равной мере как непохожими, так и похожими друг на друга. Добивайтесь гармонии в контрасте. Удачное сочетание образуют шрифты, у которых общие черты. На практике добиться гармонии сложно: признаков несовместимостей шрифтов много. Главная причина… в их слишком большом сходстве.

Правило 3: «Размер, начертание, цвет – разве товарищей нет?».

Исходя из правила 2, как шрифтовую пару можно использовать один и тот же шрифт! Контраст создадут размер кегля (или написание в режиме «ЗАГЛАВНАЯ/прописная»), начертания (нормал, болд (жирный) и италик (курсив)), наклон (вместо курсива) и цветовые решения (цвет символов) и дизайнерские решения-аксессуары (вроде теней и прочего). Данное правило, подтверждает всякий текстовой редактор, организующий текст на странице.

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

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

Правило 4. «Каркас – всему голова»

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

«Плодородно» поле каркаса на «скрещивание» шрифтов одного семейства. Шрифты семейств serif и sans serif — обладатели широкого выбора толщин и начертаний, ширины символов и межсимвольного расстояния. Это дает до 40 вариантов написания даже у одной шрифтовой пары.

Правило 5. «Подобное к подобному».

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

Правила 6. «Фи!!! Какая гадость!».

Ряд шрифтов в дизайнерской среде считается моветоном, признаком отсутствия вкуса. Назовем несколько из них: lobster, Papyrus, Curlz, Comic sans и подобные. Не сказать, что кто-то где-то просто решил, что они плохие, и все. Эти шрифты из-за своей «разлапистой» графики и вправду с трудом сочетаются с другими. К тому же они «настроенческие» (см. правило 7).

Правило 7. «Когда очень хочется, то можно

Но осторожно!»

(Только для опытных дизайнеров и любителей экспериментировать!)

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

Вариант 1 (Совершенно нет сходства)

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

Вариант 2 (Настроение)

Наберите одно слова разными шрифтами. Даже стандартные начертания одного шрифта создают настроения

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

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

Шрифтовая пара для сайта: где подобрать?

И напоследок – где брать шрифты. Сделайте просто скриншот – посмотрите потом по ссылкам (рис.12):

Рис.12 Где брать шрифты

• google.com/fonts/ — это каталог бесплатных шрифтов от Google
• typekit.com – похож по модели, по концепции. Мы можем оттуда брать шрифты и использовать их в web-е, например, сразу же.
• myfonts.com – огромная база шрифтов. Там очень много английских шрифтов, латиницы и, на самом деле, также есть и кириллица.
• paratype.ru – огромное количество российских шрифтов. Они не самые дешевые, но на сайте Paratype (у них в группе) часто бывают акции. Когда они запускают какой-то очередной новый шрифт, они его продают очень дешево. Поэтому имеет смысл подписаться на их группу в Facebook.

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

На этом все. Если тема типографики и вообще веб дизайна вам интересна — то советую посмотреть мой бесплатный мастер-класс по профессии веб дизайнера.

Текст в современном дизайне

Текст – это самый популярный способ передачи информации, знакомый каждому!

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

Текст может стать центральным объектом дизайна, вокруг которого уже строятся другие элементы – изображения, ссылки, иконки.

Пример использования крупной надписи в дизайне сайта violin-rio.dance

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

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

Таблица сочетания шрифтов

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

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

Заголовок

Текст

Arial

Comic Sans

Courier New

Garamond

Times

PT Serif

PT Sans

Verdana

Roboto

Tahoma

Palatino

Arial

****

***

****

****

*****

****

****

***

***

***

****

Comic Sans

**

***

**

**

**

**

**

**

**

**

**

Garamond

****

**

***

****

***

****

***

****

****

****

***

Times

****

**

***

***

****

***

***

****

****

****

***

PT Serif

****

**

***

***

***

****

****

****

****

****

***

PT Sans

***

***

***

***

***

*****

****

***

***

***

****

Verdana

***

***

****

****

****

****

***

****

***

***

****

Roboto

***

***

****

****

***

****

***

***

****

***

****

Tahoma

***

***

****

*****

****

****

***

***

***

****

****

Palatino

****

**

***

***

*****

***

****

***

****

****

****

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

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

Open Sans Regular 400

Семейство

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

Regular (Обычный)

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

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

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

Version 1.10

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

Ascender — Open Sans Build 100

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

OpenSans

URL поставщика

http://www.ascendercorp.com/typedesigners.html

Описание лицензии

Licensed under the Apache License, Version 2.0

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

Digitized data copyright 2010-2011, Google Corporation.

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

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

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

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

Категории шрифта Open Sans

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

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

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

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

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

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

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

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

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

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

Скачать шрифт Open Sans

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

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

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

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

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

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

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

font-family: "Open Sans";

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

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

Синтаксис

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

В приведённом ниже примере перечислены два семейства шрифтов, первое , а второе как :

Имя семейства шрифтов. К примеру, «Times» и «Helvetica» это семейства шрифтов. Названия семейства шрифтов, которые содержат пробелы, должны быть взяты в кавычки.

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

Глифы имеют завершающие штрихи, расширяющиеся или сужающиеся концы, или имеют фактически зазубренные окончания.
Например, «Lucida Bright», «Lucida Fax», Palatino, «Palatino Linotype», Palladio, «URW Palladio», serif.

Глифы имеют гладкие окончания.
Например, «Open Sans», «Fira Sans», «Lucida Sans», «Lucida Sans Unicode», «Trebuchet MS», «Liberation Sans», «Nimbus Sans L», sans-serif.

Все глифы имеют одинаковую фиксированную ширину.
Например, «Fira Mono», «DejaVu Sans Mono», Menlo, Consolas, «Liberation Mono», Monaco, «Lucida Console», monospace.

Глифы в курсивных шрифтах обычно имеют либо соединительные штрихи, либо другие рукописные характеристики, отличные от наклонных (italic) шрифтов. Глифы частично или полностью связаны, и результат больше напоминает рукописное перо или кисть, чем печатные буквы. Например, «Brush Script MT», «Brush Script Std», «Lucida Calligraphy», «Lucida Handwriting», «Apple Chancery», cursive.

Фэнтезийные шрифты — это прежде всего декоративные шрифты, которые содержат игривое представление персонажей. Например, Papyrus, Herculanum, Party LET, Curlz MT, Harrington, fantasy.

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

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

Шрифты, специально предназначенные для отображения эмодзи.

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

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

Например, следующие объявления являются валидными:

Следующие объявления являются не валидными:

где

Дополнительная информация о шрифте

Детали шрифта

Создан2010-12-20

Просмотр1

Количество глифов869

Единиц на Em2048

Права внедренияPазрешено внедрение для редактирования

Класс семействаБез засечек

НасыщенностьПолу-светлый

ШиринаСредний (нормальный)

Mac стильЖирные

НаправлениеГлифы направленные слева направо + нейтральные

УзорPегулярный

ВысотаНе моноширинный

Пакет содержит 13 нижеуказанных шрифта(ов):

OpenSans-Regular.ttf
OpenSans-BoldItalic.ttf
OpenSans-SemiboldItalic.ttf
OpenSans-LightItalic.ttf
OpenSans-Semibold.ttf
OpenSans-ExtraBold.ttf
OpenSans-Italic.ttf
OpenSans-Light.ttf
OpenSans-ExtraBoldItalic.ttf
OpenSans-Bold.ttf
OpenSans-CondLightItalic.ttf
OpenSans-CondBold.ttf
OpenSans-CondLight.ttf

Open Sans Bold Italic

Ascender CorporationВеб-сайт

TrueTypeБесплатная

• Ударения (частичные)
• Ударения (полные)
• Евро

OpenSans-BoldItalic.ttf

Open Sans Semibold Italic

Ascender CorporationВеб-сайт

TrueTypeБесплатная

• Ударения (частичные)
• Ударения (полные)
• Евро

OpenSans-SemiboldItalic.ttf

Open Sans Light Italic

Ascender CorporationВеб-сайт

TrueTypeБесплатная

• Ударения (частичные)
• Ударения (полные)
• Евро

OpenSans-LightItalic.ttf

Open Sans Semibold

Ascender CorporationВеб-сайт

TrueTypeБесплатная

• Ударения (частичные)
• Ударения (полные)
• Евро

OpenSans-Semibold.ttf

Open Sans Extrabold

Ascender CorporationВеб-сайт

TrueTypeБесплатная

• Ударения (частичные)
• Ударения (полные)
• Евро

OpenSans-ExtraBold.ttf

Open Sans Italic

Ascender CorporationВеб-сайт

TrueTypeБесплатная

• Ударения (частичные)
• Ударения (полные)
• Евро

OpenSans-Italic.ttf

Open Sans Light

Ascender CorporationВеб-сайт

TrueTypeБесплатная

• Ударения (частичные)
• Ударения (полные)
• Евро

OpenSans-Light.ttf

Open Sans Extrabold Italic

Ascender CorporationВеб-сайт

TrueTypeБесплатная

• Ударения (частичные)
• Ударения (полные)
• Евро

OpenSans-ExtraBoldItalic.ttf

Open Sans Bold

Ascender CorporationВеб-сайт

TrueTypeБесплатная

• Ударения (частичные)
• Ударения (полные)
• Евро

OpenSans-Bold.ttf

Open Sans Condensed Light Italic

Ascender CorporationВеб-сайт

TrueTypeGNU/GPL

• Ударения (частичные)
• Ударения (полные)
• Евро

OpenSans-CondLightItalic.ttf

Open Sans Condensed Bold

Ascender CorporationВеб-сайт

TrueTypeGNU/GPL

• Ударения (частичные)
• Ударения (полные)
• Евро

OpenSans-CondBold.ttf

Open Sans Condensed Light

Ascender CorporationВеб-сайт

TrueTypeGNU/GPL

• Ударения (частичные)
• Ударения (полные)
• Евро

OpenSans-CondLight.ttf

STAMPSY

На сайте Stampsy используется PF Bague Sans Pro для заголовков и шрифта интерфейса.

Шрифт круто смотрится в веб-дизайне, но его также можно использовать в газетах и журналах моды. На скриншоте выше видно, как его применили в дизайне плеера. Второй шрифт — это известный Minion Pro Condensed, который круто смотрится рядом с Bague. Вместе они образуют великолепную связку, как молодая пара хипстеров из Портленда. Ещё я думаю, что было рискованно выбирать Condensed версию Minion, но в результате всё получилось очень цельным и спокойным.

На главной странице они используют те же шрифты, но наоборот. Здесь шрифт текста — это Minion Pro Condensed, а текст заголовков — PF Bague Regular. В целом, эта страница смотрится свежо. Приятные цвета, нет избытка текста, перегружающего страницу. Мне нравится подход, в котором суть проекта отображается в пяти больших слайдах. Иногда трудно описать свой проект коротко и быстро, но всегда есть смысл попробовать так сделать.

В миниатюрной версии плеера также используется PF Bague. Он по-прежнему круто смотрится в интерфейсах. А ещё он лаконичен и сохраняет изюминку, цепляющую взгляд посетителя.

Это блок с рекомендованной статьёй. Оба шрифта остаются читаемыми даже в кегле в 14px.

На странице с подборками статей применяется несколько разных кеглей. Заголовок написан с помощью PF Bague в жирном начертании, 60px, а под ним Minion Condensed, 24px, 31px

Обратите внимание, как круто смотрится шрифт на зелёной кнопке

Система 2: Один шрифт / большой заголовок

Типографская система «один шрифт / большой заголовок» использует один шрифт с заголовком, который больше и жирнее прочего контента. Больший заголовок выделяется и позволяет пользователю быстро понять, о чём идёт речь.

В визуализации The Washington Post использован шрифт ITC Franklin Pro

Пример из жизни: The Washington Post использует такую систему в приведённой ниже визуализации. Дизайнер сохраняет семейство и размер шрифта в соответствии с тем, чтобы навигация ощущалась как часть макета.

Ниже приведён пример использования такой системы. В нём используется шрифт Assistant размером в 24 пункта для заголовка и в 14 пунктов для прочего содержимого.

Используемый шрифт: Assistant — чёткий современный шрифт, который хорошо работает в дизайне благодаря простому, открытому эстетичному размеру букв. Числа хорошо сбалансированы и не имеют пробелов. Assistant — семейство шрифтов с открытым исходным кодом, основанное на Source Sans Pro. Проект открыт для сотрудничество и принимает участие в репозитории GitHub.

Отважимся на прогноз-2016

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

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

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

READYMAG

У сайта Readymag дизайн действительно продуман. Они часто экспериментируют со шрифтами и нередко результат получается просто здоровский.

Для заголовка главной страницы было выбрано сверхсветлое начертание Nobel, 84px, 82px. А ниже тоже используется Nobel, но 26px, 26px. Для меню используется уже знакомый Avenir Next, 19px, 19px.

У шрифта Nobel есть характер, и он отлично подходит для повествовательной формы представления контента. Вместе с обезличенной и понятной Helvetica этот шрифт можно применять в «креативных проектах» и показывать их «компетентной аудитории». Плюс, Nobel хорошо сочетается с Avenir Next.

На сайте Readymag с помощью этой пары был создан понятный и минималистичный дизайн

Обратите внимание на отступы и параметры шрифта, заданные в блоке с преимуществами продукта. Заголовок — светлое начертание Nobel, 64px, 80px; название каждого блока — полужирное начертание Avenir Next, 24px 30px; текст описания — нормальное начертание Avenir Next, 18px, 24px

А воздух между блоками придаёт всей композиции свободу и чистоту.

Avenir Next отлично подходит для заголовков и обычного текста. Он отлично вписывается и в UI. UI сайта Readymag — лишь один подобный пример. В огромных заголовках он мне больше напоминает хипстерские шрифты, а в обычном тексте в нём появляется больше геометричности и круглости, как в Proxima Nova.

С помощью Avenir Next вы можете выделять нужные блоки, применив прописное начертание шрифта в заголовке. Здесь разрядка задана в 2px, кегль: 13px, высота строки: 13px. Параметры текста ниже: 13px, 13px.

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

Но у сайта Readymag с этим всё в порядке. Для этого блока сайта они взяли Merriweather, который можно скачать с Google Fonts.

Система 4: Один с засечками / один без засечек.

Такая система использует два шрифта, один из которых с засечками, а другой — без.Пример из жизни: ниже приведён скриншот статьи New York Times «Coronavirus in US». Название использует шрифт NYT Cheltenham, а метки данных — NYT Franklin, оба шрифта созданы специально для New York Times. Метки имеют два компонента: заметное название штата и менее заметное число. Использование этих двух стилей создает шаблон, который помогает зрителю быстро декодировать информацию. Что бросается в глаза? Название штата или номер?

В следующем примере такой системы используется шрифт Merriweather в 22 пункта с высотой строки в 26 пунктов для заголовка. Source Sans Pro используется для остального контента.

Используемые шрифты: Merriweather — слегка округлый шрифт с толстым и тонким штрихом средней контрастности, что делает его подходящим для заголовков, но не для мелкого текста. Вес шрифта, использованный выше, самый тяжелый. Source Sans Pro используется для содержания. Он был разработан специально для пользовательских интерфейсов.
Серая шкала текста может использоваться для создания шаблонов (как в приведённом выше фрагменте NYT), для снижения визуальной значимости элемента (как это было во фрагменте Reuter) или для выцветания больших фрагментов менее заметной информации, таких как источники или раздел заметок.

Подводим итоги по выбору шрифтов для логотипов.

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

Если вы пытаетесь выбрать шрифт, обратитесь к этой статье, чтобы подумать об историческом контексте и эстетической значимости

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

Надеемся, что вам понравилась данная статья и она оказалась интересной.

А если вам нужно разработать собственный логотип, вы можете сделать это в нашем сервисе логотип онлайн!