Шрифты подобрать: Шрифты Онлайн

Как правильно подобрать шрифт для сайта

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

1. Сочетайте шрифты с засечками со шрифтами без засечек (sans serif и serif)

Самый популярный типографский прием – набор заголовка рубленым (без засечек) шрифтом, а текста – шрифтом с засечками. Это классическая комбинация, в ней почти невозможно ошибиться.
В примере ниже — типичный макет статьи, в заголовке использован Trade Gothic Bold No.2, а в тексте — Bell Gothic. Оба шрифта – рубленые, тем не менее, у них очень разные «личности». Хорошее правило при создании макета — не привлекать излишнее внимание читателя к виду шрифта. Trade Gothic предполагает серьезность, а Bell Gothic, наоборот – динамику и экспрессивность.

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

Теперь рассмотрим пример справа. Bell Gothic заменён шрифтом Sabon. Sabon, как шрифт с засечками, очень хорошо работает с Trade Gothic. Они оба нацелены на ясность и читабельность благодаря хорошей высоте знаков x-height (грубо говоря, это высота строчной буквы x в шрифте, она определяет расстояние между базовой линией и верхней). Таким образом, у обоих шрифтов одна и та же цель, что создает прекрасное сочетание.

2. Избегайте шрифтов одного класса

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

На примере внизу, слева, в заголовке использован шрифт Clarendon Bold, который относится к классу Slab serif. В теле статьи использован Officina Serif который также относится к Slab serif. Шрифты класса Slab serif отличаются ярко выраженным характером, им нравится доминировать на странице. Использование двух шрифтов класса Slab serif в одном месте может вызвать ненужное напряжение.

А теперь обратите внимание на правую сторону примера. Clarendon Bold в заголовке поставлен рядом с более нейтральным New Baskerville. New Baskerville относится к универсальному классу Transitional serif с широкими знаками, которые хорошо сочетаются с жирным Clarendon. Выбор шрифтов разных классов с самого начала избавит вас от головной боли при создании макета.

3. Присвойте шрифтам разные роли

Один из простых способов комбинации шрифтов, это составление ролевой дизайнерской схемы для каждого шрифта. В примере ниже мы использовали Akzidenz Grotesk Bold прописными для имени автора статьи. Для заголовка — Rockwell Bold. Вводный абзац и основной текст статьи в одном шрифте – Bembo, но разного размера. И, наконец, подзаголовок — Akzidenz Grotesk Medium.

Отчетливый Rockwell Bold мы оставили для привлечения внимания к заголовку. В целом использовали уже открытую нами схему сочетания рубленого шрифта и шрифта с засечками. И даже при таком выборе у нас большое количество вариаций по размеру, весу и функциям шрифтов. В общей сложности использовались 4 шрифта из 3-х гарнитур, все они привели к связанному, сплоченному дизайну, так как у каждого шрифта своя роль, четко определенная в типографической иерархии. Так что если сомневаетесь – распределите роли!

4. Контрастная насыщенность шрифтов

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

На примере слева у нас разные размеры шрифта, но недостаточный контраст по толщине. Myriad Light рядом с Minion Bold «пропадает» и теряет визуальный авторитет. Как бы то ни было, но глаз читателя должен в первую очередь выделять заголовок, а не превью.

Справа мы использовали Myriad Black над Minion нормальной толщины. Возможно, заголовок тяжеловат, но по крайней мере, у читателя не возникает сомнений по поводу того, что читать первым.

5. Создайте на странице различную тональность текста

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

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

6. Не смешивайте настроения шрифтов

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

На примере слева мы соединили Franklin Gothic Bold и Souvenir. Общее впечатление от Franklin Gothic – мужество, сила, стойкость, но с налетом элегантности. Он не ублажающий взор, но очень функциональный. А Souvenir – игривый, легкомысленный, немного равнодушный, но очень симпатичный. Сочетание этих двух шрифтов подобно встрече гвардейца, охраняющего Букингемский дворец, и девочки. Гвардеец послушно игнорирует игривую девчонку у его ног, пытающуюся заставить его улыбнуться. Такое смешение плохо работает. Разное настроение шрифтов привлекает внимание к самим шрифтам, а не содержанию, что свидетельствует о слабом дизайне.

Справа в пару к Souvenir мы поставили более подходящего соседа. У Futura Bold много лиц, но он очень хорошо сочетается с Souvenir по многим причинам. Во-первых, у обоих шрифтов высокие x-height. Оба шрифта обладают округлостью форм и незначительной, но тем не менее заметной закрученностью концов. Ни один из них не доминирует над другим. Оба работают на создание веселого, приподнятого настроения. Напряжения между ними нет.

7. Сочетайте яркое с нейтральным

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

На примере слева Dax Bold стоит рядом с Bernhard Modern. Это плохой выбор хотя бы по двум соображениям. Во-первых, Dax имеет узкие знаки и большую x-height, в то время как Bernhard Modern, наоборот, при большой ширине глифов обладает одной из самых низких x-height среди популярных классических гарнитур. Во-вторых, Dax неформальный, современный и яркий. Идеально подходит при подачи текста технарям, компьютерщикам и вообще современной молодежи. Bernhard Modern, наоборот, классический, спокойный, рафинированный и даже немного личный. Объедините неподходящие физические характеристики шрифта с личностными, и получите очень плохо функционирующую типографику.

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

8. Избегайте несоизмеримых сочетаний

Когда между выбранными шрифтами слишком большой контраст, это создает визуальный дисбаланс, что плохо отражается на всем дизайне. Слева мы поставили Antique Olive Nord – чрезвычайно жирный шрифт, — рядом с Garamond Narrow. Контрастный перебор очевиден. В большинстве подобных случаев, такой контраст идет дальше обычного привлечения внимания и вызывает ощущение неуклюжести. Следовательно, он не доносит до читателя смысла текста.

Справа Antique Olive Nord был заменен более мягким и сдержанным Antique Olive Bold. Garamond Narrow мог бы быть заменен на тот же Garamond в варианте book weight, но более хорошим выбором нам представляется Chaparral. У Chaparral более высокая x-height, чем у Garamond, и в общем у него более современный и нейтральный вид рядом с характерным Antique Olive Bold.

9. Будьте проще – не используйте более двух шрифтов

Вместо того, чтобы перелопачивать библиотеки шрифтов в поисках «того самого» сочетания, иногда лучше вернуться к классическому и гораздо более простому варианту – сочетанию шрифта с засечками и рубленого. На примере внизу мы составили четкую типографскую иерархию, добились разнообразия, получили интересную разбивку по тональности текста и его возрастающую читабельность. Все это было сделано с помощью всего двух шрифтов. Хотя, строго говоря, у нас здесь пять шрифтов: три Helvetica Neue и два Garamond.

Как добиться всего этого без лишних усилий? Во-первых, если вы возьмете шрифты из одной и той же гарнитуры, то наверняка получите отличную визуальную совместимость даже не задумываясь над этим. Во-вторых, мы выбрали проверенную временем комбинацию – сочетание нейтрального заголовочного шрифта и опять же нейтрального шрифта для текста. И Helvetica Neue, и Garamond обладают выраженной, но нейтральной личностью, и они могут сочетаться в сложных макетах друг с другом, потому что мы изначально заложили строгую иерархию. Следование правилам при использовании правильных шрифтов помогает достичь высоких результатов без лишних затрат энергии.

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

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

Справа использовались те же два шрифта, но другого размера. TheMix Italic был значительно увеличен, в то время как New Century Schoolbook уменьшен до более нормального, хоть и все еще читабельного, размера. Использование шрифтов различных размеров помогает четко распределить иерархию и увеличить тоновое разнообразие в типографике.

В заключение

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

Перевод Виктории Шидловской статьи Best Practices of Combining Typefaces из журнала Smashing Magazine в ред. автора

Топ-10 лучших сервисов подбора комбинаций шрифтов

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

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

Начнем подборку с сервиса, который мы уже когда-то рассматривали.

Font Combination Tool

В качестве слогана здесь указана интересная фраза – “типографика говорит до того, как вы прочитаете написанное”. Именно так можно охарактеризовать идеальное сочетание шрифтов. Работает здесь все максимально просто – вам лишь нужно выбрать один из вариантов из выпадающего списка, после чего откроется страница с примерами его использования с разным текстом (на светлом и темном фоне). Также в нашей статье про Font Combination Tool найдете дополнительный бонус с 10тью удачными комбинациям заголовок+текст.

Font Joy

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

Font Combinations Library

Это библиотека построена на базе Гугло шрифтов, которые совместимы с программами Adobe XD и Sketch. Здесь можно не только найти все популярные варианты, но и «поиграться» с настройкой разных параметров отображения текста: стиль, цвет, размер и многое другое.

Font Pair

