Шрифты примеры: Шрифты Онлайн

10 идеальных шрифтовых пар — Crello Blog

В оформлении надписей есть одно негласное правило: не использовать больше 2-3 шрифтов за раз. С первого взгляда может показаться, что достаточно просто взять пару любых шрифтов (главное, чтоб не больше), поставить их вместе — и гармоничная надпись готова. Но на деле составить шрифтовую пару, где каждый элемент будет дополнять друг друга, а не перебивать, — еще та задача. Чтобы шрифты сочетались, нужно учесть множество особенностей — от типа гарнитуры до уровня насыщенности начертания. О свойствах и характеристиках шрифтов мы подробно рассказывали в предыдущей статье из серии «Дизайн для недизайнеров», а сейчас — объясним базовые принципы сочетания шрифтов. Два ключевых ориентира при подборе шрифтов Принцип объединения №1.Сходство Принцип объединения №2.Контраст Избегайте конфликта 10 шрифтовых сочетаний в дизайнах Crello Три инструмента для подбора шрифтовых пар Вместо итогов

Два ключевых ориентира Прежде чем начать подбирать шрифты, разберитесь — о чем ваш контент и какие цели перед ним стоят . Так станет понятно, какие именно задачи должен выполнять шрифт. Например, он будет подчеркивать агрессивность надписи или, наоборот, ее лиричность, будет призывать к действию или успокаивать. Затем попытайтесь понять, на что именно вы хотите сделать ставку в шрифтовом сочетании — на сходство или контраст? Если вы хотите добиться экспрессивности, лучше использовать шрифты разных гарнитур (например, с засечками и без), а если хотите сделать текст визуально более связанным — возьмите шрифты одной гарнитуры. А теперь подробнее об этих подходах.

Принцип объединения №1. Сходство

Шрифты со схожими чертами обычно смотрятся гармонично. Найти их не так сложно — обычно они относятся к одной гарнитуре. Чаще всего мы выбираем из трех гарнитур: Антиква, или шрифт с засечками Шрифт Oranienbaum Антиквы идут с маленькими черточками на концах букв. Этот тип шрифтов часто используют для печатных материалов и длинных текстов — благодаря засечкам взгляду проще скользить по строкам. Гротеск, или шрифт без засечек Шрифт Roboto Говорят, набранный строгим гротеском текст чуть сложнее читать — тут буквы не связаны засечками, а будто стоят особняком. Зато такой шрифт отлично выделяется практически на любом фоне. Поэтому гротески используют для коротких и важных надписей, которые (скорее всего) будут читать бегло и/или на расстоянии — заголовки, общественные знаки, объявления, интерфейсный текст. Брусковый шрифт Шрифт Podkova Он похож одновременно и на антикву (с засечками), и на гротеск (немного рубленый). В брусовом шрифте засечки — прямые, а скруглений почти нет. Он выглядит жестковато, и чтобы добавить мягкости и воздуха, лучше использовать этот шрифт в «разреженном» виде — с ощутимым расстоянием между буквами.  В Crello этот параметр настроить легко: Еще в оформительной типографике часто используются рукописные и акцидентные шрифты, но антиква, гротеск и брусковый шрифт самые распространенные. Шрифты рукописный Lemon Tuesday и акцидентный Ruslan Display

Принцип объединения №2. Контраст

Говоря о контрастности в шрифтовом сочетании, мы имеем в виду, насколько заметна разница между двумя шрифтами. На это может влиять как стиль шрифта (тяжелый, с плотным написанием), так и его размер и цвет. Хороший контраст дает сочетание гротеска и антиквы — жесткость и прямота первого уравновешивается плавностью второго. Шрифты Didact Gothic (гротеск) и Philosopher (антиква) Также можно играть на разнице кегля (размера буквы) или насыщенности шрифта. Шрифт Roboto в разном кегле и с разной насыщенностью Сочетая несколько шрифтов, нужно учитывать их индивидуальную контрастность и стилистический характер. Например, если один шрифт насыщенный и выразительный, другой должен быть легким и спокойным, и наоборот. Если сочетать два экспрессивных или два нейтральных шрифта, да еще и в одинаковом написании и размере, они с большой вероятностью сольются.

Избегайте конфликта

В одной единице контента лучше сочетать не более трех шрифтов — чем их больше, тем сложнее добиться гармонии. Чтобы не ошибиться, начните с подбора шрифтов в одной гарнитуре, играя на сходстве. Как только почувствуете, что готовы к чему-то более дерзкому, попробуйте контраст — разную насыщенность начертаний или даже разные гарнитуры и стили. Чего точно стоит не допускать, так это конфликта в шрифтовой паре. Некоторые шрифты отличаются настолько, что абсолютно не подходят друг другу эстетически — или так похожи, что разницу между ними заметить просто невозможно. Шрифты Press Start 2P + Pattaya

10 шрифтовых сочетаний в дизайнах Crello

Вот несколько примеров того, как гармонично сочетать два шрифта в одной надписи. 1. Yeseva One + Comfortaa