Это еще один бесплатный сервис для подбора сочетаний Гугл Fonts с возможностью быстрой загрузки найденного решения. Он предлагает разнообразные фильтры для ускорения поиска: Sans-Serif / Serif, Display / Serif, Monospace и т.д. На сайте также есть обширная коллекция уже готовых комбинаций!

Генератор шрифтовых пар Canva

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

Mixfont

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

Typ.io

Ресурс Typ.io содержит почти 3 тысячи примеров из реальных веб-проектов и приложений, среди которых 100% найдется удачная комбинация для любой задачи и тематики. Сначала вы выбираете одну из категорий материалов, дальше открывается список с конкретными шрифтами, и вы переходите к предварительному просмотру понравившегося вам варианта. На скриншоте увидите, как именно и насколько удачно сочетаются разные шрифты, а под ним будет CSS-код для внедрения у себя на сайте.

Google-Type от Femmebot

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

Комбинатор шрифтов Typotheque

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

Typespiration

Ресурс Typeinpiration позволяет просматривать готовые дизайны сайтов с потрясающими комбинациями шрифтовых и цветовых палитр. К каждому из примеров прилагается не только информация об используемых названиях фонтов и кодах цветов, но и HTML/CSS исходники, которые вы можете скопировать прямо на свой сайт. Интересный по реализации и идее проект.

Пакеты шрифтов Adobe

Эти примеры от Adobe представляют собой профессиональные подборки шрифтов, отлично сочетающихся между собой. Они сгруппированы по нескольким категориям: меню, путешествия, 90-тые и др. Имейте ввиду, что для доступа ко всему этому добру вам понадобится учетка Adobe Creative Cloud.

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

Как выбрать шрифты для сайта (9 советов и 5 полезных сервисов)

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

Содержание:

Текст — основной источник информации на сайте.

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

А еще текст стараются сделать легким для восприятия, таким, чтобы его хотелось прочитать.

И без шрифтов в этом случае — просто никуда.

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

А еще они меньше утомляют глаза, и это тоже важно.

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

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

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

Можно сказать, что шрифт для текста — как одежда для человека.

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

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

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

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

ГЛАВА 1:

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

В чем трудность выбора шрифтов?

В их запредельном разнообразии.

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

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

От такого разнообразия голова кружится, а мысли разбегаются.

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

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

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

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

В поисковую строку вводим адрес сайта…

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

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

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

Кликните правой кнопкой мыши на выбранном элементе страницы => выберите в выпадающем меню пункт «Исследовать элемент», и в правой стороне экрана откроется код.

Нажимаем на «Исследовать элемент»…

В коде Вам нужно найти атрибут font-family или «семейство шрифтов».

Сделав это, Вы увидите названия всех шрифтов, присутствующих в выбранном Вами элементе.

…находим font-family и видим названия шрифтов

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

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

А в завершении мы познакомим Вас с еще четырьмя очень интересными «шрифтовыми» сервисами ― это Allfont, Fontstorage, Typ.io и Modulcare.

ГЛАВА 2:

Общие подходы к выбору шрифтов

Поговорим в целом о том, на что ориентироваться, выбирая шрифты.

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

Основных принципов немного — заблудиться сложно.

Принцип 1. Простота

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

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

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

Такие шрифты лучше использовать только для заголовков

А известный западный веб-дизайнер Тед Хант провел целое исследование о том, какие эмоции у людей вызывают разные шрифты.

Речь идет об использовании текста в логотипе, но и для контента выводы вполне подходят.

Разные шрифты и начертания вызывают совершенно различные эмоции. Хотя текст может быть идентичным!

Принцип 2. Сочетаемость

На сайте редко используется только один шрифт.

Как правило, применяются сочетания, состоящие из 2-3 видов шрифтов.

При этом они должны смотреться гармонично и не противоречить друг другу по условной «тональности».

Принцип 3. Выразительность

Если Вы решили использовать на сайте 2 или 3 шрифта, делайте их контрастными — или ограничьтесь одним.

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

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

Арбуз и крыжовник — контраст очевиден

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

Принцип 4. Отображение

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

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

И это может стать эпик фейлом.

ГЛАВА 3:

Рассматриваем варианты: шрифт с засечками

Шрифт с засечками и его особенности.

Откуда пошли засечки?

Почему их любят работники типографий?

Как засечки помогут прочесть текст, написанный латиницей?

Есть в классификации шрифтов вечная тема.

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

Примерно так же можно спорить о том, какие шрифты лучше — с засечками или без.

Поговорим о шрифтах с засечками — например, вот таких.

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

Шрифты со штрихами-засечками на концах называются антиквой, а в их английских названиях часто есть слово serif (засечка).

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

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

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

Пример использования текста с засечками

Самый популярный шрифт из группы антикв сегодня — Times New Roman.

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

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

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

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

Все они визуально «звучат» в серьезной деловой тональности.

А значит, делают тексты более убедительными.

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

С латиницей это случается!

Пример, когда засечки не дают латинским буквам сливаться

ГЛАВА 4:

Изучаем шрифты: шрифт без засечек

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

Самые популярные шрифты группы гротеск.

Почему «детские» — это шрифты без засечек?

Шрифты без засечек относятся к группе гротесков или рубленых шрифтов.

В их названиях часто присутствует слово sans/sans serif — «без», «без засечек».

Штрихи на концах символов в таких шрифтах отсутствуют.

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

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

Наиболее распространенные представители этой группы — шрифты Arial, Helvetica и Verdana.

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

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

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

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

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

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

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

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

ГЛАВА 5:

Часто встречающиеся шрифты

Самые распространенные шрифты Интернета.

Как они выглядят и чем друг от друга отличаются?

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

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

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

Arial. Ближайший «заклятый» конкурент Times New Roman — шрифт-гротеск Arial. Он часто встречается на сайтах самой разной тематики и направленности. Используется как шрифт по умолчанию в самом распространенном офисном приложении Google Docs.

MS Sans Serif. Системный шрифт Microsoft Windows, которым прописаны все оповещения этой операционной системы.

Tahoma. Этот шрифт считается техническим и часто используется в описаниях сложной продукции или технических решений; в инструкциях.

Georgia. Шрифт из группы антикв, напоминает Times New Roman, но с более широкими и резкими засечками.

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

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

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

ГЛАВА 6:

Советы по выбору шрифтов для сайта

Мы кое-что знаем о шрифтах.

Но как эти знания использовать?

В конце концов, с засечками или без?

Что и как выбрать?

При выборе шрифтов для Вашего сайта:

1. Учитывайте тональность. Характер и тональность шрифта должны соответствовать общему стилю сайта. Так, для сайта, посвященного дизайну класса люкс, лучше использовать утонченные изящные графичные шрифты. Простая Verdana или сжатый Impact убьют такой контент. Так же, как забавный Сomic Sans MS уничтожит научную статью или техническое описание.
2. Сочетайте антиквы и гротеск. В типографике есть распространенный прием, когда заголовок набирают рубленым шрифтом, а сам текст — традиционным шрифтом с засечками. Это сочетание считается классическим; выбирая его, трудно ошибиться. Впрочем, нередко поступают и наоборот.

Классическое сочетание шрифтов с засечками и без

3. Минимизируйте. 2 шрифта — оптимальное сочетание для сайта, для использования 3 уже нужно какое-то дополнительное обоснование. Например, заголовок набирается шрифтом Verdana, основной текст — Georgia, а справочная информация во врезках — Calibri. Нежелательно использовать и слишком много вариантов начертания — обычно достаточно нормального и полужирного начертания, или нормального начертания и курсива. Помните, что полужирный шрифт почти как капслок: если его использовать слишком активно, сложится ощущение, что Вы кричите на посетителя сайта.
4. Не используйте для основного текста рукописные шрифты. Дочитать текст, написанный шрифтом Mistral, до конца желающих найдется немного. И, кстати, здесь используется тот же 16 кегль, что и во всем остальном тексте — а разве скажешь?
5. Соблюдайте пропорциональность. Не используйте вместе моноширинные шрифты (например, Courier New) — такие, где все буквы имеют одинаковую ширину — вместе с пропорциональными (например, Arial). Это будет выглядеть дисгармонично, как в этом примере.
6. Делу время — потехе час. Шрифт Comic Sans оставьте для сайтов с комиксами и подписей для фото в Instagram. Для остального этот забавный развлекательный вариант не подходит.
7. Помните об аудитории, ее возрасте, культурном бэкграунде и сфере интересов. Например, для детей желательно использовать крупные округлые шрифты с не слишком «серьезным начертанием» и без засечек — они лучше воспринимаются именно детьми. Например, это шрифты Sassoon Primary или Adigiana.

Пример «детского» шрифта…

…и еще один

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

Текст для молодежной аудитории. Основной контент — Lato, заголовок — Carter One

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

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

Пример, когда интервалы и отсутствие форматирования убивают текст, набранный обычным Calibri.

Так лучше! Шрифт и текст — те же, что и в примере выше

9. Тестируйте. Никто не запретит Вам провести А/Б-тест, меняя только шрифты и их сочетание. Тестирование — лучший способ узнать, что лучше работает в каждом конкретном случае.

ГЛАВА 7:

Четыре «где?» — где выбрать, подобрать, посмотреть и примерить шрифты

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

Можно посоветоваться с умными digital-сервисами!

Они помогут заранее визуализировать результат.

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

Одних только кириллических шрифтов здесь собрано более 2200!

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

Любые текстовые капризы воплощаются здесь

Отличный сервис для подбора гармоничных шрифтовых сочетаний и размеров шрифтов — Fontstorage.

Добро пожаловать на Fontstorage

На сайте Вы найдете удобный раздел «Полигон», где размещена текстовая «рыба» — пример условных заголовка, лида и основного текста.

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

Так выглядит раздел «Полигон»

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

Можно «примерить» шрифт вместе с картинкой

Еще один интересный с точки зрения шрифтов ресурс — Typ.io.

На нем можно, кликнув по выбранному шрифту в разделе «Searching for it», увидеть, какие шрифты рекомендованы ему в пару.

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

«Поиграть» с размером шрифта можно при помощи сервиса Modularcale (создатель ― Тим Браун, глава отдела типографики компании Adobe).

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

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

Наша справка: Существует и формула, по которой можно рассчитать, каким размером шрифта должен быть набран заголовок по отношению к основному тексту. Для этого используется коэффициент «золотого сечения», который равен 1,6. Так, чтобы получить оптимальный (с точки зрения этой формулы) размер заголовка, кегль (размер) шрифта основного текста умножают на 1,6.

Пример:

• Основной текст: 14 px
• Формула: 14х1,6=22,4
• Оптимальный размер текста заголовка: 22 px

Заключение

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

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

При этом, как ни печально, но одного универсального совета в стиле «используйте всегда Calibri 14 px и будет вам счастье» дать невозможно.

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

В работе с сайтом нет мелочей — на конверсию влияет все, в том числе и грамотная работа со шрифтами.

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

101 бесплатный сервис для дизайнера

Представляем вам подборку полезных сервисов для дизайнера

Шрифты

• Google Fonts – всеми любимая библиотека шрифтов. Позволяет подобрать и скачать разные шрифты на все случаи жизни. 
• 1001 Free Fonts — библиотека шрифтов. Имеет удобную навигацию – шрифты отсортированы как по алфавиту, так и по типам. Имеется раздел русских шрифтов.
• Fontstruct – онлайн конструктор шрифтов. Очень простой инструмент, позволит создать собственный шрифт. Рисовать можно не только стандартными квадратами, но и другими фигурами – точки, закругленные углы и пр. Для начинающего идеальный инструмент, чтобы попробовать и увидеть типографику в действии.
• Font Squirrel – одна из самых больших библиотек шрифтов. Кроме этого можно загрузить рисунок и получить названия шрифтов, используемых на нем. Есть магазин шрифтов, и даже магазин одежды с логотипами. 
• Type light – полнофункциональный редактор шрифтов. Позволяет создавать, редактировать и конвертировать шрифты OpenType, TrueType и PostScript. Необходимо скачивать и устанавливать. Бесплатная версия имеет ограниченный функцуонал по сравнению с бесплатной. Но для создания простого шрифта хватает.
• What Font is – онлайн сервис для подбора шрифтов сайта. Загружаем файл шрифтов, указываем url сайта и выидим как загруженный шрифт будет выглядеть на сайте. Удобнцый сервис.
• 1001 Fonts – библиотека шрифтов (более 15000). Удобная навигация – шрифт можно выбрать по размеру, типу, теме, дизайну и т.д. Меню позволяет настроить вывод, что дает возможность увидеть каждый шрифт в разных опциях: размер, начертание и т.д.
• Font Flame – онлайн сервис подбора пары сочетаемых шрифтов. Действует очень просто – на главной странице предложен листок с двумя надписями, сделанными разными шрифтами. Понравилось – жмите «Love», нет – «Hate». Потом выбранные можно просмотреть еще раз. Клик по названию шрифта открывает Google Fonts.
• Typecast – выбор шрифта для прототипа. Можно просмотреть как шрифт будет выглядеть на любых устройствах. Необходимо обозначить разные типы текста – заголовки, кавычки и т.д. Можно выбрать гарнитуру, размер, начертание, установить отступы. Вы увидите вашу будущую страницу в тех шрифтах, которые установили. Большой плюс – выбор макета (одна колонка или несколько, разные расположения блоков).
• Wordmark — позволяет подобрать шрифт, установленный на компьютере пользователя, для текста, логотипа или заголовка. При вводе текста в поле показывает его различными шрифтами. Можно выбрать размер, регистр, отображение черно-белое или наоборот. Понравившиеся варианты публикуются в триттере или на фейсбуке – по выбору пользователя. Можно отправить на email.

Стоки фотографий

• Unsplash – постоянно пополняемый сток фото. Коллекции разделены на темы. Можно найти все что угодно, от «Афроамериканцы» до «Природа». Каждая фотография имеет свою оценку, можно посмотреть лучшие или новинки.
• FoodiesFeed – фото еды. Изображения разбиты по категориям. Можно выбрать лучшие, эксклюзивные, иконки, мокапы и пр.
• Free Refe Photos — огромный список изображений «Real life». Главным образом пейзаж и фотографии природы. Неудобная навигация, все фото на главной странице, появляются при скроллинге. 
• Little Visuals – качественные фото ландшафтов и зданий. Можно скачать архивом лучшие фото, выложенные за неделю. Фотографии обозначены хештегами, но не разбиты по категориям.
• Gratisography – огромная библиотека бесплатных фото. Все фото разбиты на шесть тем: люди, гримасы, города, предметы, природа и животные. Можно искать по словам. 
• Death to the Stock Photo – сток фотографий. Просто посмотреть и выбрать нельзя. Они делают подборку за месяц и дают ее скачать после ввода email. Архив весит около 11 Мб. На почту присылают лучшие фото и ссылку на скачивание.
• Superfamous – большая коллекция фото с необычного ракурса. Набор небольшой, но интересный. 
• The Pattern Library – шаблоны и текстуры. Набор достаточно велик, шаблоны необычны. Сменяются прокруткой, причем постепенно. Можно увидеть как шаблон будет выглядеть на весь экран или на его часть.
• New Old Stock – винтажные фото из архивов. Бесплатных фото немного, но регулярно появляются новые.
• Pexels – большое количество фото на все случаи жизни. Разбиты по темам, очень удобно искать. 
• Jay Mantri — большой набор фотографий. Классификации как таковой нет, можно посмотреть по месяцам.

Стоки графики

• Brusheezy – бесплатные кисти, шаблоны, текстуры и прочее для фотошопа. 12 категорий, в каждой из которых подкатегории. Выбор огромен. 
• Iconfinder – иконки, как платные, так и бесплатные. Скачать можно в форматах ICO, PNG, ICNS, SVG.
• Brushez – большая коллекция кистей для фотошоп. Кроме них еще векторные примитивы, формы, шаблоны, стили. Каждый раздел разбит на подразделы. Например, для кистей более 20 категорий. 
• Vecteezy – бибилотека векторной графики, включая изображения и иллюстрации. Большое количество категорий и огромное – графики.
• Iconbird — русскоязычный сервис по поиску иконок. Можно ввести тему и получить набор иконок, а можно просматривать по категориям. 
• Icons8 — русскоязычный сервис, предлагающий более 42000 иконок по разным тематикам.

Инфографика