[button text=»Использовать шаблон» url=»https://crello.com/artboard?template=5bd2dbf078e1194aa6ff06c3/» background=»red»/]

2. Oswald + Playfair Display

[button text=»Использовать шаблон» url=»https://crello.com/artboard?template=5bf7ec838caf671e1c9f2da7/» background=»red»/]

3. Cookie + Josefin Sans

[button text=»Использовать шаблон» url=»https://crello.com/artboard?template=5a96bfa1f07aee6977cd50bf/» background=»red»/]

4. Montserrat + Playlist Script

[button text=»Использовать шаблон» url=»https://crello.com/artboard?template=5bc09ae978e1194aa64837af/» background=»red»/]

5. Arapey + Josefin Sans

[button text=»Использовать шаблон» url=»https://crello.com/artboard?template=5aa69a03f07aee69774a652a/» background=»red»/]

6. Grand Hotel + Podkova

[button text=»Использовать шаблон» url=»https://crello.com/artboard?template=5b6c55011cc8aa54292895f7/» background=»red»/]

7. Abril Fatface + Raleway

[button text=»Использовать шаблон» url=»https://crello.com/artboard?template=5b891c9418654940f7ca946c/» background=»red»/]

8. Graduate + Montserrat

[button text=»Использовать шаблон» url=»https://crello.com/artboard?template=5b891a5c18654940f7beb452/» background=»red»/]

9. Abril Fatface + Raleway

[button text=»Использовать шаблон» url=»https://crello.com/artboard?template=5b6d9d2f1cc8aa54291cd948/» background=»red»/]

10. Bangers + Contrail One

[button text=»Использовать шаблон» url=»https://crello.com/artboard?template=5b2a07361eb1c99e2abf8923/» background=»red»/]

Три инструмента для подбора шрифтовых пар

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

Font Pair На этом сайте удобно сочетать шрифты из подборки Google. Сортируйте шрифты онлайн по типам или просто находите по названиям через поиск. Огромный плюс этого ресурса в том, что тут можно отредактировать пробный текст прямо на странице, чтобы сразу оценить сочетание шрифтов. Typ.io Этот сайт — мощный источник вдохновения. Тут собраны сотни удачных шрифтовых пар со всего мира, и эти подборки наверняка вдохновят вас на удачное решение. Typespiration Шрифты в библиотеке Typespiration разложены по карточкам-плиткам, что очень помогает в поисках шрифтов. Кроме шрифтов, там можно найти еще и цветовые сочетания, это отдельный плюс ресурса.

Вместо итогов

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

• Не использовать больше 2-3 шрифтов в одном контентом элементе, чтобы не было случайного визуального конфликта.
• Разобраться в базовых особенностях шрифтов. Так вы будете лучше понимать их особенности и действовать не интуитивно, а по правилам.
• Определиться, что будет главным принципом в вашем сочетании — сходство шрифтов или их контраст.

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

Интернет-агентство BINN » Корпоративные шрифты в 2021 году. Советы и примеры

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

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

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

Советы по выбору шрифта 

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

1. Используйте минималистичный современный шрифт

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

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

2. Выберите семейство шрифтов

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

3. Выберите тематику, которая соответствует вашему бренду

Корпоративные шрифты бывают различных тематик и стилей. Например, есть шрифты, которые выполнены в винтажной тематике (шрифт Hermès). Кроме того, существуют шрифты скриптового типа, которые используют Johnson & Johnson и Cadillac. Вам нужно выбрать шрифт таким образом, чтобы он соответствовал вашему бренду, аудитории и отрасли.

4. Найдите шрифт в нескольких форматах

Корпоративный шрифт вы будете использовать по-разному — для дизайна веб-сайта, логотипа, плакатов и многого другого. Вам также придется использовать шрифт с различным ПО и приложениями, поэтому вам необходимо найти шрифт в различных форматах, включая OpenType, TrueType, Web Font и даже форматы SVG.

Ниже мы рассмотрим несколько хороших корпоративных шрифтов.

Media Times — это элегантный деловой шрифт. Он отлично подойдет для создания фирменного стиля, а также для другого делового или корпоративного дизайна. Засечки делают этот шрифт в меру строгим и привлекательным. 

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

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

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

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

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

---

Источник: designshack.net

 

Основные шрифты — Как создать сайт

Безопасные шрифты на примере CSS

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

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

Шрифты в языке CSS, назначаются элементам с помощью свойства font-family.

Список безопасных шрифтов (21 штука) и их примеры:

font-family: Arial, Helvetica, sans-serif;
font-family: 'Arial Black', Gadget, sans-serif;
font-family: 'Bookman Old Style', serif;
font-family: 'Comic Sans MS', cursive;
font-family: Courier, monospace;
font-family: 'Courier New', Courier, monospace;
font-family: Garamond, serif;
font-family: Georgia, serif;
font-family: Impact, Charcoal, sans-serif;
font-family: 'Lucida Console', Monaco, monospace;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-family: 'MS Sans Serif', Geneva, sans-serif;
font-family: 'MS Serif', 'New York', sans-serif;
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
font-family: Symbol, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: 'Times New Roman', Times, serif;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;
font-family: Webdings, sans-serif;
font-family: Wingdings, 'Zapf Dingbats', sans-serif;

Обратите внимание, что сначала идёт распространённый шрифт (например Arial), если его на компьютере посетителя нет, то идёт более распространённый и похожий на него (например Helvetica), и в конце если оба эти шрифта отсутствуют, подключается serif, sans-serif, monospace или cursive (данные способы начертания шрифта есть всегда).

Arial
Имя шрифта: font-family: Arial, Helvetica, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Arial Black
Имя шрифта: font-family: ‘Arial Black’, Gadget, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Bookman Old Style
Имя шрифта: font-family: ‘Bookman Old Style’, serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Comic Sans MS
Имя шрифта: font-family: ‘Comic Sans MS’, cursive;
Цифры: 0 1 2 3 4 5 6 7 8 9

Courier
Имя шрифта: font-family: Courier, monospace;
Цифры: 0 1 2 3 4 5 6 7 8 9

Courier New
Имя шрифта: font-family: ‘Courier New’, Courier, monospace;
Цифры: 0 1 2 3 4 5 6 7 8 9

Garamond
Имя шрифта: font-family: Garamond, serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Georgia
Имя шрифта: font-family: Georgia, serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Impact
Имя шрифта: font-family: Impact, Charcoal, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Lucida Console
Имя шрифта: font-family: ‘Lucida Console’, Monaco, monospace;
Цифры: 0 1 2 3 4 5 6 7 8 9

Lucida Sans Unicode
Имя шрифта: font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

MS Sans Serif
Имя шрифта: font-family: ‘MS Sans Serif’, Geneva, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

MS Serif
Имя шрифта: font-family: ‘MS Serif’, ‘New York’, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Palatino Linotype
Имя шрифта: font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Symbol
Имя шрифта: font-family: Symbol, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Tahoma
Имя шрифта: font-family: Tahoma, Geneva, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Times New Roman
Имя шрифта: font-family: ‘Times New Roman’, Times, serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Trebuchet MS
Имя шрифта: font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Verdana
Имя шрифта: font-family: Verdana, Geneva, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Webdings
Имя шрифта: font-family: Webdings, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Wingdings
Имя шрифта: font-family: Wingdings, ‘Zapf Dingbats’, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Дата публикации поста: 5 февраля 2016

Дата обновления поста: 24 октября 2014

Навигация по записям

Основные виды шрифтов с примерами

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

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

Если Вас интересует разработка логотипа от профессионального дизайнера, узнать стоимость и заказать логотип можно на странице соответствующей услуги, нажав на кнопку ниже:

Виды шрифтов

Шрифты с засечками (Serif)

Пример брендов, использующих засечки: Zara, Tiffany & Co

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

Шрифты с засечками можно разделить на несколько подкатегорий (Старый стиль, Классический, Неоклассический, Переходный и так далее). Сегодня шрифты с засечками являются одними из самых популярных используемых гарнитур, а такие стили, как Times New Roman, всегда присутствуют в книгах, документах и даже в некоторых логотипах.

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

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

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

Шрифты без засечек (Sans Serif)

Пример брендов, использующих шрифты без засечек: LinkedIn, Calvin Klein

Шрифты без засечек обходятся без изюминок своих предшественников в пользу более чистого и современного подхода, и этот контраст позволяет им хорошо сочетаться со шрифтами с засечками. Они датируются 19 веком и стали чрезвычайно популярны в 20-30-х годах прошлого столетия. В середине 20-го века немецкие дизайнеры создали один из наиболее популярных шрифтов, относящихся к типу шрифтов без засечек — Helvetica.

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

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

Шрифты Slab Serif

Пример брендов, использующих Slab serif: Honda и Volvo

Slab serif — это вариант традиционной типографики с засечками, появившейся в 19 веке. Эти шрифты выделены жирным шрифтом и подчеркивают отличие от своих классических аналогов. Ножки, определяющие шрифты с засечками, больше и похожи на блоки (читай: выглядят как «плиты»).

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

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

Рукописные шрифты (Script)

Пример брендов, использующих рукописные шрифты: Кока Кола и Cadillac

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

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

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

Декоративные шрифты

Пример брендов, использующих декоративные шрифты: Fanta и Lego

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

Декоративные шрифты редко используются для длинных строк текста. Вместо этого они идеально подходят для логотипов.

Эти типы иногда могут выйти из моды, если их дизайн будет слишком модным или нишевым. Тем не менее, их удобно использовать в логотипах.

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

Заключение

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

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

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

Вариативные шрифты: что нового для дизайнеров?

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

В статье будут рассмотрены следующие вопросы:

• История возникновения;
• Технические особенности;
• Преимущества и недостатки;
• Особенности использования;
• Примеры креативного использования.

История возникновения

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

Во второй половине 80-х годов XX века были представлены форматы PostScript компанией Adobe и TrueType компанией Apple для разработки шрифтовых файлов. Оба они использовали кривые безье для построения знаков. Этими форматами в обновленном виде мы пользуемся и по сей день при работе над шрифтовыми файлами.

1980s — PostScript (Adobe), TrueType (Apple)

В 1991 году компанией Adobe была представлена технология Multiple Master как расширение формата PostScript, которая позволяла хранить в одном шрифтовом файле несколько вариантов контура для одного глифа. Эти варианты были крайними точками на оси, между которыми можно было найти промежуточные значения, например, изменить вес или ширину.

1991 – Multiple Master (Adobe)

Чтобы пользоваться таким шрифтом, сначала нужно было сгенерировать статичное начертание с помощью специальной программы (Adobe Type Manager) и после этого загрузить его в систему, чтобы использовать в графическом редакторе. Из-за сложности использования этот формат так и не стал популярным, а шрифтовые дизайнеры продолжили выпускать статичные начертания. 

Статичное начертание

В 1997 компаниями Adobe и Microsoft совместно была представлена технология OpenType. Она основывалась на формате TrueType, но включала в себя возможность внедрить заметно большее количество знаков (65000, ранее лимит был 256), а также OpenType фичи, без которых мы не представляем сейчас современный шрифт. Здесь речь идет, например, о поддержке капители, табулярных знаков, супериоров, стилистических сетов, контекстных альтернатив и т.д. OpenType формат и по сей день является самым популярным.

И, наконец, в 2016 году Adobe, Apple, Google и Microsoft анонсировали новую версию формата OpenType — OpenType Font Variables. С этого момента шрифтовые дизайнеры имеют возможность заложить информацию о нескольких начертаниях шрифтового семейства в один файл. Суть этого формата похожа на Multiple Master с одним принципиальным отличием — теперь не нужно заранее генерировать статичные начертания. Параметры можно подбирать прямо в графическом редакторе.

2016 — OpenType Font Variables

Технические особенности

Давайте остановимся подробнее на том, чем же этот формат отличается от классического OpenType.

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

TT Norms Pro

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

TT Norms Pro Variable

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

Опорные начертания

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

Ползунок в графическом редакторе

Варианты осей вариативности:

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

Weight axis

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

Поиск оптимальной толщины шрифта

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

Width axis

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

Поиск оптимальной ширины шрифта

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

Slant axis

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

Поиск оптимального наклона шрифта

И, наконец, еще одна менее распространенная, но тоже заложенная в формат OTF Var — ось оптического размера.

TT Fors Display

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

TT Fors Display

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

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

TT Fors Text

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

• wght — вес
• wdth — ширина
• slnt — угол наклона
• ital — курсивность
• opsz – оптический размер

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

Существуют реализованные примеры, где может изменяться длина засечек, рост строчных или прописных знаков, высота выносных элементов, контраст и т. д.

Ресурс: axis-praxis.org

И конечно, шрифт может изменяться и декоративно. Тут все ограничивается только фантазией автора.

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

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

Преимущества и недостатки вариативных шрифтов.

Теперь расскажем  о некоторых проблемах, с которыми мы встречаемся при использовании вариативных шрифтов и  интересных способах применения вариативных шрифтов

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

Ресурс: v-fonts.comРесурс: v-fonts.com

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

Пример низкого качества вариативного шрифта

Еще один пример. Если у вас сайт, у которого 1000000 загрузок в день и используется полное семейство Norms PRO, то со всеми начертаниями на сайте они занимают 5306 килобайт. Если вы используете вариативный шрифт от этого семейства —  только 1875 . Обратите внимание на таблицу ниже.  Мы видим, что при таком огромном количестве загрузок можно получить разницу в 3272 ГБ, которые должны быть отгружены с сервера. Очевидно, что для каждой конкретной загрузки сайта это не существенная разница, но в сумме она уже играет роль.

Разница между статическим и вариативным начертаниями

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

Хинтинг вариативного шрифта

Как использовать вариативные шрифты.

Теперь расскажем о том, как пользоваться вариативными шрифтами в работе.

Давайте для начала возьмем Adobe Illustrator. Например, вы напечатали какой-то текст и хотите выбрать для него вариативный шрифт, который уже установлен. В общем списке у таких шрифтов есть специальная пометка «var». Кстати говоря, у Adobe есть свои собственные вариативные шрифты, которые идут в комплекте с последними версиями программ, так что можете для начала поэкспериментировать с ними.

Выбор вариативного шрифта в Adobe Illustrator

Когда вы выбрали вариативный шрифт в панели Character появляется дополнительная кнопка Variable Font. За ней скрываются все вариативные оси, которые есть в шрифте, их параметры можно изменять ползунками. Результат виден сразу. Все остальные настройки в этой панели останутся прежними.

Оси вариативности в панели Character

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

Вариативный шрифт как статичное начертание

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

Выбор вариативного шрифта в Sketch

Вариативные шрифты можно внедрить и в WEB с помощью CSS. Мы не будем останавливаться на этом подробно..

Ресурс: CSS Transitions

Но можно посмотреть пример того, как вариативные шрифты интегрируются в WEB

Ресурс: CSS AnimationРесурс: Animation each letter separately

Подробнее об использовании вариативных шрифтов в WEB можно прочитать в статьях Richard Rutter на medium.com:

Get started with variable fonts — быстрое, но содержательное введение
How to use variable fonts in the real world — description of problems you may encounter and how to solve them.

Креативные примеры использования

Предлагаем посмотреть, креативные примеры —  как можно использовать вариативные шрифты, если приложить фантазию.

Примеры того, как растягивать текст в зависимости от границ контейнера

Ресурс

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

Ресурс: Variable fonts in AR

Пример того, как шрифт может изменяться в зависимости от удаления, с которого мы на него смотрим

Ресурс: Distance Based Interpolation

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

Ресурс: Variable font in different reading conditions

Можно пойти еще дальше и сделать из шрифта движущиеся изображения, как нам предлагает сайт axis-praxis. Даже можно сделать их цветными путем наложения нескольких букв друг на друга, как можно увидеть в экспериментах Toshi Omagari. Хотя это, конечно, не совсем целевое использование шрифта.

Движущиеся изображения

Полезные ресурсы

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

Во-первых, это axis-praxis.org где собрано большое количество вариативных шрифтов. Туда же можно загружать шрифты, которые есть у вас.

Во-вторых, это v-fonts.com где тоже можно попробовать различные шрифты в упрощенном виде.

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

Выводы

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

Топ-5 шрифтов и его использование

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

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

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

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

1. Poppins

Источник : Google Fonts

Ссылка на шрифт : https://fonts.google.com/specimen/Poppins

Примеры использования примеров: http://zipl.pro/  , http://www.nerval.ch/apollo_11/  , http://theisbothmann.com/http://www.kikk.be/2016/

Рекомендуется для: Модульных и минимальных веб-сайтов

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

2. Open Sans

Источник: Google Fonts

Ссылка на шоифт: https://fonts.google.com/specimen/Open+Sans

Примеры использования примеров: http://gravity-theme.site/(веб-сайт компании, корпоративных и продуктов)

Рекомендуется для: Стандартного вида

Описание: Open sans будет очень хорошей парой для многих шрифтов, таких как Raleway, Brandon Grotesk, Montserrat, Lato и т. Д. Он отлично отображается в браузере с хорошей читабельностью.

3. Montserrat

Источник: Google Fonts

Шрифтовая ссылка: https://fonts.google.com/specimen/Montserrat

Примеры использования примеров: http://www.dangblast.com/ , http://hansonwu.com/howtoordereggs/#/

Рекомендуется для: интересных веб-сайтов, он создает величественный, но забавный вид

Описание: Этот шрифт поставляется в трех вариантах и ​​напоминает модернистский стиль начала 20-го века, однако он выглядит менее формальным, чем, скажем, Futura. Montserrat действительно сияет для коротких кусков всех шапок и геометрической простоты букв. В нижнем регистре, Montserrat, все еще довольно приятный шрифт с красивой большой высотой x и намного большим характером, чем Arial или Helvetica.

4. Playfair Display

Источник: Google Fonts

Ссылка на шрифт: https://fonts.google.com/specimen/Playfair+Display

Примеры использования примеров: http://adrien-heury.net/designers-checklists/ http://mondaymusic.es/en , https://www.craftedbygc.com/ https://hoodzpahdesign.com/

Рекомендуется для: Это в основном тот, который подходит всем и создает чувство доверия. Он может использоваться как для модульных, так и для традиционных сайтов.

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

5. Avenir

Источник: Веб

Ссылка на шрифт: https://www.myfonts.com/fonts/linotype/avenir

Примеры использования примеров: https://playcharms.com/en/

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

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

6. Bebas Neue: дополнительный шрифт, который мы не могли бы указать

Источник: Веб

Ссылка на шрифт: https://www.fontsquirrel.com/fonts/bebas-neue

Примеры использования примеров: https://www.craftedbygc.com/ http://www.theqcamera.com/http://ekpesbookclub.com/

Рекомендуется для: Для стандартных, но прочных и стильных макетов.

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

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

 

[kkstarratings]

Учебник CSS 3. Статья «Работа со шрифтами в CSS»

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

---

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

---

Безопасные веб-шрифты

В CSS стиле для выбора типа шрифта применяется свойство font-family, в котором указывается интересующий Вас шрифт. Предположим, что вы хотите применить для абзацев страницы шрифт Courier. В этом случае Вам необходимо будет создать, например, селектор типа и воспользоваться свойством font-family:

p {
font-family : Courier; /* устанавливаем тип шрифта – Courier */
}

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

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

---

Рекомендуется последним в списке шрифтов указывать и семейство шрифта (generic-family). Если у пользователя по каким-то причинам отсутствуют все перечисленные Вами шрифты, то в этом случае страница будет отображена хотя бы шрифтом того же семейства, а не шрифтом «встроенным» в браузер.

---

Давайте рассмотрим следующий пример:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Свойство font-family</title>
<style> 
.times {
font-family: "Times New Roman", serif; /* определяем основной шрифт "Times New Roman", альтернативный  serif (с засечками)*/
}
.courier {
font-family: Courier, monospace; /* определяем основной шрифт "Courier", альтернативный monospace (семейство моноширинных шрифтов) */
}
</style>
</head>
	<body>
		<p class = "times">Параграф, отображаемый шрифтом "Times New Roman".</p>
		<p class = "courier">Параграф, отображаемый шрифтом "Courier".</p>
	</body>
</html> 

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

---

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

---

Результат нашего примера:

Рис. 34 Пример использования свойства font-family.

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

sans-serif (без засечек)

Семейство шрифта (font-family)	Пример
Arial, Helvetica, sans-serif	Съешь же еще этих сочных мандаринов.
«Arial Black», Gadget, sans-serif	Съешь же еще этих сочных мандаринов.
«Comic Sans MS», cursive, sans-serif	Съешь же еще этих сочных мандаринов.
Impact, Charcoal, sans-serif	Съешь же еще этих сочных мандаринов.
«Lucida Sans Unicode», «Lucida Grande», sans-serif	Съешь же еще этих сочных мандаринов.
Tahoma, Geneva, sans-serif	Съешь же еще этих сочных мандаринов.
«Trebuchet MS», Helvetica, sans-serif	Съешь же еще этих сочных мандаринов.
Verdana, Geneva, sans-serif	Съешь же еще этих сочных мандаринов.

serif (с засечками)

Семейство шрифта (font-family)	Пример
Georgia, serif	Съешь же еще этих сочных мандаринов.
«Palatino Linotype», «Book Antiqua», Palatino, serif	Съешь же еще этих сочных мандаринов.
«Times New Roman», Times, serif	Съешь же еще этих сочных мандаринов.

monospace (моноширинные)

Семейство шрифта (font-family)	Пример
«Courier New», Courier, monospace	Съешь же еще этих сочных мандаринов.
«Lucida Console», Monaco, monospace	Съешь же еще этих сочных мандаринов.

Типы веб-шрифтов и их поддержка браузерами

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

• TTF/OTF (True Type и Open Type Fonts) — эти шрифты имеют широкую поддержку. Разработаны Microsoft совместно с Adobe, с целью применения в различных операционных системах.
• WOFF (Web Open Font Format) — сжатая версия шрифтов TTF/OTF. Формат включает в себя метаданные, в которые автор шрифта может добавить информацию об использовании шрифта. WOFF-формат имеет широкую поддержку со стороны браузеров.
• WOFF2 (Web Open Font Format 2) — спецификация была разработана, чтобы обеспечить улучшенное сжатие и тем самым снизить использование пропускной способности сети, в то же время, позволяя быстро производить декомпрессию даже на мобильных устройствах.
• SVG (Scalable Vector Graphic) – способ создания векторной графики. SVG-формат имеет очень ограниченную поддержку (IOS/Safari). Планируется, что он перестанет использоваться в Chrome.
• EOT (Embedded Open Type) – шрифты, которые поддерживаются только в Internet Explorer/Edge (разработаны компанией Microsoft для использования в качестве встроенных шрифтов на веб-страницах).

Ответственность и поиск веб-шрифтов

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

Чтобы не сталкиваться с любыми правовыми вопросами, связанными с использованием «платных» шрифтов на бесплатной основе, я рекомендую Вам, пользоваться службами шрифтов, например, такой как Google Fonts или, крупными коллекционными порталами, например, Webfont.ru. На начальном этапе Вам этого хватит «за глаза».

Добавление веб-шрифта на страницу

Для добавления шрифта на страницу Вам необходимо:

• использовать правило CSS @font-face, которое сообщает браузеру пользователя, откуда необходимо загружать шрифт и какое имя шрифта при этом используется. При работе с правилом @font-face важным моментом является размещение его в начале вашей таблицы стилей, это позволит вашему браузеру сразу преступить к обработке необходимого шрифта.
• использовать CSS свойство font-family, чтобы указать имя задействованного шрифта и применить к интересующему Вас фрагменту текста (по аналогии работы с локальными шрифтами).

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

1. Переходим на сайт службы Google Fonts.
2. Выбираем понравившийся нам шрифт, я остановился на шрифте без засечек Roboto, Вы можете найти его в поиске, либо выбрать любой другой:


3. После этого необходимо добавить его в коллекцию (у Вас должен быть создан аккаунт Google):


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


5. Распакуйте архив со шрифтами в директорию, из которой они будут подключаться к Вашей веб-странице, либо страницам:

Как Вы можете заметить, в архиве содержится 12 различных шрифтов. Исходя из названий можно установить, что, например, Roboto-Italic предназначен для курсивного стиля шрифта, Roboto-Bold для жирного начертания шрифта, Roboto-BoldItalic для курсивного жирного начертания и так далее.

Еще раз обращаю Ваше внимание, что один файл шрифта содержит:

• одну плотность шрифта.
• один стиль для этого шрифта.

---

Обратите внимание на важный момент — если Вам необходимо получить полужирные и курсивные шрифты, то необходимо подгружать их отдельно (использовать правило CSS @font-face для данного типа шрифта)!

---

Конечно в том случае, если они существуют для понравившегося Вам варианта шрифта, обязательно учтите эти моменты при работе с веб-шрифтами!

Приступим к подключению, загруженных нами шрифтов к нашему документу. Для заголовков второго уровня (элемент <h3>) мы будем использовать шрифт — Roboto-Bold. Для абзацев (элемент <p>) будем использовать шрифт Roboto-Regular, а для курсивного начертания (элемент <i>) — Roboto-Italic.

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Пример использования правила @font-face</title>
<style> 
@font-face {
font-family: "Roboto"; /* задаем произвольное имя для шрифта, которое будет использоваться в свойстве font-family при указании стилей для конкретных элементов */
src: url("/fonts/Roboto-Regular.ttf") format('truetype');  /* задаем путь относительно корня сайта к шрифту (url) и тип шрифта (format). Тип шрифта выступает подсказкой для браузера (в идеале ускоряет процесс обработки) */
font-style: normal;  /* указываем, что стиль шрифта обычный - это значение по умолчанию */
font-weight: normal;  /* определяет нормальное начертание символов - это значение по умолчанию */ 
}
@font-face {
font-family: "Roboto";  /* задаем произвольное имя для шрифта, которое будет использоваться в свойстве font-family при указании стилей для конкретных элементов */
 /* для упрощения работы со шрифтами допускается использовать одинаковое имя, но при этом начертание или стиль шрифта должен отличаться. IE 8 и ниже не поддерживают такой подход и если Вы хотите поддерживать эти браузеры, то Вам необходимо называть каждый шрифт по разному и более детально стилизовать каждый селектор  */
src: url("/fonts/Roboto-Bold.ttf") format('truetype');  /* задаем путь относительно корня сайта к шрифту (url) и тип шрифта (format). Тип шрифта выступает подсказкой для браузера (в идеале ускоряет процесс обработки) */
font-style: normal;  /* указываем, что стиль шрифта обычный - это значение по умолчанию */
font-weight: bold;  /* определяет жирное начертание символов */ 
}
@font-face {
font-family: "Roboto";  /* задаем произвольное имя для шрифта, которое будет использоваться в свойстве font-family при указании стилей для конкретных элементов */
src: url("/fonts/Roboto-Italic.ttf") format('truetype');  /* задаем путь относительно корня сайта к шрифту (url) и тип шрифта (format). Тип шрифта выступает подсказкой для браузера (в идеале ускоряет процесс обработки) */
font-style: italic;  /* указываем, что стиль шрифта курсивный */
font-weight: normal;  /* определяет нормальное начертание символов - это значение по умолчанию */ 
}
h3, p, b, i {  /* задаем групповой селектор для элементов <h3>, <p>, <b>, <i> */
font-family: "Roboto", sans-serif;  /* устанавливаем шрифт Roboto, если он не будет загружен по какой-то причине, то указываем, чтобы браузер установил шрифт из семейства шрифтов без засечек (sans-serif)  */
}
</style>
</head>
<body>
	<h3>Немного о пандах</h3>
	<p><b>Большая панда</b> (<i>Ailuropoda melanoleuca</i>) — бамбуковый медведь, одно из редчайших вымирающих животных, занесённых в международную Красную книгу; единственный современный представитель рода <b>большие панды</b> (<i>Ailuropoda</i>).</p>
</body>
</html>

И так, что мы сделали в этом примере:

• Добавили три правила @font-face в начало наших CSS стилей (это важно).
• В каждом правиле с использованием CSS свойства (font-family) мы указали одно название шрифта, вы можете использовать своё название для всех правил, но будет лучше и понятнее если оно будет совпадать с наименованием шрифта.
• В каждом правиле мы указали путь к файлу, который содержит шрифт с разрешением TTF (True Type Font).
• Далее мы для всех правил с использованием свойства (font-style) указали стиль шрифта: для двух правил шрифт отображается обычным стилем — normal (это значение по умолчанию), а для одного указали, что он отображается курсивом (italic).
• Кроме того, для всех правил с использованием свойства (font-weight) указали жирность шрифта: для двух правил шрифт отображается обычной жирности — normal (это значение по умолчанию), а для одного указали что он отображается жирным шрифтом (bold).
• Нам осталось только применить наши шрифты к элементам. Для этого мы создали групповой селектор в котором с использованием ранее рассмотренного свойства font-family указали тип нашего шрифта и как альтернативу через запятую указали семейство шрифта, это сделано для того, что если по какой-то причине браузер пользователя не сможет загрузить наши шрифты, он смог использовать шрифты из указанного семейства, а не встроенные в браузер.

Результат нашего примера:

Рис.38 Пример использования правила @font-face.

Для полноты картины, давайте рассмотрим, как добавлять несколько вариантов шрифтов (для поддержки современных более сжатых версий шрифтов):

@font-face {
font-family: "Roboto";  /* задаем произвольное имя для шрифта, которое будет использоваться в свойстве font-family при указании стилей для конкретных элементов */
src: 
	local("font");  /* проверяется есть ли шрифт на локальном компьютере пользователя по имени, если нет то поиск осуществляется в других указанных источниках */
	url("/fonts/font.woff2") format('woff2');  /* задаем путь к шрифту (url) и тип шрифта (format) */
	url("/fonts/font.woff") format('woff');  /* задаем путь к шрифту (url) и тип шрифта (format) */
	url("/fonts/font.ttf") format('truetype');  /* задаем путь к шрифту (url) и тип шрифта (format) */
}

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

---

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

---

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

Добавление веб-шрифта со стороннего ресурса

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

1. Переходим на сайт службы Google Fonts.
2. Выбираем понравившийся нам шрифт, я остановился на том же шрифте, который мы использовали в прошлый раз — шрифт без засечек Roboto. Вы можете использовать поиск по наименованию для его нахождения.
3. После добавления шрифта необходимо нажать на вкладку «Family-selected» (выбранные вами шрифты):
4. Далее необходимо выбрать те стили шрифтов, которые мы будем использовать на нашем сайте. Для этого необходимо перейти на вкладку «Customize»

   Например, меня интересуют следующие:

• Для заголовков (элемент <h3>) и для жирного начертания я буду использовать шрифт – Bold 700 (Roboto Bold в наборе).
• Для абзацев (элемент <p>) будем использовать шрифт Normal 400 (Roboto Regular в наборе), а для курсивного начертания Normal 400 Italic (Roboto Italic в наборе).

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

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

Далее на вкладке «Embed» нам будет предложено два варианта подключения (Standart и @import):

Первый вариант подключения (Standard). Создание ссылки на внешнюю таблицу стилей, используя HTML тег <link>. В адресе ссылки указывается веб-сервер Google и информация, которая необходима Google для загрузки необходимых шрифтов (как правило, это формат woff2 для современных браузеров, определение типа поддерживаемого шрифта происходит на стороне сервера Google в зависимости от Вашего браузера).

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

Обращаю Ваше внимание, что тег <link> размещается всегда внутри тега <head> (как правило, перед закрывающим тегом </head>).

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

Рассмотрим пример подключения, выбранных нами шрифтов:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Пример подключение веб-шрифтов, используя тег <link></title>
<link href = 'https://fonts.googleapis.com/css?family=Roboto:400,700,400italic&subset=latin,cyrillic' rel = 'stylesheet' type = 'text/css'> /* подключаем внешнюю таблицу стилей для загрузки необходимых шрифтов, в HTML 5 type='text/css' допускается не указывать */
<style>
h3, p, b, i {  /* задаем групповой селектор для элементов <h3>, <p>, <b>, <i> */
font-family : "Roboto", sans-serif;  /* устанавливаем шрифт Roboto, если он не будет загружен по какой-то причине, то указываем, чтобы браузер установил шрифт из семейства шрифтов без засечек (sans-serif)  */
}
</style>
</head>
	<body>
		<h3>Немного о верблюдах</h3>
		<p><b>Верблюды</b> (<i>Camelus</i>) — род млекопитающих семейства верблюдовых (<i>Camelidae</i>) подотряда мозоленогих (<i>Camelidae</i>) отряда парнокопытных (<i>Artiodactyla</i>). Это крупные животные, приспособленные для жизни в засушливых регионах мира — пустынях, полупустынях и степях.</p>
	</body>
</html>

Результат:

Рис.44 Пример подключение веб-шрифтов, используя тег <link>.

Второй вариант подключения, который мы также рассматривали в статье «Введение в CSS» это использование правила @import. В отличие от первого метода (используя HTML тег <link>), который требует добавления кода к каждой странице Вашего сайта, правило @import допускается использовать в начале своей таблицы стилей, которая у Вас уже должна быть подключена к каждой странице.

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

@import url("path/to/file.css");

Предлагаемый вариант импортирования на страницу:

---

Обращаю Ваше внимание, что правила @import всегда необходимо указывать перед стилями CSS, иначе, таблицы стилей не импортируются (браузеры просто их проигнорируют).

---

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

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Пример подключение веб-шрифтов, используя правило @import</title>
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto:400,700,400italic&subset=latin,cyrillic); /* импортируем внешнюю таблицу стилей */
h3, p, b, i {  /* задаем групповой селектор для элементов <h3>, <p>, <b>, <i> */
font-family : "Roboto", sans-serif;  /* устанавливаем шрифт Roboto, если он не будет загружен по какой-то причине, то указываем, чтобы браузер установил шрифт из семейства шрифтов без засечек (sans-serif)  */
}
</style>
</head>
	<body>
		<h3>Немного о пингвинах</h3>
		<p><b>Пингвиновые</b> или <b>пингвины</b> (лат. <i>Spheniscidae</i>) —  семейство нелетающих морских птиц, единственное в отряде <b>пингвинообразных</b> (<i>Sphenisciformes</i>). В семействе 18 современных видов. Все представители этого семейства хорошо плавают и ныряют.</p>
	</body>
</html>

Результат нашего примера:

Рис.46 Пример подключение веб-шрифтов, используя правило @import.

Прошу Вас учесть тот момент, что правило @import увеличивает число соединений с сервером, поскольку файл, на который вы ссылаетесь, тоже нужно скачать и проанализировать. Исходя из правил и рекомендаций PageSpeed Insight (Google), связанных с оптимизацией страниц, рекомендуется избегать применения правила @import.

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

---

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практические задания:

• Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (два HTML файла) в любую папку на вашем жестком диске:

• Переходим на сайт службы Google Fonts и скачиваем необходимые нам шрифты: для заголовка — Roboto, для остального текста — Open Sans. Обратите внимание, что Вам необходимо будет подключить один шрифт Roboto и три Open Sans к странице. В результате у Вас должно получиться следующее:

  Практическое задание № 10.

• Переходим на сайт службы Google Fonts, находим необходимый нам шрифт — Ubuntu, выбираем необходимые стили шрифта и языки, которые нам понадобятся. После этого с использованием тега <link> подключите шрифты на нашу страницу. В результате у Вас должно получиться следующее:

  Практическое задание № 11.

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

Идеальные сочетания шрифтов | Creative Bloq

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

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

Пары шрифтов: основные советы

01: Используйте суперсемейства шрифтов

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

Хорошее суперсемейство будет включать версии одного и того же шрифта с засечками и без засечек: известные примеры включают Lucida / Lucida Sans и Meta / Meta Sans.

02: Пара контрастных гарнитур

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

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

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

03: Подкатегории парного типа

Конечно, «serif» и «sans serif» сами по себе являются широкими классификациями, каждая из которых разделена на несколько подкатегорий.Вообще говоря, засечки старого стиля, такие как Bembo, Caslon и Garamond, будут хорошо сочетаться с шрифтами Humanist без засечек, такими как Gill Sans и Lucida Grande.

Между тем, переходные засечки имеют более сильный контраст между толстыми и тонкими штрихами — например, Bookman, Mrs. Eaves, Perpetua и Times. Они сочетаются с геометрическими шрифтами без засечек, такими как Avant Garde, Avenir, Century Gothic, Eurostile, Futura и Univers.

Наконец, современные засечки часто имеют очень резкий контраст между толстым и тонким шрифтом для более выраженного стилизованного эффекта, а также большую высоту по оси x.В эту третью подкатегорию входят Bodoni, Didot, New Century Schoolbook и Walbaum. Опять же, геометрические шрифты без засечек лучше всего сочетаются с ними.

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

Пары шрифтов: 36 идеальных примеров

01. Калверт и Акумин

(Изображение предоставлено Робертом Слимбахом (Adobe Originals) / Monotype)

Калверт — впечатляющая плита засечки от Monotype, названного в честь его создателя Маргарет Калверт.Он доступен в шести стилях: Calvert Pro и Standard, каждый с вариантами Light, Regular и Bold. Идеальный пример сочетания шрифтов — это шрифт без засечек Acumin. Этот шрифт состоит из 90 различных шрифтов (все еще не понимаете, в чем разница? См. Наше объяснение шрифта и гарнитуры). Он был разработан Робертом Слимбахом в рамках инициативы Adobe Originals, и для доступа к нему вам понадобится подписка Creative Cloud.

02. Montserrat и Courier New

Google Font Montserrat был разработан специально для использования в Интернете, в то время как Courier New — классический шрифт для пишущей машинки (это ссылка на наше руководство, заполненное дополнительными шрифтами для пишущих машинок).На бумаге (метафорически) вы можете не подумать, что из них получится идеальное сочетание шрифтов, но вы ошибаетесь. Легкие современные буквы без засечек Montserrat идеально сочетаются с тяжелой ретро-атмосферой Courier New.

03. Skolar Latin и Proxima Nova

(Изображение предоставлено: Rosetta Type Foundry / Марк Симонсон)

Типографское предприятие Skolar, Rosetta, описывает его как «шрифт для сложной типографики». Чтобы подкрепить это, он может похвастаться обширным набором символов и поставляется с латинскими, кириллическими, греческими, девангари и гуджарати сценариями.Сам шрифт отличается низкой контрастностью, относительно большой высотой по оси x и прочными засечками, что означает, что он остается разборчивым даже при использовании небольшого размера. Наше сочетание шрифтов — популярный веб-шрифт Proxima Nova. Он был разработан Марком Симонсоном, чтобы смешать современные пропорции с геометрическим внешним видом.

04. Alegreya Sans SC и Source Sans Pro

Alegreya — это суперсемейство, которое включает в себя сестринские семейства без засечек и засечек, а также версию с малыми заглавными буквами, разработанную Хуаном Пабло дель Пераль для Huerta Tipográfica.Семейство имеет слегка каллиграфический край и рассчитано на использование длинных блоков текста. Однако вариант с заглавными буквами лучше всего подходит для заголовков. Мы предлагаем объединить его с Source Sans Pro, первым семейством шрифтов Adobe с открытым исходным кодом, разработанным Полом Д. Хантом.

05. Pacifico и Quicksand

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

06. Julius Sans One и Archive Narrow

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

07. Дисплей Playfair и Raleway

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

08.Освальд и Лато

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

09. Super Grotesk и Minion Pro

Всегда популярный шрифт с засечками Minion Pro отлично работает в качестве шрифта заголовка в сочетании с быстрым шрифтом без засечек Super Grotesk для основного текста.Вместе эти шрифты создают современное ощущение непринужденной элегантности.

10. Libre Franklin и Libre Baskerville

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

11.Freight Sans и Freight Text

Работа внутри суперсемейств упрощает поиск гармоничных сочетаний шрифтов. Freight от GarageFonts — отличный тому пример. Он доступен в большом диапазоне толщин и стилей, включая версии Sans, Text, Display и Micro, что дает вам универсальный набор типографских инструментов для работы.

12. Кауфманн и NeutraDemi

Если вы ищете чего-то более неожиданного, как насчет этого дуэта? Плавный стиль Kaufmann придает этой странной паре нотку рукописного чутья и идеально компенсирует прямые и угловатые NeutraDemi без засечек.Это сочетание шрифтов может быть не самым очевидным совпадением, но это не мешает им прекрасно играть друг с другом.

13. Brandon Grotesque и Minion Pro

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

14.Josefin Slab и Patrick Hand

Создавая Josefin Slab, дизайнер Сантьяго Ороско хотел нечто среднее между Kabel и Memphis, но с современными деталями. Окончательный шрифт имеет отличительные детали в стиле пишущей машинки и идеально подходит для использования в заголовках. Объедините его с основным текстом в Patrick Hand для сочетания шрифтов, наполненных символами. Последний, основанный на собственном почерке дизайнера, отличается аккуратной дружеской атмосферой.

15. Helvetica Neue и Garamond

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

16. Caslon и Myriad

Еще одно классическое сочетание шрифтов, на этот раз между шрифтом Old Style с засечками 18-го века и гуманистическим без засечек конца 20-го века. Myriad широко используется в корпоративных коммуникациях Apple, а также в логотипе Rolls Royce.

17. Nova Mono и Lato

Nova Mono доступен только в одном стиле, но этот стиль идеально подходит для того, чтобы заявить о себе.Соедините его с универсальным шрифтом Lato без засечек, чтобы все не стало слишком сумасшедшим. Дизайнер Lato Лукаш Дзедзич хотел что-то красивое и четкое при небольших размерах (как мы предлагаем использовать в этой паре шрифтов), но обнаружил некоторые стилизованные эффекты при использовании большего размера.

18. Fontin and Fontin Sans

Время для другого суперсемейства, на этот раз из голландского литейного завода exljbris. Fontin был разработан специально для использования с небольшими размерами, имеет свободный интервал и высокую высоту по оси x.Fontin Sans — идеальный партнер для этого.

19. Minion и Poppl-Laudatio

Два шрифта имеют много индивидуальности, но прекрасно сочетаются друг с другом. Шрифт с засечками в старом стиле, Minion был разработан в 1990 году, но вдохновлен шрифтом эпохи позднего Возрождения. Хотя технически это шрифт без засечек, тонкие расклешенные детали Poppl-Laudatio придают ему необычный вид.

20. Liberation Serif и Liberation Sans

Суперсемейство Liberation было задумано как замена с открытым исходным кодом для многих широко используемых шрифтов Windows, таких как Arial, Times New Roman и Courier New.Версии с засечками и без шрифта создают умное сочетание шрифтов, но есть и другие варианты, с которыми можно поиграть, включая Sans Narrow и Mono.

21. Trade Gothic Bold и Sabon

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

22.Гилрой и Джура

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

23. Orpheus Pro и Twentieth Century

(Изображение предоставлено: Monotype / Canada Type)

В 2020-х, как насчет того, чтобы оглянуться на 1920-е с этим шрифтом от дизайнера Сола Хесса для Monotype? Шрифт имеет привлекательную атмосферу ар-деко (здесь он тонкий, но гламур действительно усиливается в варианте Twentieth Century Std Poster MT).Наш выбор для идеального сочетания шрифтов — Orpheus Pro от Canada Type. Этот шрифт планировался как новая версия Orpheus Уолтера Тимана и его курсивного сопутствующего шрифта Euphorion, но в итоге получился гораздо более сложным — если вы используете его для отображения, есть множество расширений, альтернатив, штрихов и лигатур для исследовать.

24. Playfair Display и Source Sans Pro

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

25. Scala и Scala Sans

Суперсемейство FontFont Scala началось с версии с засечками в 1990 году, за ней в 92 году последовала версия без засечек. С маленькими заглавными буквами, различными лигатурами и фигурками в старинном стиле, это семейство чрезвычайно универсально и широко используется в издательском деле.

26. Bebas Neue и Montserrat Light

Четкие сжатые буквы делают Bebas Neue отличным выбором для заголовков. Его можно загрузить бесплатно и с открытым исходным кодом, поэтому вы можете редактировать его в соответствии с вашими потребностями через репозиторий GitHub, если у вас есть желание и навыки для этого. Монтсеррат предлагает приятный контраст; особенно облегченная версия.

27. Rockwell Bold и Bembo

Один из классических шрифтов с засечками, Rockwell был разработан в 1930-х годах и обладает огромной индивидуальностью и привлекает внимание при использовании жирного шрифта.Гораздо более консервативный шрифт с засечками Bembo нейтральный, но универсальный, что создает идеально контрастное сочетание шрифтов.

28. Myriad Black и Minion

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

29. Souvenir и Futura Bold

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

30. Dax Bold и Caslon

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

31. Roboto и Montserrat

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

32. Antique Olive Bold и Chaparral

Первоначально разработанный как альтернатива Helvetica и Univers, Antique Olive имеет очень высокую высоту по оси x с короткими верхними и нижними элементами, которые делают его очень характерным по форме дисплея.Чапараль выглядит современно, но представляет собой гораздо более нейтральный шрифт с засечками. Эти двое вместе работают в идеальной гармонии.

33. Aviano и Aviano Sans

Доступный только в вариантах с заглавными буквами, Aviano имеет острые острые засечки, которые придают ему характерную индивидуальность. Его вариант без засечек более гладкий. Объедините эти два наклонных шрифта вместе, чтобы создать иерархию в ваших проектах.

34. TheSerif и TheSans

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

35. Renault Light и Apex-New

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

36. Calluna и Calluna Sans

Создание exljbris, Calluna возникло в результате эксперимента по добавлению плоских засечек в Museo, что дало дизайнеру Йосу Буйвенге идею «засечки с направлением».В результате получился очень характерный текст, который позже породил компаньон без засечек.

Лучшие на сегодня предложения Adobe Creative Cloud

Подробнее:

Красивое использование шрифтов Google: 30 вдохновляющих примеров

Если вы хотите освободиться от оков распространенных шрифтов, таких как Arial и Times New Roman , и вы хотите добавить эту дополнительную уникальность своему веб-сайту , посмотрите примеры ниже для вдохновения!

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

Nunito в Google Fonts

Rule of Three имеет элегантный дизайн веб-сайта, который идеально сочетается со шрифтом Sorts Mill Goudy Барри Шварца, возрождением шрифта Goudy Oldstyle Фредерика Гуди.

Сортировка Mill Goudy на Google Fonts

На этом сайте для заголовков используется шрифт Londrina Solid .Созданный Марсело Магальяйнсом, создатель шрифта изначально сделал его для использования в одном из своих плакатов. Шрифт черпает вдохновение из букв, которые вы можете увидеть, путешествуя по улицам Сан-Паулу, Бразилия.

Лондрина Солид в Google Fonts

Juliana Bicycles использует шрифт Roboto Condensed , который отлично подходит для заголовков. Соедините его с Open Sans или Oswald для основного текста, чтобы создать отличную типографскую гармонию.

Робото в сжатом виде на Google Fonts

Пример 5: Арчи Уилкинсон

На сайте Арчи Уилкинсона используется изящный шрифт без засечек Raleway , созданный Мэттом Макинерни.

Raleway в Google Fonts

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

Capriola в Google Fonts

Пример 7: Остров Хашима

Hashima Island использует узкий шрифт без засечек Pathway Gothic One , чтобы создать большой эффект на этом сайте, посвященном некогда забытому и унылому месту.

Pathway Gothic One в Google Fonts

Пример 8: Bel 50

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

Enriqueta в Google Fonts

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

Bubblegum Sans в Google Fonts

В портфолио Алессандро Камедды используется популярный шрифт Yanone Kaffeesatz , напоминающий кофейню 1920-х годов.

Yanone Kaffeesatz в Google Fonts

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

Syncopate на Google Fonts

Пример 12: Потрясающий веб-дизайн

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

Отличные флюиды на Google Fonts

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

Робото на Google Fonts

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

Pacifico в Google Fonts

Пример 15: Валери Летенс

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

Танцевальный скрипт на Google Fonts

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

Muli в Google Fonts

Пример 17: Бедный Реми

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

Amatic в Google Fonts

Какой шрифт лучше использовать для «CreepFest» фильмов ужасов, чем шрифт Homemade Apple ? Этот красиво построенный курсивный шрифт — отличный выбор, если вы хотите придать своему сайту индивидуальность.

Самодельный Apple на Google Fonts

На сайте шведской электронной поп-группы Johan Reinhold используется шрифт Rokkitt — выразительный шрифт с плоскими засечками.

Rokkitt в Google Fonts

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

Спинакер в Google Fonts

На сайте

Honda Battle of the Bands используется шрифт Jockey One , который был совместно создан Вероникой Буриан и Хосе Скаглионе.Этот свежий шрифт без засечек идеально подходит для жирных заголовков и выделяет контент на любом устройстве.

Jockey One в Google Fonts

Пример 22: Гранд

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

PT Sans в Google Fonts

Пример 23: TEDxGUC

На этом веб-сайте используется семейство шрифтов без засечек Lato , разработанное варшавским дизайнером Фукашем Дзедзичем.Шрифт придает сайту теплый, но профессиональный вид. Дзедзич, описывая шрифт Lato, говорит: «Мужчина и женщина, серьезные, но дружелюбные. С ощущением лета ».

Lato в Google Fonts

Пример 24: До

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

Arvo в Google Fonts

Пример 25: Тоник

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

Droid Serif в Google Fonts

Пример 26: Vt Creative

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

Merriweather в Google Fonts

На сайте фильма «Веспилло» используется шрифт Montserrat — красивый, свежий и разборчивый шрифт.

Montserrat в Google Fonts

Пример 28: Scytale

Scytale использует популярный шрифт Source Sans Pro , первый шрифт Adobe с открытым исходным кодом. Source Sans Pro, созданный Полом Д. Хантом, был разработан для хорошей работы с пользовательскими интерфейсами.

Source Sans Pro на Google Fonts

Пример 29: Calvin

Этот сайт сочетает в себе один из самых загружаемых шрифтов Google, Oswald , со шрифтом Jura , чтобы создать отличный визуальный контраст.

Юра в Google Fonts

Освальд в Google Fonts

Пример 30: Crowd Interactive

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

Шесть заглавных букв в Google Fonts

Дополнительная литература

22 примера лучших шрифтов с засечками

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

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

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

и без засечек

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

Источник: Pinterest

Самыми популярными шрифтами с засечками являются Times New Roman, Georgia и Baskerville. Легкая причудливая штриховка, создаваемая этими засечками, добавляет официальности и элегантности.

Но что скрывается за штрихом, который отличает шрифты с засечками от шрифтов без засечек? Имеет ли значение, какой шрифт вы используете на веб-сайте?

Во-первых, это настроение, которое вызывает каждый из шрифтов. Посмотрите на картинку ниже.

Источник: Смешное барахло

Конечно, Comic Sans нельзя использовать почти во всех интерфейсах.

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

В свою очередь, шрифты с засечками ассоциируются со сложными и уважаемыми брендами, которые поддерживают имидж первоклассной компании.Раньше они появлялись в газетах New York Times и Huffington Post или на известных модных веб-сайтах, таких как Dior и Burberry, которые недавно изменили дизайн своего веб-сайта электронной коммерции.

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

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

Источник: Burberry

Источник: Burberry

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

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

Как сочетать засечки с другими шрифтами?

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

Источник: Asaro

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

Существуют ли шрифты с засечками в нелатинских алфавитах?

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

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

Корейский, шрифт Han Serif:

Еврейский, Дэвид Шрифт:

22 лучших шрифта с засечками для вашего веб-сайта

Спойлер: Большинство дизайнеров предпочтут старые шрифты vanilla Georgia или некоторые из популярных шрифтов Google «сексуальным» новым шрифтам, и это совершенно нормально.Они все еще работают!

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

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

Щелкните заголовки, чтобы узнать, где их получить и по какой цене:

1.Times New Roman

Источник: Древние вершины

2. Грузия

Источник: Donauhof Wien

3. Текст перевозки

Источник: Ксавье Бурдиль

4. Св. Марии

Источник: Coucoushop

5. Бейрут

Источник: Галерея Дрелла

6. Лариш Нойе

Источник: Дженнифер Хайнц

7. Русалка

Источник: Часть

8.Абрил Fatface

Источник: Nurture Digital

9. Канела

Источник: Emergence

10. Огг

Источник: Сумка лидера

11. Виндзор

Источник: Sikkema

12. Орфей Про

Источник: Изабель Фокс

13. Tiempos Fine

Источник: Rally Interactive

14. Бодони

Источник: Evert 45

15.Рослиндейл

Источник: Design Thinkers

16. Saol Display

Источник: Схема

17. Segoe UI

Источник: Идущие мужчины

18. Дисплей Playfair

Источник: Festival Franciacorta

19. Дворецкий

Источник: Awwwards

20. AW Завоеватель Дидо

Источник: Measponte

21.Шелковая засечка

Источник: Иглукрафт

22. Лора

Источник: СНГ Россия

Вы ищете более убийственные шрифты с засечками?

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

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

Заключение

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

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

Есть ли какие-нибудь шрифты, которые вам особенно нравятся? Поделитесь своими мыслями с командой Agente в нашем чате — мы рады дать вам профессиональный совет!

Семейство шрифтов

— CSS: каскадные таблицы стилей

Свойство CSS font-family определяет приоритетный список из одного или нескольких имен семейств шрифтов и / или общих имён семейств для выбранного элемента.

Значения разделены запятыми, чтобы указать, что они являются альтернативными. Браузер выберет первый шрифт в списке, который установлен или может быть загружен с помощью at-правила @ font-face .

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

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

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

 
семейство шрифтов: "Gill Sans Extrabold", без засечек;
семейство шрифтов: "Goudy Bookletter 1911", без засечек;


семейство шрифтов: с засечками;
семейство шрифтов: без засечек;
семейство шрифтов: моноширинный;
семейство шрифтов: курсив;
семейство шрифтов: фантазия;
семейство шрифтов: system-ui;
семейство шрифтов: ui-serif;
семейство шрифтов: ui-sans-serif;
семейство шрифтов: ui-monospace;
семейство шрифтов: ui-rounded;
семейство шрифтов: смайлики;
семейство шрифтов: математика;
семейство шрифтов: fangsong;


семейство шрифтов: наследовать;
семейство шрифтов: начальный;
семейство шрифтов: вернуться;
семейство шрифтов: отключено;
  

Свойство font-family перечисляет одно или несколько семейств шрифтов, разделенных запятыми.Каждое семейство шрифтов определяется как значение или .

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

 Семейство шрифтов : "Gill Sans Extrabold", без засечек;
  

Значения

<имя-семейства>

Название семейства шрифтов. Например, «Times» и «Helvetica» — это семейства шрифтов.Имена семейств шрифтов, содержащие пробелы, должны быть заключены в кавычки. Например: «Comic Sans MS».

<общее-имя>

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

с засечками

Глифы имеют завершающие штрихи, расширяющиеся или сужающиеся концы, или же имеют окончание с засечками.

Например: 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, без засечек.

моноширинный

Все глифы имеют одинаковую фиксированную ширину.

Например: Fira Mono, DejaVu Sans Mono, Menlo, Consolas, Liberation Mono, Monaco, Lucida Console, моноширинный.

курсив

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

Например: Brush Script MT, Brush Script Std, Lucida Calligraphy, Lucida Handwriting, Apple Chancery, курсив.

фэнтези

Шрифты

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

Например: Папирус, Геркуланум, Партия LET, Curlz MT, Харрингтон, фэнтези.

системный интерфейс

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

ui-serif

Шрифт с засечками в пользовательском интерфейсе по умолчанию.

ui-sans-serif

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

ui-monospace

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

со скругленными углами

Шрифт пользовательского интерфейса по умолчанию с закругленными элементами.

математика

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

смайлики

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

Fangsong

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

Допустимые имена семейств

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

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

Например, действительны следующие декларации:

 Семейство шрифтов : "Goudy Bookletter 1911", без засечек;
  

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

 Семейство шрифтов : Goudy Bookletter 1911, без засечек;
семейство шрифтов: красный / черный, без засечек;
семейство шрифтов: "Lucida" Grande, без засечек;
семейство шрифтов: Кхм !, без засечек;
семейство шрифтов: test @ foo, sans-serif;
семейство шрифтов: #POUND, без засечек;
семейство шрифтов: Гавайи 5-0, без засечек;
  

Следующий пример технически действителен , но не рекомендуется:

 Семейство шрифтов : Gill Sans Extrabold, sans-serif;
  

Некоторые распространенные семейства шрифтов

 .serif {
  семейство шрифтов: Times, Times New Roman, Georgia, serif;
}

.без засечек {
  семейство шрифтов: Verdana, Arial, Helvetica, без засечек;
}

.monospace {
  семейство шрифтов: "Lucida Console", Courier, моноширинный;
}

.cursive {
  семейство шрифтов: курсив;
}

.фантазия {
  семейство шрифтов: фантазия;
}

.emoji {
  семейство шрифтов: смайлики;
}

.math {
  семейство шрифтов: математика;
}

.fangsong {
  семейство шрифтов: fangsong;
}
  

  

  Это пример шрифта с засечками.



  Это пример шрифта без засечек.


  Это пример моноширинного шрифта.



  Это пример курсивного шрифта.



  Это пример фэнтезийного шрифта.



  Это пример математического шрифта.



  Это пример шрифта эмодзи.



  Это пример шрифта fangsong.

  

Таблицы BCD загружаются только в браузере

Как выбрать фирменные шрифты — Helen Bell Design

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

Как заставить шрифты работать на ваш бренд.

Шрифты должны быть разборчивыми.

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

Семейства шрифтов.

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

Бесплатные шрифты.

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

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

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

Я собираюсь использовать свой фирменный стиль, чтобы объяснить свой процесс выбора фирменных шрифтов. В качестве двух основных шрифтов я использую Bodini и Futura. Один шрифт с засечками, один без засечек, но оба являются классическими примерами своего шрифтового стиля. Я хотел, чтобы мой бренд выглядел знающим, уверенным и заслуживающим доверия. Любой, кто меня знает, знает, что я не люблю бездельничать. Мне нравится переходить к делу и придерживаться плана. Так что в моем фирменном стиле используются эти шрифты, чтобы отразить это. Futura — это шрифт, который я использую чаще всего, это большой семейный шрифт, у которого есть много возможностей для создания иерархии в моих проектах.Я редко использую Bodini, в основном в сообщениях, где я хочу создать ощущение выбора или противодействия. Благодаря постоянному использованию этих шрифтов мои подписчики знают мой стиль и сразу же понимают, о чем мой пост.

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

8 фантастических примеров вариативных шрифтов в действии

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

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

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

Панель инструментов веб-дизайнера

Неограниченное количество загрузок: более 1 000 000 веб-шаблонов, тем, плагинов, ресурсов дизайна и многое другое!

Работает бесплатно

Лоуренс Пенни

Глифы в наши дни имеют большое значение, поскольку такие широко используются, как Font Awesome и Dashicons.В этом примере для создания изящной анимации использовался переменный шрифт с одним глифом лошади-эмодзи. Благодаря использованию CSS font -iversity-settings , автор смог добиться сверхгладкого эффекта.

Увидеть скачущую лошадь Пен Мейбридж, автор Лоуренс Пенни

Анимация шрифта

Мишель Баркер

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

См. Анимацию шрифта Pen Variable от Мишель Баркер

Интерактивное искусство

от Марка Фрёмберга

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

См. Эксперимент № 2 со шрифтами Pen Variable Font, автор Марк Фрёмберг

Слайдер Style

от Frida Nyvall

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

См. Демонстрацию шрифта Pen Variable от Фриды Нивалл

Have It Your Way

Крис Койер

На первый взгляд этот пример выглядит как красиво оформленное стихотворение. Но здесь есть нечто большее, чем просто основной заголовок и текст. Нажмите на кнопки «Jigger the First Stanza» и «Rejigger Title» справа, и вас ждет угощение. Стили шрифтов меняются плавно и мгновенно. И это отличная демонстрация того, как можно настроить таргетинг на отдельных персонажей.

Увидеть рынок Pen Goblin с вариативными шрифтами, Крис Койер

Основные моменты

от Villads Claes

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

См. Шрифт Pen Variable — анимация (вес) от Villads Claes

Полный эффект

Хуан Фуэнтес

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

См. Шрифты, изменяемые пером | Compressa Хуана Фуэнтеса

So Slinky

от Жерома Шпренгера Севегранда

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

См. Pen Slinky Text — демонстрация шрифта WHOA Variable от Жерома Спренгера Севеграна

Новая эра в типографике

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

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

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

5 типов шрифтов и способы их использования в графическом дизайне [2021]

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

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

Давайте перейдем к делу.

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

Тип шрифта №1: Serif

Тип шрифта № 2: Без засечек

Тип шрифта № 3: Slab Serif

Тип шрифта № 4: Сценарий

Тип шрифта # 5: Декоративный

Тип шрифта # 1: Serif

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

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

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

Старые засечки

Эта категория основана на первых римских шрифтах.По оценкам, он использовался с конца 15 до середины 18 века. Типы старого стиля также известны как типы Гаральда.

Для них характерен большой контраст между тонкими и толстыми мазками. Сегодня Garamond и Goudy Old Style характеризуются теми же чертами.

Переходные засечки

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

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

Неоклассические и современные засечки

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

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

Эти гарнитуры сегодня чаще всего используются в модных журналах высокого класса, потому что они элегантны, неторопливы, спокойны и сдержанны. Сегодня современные шрифты с засечками включают, но не ограничиваются ими, ITC Bodoni, ITC Fenice, Adobe New Caledonia и Berthold Walbaum.

Clarendon Serifs

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

Более поздние дизайны были изменены, чтобы иметь более толстые и четкие штрихи и более длинные засеки. В это семейство входят Bookman, Nimrod и ITC Charter.

Как использовать шрифты с засечками Шрифты

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

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

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

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

Тип шрифта № 2: Без засечек

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

Гротеск без засечек

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

Они смелые и солидные. В основном они использовались в заголовках и рекламе с конца 19 века до начала 20 века.

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

Примеры этих шрифтов: Akzidenz-Grotesk, Franklin Gothic, Helvetica, Monotype Grotesque, News Gothic и Univers.

Геометрический без засечек

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

Они состоят из обычных монолинейных линий, квадратных или круглых форм. Они вдохновлены геометрическими формами. В это семейство шрифтов входят Futura, Avant Garde, Avenir, ITC Bauhaus и Harmonia Sans.

Humanist Sans Serif

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

Эксперты в области типографики утверждают, что именно этот шрифт является наиболее разборчивым и читаемым из всех шрифтов без засечек. В это семейство шрифтов входят Gill Sans, Mentor Sans, ITC Goudy Sans и Optima.

Как использовать шрифты без засечек Шрифты

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

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

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

Шрифты

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

Без засечек можно использовать как заголовок и как основной текст, что делает выбор шрифта невероятно универсальным. К популярным шрифтам без засечек относятся Arial, Didot, Open Sans и Calibri.

Тип шрифта № 3: Slab Serif

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

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

Семейство slab serif характеризуется толстыми линиями блоков в конце штрихов. Они могут казаться пышными, как Кларендон, или более заметными и свободными, как Роквелл.

Сегодня к числу наиболее часто используемых шрифтов с засечками относятся Archer от H&FJ и Officina Serif от Erik Spiekermann.Первые бывают разного веса и красиво выделены курсивом. Последний представляет собой насыщенный и разборчивый шрифт, который очень гибок.

Как использовать шрифты Slab Serif Шрифты

Slab serif идеально подходят для привлечения внимания и лучше всего используются в заголовках презентаций и документов.

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

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

Попробуйте также объединить разные типы шрифтов в один дизайн. Slab serifs действительно хорошо сочетаются с serif практически в любом дизайн-проекте, так что вы можете протестировать некоторые из ваших собственных сочетаний шрифтов в будущих проектах.

Тип шрифта № 4: Сценарий

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

Формальные скрипты

Эти элегантные шрифты часто используются в дипломах и приглашениях. Большинство этих типов вдохновлено формами букв 17 и 18 веков, созданными такими мастерами письма, как Джордж Шелли, Джордж Бикхэм и Джордж Снелл.

Формальные скрипты включают Snell Roundhand, Helinda Rook, Young Baroque, Elegy и Bickham Script.

Blackletter и Lombardic Scripts

Эти типы также известны как Textura, Gothic Script или Gothic minuscule. Это были популярные сценарии в Западной Европе с 12 по 17 века. Blackletter был построен по образцу старинных рукописных надписей, которые использовались до изобретения подвижного шрифта.

Каллиграфические шрифты

Это семейство имитирует каллиграфию. Каллиграфические шрифты, первоначально появившиеся в религиозных книгах, древних указах и исторических сочинениях, вдохновили современных типографов на создание цифрового аналога.В это семейство входят Bell Trap, Blaze и Vivaldi.

Случайные скрипты

У этой семьи менее формальная и более активная рука. Мазки различаются по ширине и кажутся нанесенными влажной кистью, а не кончиком пера. Они стали фаворитом рекламных дизайнов в Европе и Северной Америке в 1970-х годах.

Этот стиль шрифта призван выглядеть неформально, как если бы он был написан на скорую руку. Это семейство включает Brush Script, Mistral, Kaufmann, Limehouse Script, Nadianne и Freestyle Script.

Как использовать скриптовые шрифты Шрифты

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

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

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

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

Тип шрифта 5: декоративный

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

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

Рядный

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

Гранж

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

Трафарет

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

Как использовать декоративные шрифты

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

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

Билеты на мероприятие

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

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

Готовы повысить уровень своего онлайн-дизайна?

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