• Vizualize – онлайн сервис для создания инфографики «О себе». По сути, создает графическое резюме.
• Canva – простой инструмент для создания любого дизайна. Позволяет оформить презентацию, плакат, запись в соцсетях, книги, письма, материалы и многое другое. Все делается на основании шаблонов, меняется текст. Но шаблонов очень много, есть из чего выбрать.
• Easelly – создание инфографики на основании шаблонов. Встроенный онлайн редактор позволяет менять оформление, размещать дополнительные жлементы, менять текст.
• Infogram – онлайн сервис для создания инфографики и интерактивных диаграмм. Не все функции доступны, придется покупать аккаунт.
• Visage – простой инструмент для создания любого визуального контента (диаграммы, инфографика, изображения для блога и пр.). Множество шаблонов, простой редактор. Некоторые функции платные. 
• Gliffy – онлайн сервис для создания диаграмм. Редактор действует по принципу Microsoft Visio. 
• Visme – онлайн инструмент для создания презентаций и инфографики. Более 1000 шаблонов. Редактор позволяет добавлять текст (заголовки, списки, кавычки и обычный), анимированный текст и виджеты. В бесплатном аккаунте можно скачать как JPG файл.
• Piktochart – создание высококачественной графики – презентации, инфографика или печатный материал. Выгружается PNG, JPG разных размеров.
• Drawio – удобный онлайн сервис для создания диаграмм. Можно сохранять в dropbox и подобные сервисы, можно на диск.
• Venngage – простое создание инфографики, плакатов, отчетов, материалов для соцсетей и пр. В бесплатной версии дает только ссылку на публикацию. За скачивание надо платить.
• Cacoo —онлайн сервис для рисования диаграмм и карты сайта. Пожалуй, самый лучших по возможностям. Большое количество инструментов и шаблонов. Экспортировать можно в PNG, PDF, SVG, PPT и др.
• Creately – онлайн сервис рисования диаграмм. Доступны только для публикации. Скачивание платное.
• Lucidchart — онлайн сервис создания диаграмм и чертежей. Есть возможность импортировать диаграмму Microsoft Visio. Экспортируется в PDF, PNG и JPG. Имеется платный функционал.

Цвета

• Color Hunt – подбор сочетаний цвета. Можно подбирать до четырех цветов. Есть готовые решения для выбора.
• TinEye – анализирует сайт и выводит список ресурсов, на которых используется картинка с сайта.
• ColorZilla – позволяет создавать цвета и градиенты. Выводит css свойства для них.
• Adobe Color CC – создание цветовых схем.
• Colicious – нажимайте на пробел и генерируйте новый цвет.
• Colorscheme — подбор цветовых схем. Есть версия на английском и на русском. Позволяет подобрать цвета к сайту. Имеет тонкую настройку, показывает код цвета. В конечном итоге позволяет просмотреть страницу в выбранной цветовой гамме. Самый большой плюс – просмотр гаммы с точки зрения отклонения цветовосприятия. Также позволяет выбрать разные цветовые модели. Сохраняет в палитру Gimp, CSS,PNG и т.д. Имеет конвертер цветов для перевода из одной цветовой модели в другую.
• Paletton – инструмент для создания комбинаций цветов. Ничем не отличается от Colorscheme.
• Pictaculous – анализирует палитру изображения PNG, JPG или GIF. Загружайте изображение и получите набор всех цветов, которые в нем присутствуют.
• Hex Color Tool – инструмент выбора цвета. Ползунками настраивается цвет, можно выбрать яркость. Затем выбранный цвет сохраняется. Можно подобрать палитру.
• (Un)clrd – плагин для браузера, который удаляет все цвета и оставляет сайт в черно-белом цвете.
• BrandColors — самая большая коллекция официальных фирменных цветовых кодов. Выбираете название бренда и скачиваете названия его цветов, в том числе и в css- файл.
• Colortyper — подбор цветов с необычного ракурса. На экране показываются разноцветные символы, которые пересекаются. Результат пересечения – новый цвет. Выглядит интересно.

Вдохновение

• Dribbble — Самое многочисленное сообщество дизайнеров. Работы, сообщества, общение – здесь можно найти все что угодно. 
• Freebbble – шаблоны и дизайны из Dribbble. Что-то можно скачать бесплатно, что-то купить. Можно найти шаблоны для CMS, конструкторов, иконки, мокапы, сверстанные шаблоны сайтов и многое другое.
• Muzli — Ежедневное вдохновение дизайна. Ресурс для дизайнеров с примерами самых необычных работ.
• Awwwards – лучшие разработки дизайнеров. Организован как сообщество, где можно проголосовать сайт. Выбираются сайт дня, месяца, года и пр. Большое количество дизайна, видео, разработок. 
• Design You Trust — сообщество дизайнеров, совместно использующее последние тенденции, новости, портфолио, дизайны и творческие объявления.
• Really Good Emails — огромная коллекция хорошо разработанных электронных писем. Выбираете шаблон и получаете его код html, css и js. Можно менять текст, рисунки и пр.
• Fubiz – публикации из области дизайна и креатива. Можно найти фотографии, дизайн, графику, видео и др. Все разбито по категориям.
• Designspiration – коллекция дизайнов в стиле Pinterest. Огромное количество идей и примеров – типографика, логотипы, письма и многое другое.
• Behance – коллекция портфолио от профессионалов. Можно оставить вакансию или резюме.
• Mobile-patterns – библиотека скриншотов iOS и Android. Все разбито по разделам. Можно найти много идей.
• One Page Love – галерея лучших дизайнов web-страниц. Можно купить шаблоны и темы. Есть и бесплатные.
• Uispace — ресурс для дизайнеров. Можно бесплатно скачать psd, sketch, шрифты, мокапы и пр.

Графические редакторы

• DAZ 3D — 3D моделирование. Регистрируетесь и скачиваете дескопное приложение. 
• Gimp – бесплатный аналог фотошопа. Позволяет настроить модульную сетку, создать направляющие, работать со слоями, добавлять эффекты и пр. Является неплохой бесплатной заменой фотошопу. Является расширяемым — можно скачать дополнительные плагины.
• Blender — 3D моделирование, анимация, рендеринг, звук, видео. Позволяет создавать игры. Быстро развивающийся редактор, очень популярен.
• Aviary – онлайн сервис редактирования фотографий. Много возможностей, в том числе «Эффект красных глаз», изменение размера и пр.
• Pixlr – онлайн редактор фотографий и редактор графики отдельно. Последний похож на фотошоп. Сохраняет на диск. 
• BeFunky – онлайн сервис редактирования фотографий. Эффекты, рамки, графика, ретушь и многое другое. Есть русскоязычный интерфейс.
• Inkscape – полноценный редактор векторной графики с открытым исходным кодом. Поддерживает возможности формата SVG — работу с фигурами, контурами, текстом, векторизацией растровой графики и др. Кроме обработки векторных изображений, позволяет создать шаблон сайта и нарезать его – модульная сетка присутствует. Дает возможность рисовать фоны, баннеры, векторные логотипы и др.
• IconEdit2 – очень простая программа для рисования иконок. Имеет фильтры. Позволяет экспортировать изображение для Android и Apple. Можно настраивать глубину цвета, поворачивать и корректировать иконку. Поддерживает полупрозрачность, несколько изображений в один файл ICO и сглаживание во всех инструментах рисования.
• Falco GIF Animator — программа для создания покадровой анимации и анимированных иконок. На ресурсе можно скачать много разных программ. 
• Krita – профессиональный десктопный редактор с открытым исходным кодом. Доступен для разных ОС. 
• Boxy-SVG — редактор векторной графики, подобный Adobe Illustrator, Sketch и Inkscape.
• Photopos — многофункциональная программа, с функциями редактора фотографий, графического редактора и приложения для создания компьютерной графики.
• 5Dfly — бесплатное приложение пакетной обработки фотографий. Умеет создавать слайд-шоу под PowerPoint. Отдельно можно скачать конвертер в PDF.
• PaintStar — бесплатный редактор изображений. Интерфейс очень похож на Paint, но возможностей больше. Слои, например.
• PhotoScape – простой редактор фотографий. Имеет функции настройки яркости и цвета, баланс белого, коррекция подсветки, рамки, воздушные шары, мозаичный режим, добавление текста, рисование изображений, обрезка, фильтры, удаление эффекта красных глаз, расцветка, кисть, клон-марка, кисть эффекта и пр.
• Pablo — онлайн редактор, создающий изображения для социальных сетей. Можно загрузить изображение, посмотреть его для разных устройств, наложить эффект и и текст. 
• Internet Marketing Ninjas – онлайн сервис для быстрой обрезки изображений. Очень удобно, если надо сделать быстро.
• Meme Generator — генератор мемов. Можно выбрать картинку, создать подпись или сгенерировать ее автоматически. Не скачивается, только публикуется в соцсетях.

Программы для создания логотипа

• Free Logo Maker – онлайн редактор для создания простых логотипов. Позволяет рисовать с нуля. Бесплатно сохраняет в PNG.
• DesignMantic – сервис, генерирующий логотип. В редакторе можно изменить, добавив новую форму или текст.
• Logotype Maker – сервис, генерирующий логотип на основании шаблона. Потом можно поменять в редакторе. Сохраняет в JPG и PNG форматах. 
• Jeta Logo Designer — позволяет быстро создать красочный логотип. Очень проста в обращении. Имеет набор из более чем 10000 фигур и иконок. Возможности стилизации достаточно велики. Объекты, как и текст, можно трансформировать и поворачивать, добавлять эффекты сглаживания, свечения, обводки, тени и т.д. Всего имеет около 200 стилей для фигур. Ручное рисование не предусмотрено, но можно загружать рисунки. Имеет собственные шаблоны логотипов.
• Flaming Text — онлайн сервис для разработки дизайна логотипа. Основан на шаблонах, но имеет встроенный редактор. Сохраняет в PNG формате.
• Logo Ease — программа для создания логотипов. Логотип можно создать на основании шаблона, редактировать. 
• Online Logo Maker — онлайн сервис создания логотипов. Простой редактор, легко скачать. Бесплатно только вариант на 300px.

Прототипирование

• Napkin – десктопное приложение для быстрого создания мокапов для iPhone.
• HTML5 UP – отзывчивые и адаптивные шаблоны HTML5.
• Inkbrush — Онлайн инструмент для проектирования шаблонов писем электронной почты. Совмещается с почтовыми службами.
• Marvelapp – онлайн сервис для создания интерактивного прототипа. Можно создать прототипы для разных устройств. Позволяет загружать готовые макеты, просто перетаскивая их в указанную область. В качестве рисунков используйте mockup. Загружайте, выделяйте области, настраивайте переходы. Интегрирован с DropBox и ГуглДиск, Sketch.
• MockPlus – программа для создания прототипов на всех платформах. Скачивайте и создавайте. Досьупно для всех устройств.
• InVision – приложение для совместной работы над прототипом проекта. Инструмент для компании любого размера. Разработка программного продукта с общим доступом — все этапы могут видеть и контролировать как разработчики, так и менеджмент компании.
• Pencil – десктопный инструмент создания прототипов и интерфейсов. Имеет большой набор инструментов, в том числе диаграммю
• iPlotz — создание управляемых каркасов сайта или приложения. Для шаблонов можно получить код HTML. Есть онлайн версия, есть десктопная.
• MockFlow — создание моделей интерфейсов пользователя. Бесплатный доступ ограничен одним пользователем на один проект.
• Pictofon – быстрое создание мокапа для любого устройства. Выбираем макет, загружаем картинку и получаем мокап в PNG формате.
• Placeit — Бесплатные шаблоны и мокапы для всех типов устройств. Выбираем макет (от него зависит ракурс просмотра), указываем имя сайта и видим как он будет выглядеть.
• Pixli – платформа для web-дизайна. Есть бесплатный аккаунт, в котором можно создать мокап, прототип и на его основании сразу сайт.

Как выбрать шрифт — инструкция для маркетологов

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

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

Типы шрифтов

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

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

Засечки — это небольшие штрихи на конце буквы.

Если коротко, то есть шрифты с засечками, без засечек и остальные.

Длинные тексты любят шрифты с засечками

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

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

Для коротких текстов и больших размеров зайдут гротески

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

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

Все больше современной литературы печатается с использованием шрифтов этого типа: Verdana, Tahoma, Montserrat, Open Sans и Helvetica (кстати, про этот шрифт сняли целый фильм).

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

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

Размер имеет значение

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

С помощью разных размеров шрифта выделяются основные моменты в тексте, например, для заголовка и подзаголовка используют более крупный шрифт, для основного контента — шрифт помельче. Если коротко, то самые популярные размеры шрифта для Google Docs, таблиц и писем — это 11, 12 и 14 пунктов, для статьи или блога подойдут 16 пунктов, ну а в презентации можно разгуляться до беспредела, тут все зависит от контекста.

{«0»:{«lid»:»1573230077755″,»ls»:»10″,»loff»:»»,»li_type»:»em»,»li_name»:»email»,»li_ph»:»Email»,»li_req»:»y»,»li_nm»:»email»},»1″:{«lid»:»1596820612019″,»ls»:»20″,»loff»:»»,»li_type»:»hd»,»li_name»:»country_code»,»li_nm»:»country_code»}}

Истории бизнеса и полезные фишки

Классические цвета для основного текста

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

Еще одно свойство цвета в тексте — акцентирование и эмоциональное влияние на читателя. К стандартному черно-белому тексту вы можете добавить любой из приблизительно 16 777 216 цветов. Важно отметить, что в презентации или статье вы можете использовать так называемую «выворотку» (светлый текст на темном фоне) для титульных или промежуточных слайдов. Только не переусердствуйте с этим!

Не уменьшайте интервалы между строк

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

Что это такое: интервал 100% означает, что размер шрифта равен ширине между строк, например, текст написан восемнадцатым шрифтом и восемнадцатым интервалом (в пунктах — единица изменения размера шрифта).

Расставляйте акценты

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

Например, текст, написанный прописными буквами не подходит для длинного чтения. И НИКОГДА И НИГДЕ НЕ ПИШИТЕ ТЕКСТ ОДНИМИ ЗАГЛАВНЫМИ БУКВАМИ, ОСОБЕННО, КОГДА ШРИФТ ПОЛУЖИРНЫЙ.

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

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

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

Сочетайте, чтобы быть в тренде

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

Скачивайте с проверенных источников

Есть масса бесплатных, платных и пиратских шрифтов. Самые популярные бесплатные шрифты собраны в библиотеке Google Fonts. Большой выбор кириллических и латинских шрифтов на Webfonts. С помощью фильтров бесплатные шрифты можно найти даже на MyFonts. Кстати, если хотите найти шрифт, но не знаете его названия, сервис WhatTheFont может с высокой точностью определить шрифт по картинке.

Запомнить

1. Используйте шрифты с засечками для лонгридов и без засечек для короткого текста или наоборот. Выбирайте подходящий вариант исходя из вашей ситуации и предпочтений.
2. Выбирайте удобный для чтения размер шрифта для основного текста и делайте акцент там, где это необходимо.
3. Использование темного шрифта на светлом фоне повышает восприятие информации.
4. Между фоном и цветом шрифта самое главное — это достаточный контраст.
5. Соблюдайте нормальный межстрочный интервал (130-150%).
6. Расставляйте акценты с помощью начертаний и насыщенности шрифта.
7. С помощью цвета можно привлечь внимание к определенному сообщению в тексте.
8. Никогда не пишите текст одними заглавными буквами.
9. Выбирайте шрифт, релевантный изложенной информации.
10. Сочетайте гротеск для заголовка и антикву для основного контента.

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

Как подобрать наиболее оптимальный коммерческий шрифт

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

Принципы использования шрифта

Необходимо учесть некоторые моменты:

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

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

Цель сайта

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

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

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

Целевая аудитория

Если ваш сайт создан для детей, то лучше выбрать понятный шрифт с крупными знаками. Например, отлично подойдёт Sassoon Primary.

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

Сочетание разных шрифтов

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

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

Коммерческие шрифты

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

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

Среди наиболее привлекательных шрифтов студии сегодня выделяют TT Norms Pro, TT Commons Pro и TT Hoves, которые помогут внести свежесть и новизну в контент вашего проекта.

Заметки дизайнера » Как правильно подобрать шрифт

Как правильно подобрать шрифт

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

1. «Одевайтесь по случаю»

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

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

Продолжая параллель с одеждой, добавлю, что, может, моими любимыми вещами и являются чудаковатые брюки-клеш из 70-х, купленные в секонде, но в жизни я их надеваю разве что только на Хэллоуин. У каждого дизайнера есть подобные «брюки-клеш» среди шрифтов – экспрессивные личные фавориты, которые ждут своего часа, своего «Хэллоуина». Но на самом деле, каждое утро я надеваю всю ту же старую пару Levis, и это не потому, что я люблю их больше заветных клешей, просто я провожу большую часть своего времени именно в них.

Поверьте, у каждого дизайнера есть парочка рабочих гарнитур, похожих на удобные джинсы – они универсальны и уместны во многих случаях. Более того, они будто адаптируются к среде и становятся либо более непринужденными, либо более формальными, в зависимости от ситуации. Как правило, у гарнитуры есть несколько типов насыщенности (светлое, обычное, полужирное и т.д.) и/или видов начертания (светлый курсив, суженное начертание). Что до меня, то моими «палочками-выручалочками» являются: Myriad, Gotham, DIN, Akzidenz Grotesk и Interstate среди гротесков, и Mercury, Electra и Perpetua, если говорить об антиквах.

2. Изучайте шрифтовые семьи, чтобы грамотно сочетать разные гарнитуры

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

Гарнитуры могут подразделяться на десятки категорий (к примеру, кто-нибудь вообще слышал о Scotch Modern?), но на самом деле достаточно ознакомиться лишь с пятью основными, чтобы иметь рабочее представление о шрифтах, применяющихся в современной типографике.

Не стоит воспринимать этот список, как исчерпывающую классификацию всех возможных шрифтовых категорий (в интернете существует много замечательных сайтов, которые уже успешно занимаются этой задачей – к примеру Typedia’s type classifications), скорее это удобный и краткий конспект ключевых групп. Давайте рассмотрим подробнее две основные группы шрифтов без засечек (засечки – это небольшие росчерки на концах основных штрихов), две группы шрифтов с засечками и одну совершенно обособленную, отдельную группу шрифтов (с большими брусковыми засечками).

Геометрические гротески

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

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

Примеры геометрических/реалистических шрифтов/гротесков: Helvetica, Univers, Futura, Avant Garde, Akzidenz Grotesk, Franklin Gothic, Gotham.

Гуманистические шрифты

Здесь представлены гротески, произошедшие от рукописного письма – они выглядят так безукоризненно и современно, но в них все еще можно увидеть нечто безусловно человеческое. Сравните «t» в изображении сверху и «t» в геометрических гротесках и вы заметите, насколько более детальна и своеобразна гуманистическая «t».

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

Примеры Гуманистических гротесков: Gill Sans, Frutiger, Myriad, Optima, Verdana.

Шрифты старого стиля

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

Примеры антикв старого стиля: Jenson, Bembo, Palatino, и, в особенности, Garamond, который был уже так хорош при создании, что его никто не пытается переделать вот уже полтора столетия.

Шрифты переходного и нового стилей

С наступлением эпохи Просвещения стали предприниматься попытки изменить шрифт Cтарого стиля, стараясь придать буквам более геометричные, острые, точеные черты, а результатом этого явились шрифты переходного (середина 18 столетия) и нового (конец 18 века, не путать с модернизмом 20 века) стилей. Переходные шрифты показали небольшой прогресс в этой области, хотя Baskerville – само воплощение переходного шрифта – выглядел таким острым, что казалось, будто он может поранить глаз своим штрихом.

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

Примеры антикв переходного стиля: Times New Roman
Примеры антикв нового стиля: Bodoni, Didot.

Брусковые шрифты

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

Они могут внушать чувство авторитености как, например, тяжелый Rockwell, но также они могут выглядеть вполне дружелюбно, как надевно ставший популярным Archer. Кажется, что брусковые шрифты (такие как Rockwell, Courier, Lubalin) отображают урбанистический характер, но если их (особенно Clarendon) применить в другом контексте, они, скорее, будут навевать мотивы Дикого Запада и напоминать деревенские вывески, которые можно встретить на фотографиях того времени. Брусковые шрифты очень сложно отнести к какой-либо из групп, но их отличительные брусковые засечки подобны паре очков в роговой оправе: они могут добавить отличительную изюминку, но c тем же успехом могут мозолить глаза, попав в неверное окружение.

Примеры брусковых шрифтов: Clarendon, Rockwell, Courier, Lubalin Graph, Archer.

3. Не будьте занудой – используйте принцип явного контраста

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

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

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

Когда мы сочетаем различные гарнитуры в дизайне, нам нужно, чтобы они мирно сосуществовали, а не отвлекали зрителя вопросом: один и тот же это шрифт или все-таки нет? Для начала хорошо бы не соединять друг с другом две разные гарнитуры одной и той же группы из пяти вышеупомянутых. К примеру, не стоит соединять два геометрических гротеска, допустим, Franklin и Helvetica. Хотя они и не идентичны, но все же они не разительно отличаются друг от друга, а следовательно, удручающий эффект «ни то, ни се» вашему дизайну будет обеспечен.

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

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

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

4. Секрет в умеренности

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

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

5. Правило номер пять – нет никаких правил

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

В заключение

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

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

Добавить в:

Шрифты Дизайнер (designer)

7 вещей, которые следует помнить при выборе шрифтов для вашего дизайна | Ник Бабич

Типографика играет решающую роль в успехе нового дизайна.

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

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

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

1. Брендинг

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

2. Разборчивость

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

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

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

Шрифт Roboto от Google

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

Шрифт Vivaldi будет трудно читать на маленьком экране.

3.

Serif vs Sans

Обычно одно из первых решений, которое нужно сделать при выборе шрифта для текста — serif или sans ?

Serif (слева) vs. Sans (справа)

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

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

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

И вот несколько безопасных шрифтов с засечками:

• Джорджия
• Lucida
• Times New Roman

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

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

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

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

Полное руководство по выбору шрифтов

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

Это шрифт или гарнитура?

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

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

‍

Пример гарнитуры шрифта

‍

Что такое типографика?

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

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

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

Категории типа

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

‍

Категории шрифта: Serif, Sans Serif и декоративный или Display

‍

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

Пример шрифта с засечками

‍

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

‍

Пример шрифта с засечками на букву «f»

‍

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

‍

Шрифты без засечек

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

‍

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

‍

Декоративные гарнитуры

Это пример декоративного шрифта

‍

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

‍

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

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

‍

Начинайте с вдохновения

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

‍

Пример поиска в Pinterest по запросу «смелый дизайн плаката»

‍

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

‍

Сначала выберите основной шрифт.

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

Посмотрите это видео, где Ран дает 3 совета по улучшению вашей типографики.

‍

Создайте контраст со вторым шрифтом

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

‍

‍

Попытайтесь объединить противоположности

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

‍

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

‍

Разная ширина

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

‍

Пример сочетания сокращенного шрифта без засечек с другим шрифтом без засечек

‍

Рассмотрим форму: геометрические или органические

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

‍

Дизайн плаката с использованием геометрического шрифта Futura

‍

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

‍

Пример геометрического шрифта без засечек (источник: Dribbble)

‍

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

‍

Пример сочетания органических шрифтов (источник: Etsy)

‍

Ограничьте свой дизайн до 2–3 шрифтов

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

‍

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

‍

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

Взгляните на этот плакат, созданный для кинофестиваля Tribeca.Это успешный дизайн по многим причинам, таким как использование масштаба с шрифтом, хорошее использование пространства и иерархия. Но обратите внимание, как они ограничили дизайн тремя шрифтами. «CUT» и «TO» — это два совершенно разных шрифта с жирными засечками. Первый толстый и сжатый, а второй жирный, но широкий. Они также хорошо сочетаются с третьим монотипным шрифтом (думаю, пишущая машинка) для основного текста с мелкими деталями события.

‍

Дизайн плаката с 3 шрифтами

‍

Избегайте модных или популярных шрифтов

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

‍

Papyrus — пример некогда модного шрифта (не делайте этого).

‍

Поймите цель этого дизайна

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

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

‍

‍

Хотите узнать больше о шрифтах и ​​конструкции?

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

‍

Проверьте канал Flux на YouTube

‍

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

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

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

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

Какой шрифт мне использовать? 5 принципов выбора и использования шрифтов — Smashing Magazine

Краткое резюме ↬

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

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

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

1. Платье по случаю

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

Наиболее подходящий аналог по типу комплектации. (Фотография предоставлена ​​Samuuraijohnny. Используется по лицензии Creative Commons.)

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

Мой «любимый» предмет одежды — это, вероятно, диковинная пара расклешенных брюк-клеш из 70-х, которые я купила в комиссионном магазине, но на самом деле они не так часто выпадают из моего туалета за пределами Хэллоуина. У каждого дизайнера есть несколько таких любимых шрифтов — выразительные личные фавориты, которые мы храним и ждем идеального праздничного случая для использования. Чаще всего утром за утром я надеваю одну и ту же старую пару Levis. Дело не в том, что мне нравятся эти больше, чем мои заветные клеш, точно … Я просто, кажется, ношу их большую часть времени.

У каждого дизайнера есть несколько гарнитур, которые похожи на удобные джинсы: они подходят ко всему, они, кажется, адаптируются к своему окружению и становятся более расслабленными или более формальными, в зависимости от случая, и они просто кажутся выходящими из укрытия после дня. Обычно это лица, у которых есть несколько начертаний (светлый, обычный, полужирный и т. Д.) И / или обрезки (курсив, сокращенный и т. Д.). Мои особые защитные одеяла: Myriad, Gotham, DIN, Akzidenz Grotesk и Interstate среди sans; Меркьюри, Электра и Перпетуа среди шрифтов с засечками.

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

Больше после прыжка! Продолжить чтение ниже ↓

Встречайте Image Optimization , новое практическое руководство Адди Османи по оптимизации и размещению высококачественных изображений в Интернете. От форматов и сжатия до доставки и обслуживания: все в одной книге , 528 страниц, .

Перейти к содержанию ↬

2. Знай свою семью: группировка шрифтов

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

Гарнитуры можно разделить на десятки категорий (Scotch Modern, кто-нибудь?), Но нам действительно нужно отслеживать только пять групп , чтобы установить рабочее понимание большинства шрифтов, используемых в современном ландшафте .

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

1. Geometric Sans

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

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

Примеры геометрического / реалистичного / Grotesk Sans: Helvetica, Univers, Futura, Avant Garde, Akzidenz Grotesk, Franklin Gothic, Gotham.

2. Humanist Sans

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

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

Примеры Humanist Sans: Gill Sans, Frutiger, Myriad, Optima, Verdana.

3. Старый стиль

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

Примеры старого стиля : Дженсон, Бембо, Палатино и — особенно — Гарамонд, который считался настолько совершенным во время его создания, что никто особо не пытался его улучшить в течение полутора веков.

4. Переходный период и современность

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

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

• Примеры переходных гарнитур: Times New Roman, Baskerville.
• Примеры современных засечек: Bodoni, Didot.

5. Slab Serifs

Также известный как «египетский» (не спрашивайте), Slab Serif — это дикая карта, которая в последние годы снова вошла в моду. Плоские засечки обычно имеют штрихи, похожие на штрихи без лицевой стороны (то есть простые формы с относительно небольшим контрастом между толстыми и тонкими), но с твердыми прямоугольными башмаками, прикрепленными к концу.Slab Serifs являются исключением в том смысле, что они передают очень специфические — и все же часто довольно противоречивые — ассоциации : иногда мыслитель, иногда крутой парень; иногда хулиган, иногда ботаник; иногда городской утонченный, иногда ковбойский.

Они могут передать чувство авторитета в случае тяжелых версий, таких как Rockwell, но они также могут быть довольно дружелюбными, как в недавнем фаворите Archer. Многие засечки, кажется, выражают городской характер (например, Rockwell, Courier и Lubalin), но при применении в другом контексте (особенно в Clarendon) они сильно напоминают American Frontier и сельские, местные обозначения, которые появляются на фотографиях с этого период.Плоские засечки сложно обобщить как группу, но их отличительные блочные засечки функционируют как пара очков в роговой оправе: они добавляют характерную морщинку чему-либо, но могут легко стать чрезмерно заметными в неправильном окружении.

Примеры с засечками: Clarendon, Rockwell, Courier, Lubalin Graph, Archer.

3. Не будь слабаком: принцип решительного контраста

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

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

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

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

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

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

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

4. Немногое может пройти долгий путь

«Хватит всех этих обычных шрифтов и правил!» — говорите вы. «Мне нужно кое-что для моего рейв-флаера! И меню моего тайского ресторана! И мои рождественские открытки! »Вы здесь указываете на то, что все лица, которые я обсуждал до сих пор, являются« телесными шрифтами », что означает, что вы могли бы создать целое меню или газету с любым из них; в аналогии с одеждой, представленной в первой части, это наши повседневные Levis. А что насчет наших хеллоуинских вспышек?

Периодически возникает потребность в шрифте, который сочится индивидуальностью, будь то складская вечеринка, тайский тайский стол или Санта-Клаус.И эта потребность приводит нас в безбрежную пустыню гарнитуры Display, которая включает в себя все, от Comic Sans до наших конфетных и кроличьих шрифтов. «Отображение» — это просто еще один способ сказать « не превышайте рекомендуемую дозу »: при умеренном применении к заголовкам дисплейный шрифт может добавить столь необходимый оттенок в дизайн, но при использовании он может быстро потерять свою привлекательность. слишком широко.

Время для другой аналогии с одеждой:

(Фото: Betsssssy. Используется по лицензии Creative Commons.)

Наряд

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

(Фото: Филипп Леруайе). Используется по лицензии Creative Commons.)

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

.

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

Хватит уже. Попробуем заменить часть обычного текста на что-то более нейтральное:

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

5. Правило номер пять: «Нет правил»

Действительно. Присмотритесь внимательно, и вы найдете великолепно выглядящее меню, полностью написанное трудночитаемым шрифтом на дисплее. Или два разных лица Geometric Sans, счастливо живущих вместе на странице (на самом деле, только на этой неделе я попробовал это на проекте и был удивлен, обнаружив, что он попал в точку). Есть только условности, нет жестких правил о том, как пользоваться шрифтом, точно так же, как нет правил о том, как мы должны одеваться по утрам.Стоит попробовать все, чтобы посмотреть, что произойдет, — даже надеть на свидание хеллоуинские клеш.

Заключение

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

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

Другие ресурсы

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

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

(ik, vf, yk)

Как выбрать шрифт для вашего бренда: Руководство по выбору шрифтов — 2021

Как выбрать шрифт для вашего бренда: Руководство по выбору шрифтов — 2021 — MasterClass

Чтобы отправить запросы о помощи или оставить отзыв о доступности, обратитесь в службу поддержки @мастер класс.com.

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

Что такое шрифты с засечками?

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

1. Старый стиль : Старые шрифты с засечками имеют клиновидные вставки в них и высокий контраст между толстыми и тонкими штрихами в формах букв. Это самая традиционная и классическая из всех категорий с засечками. Garamond — это шрифт старого стиля, названный в честь парижского гравера шестнадцатого века Клода Гарамонда, для которого характерны наклонные фишки или зазубренные засечки, которые часто встречаются в основном тексте и в книжных изданиях.
2. Transitional : переходные засечки содержат больший контраст между толщиной обводки и более широкими засечками в квадратных скобках, которые произошли от шрифта с засечками старого стиля.Times New Roman — это переходный шрифт, который часто используется при чтении обычного текста, поскольку формы букв позволяют экономно использовать пространство. Libre Baskerville — это традиционный шрифт с засечками, разработанный специально для цифрового основного текста с более широкими счетчиками и меньшей контрастностью, чем традиционный шрифт Baskerville.
3. Slab Serif : шрифты Slab Serif, такие как Clarendon, отличаются толстыми блочными засечками, которые иногда имеют толщину, равную толщине самих букв. К другим шрифтам с засечками относятся Courier, Excelsior и Rockwell.
4. Didone : Шрифты семейства Didone, также известные как современные засечки, характеризуются высоким контрастом толщины штриха. Эти шрифты не предназначены для основного текста или длительного чтения, но могут вызывать ощущение роскоши или элегантности. Такие шрифты, как Didot и Bodoni, считаются шрифтами Didone.

Что такое шрифты без засечек?

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

1. Гротеск : Гротескные шрифты без засечек не сильно различаются по ширине обводки, а прописные буквы относительно однородны по внешнему виду. Franklin Gothic — это пример гротескного шрифта без засечек с очень жирным шрифтом.
2. Неогротеск : Неогротескные шрифты без засечек подчеркивают нейтральность и простую разборчивость.Эти шрифты имеют меньше штрихов, чем стандартные шрифты с засечками, и имеют более изысканную форму букв, чем традиционные гротескные шрифты. Arial — это неогротескный шрифт с меньшим количеством штрихов, чем у стандартных шрифтов с засечками. Кривые в шрифтах Arial sans-serif более полные и мягкие, с концевыми штрихами, обрезанными по диагонали. Helvetica — это плотная буква с большой высотой по оси x и небольшим интервалом между символами.
3. Геометрический : геометрические шрифты имеют буквенные формы, на которые влияют геометрические формы, и имеют более современный вид.Futura — это пример геометрического шрифта без засечек с более весомыми буквами. Avant-Garde Gothic — еще один пример семейства геометрических шрифтов.
4. Humanist : Гуманистические шрифты без засечек вдохновлены традиционными формами букв, которые могут чередоваться между тонкими и толстыми штрихами. Этот шрифт отличается свободным интервалом между буквами, широкими счетчиками и большой высотой по оси x, что облегчает восприятие текста меньшего размера. Verdana — это гуманистический шрифт без засечек, созданный дизайнером шрифтов, который специально хотел упростить просмотр на компьютере.

Что такое скриптовые шрифты?

Скриптовые шрифты — это шрифты, напоминающие рукописный почерк или каллиграфию. Формальные сценарии, такие как Hummingbird, Kuenstler или Malbec, вызывают классический или современный стиль. Обычные скриптовые шрифты, такие как Kaufmann, Vladimir или Brush Script, более игривы и стилизованы, чем формальные скриптовые шрифты.

Как выбрать шрифт для вашего бренда

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

1. Разберитесь в индивидуальности вашего бренда . Прежде чем выбирать шрифт, изучите индивидуальность своего бренда, который невербально передаст тон вашей компании. Начните с мозгового штурма, чтобы описать идентичность вашего бренда. Если ваш бизнес «авторитетный» или «образовательный», вы можете выбрать переходный шрифт с засечками. Если вы «причудливы» или «капризны», вам может подойти скриптовый шрифт. Если вы «новаторский» и «современный», подумайте о выборе шрифта без засечек.
2. Обратите внимание на фирменные шрифты, которыми вы восхищаетесь . Найдите бренды, которыми вы восхищаетесь, и обратите внимание на их фирменный стиль. Обратите внимание на впечатление, которое разные стили букв могут произвести на зрителя. Возможно, вы захотите сочетать причудливость шрифта одного бренда с модернизмом шрифта другого бренда.
3. Исследовательская типография . Изучите анатомию букв, как различать разные шрифты и как разные формы или стили букв могут вызывать определенные чувства.Вся эта информация поможет вам сделать окончательный выбор.
4. Убедитесь, что шрифт универсальный . Выбранный вами шрифт должен соответствовать вашему бренду, от рекламы вне дома до веб-дизайна для настольных компьютеров и мобильных интерфейсов. Если в вашем дизайне логотипа есть фраза, выберите что-то легко читаемое. Если это что-то, предназначенное для размещения на рекламных щитах или вывесках, вам понадобится что-то жирное, но разборчивое в больших размерах.
5. Выберите несколько шрифтов, чтобы начать .Сузьте свой выбор до трех разных шрифтов для вашего бренда и сравните, как текст вашего бренда выглядит в каждом из них. Смотрите на них поодиночке, а также рядом.
6. Рассмотрим типографскую иерархию . Типографская визуальная иерархия относится к тому, как отображаются буквенные формы и где они могут наиболее эффективно привлечь внимание зрителя. Если вы выбираете несколько шрифтов для своего бренда, обязательно подумайте, как они выглядят вместе. Вы хотите, чтобы шрифт для ваших заголовков дополнял ваши подзаголовки, и наоборот.Настройте пары шрифтов, например, какие буквы должны быть стилем шрифта дисплея, а какие — основным текстом. Поменяйте местами стили, чтобы увидеть, какой из них лучше всего структурирован.
7. Спросите отзыв . Покажите семье и друзьям несколько макетов шрифтов вашего будущего бренда и попросите поделиться мнением. Поскольку ваш брендинг нацелен на целевую аудиторию, попросите людей, которым вы доверяете, быть честным голосом для ваших идей.

Хотите узнать больше о том, как использовать свой гений графического дизайна?

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

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

Наши курсы дизайна и стиля

Рекомендуемый инструктор мастер-классов

Дэвид Карсон

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

Изучите класс

Как выбрать шрифты для вашего бренда

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

Смелый дизайн упаковки мыла с использованием трех разных семейств шрифтов (шрифт, slab и sans-serif) от Mj.vass

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

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

Отправка шрифтов фирменных сообщений

—

Мы только что отправили вам ваш первый урок.

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

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

Шрифты с засечками — самые старые и самые классические шрифты. «Засечки» — это небольшая декоративная линия в конце штриха символа. Самый популярный и распространенный пример — Times New Roman, шрифт по умолчанию для поколения людей, использующих Microsoft Word.Шрифты с засечками классные, литературные и высококачественные. Они всегда являются хорошим выбором для расширенных абзацев текста, таких как книги, брошюры и мелкий шрифт, потому что они очень разборчивы и наши глаза привыкли к их форме.

Шрифты без засечек

Если вы помните французский, который изучали в старшей школе, возможно, вы уже понимали, что означает sans serif — «без засечек». У них нет маленьких ножек, которые есть у шрифтов с засечками, а также, как правило, линии имеют толщину от одного края до другого.Сама статья написана шрифтом без засечек! Они отлично подходят для общей читаемости и отлично подходят для мелкого шрифта. У них также есть дополнительное преимущество — они хорошо работают в более низком разрешении, что делает их идеальными для цифрового использования, включая веб-сайты и электронные книги. Они всегда привносят силу, ясность и современный, чистый вид в любой проект, в котором они представлены. Различный вес одного и того же шрифта может предлагать совершенно разные тона, например: толстые шрифты без засечек — это мужественный и трудолюбивый вид, а версия с тонкими линиями выглядит гламурно. и благородный.

Шрифты Slab

Шрифты

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

Скриптовые шрифты

Шрифты

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

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

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

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

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

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

Создание удачных сочетаний шрифтов и построение иерархии

—

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

Диаграмма иерархии типов от megireid

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

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

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

–

Триптих красиво оформленной целевой страницы с использованием одного и того же шрифта без засечек разного веса. By Perfectionist ✅

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

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

Бесплатные шрифты по сравнению с платными

—

Хороший дизайн логотипа для DC Drug с сочетанием шрифтов с засечками и шрифтами без засечек в винтажном стиле от Virtuoso »

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

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

Фирменные шрифты, которых следует избегать

Красивый модный дизайн, демонстрирующий всю мощь пользовательского, нарисованного вручную шрифта от stevenmink

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

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

Хотите больше советов по брендингу? Вот как создать отличную идентичность бренда для вашего бизнеса.

Мы только что отправили вам ваш первый урок.

Форматирование текста в документах со шрифтами на Mac

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

Если на вашем Mac есть панель Touch Bar, вы можете использовать ее для быстрого форматирования выделенного текста.

1. В приложении на Mac выберите «Формат»> «Показать шрифты» или «Формат»> «Шрифт»> «Показать шрифты».

   Если параметры подчеркивания текста, цвета и т. Д. Не отображаются в верхней части окна «Шрифты», щелкните всплывающее меню «Действие» и выберите «Показать эффекты».Чтобы просмотреть параметры по мере их выбора, выберите «Показать предварительный просмотр» во всплывающем меню «Действие».

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

   • Измените шрифт: Выберите коллекцию, семейство или гарнитуру (например, полужирный). Чтобы найти шрифт, выберите «Все шрифты» в столбце «Коллекция», затем введите имя шрифта в поле поиска. Если вы не видите поле поиска в окне «Шрифты», сделайте его шире.

   • Измените размер шрифта: Перетащите ползунок или выберите размер в списке.Если размеры не отображаются, нажмите всплывающее меню «Действие», выберите «Изменить размеры», затем выберите «Фиксированный список», «Регулируемый ползунок» или оба варианта.

   • Измените цвет шрифта: Нажмите кнопку «Цвет текста», затем выберите цвет в окне «Цвета». См. Использование цветов в документах.

   • Подчеркнуть или зачеркнуть текст: Нажмите кнопку «Подчеркнутый текст» или «Зачеркнутый текст», затем выберите вариант во всплывающем меню, например «Двойной». Чтобы изменить цвет линии, выберите «Цвет» во всплывающем меню, затем щелкните цвет.

   • Вставьте символы и символы: Щелкните всплывающее меню «Действие», выберите «Символы», затем перетащите символ из средства просмотра символов в документ.

   • Задайте типографские параметры: Щелкните всплывающее меню «Действие», затем выберите «Типографика». Если выбранный шрифт включает типографику, установите или снимите флажок.

Используйте Font Book для установки шрифтов на Mac и управления ими. Чтобы открыть его из окна «Шрифты», щелкните всплывающее меню «Действие» и выберите «Управление шрифтами».См. Руководство пользователя книги шрифтов.

Чтобы отформатировать выделенный текст в верхнем, нижнем или смешанном регистре, выберите «Правка»> «Преобразования», затем выберите параметр.

Форматирование текста в документах со шрифтами на Mac

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

Если на вашем Mac есть панель Touch Bar, вы можете использовать ее для быстрого форматирования выделенного текста.

1. В приложении на Mac выберите «Формат»> «Показать шрифты» или «Формат»> «Шрифт»> «Показать шрифты».

   Если параметры подчеркивания текста, цвета и т. Д. Не отображаются в верхней части окна «Шрифты», щелкните всплывающее меню «Действие» и выберите «Показать эффекты». Чтобы просмотреть параметры по мере их выбора, выберите «Показать предварительный просмотр» во всплывающем меню «Действие».

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

   • Измените шрифт: Выберите коллекцию, семейство или гарнитуру (например, полужирный). Чтобы найти шрифт, выберите «Все шрифты» в столбце «Коллекция», затем введите имя шрифта в поле поиска.Если вы не видите поле поиска в окне «Шрифты», сделайте его шире.

   • Измените размер шрифта: Перетащите ползунок или выберите размер в списке. Если размеры не отображаются, нажмите всплывающее меню «Действие», выберите «Изменить размеры», затем выберите «Фиксированный список», «Регулируемый ползунок» или оба варианта.

   • Измените цвет шрифта: Нажмите кнопку «Цвет текста», затем выберите цвет в окне «Цвета». См. Использование цветов в документах.

   • Подчеркнуть или зачеркнуть текст: Нажмите кнопку «Подчеркнутый текст» или «Зачеркнутый текст», затем выберите вариант во всплывающем меню, например «Двойной».Чтобы изменить цвет линии, выберите «Цвет» во всплывающем меню, затем щелкните цвет.

   • Вставьте символы и символы: Щелкните всплывающее меню «Действие», выберите «Символы», затем перетащите символ из средства просмотра символов в документ.

   • Задайте типографские параметры: Щелкните всплывающее меню «Действие», затем выберите «Типографика».

     Добавить комментарий Отменить ответ

     Ваш адрес email не будет опубликован. Обязательные поля помечены *

     Комментарий *

     Имя *

     Email *

     Сайт