Подбор шрифта: Шрифты Онлайн

Топ-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 полезных онлайн сервисов комбинирования шрифтов, которые помогают подбирать красивую и эффективную типографику для веб-проектов. Советуем просмотреть все ссылки, а затем выбрать парочку подходящих для себя наилучшим образом, дабы затем использовать их в своей работе.

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

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

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

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

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

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

Разборчивость очень важна

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

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

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

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

Самый часто задаваемый вопрос при выборе шрифта: с засечками или без?

Самые распространение категории шрифтов – это serif или sans serif. Serif – это шрифты с заческой на концах букв. Sans serif же, соответственно — шрифты, которые засечек не имеют.

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

Огромное количество хороших шрифтов существует и в той, и в другой категории. Можно намного лучше начать понимать шрифты, изучая различные классификации, такие как humanist, modern, slab serif, geometric, old style и transitional. Некоторые дизайнеры даже советуют создавать свои собственные категории для удобной работы с различными проектами.

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

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

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

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

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

Выбор правильного шрифта для печати

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

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

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

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

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

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

Вывод

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

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

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

Источник: say-hi.me
Фото на обложке: ShutterStock

10 отличных инструментов, для подбора правильного сочетания шрифтов – Сей-Хай

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

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

Ребята из KK UI Store создали удобную библиотеку комбинаций шрифтов, используя Google Fonts – они совместимы со Sketch и Adobe XD. Легко найти популярные варианты и размеры, а также поиграть с типом шрифта и цветами.

Font Pair также поможет вам создать пару бесплатных Google Fonts простым нажатием кнопки. В сервисе можно выбрать шрифт по типу – или просто изучить предложенные комбинации!

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

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

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

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

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

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

Font Packs от Adobe предлагают профессионально подобранные группы шрифтов, которые хорошо сочетаются друг с другом и сосредоточены вокруг общей темы: путешествия, воспоминания о 90-х и многие другие. Для доступа вам потребуется учетная запись Adobe Creative Cloud, но оно того стоит!

Источник

Фото на главной: Brianna Santellan

Читайте также:

20+ новых инструментов для дизайнеров в 2020 году

15 свежих идеальных сочетаний шрифтов

IKEA представила самый «диванный» шрифт в мире

Пошаговое руководство по сочетанию шрифтов и подбору шрифтовых пар

Если вы загуглите, как сочетать шрифты, то получите много ужасных результатов. На первой странице вы найдете сочетания, к которым ни один опытный дизайнер не прикоснется даже 3-метровой палкой. Google Fonts весело рекомендует сочетать буквально все с Open Sans и Roboto 🙄

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

1. Определите свой бренд

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

Дизайн-развитие по подписке

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

Присоединиться

Причина в том, что у разных сайтов и приложений разные бренды.

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

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

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

Я опубликовал на YouTube видео, посвященное прилагательным, описывающим бренд – как их найти и как они влияют на дизайн.

В частности, в этом видео я рассказываю о 5 наиболее распространенных брендах, для которых начинающим UI-дизайнерам следует научиться проектировать:

1. Понятный/Простой (Clean/simple)– современный, минималистичный
2. Стильный/Модный (Classy)– роскошный, эрудированный, классический
3. Дружелюбный (Friendly)– повседневный, неформальный
4. Необычный/Причудливый (Quirky)– design-forward, креативный
5. Технический/Технологический (Techie)– футуристичный, гиковский

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

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

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

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

2. Шрифты, которые ненавязчиво передают ваш бренд

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

1. Выбор шрифта, не соответствующего вашему бренду.
2. Выбор шрифта, чрезмерно подходящего вашему бренду (например, необычный шрифт).

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

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

Вот 3 попытки:

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

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

Точно так же третий шрифт – Chakra Petch – хоть и хорош, но совершенно не подходит для бренда, который мы пытаемся представить. Угловатая техническая атмосфера лучше всего подойдет для игры «Outer Space: The 3 Kingdoms», понимаете?

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

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

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

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

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

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

Менее чем за 10 минут я просмотрел более 100 шрифтов, но выбрал всего 4 в качестве претендентов. Я случайно выбрал два из них во время просмотра моего каталога шрифтов, один из «Таблицы хороших шрифтов» (для слушателей моих курсов «Learn UI Design»), а последний Trajan знал ранее (хотя у меня его нет, и пришлось искать похожие шрифты в Google). Станет ли один из них моим окончательным выбором? Без понятия! Но так начинается мозговой штурм.

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

Например, один из 5 самых распространенных брендов – «необычный». Какие шрифты вы используете на необычном сайте? Давайте взглянем на веб-сайт Института Санте-Фе. Это отличный пример необычного / креативного сайта (хотя как технический институт он также будет иметь определенные «технические» элементы в своем бренде). Откройте его в новой вкладке – мы будем ссылаться на него на протяжении всей статьи.

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

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

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

Отлично. Давайте двигаться дальше.

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

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

Для начинающих дизайнеров самый простой способ проверить подходит ли шрифт для основного текста – прочитать его описание! Например, в описании Scala Sans на сайте MyFonts.com сказано, что он подходит для «книжного текста» и «мелкого текста», а это является синонимами хорошего шрифта для основного текста 😎

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

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

Это 3 отличных шрифта … которые не подходят для основного текста!

Вместо этого вам нужен простой шрифт с засечками или без засечек с большой высотой x и открытыми внутри буквенными просветами (counters).

X-height (высота x) – это высота строчной буквы «x». Но она измеряется не столько в абсолютном выражении, сколько относительно прописных букв (или высоких строчных букв, таких как «h»). Почему это важно? Потому что большая высота x означает, что строчные буквы по сравнению с другими шрифтами того же размера больше и, следовательно, их легче читать.

«Открытые внутри буквенные просветы» (или «большая апертура») означают, что промежутки в буквах типа «а», «с» и «е» относительно широкие. Буква «c» в шрифте Helvetica не так уж отличается от «o» – в то время, как буквы «c» и «o» в шрифте Proxima Nova различить гораздо легче.

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

В примере с Древним Египтом я отобрал несколько шрифтов с засечками и быстро выбрал очень разборчивый шрифт без засечек, который мне нравится (Scala Sans). Поскольку эти шрифты с засечками в значительной степени также будут отличными шрифтами для основного текста, мне надо принять решение – какой шрифт использовать в качестве основного шрифта: (а) Scala Sans или (б) один из шрифтов с засечками.

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

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

4. Добавьте дополнительный шрифт, чтобы выделить еще один аспект бренда

Довольно распространенная ошибка, которую я наблюдаю у студентов, изучающих мой курс «Learn UI Design», заключается в том, что они используют очень похожие шрифты.

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

(Между прочим, в 95% случаев это означает, что вы будете сочетать шрифт с засечками и шрифт без засечек)

На веб-сайте института Санте-Фе шрифт для заголовка Chap довольно своеобразный и необычный. Но это технический институт – в идеале какая-то часть их бренда тоже должна быть технической.

В формате «диаграммы брендов», которую я показываю на уроке «Brand & Goals» курса «Learn UI Design», веб-сайт Института Санта-Фе будет находиться здесь:

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

Совет ☝️: большинство шрифтов, которые кажутся техническими / научными / футуристическими, имеют квадратную форму. Но шрифт основного текста должен быть простым и разборчивым, что, как мы видели на примере Chakra Petch, иногда противоречит угловатости и геометрическим формам.

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

И знаете, что? Институт Санта-Фе подумал о том же! (И многие другие дизайнеры тоже – спросите их. Уверяю вас, эта типографика не такая уж дикая и субъективная, как кажется 🙂)

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

В нашем примере с Древним Египтом я ищу что-то, что кажется немного более старым и загадочным (но помните: лишь немного) по сравнению со Scala Sans. Это обязательно будет шрифт с засечками.

Я сузил свой выбор до Skolar и еще одного шрифта с засечками под названием Minion.

Как я выбрал Minion? 🤔 Что ж, я заметил, что Crimson Text – так называемый шрифт с засечками «старого стиля» – один из первых стилей дизайна, основанный на каллиграфических формах и довольно разборчивый (не говоря уже о том, что идеально подходит для исторической тематики). Я решил просмотреть несколько других шрифтов с засечками в старом стиле, которые мне запомнились, но, если вы не знаете такие шрифты, то всегда можете загуглить: «old style serif site:typewolf.com»,  и всего через два клика узнаете о шрифте Minion.

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

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

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

Честно говоря, засечки в Skolar кажутся слишком большими и толстыми. Мне нравится, что в Minion они более тонкие и изящные.

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

Итак, теперь у нас есть пара шрифтов – Scala Sans и Minion. Что нам с этим делать?

5. Определите правила использования

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

Можно подумать, что, когда у вас всего два шрифта это довольно просто, не так ли?

1. Заголовки: Scala Sans
2. Текст: Minion

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

• Указание авторства в подзаголовке
• Подзаголовки
• Меню навигации
• Контактные формы (метки, поля ввода текста, кнопки)
• Футеры

Наивное решение – просто (а) использовать шрифты заголовков для всех заголовков и подзаголовков и (б) использовать шрифт для основного текста – для всего остального. Угадайте, какая это прекрасная идея…

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

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

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

• Меню: Minion
• Указание авторства: светло-серый Minion курсивом
• Метки: светло-серый Minion курсивом
• Категории и теги: smaller uppercase Scala Sans полужирным

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

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

Например, на сайте Learn UI Design я регулярно использую 3 разных шрифта – Avenir Next, Rajdhani и Freight Text. Но в некотором смысле я определил «правила» для каждого из них:

• Avenir Next: используется как основной текст. При необходимости можно выделить курсивом или полужирным шрифтом.
• Rajdhani: используется для подзаголовка и как акцентный шрифт. Используются только прописные буквы и полужирный шрифт.
• Freight Text: используется для частей страницы, которые представляют говорящего, например, вопросы в FAQ, отзывы учеников и раздел «Обо мне». Используется только в тяжелых весах.

Таким образом, несмотря на то, что технически имеется 2 шрифта без засечек, каждый шрифт используется по-разному, чтобы дизайн никогда не казался непоследовательным, беспорядочным или перегруженным – или нет? 😉 Вам решать!

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

6. При необходимости повторите шаги 4 и 5

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

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

Вот и все… вроде как.

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

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

И все это рассматривается в моем видеокурсе «Learn UI Design», который включает более 24 часов материалов по созданию красивых, профессиональных интерфейсов.

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

Есть вопросы или комментарии по поводу сочетания шрифтов? Пишите автору 😎

Изготовление шрифтов Рекламное агентство ИНСАЙТ

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

Подбор шрифта для музыкальной группы Andy

Подборка шрифта для стирального порошка Байкал Санитар

Подборка шрифтов весна 2020 №2

Подборка шрифтов весна 2020

Подборка шрифтов зима 2020

Подбор шрифтов для Винодельни

Подборка шрифта для компании Подбор Авто

Подборка шрифтов осень 2019

Подбор шрифта для логотипа Сибирского жадеита Эрфэ

Подборка шрифтов лето 2019

Подборка шрифтов весна 2019

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

Сборник Пиксельные шрифты collections Pixel fonts

Подборка шрифтов зима 2019

Коллекция шрифтов ИНСАЙТ осень 2018

Коллекция шрифтов ИНСАЙТ лето 2018

Сборник шрифтов ИНСАЙТ 2018

Подборка шрифтов ИНСАЙТ 2017 v4:

Подборка шрифтов ИНСАЙТ 2017 v3:

Подборка шрифтов ИНСАЙТ 2017 v2:

Подборка шрифтов для магазина комиксов Pro Комикс

Подборка шрифтов ИНСАЙТ 2017:

Сборник шрифтов ИНСАЙТ 2016:

Подборка шрифтов ИНСАЙТ 2015:

Коллекция шрифтов ИНСАЙТ 2014:

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

• цветом,
• размером букв,
• уровнем наклона,
• шириной линий,
• наличием обводки,
• и так далее.

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

Разработка фирменного стиля | Создание визиток | Создание логотипа | Студия графического дизайна | Разработка фирменных шрифтовых буквиц

Коллекция рукописных шрифтов, от руки, пером (handwritings fonts, script)

Подборка шрифтов с засечками, современная антиква (serif, slab):

Подборка всегарнитурных шрифтов:
hairline, thin, light, regular, book, medium, semibold, bold, heavy, black, italic (волосок, тонкий, легкий, нормальный, книжный, средний, полужирный, жирный, тяжелый, черный, наклонный, курсив, италик).

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

Шрифты для Лес Опт Торга, компания по продаже досок, дерева, пилорама.

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

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

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

Шрифты для медицины:

Шрифты для комиксов:

Шрифты для туристических агентств:

ПОДБОР ШРИФТОВ . Веб-дизайн

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

цветового решения (стр. 110), главная роль при этом принадлежит началам единства и контраста.

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

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

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

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

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

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

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

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

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

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

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

С другой стороны, далеко не всякий рубленый шрифт хорошо сочетается с любым шрифтом с засечками. Кроме вашего собственного опыта и художественного чутья, пожалуй, путеводной нитью может служить только знание истории и родословной шрифтов (стр. 126). Так, трудно выдумать что–то более уродливое, чем сочетание вычурной, внутренне несвободной новой антиквы (гарнитуры Бодони, например) с тоже несколько нарочитой, но совсем в ином вкусе конструктивистской Футурой или Авангардом. В то же время нейтральная, достаточно традиционная Гельветика прекрасно сочетается с уравновешенной, классических пропорций переходной антиквой — не зря гарнитуры Тайме и Ариал были выбраны в качестве двух основных шрифтов в операционной системе Windows.

Прекрасно чувствуют себя вместе пары гуманистических шрифтов (например, Гарамон и Фрисет, положенные в основу дизайна московского журнала «Internet»), тогда как сочетание шрифтов Мета и Бодони в логотипе сайта www.alphaworks.ibm.com производит не лучшее впечатление именно из–за конфликта «уровня гуманизации» этих шрифтов (рис. 36).

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

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

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

Шрифты и названия. Согласно законам США, авторское право может защищать конкретный шрифт (font) в векторном формате, приравниваемый по статусу к компьютерной программе. Однако эта защита не распространяется на то начертание (typeface) букв, которое используется в шрифте. Это значит, что характерные графические особенности, скажем, шрифтов Тайме или Бодони (так же как, собственно говоря, и форма букв алфавита) не принадлежат никому. Любой желающий может перерисовать буквы какого–нибудь известного шрифта, записать их в шрифтовой файл и продавать под любым именем.

В результате на рынке появляется множество шрифтов почти одинаковых по виду, но различающихся названиями. Солидные фирмы обычно ограничиваются приписыванием к «родовому» имени своего названия — так, существуют шрифты ITC Garamond, Adobe Garamond и Monotype Garamond (которые, кстати, различаются довольно сильно, потому что фирмы эти не копировали буквы друг у друга, а самостоятельно рисовали их по образцам французского типографа XVI века Клода Гарамона). Другие фирмы нередко выдумывают для своих шрифтов имена новые, но все же чем–то схожие с оригинальными — так возникают Opus вместо Optima, Freeset вместо Frutiger и даже Borjomi вместо Bodoni.

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

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

Использование шрифта в сочетании с иллюстрациями

Чтобы правильно подобрать шрифт для сочетания его с иллюстрациями, профессиональные дизайнеры советуют отвлечься на время от функциональности шрифта, не пытаться его «читать», а рассмотреть шрифт как картинку. Подобно тому, как изображение содержит свои характерные черты (например, толщина и жесткость кисти), буквы шрифта тоже можно рассматривать как подобный рисунок. Анализируйте отличительные черты стиля изображения и подбирайте шрифт похожего начертания. Если картинка состоит только из прямых горизонтальных или вертикальных линий, то и шрифт ей Вы подбираете такой же «прямолинейный». Например, шрифт Mashine. Если наоборот, рисунок весь живой, плавный и «рукописный», то и шрифт к нему Вы подбираете такой, который имитирует рукописный почерк. Например, такой как Betina. Каждая надпись, особенно в рекламной продукции, должна иметь свой художественный облик и, помимо смысловой нагрузки, нести в себе образность, способствующую эмоциональному зрительному восприятию. Существуют особенности корректного применения шрифта и более тонкие, относящиеся уже не к рекламной продукции, а к применению в больших массивах текста, а именно в книгах, журналах, газетах и т.п. Если речь идет о создании сайта или рекламного объявления, дизайнерам приходится учитывать еще и другие условия: и общую тему, и характер текста, и место, и причину публикации и т.д. и т.п. Среди всех требований к подбору шрифтов можно выделить самое главное правило – для больших текстов шрифт должен быть легко читаемым. Остальные правила можно свести к следующим основным:

Общие правила подбора шрифтов

Размер шрифта

Размер шрифта значительно влияет на удобочитаемость текста. Все рукописные шрифты (каллиграфические и свободные) лучше распечатывать в соответствии с размером букв, написанных от руки (14-18 пунктов). В мелких кеглях прочесть такой текст окажется непросто. Далеко не все шрифты, даже текстовые, терпят уменьшение до 6-7, тем паче меньших кеглей. Но если одни (Академическая, Бодони) протестуют категорически, то другие (Банниковская, ITC Гарамон) переносят относительно неплохо. В докладе британского типографа Марка Барретта на конференции ATypI в Хельсинки в сентябре 2005 г. приводятся следующие правила построения или подбора шрифта для использования в мелком кегле:

1. Рисунок шрифта должен быть простым, ясным и привычным. Революционные формы и дизайнерские изыски неуместны.
2. Шрифт должен обладать увеличенным очком строчных знаков и широкими пропорциями.
3. Контрастность относительно слабая, приблизительно 3/4.
4. Открытые формы предпочтительнее закрытых.
5. Засечек либо вовсе нет, либо следует их «усилить», придав простую и даже грубоватую форму. Шрифт вообще не должен иметь деталей, исчезающих при уменьшении.

Тип шрифта и уместное его использование Выбирайте шрифт в зависимости от того, где вы собираетесь его применить. К примеру, рубленый шрифт в рекламе более удобочитаем, чем новая антиква, и лучше других шрифтов подходит для выполнения плакатов и лозунгов. И, наоборот, в почетных грамотах, по сравнению с новой антиквой, рубленый шрифт выглядит невыразительно. Наиболее частая ошибка начинающих — выбор рубленого шрифта для основного текста. Если в печатном издании можно регулировать межсимвольный интервал, то в Интернете это пока вопрос будущего. Из за особенностей начертания рубленых шрифтов (особенно малого размера) буквы сливаются друг с другом, а это, как вы наверное понимаете никак не способствует повышению читабельности текста. Из этого следует четкий вывод. Рубленые шрифты — только большого кегля и с увеличенным межсимвольным интервалом. Рубленые шрифты идеально подходят для заголовков. Они притягивают к себе внимание и заставляют читателя бросить на них взгляд. Гарнитуры с засечками намного более функциональны. Благодаря именно своим засечкам, они позволяют набирать тексты небольшого размера (в 10-12 пунктов) с потерей читабельности равной нулю. Но, к огромному сожалению, такие шрифты в своем большинстве не выразительны. Для заголовка лучше выбирать рубленый шрифт. Если не представляется возможным менять шрифт, тогда стоит прибегнуть к какому-либо приему выделения. Не злоупотребляйте шрифтами с засечками, если вы подбираете шрифт для компьютерных текстов. Чем шрифт проще, тем он легче читается. При работе с декоративными гарнитурами будьте предельно осторожны! При всей своей красоте и изящности у них есть один сильный недостаток — их трудно читать. Чаще всего декоративные шрифты используются в логотипах и для создания внутреннего настроения на веб-странице (например, страницы с древне-русской тематикой используют старославянские гарнитуры и т.д.). Выбор необычного шрифта может быть обусловлен только неординарностью текстов, в которых такой шрифт применен. Поэтому используйте нестандартные шрифты с осторожностью. Предпочитайте деловые, ясные и простые шрифты, например, Arial, Bastion, Pragmatica, Futura или Gelvetica. Рекомендуют выбирать для заголовков тот же шрифт, что и для основного текста.

Цвет шрифта

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

Средства выделения шрифтов

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

Прописные и строчные буквы

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

Выравнивание текста

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

Психология восприятия шрифта в текстах

Многие психологи и графологи утверждают, что с помощью правильного подбора шрифтов, можно передать настроение, задать общий настрой при чтении текста. Если принять во внимание, что формы (геометрические) имеют определённое психологическое и эмоциональное воздействие на человека, то такое утверждение не лишено основания. Как известно, различные шрифты имеют разное написание, размер и кернинг. Соответственно слово, набранное одним шрифтом, будет существенно отличаться по ФОРМЕ от этого же слова, набранного другим шрифтом. Конечно, данная тема скорее относится к печатной рекламе, написанию слоганов, рекламных текстов. Но ведь шрифт используется и при написании логотипов. В конце концов, есть такой вид логотипов, как шрифтовые логотипы. Человеческий глаз воспринимает не отдельные буквы, а группы букв или слов. Это свойство глаза, охватывать группы букв, их форму, а также определённую длину строк является фактором, ускоряющим или замедляющим чтение. Поэтому, помимо рисунка шрифта не менее важно правильно выбрать его размер, расстояние между буквами, строчками, длину строк и расположение текста на странице или листе печатной продукции. По устоявшемуся мнению многих экспертов, строгие прямолинейные шрифты, обладающие «машинными», «техническими» качествами, привлекательнее для мужчин, а у женщин фаворитами являются более округлые и пышные шрифты с выраженными «хвостиками». Различные исследования показали, что шрифты с засечками читаются легче, так как засечки помогают взгляду передвигаться от буквы к букве, и буквы при этом не сливаются друг с другом. С другой стороны, что буквы без засечек легче читать в шрифтах очень большого или очень малого размера. Но установить единообразные правила очень сложно (а если точнее, практически невозможно), так как кроме начертания, огромное значение имеет кегль шрифта, длина строк, интерлиньяж, свободное пространство и даже бумага. А если обратить внимание на то, что в последнее время течение моды поставило под вопрос саму удобочитаемость (для привлечения внимания используются причудливые шрифты и различные эффекты их размещения).

Шрифты без засечек (sans-serif)

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

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

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

Прямолинейные и угловатые шрифты

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

Гарнитурные шрифты

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

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

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

Шрифты рукописного стиля

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

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

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

Какой шрифт мне использовать? 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: в то время как геометрические 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) они сильно напоминают американские границы и сельские, местные обозначения, которые появляются на фотографиях с этого период.Плоские засечки сложно обобщить как группу, но их отличительные блочные засечки функционируют как пара очков в роговой оправе: они добавляют характерную морщинку чему-либо, но могут легко стать чрезмерно заметными в неправильном окружении.

Примеры плоских засечок: 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)

Fonts 101: полезное руководство по брендингу вашего бизнеса

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

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

Шрифты не только передают слова

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

Восприятие на основе шрифтов

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

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

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

Почему шрифты имеют значение? Шрифты

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

Выбор правильного шрифта для вашего бизнеса

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

• Решите, какие характеристики вы хотите передать своим брендом. Какие качества вашего бренда наиболее важны? А какова индивидуальность вашего бренда? Или что означает ваш бизнес? Ответив на эти вопросы, вы узнаете, в каком направлении хотите двигаться.
• Убедитесь, что стиль вашего шрифта соответствует характеру вашего бренда. Выберите шрифт, который подчеркивает индивидуальность вашего бизнеса. Независимо от того, является ли ваш бизнес элегантным и изысканным, причудливым, формальным или ориентированным на семью, есть шрифт, который представляет то, что вы хотите передать.
• Убедитесь, что ваши шрифты читабельны. Конечно, вы хотите, чтобы люди могли читать все, что вы напечатали. Итак, выбор правильного шрифта очень важен. Некоторые шрифты имеют буквы и / или цифры, которые выглядят поразительно похожими, что может сбивать с толку читателей. Если вы ищете хороший шрифт для использования, немного поэкспериментируйте и убедитесь, что все буквы и цифры различимы, прежде чем сделать окончательный выбор.

   
 Эффективно создавайте умные и эффективные кампании 
  
 Достигайте своих целей по конверсии, используя выделяющиеся визуальные эффекты 
 Мне это нужно!  

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

* вставить после «Почему шрифты имеют значение»

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

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

# 1 Безопасные гарнитуры

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

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

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

• Arial
• Impact
• Lucida
• Grande
• Tahoma
• Verdana
• Helvetica

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

• Джорджия
• Платино
• Times New Roman

Вышеупомянутые шрифты широко доступны для общественности.Они также известны как веб-шрифты, «безопасные».

# 2 Семейство 5 типов

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

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

Geometric Sans представляет собой смесь трех различных групп:

Этот тип семьи основан на твердой геометрической форме.Буквы Geometric Sans часто одинаковы по ширине и фокусу. В дизайне шрифтов используется стиль «меньше значит больше».

Описание шрифта:

• Прозрачный
• Объектив
• Современный
• Универсальный

Примеры шрифтов:

• Helvetica
• Univers
• Futura
• Avant-Garde
• Gotham

Humanist Sans-Serif

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

Описание шрифта:

• Современные
• Более «человечные».
• Он вызывает сочувствие.

Примеры шрифтов:

• Gill Sans
• Frutiger
• Myriad
• Optima
• Verdana

Old Style Serif

Семейство шрифтов Old Style известно небольшим контрастом между тонкими и толстыми штрихами.Его буквы всегда наклонены влево.

Описание шрифта:

• Классический
• Традиционный
• Читаемый

Примеры шрифтов:

• Дженсон
• Бембо
• Палатино
• Гарамонд

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

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

Описание шрифта:

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

• Times New Roman
• Baskerville

Примеры шрифтов Modern Serif:

Slab Serifs

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

Описание шрифта:

• В городе или в деревне
• Выделяется
• Необычно

Примеры шрифтов:

• Clarendon
• Rockwell
• Courier
• График Любалина
• Archer

# 3 Сравнение и контраст

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

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

• Шрифт того же периода.
• Аналогичная масса или высота хода.
• Шрифт создал тот же дизайнер.

# 4 Экономно используйте «уникальные» шрифты

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

Как шрифты могут помочь вашему бизнесу

Если вы все еще не уверены в силе правильного выбора шрифта, вот 5 способов, которыми они могут помочь вашему бизнесу:

Он может привлечь внимание вашего целевого рынка.

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

Создает иерархию.

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

Создает впечатление аудитории.

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

Улучшает читаемость.

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

Создает единообразие.

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

Как запросить дизайн на платформе Penji

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

1. Создайте проект

На панели управления щелкните Новый проект .

Перед тем, как предоставить краткое описание проекта, напишите название проекта и выберите тип дизайна из категории «Дизайн ». Если вы не видите дизайн, который хотите запросить, нажмите Create a Custom Project .

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

Не забудьте нажать Создать проект после завершения.

2. Связаться с дизайнером

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

Как только Penji поручит вам дизайнера, вы можете рассчитывать на получение первого черновика в течение 24–48 часов.

3. Проверьте проект

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

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

4. Скачать проект

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

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

Используйте лучшие шрифты для любого дизайна

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

Начните подписку Penji сегодня. Планы начинаются от 369 долларов в месяц с планом Pro. Но если вам нужен полный доступ ко всем запросам на дизайн, подпишитесь на тарифный план Team всего за 499 долларов в месяц. Вы можете максимально увеличить план, запросив иллюстрации и дизайн веб-сайтов. Кроме того, создавайте новые проекты для других дизайнерских нужд. Зарегистрируйтесь сейчас и попробуйте платформу Penji бесплатно в течение 15 дней.

Обновлено 9 апреля 2021 г.

Выбор гарнитуры — любовь к графике Выбор гарнитуры

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

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

Шрифты и гарнитуры являются основным сырьем для набора.

Определения: шрифт против гарнитуры

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

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

.

Когда вы смотрите на страницу шрифта, вы можете сказать: «Что это за шрифт? » или « Какой шрифт использовался для этого? Но вы не можете сказать, «Что это за шрифт?» , потому что вы не смотрите на шрифт; вы смотрите на продукт шрифта.

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

Выбор гарнитуры

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

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

Тип текста

Для типа текста используйте шрифты, предназначенные для непрерывного чтения, такие как Caslon, Bembo и Garamond. Эти три хорошо подходят для больших областей книжного текста. Times New Roman — хотя и часто используется сегодня — был разработан в двадцатом веке для использования в качестве газетного шрифта и также подходит для книжного текста. Clearface, Centaur и Sabon также имеют четкую читаемость.

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

Тип дисплея

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

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

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

Кроме того, концепция или сообщение могут потребовать чего-то более энергичного и энергичного.

Slab serifs, такие как Rockwell, Memphis и Clarendon, имеют достаточный вес и характер для использования в качестве типа отображения в заголовках или подзаголовках. При увеличении многие из необработанных визуальных форм становятся присутствующими для шрифтов Old Style и Garalde с засечками, поэтому используйте их для отображения шрифта с осторожностью.Наконец, с этой задачей также могут справиться различные шрифты и шрифты без засечек.

Библиография

• Бордли, Джон (2008) О выборе типа: первые принципы. Я люблю типографию
• Лоусон, С. Александр (2000) Анатомия шрифта. Дэвид Р. Годин, Издатель
• Стризвер, Илен (2013) Правила шрифтов: Руководство дизайнера по профессиональной типографике . Wiley

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

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

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

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

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

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

—

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

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

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

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

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

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

Плоские шрифты

Шрифты

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

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

Шрифты

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

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

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

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

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

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

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

—

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

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

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

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

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

–

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

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

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

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

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

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

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

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

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

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

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

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

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

шрифтов

шрифтов

---

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

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

1. Пользовательский агент создает (или получает доступ) базу данных соответствующего CSS 2.1 свойства всех шрифтов, о которых знает UA. Если есть два шрифта с одинаковыми свойствами, пользователь агент выбирает один из них.
2. Для данного элемента и для каждого символа в этом элементе UA собирает свойства шрифта, применимые к этому элементу. С помощью полный набор свойств, UA использует свойство font-family для выберите предварительное семейство шрифтов. Остальные свойства проверены против семьи в соответствии с критериями соответствия, описанными в каждое свойство.Если есть совпадения по всем остальным свойствам, тогда это совпадающее начертание шрифта для данного элемента или символа.
3. Если в семействе шрифтов нет подходящего начертания шрифта обрабатывается на шаге 2, и если есть следующая альтернатива ‘font-family’ в наборе шрифтов, затем повторите шаг 2 со следующей альтернативой ‘семейство шрифтов’.
4. Если есть совпадающее начертание шрифта, но оно не содержит глифа для текущего персонажа, и если есть следующая альтернатива ‘font-family’ в наборах шрифтов, затем повторите шаг 2 со следующим альтернативное «семейство шрифтов».
5. Если в семействе, выбранном в 2, нет шрифта, используйте «Font-family» по умолчанию, зависящий от UA, и повторите шаг 2, используя лучшее совпадение, которое может быть получено в пределах шрифта по умолчанию. Если конкретный символ не может быть отображен с использованием этого шрифта, тогда UA может использовать другой означает определение подходящего шрифта для этого символа. UA должен отобразить каждый символ, для которого нет подходящего шрифта для видимого символа выбранный UA, предпочтительно глиф «отсутствующий символ» из одного из шрифты, доступные для UA.

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

Правила сопоставления по свойствам из пункта (2) выше следующие:

1. ‘font-style’ сначала пробуется. «Курсив» будет удовлетворен, если в базе данных шрифтов UA есть лицо помечены ключевым словом CSS «курсив» (предпочтительно) или «наклонный». В противном случае значения должны быть точно сопоставлены, иначе стиль шрифта не будет работать.
Далее пробуется
2. ‘font-option’.Спички с маленькой заглавной буквы (1) a шрифт, помеченный как ‘small-caps’, (2) шрифт, в котором маленькие заглавные буквы синтезированный, или (3) шрифт, в котором все строчные буквы заменены на заглавные буквы. Шрифт с маленькими заглавными буквами может быть синтезирован электронное масштабирование заглавных букв обычного шрифта. ‘normal’ соответствует нормальному варианту шрифта (не с маленькими заглавными буквами). У шрифта не может быть нормального варианта. Шрифт который доступен только в виде маленьких заглавных букв, должен выбираться как «нормальное» лицо или как «малое заглавное» лицо.
3. ‘font-weight’ соответствует следующему, он будет никогда не подведи. (См. «Font-weight» ниже.)
4. ‘font-size’ должен соответствовать в пределах UA-зависимый запас допуска. (Обычно размеры масштабируемых шрифтов округляются до ближайшего целого пикселя, а допуск для растровые шрифты могут достигать 20%.) Дальнейшие вычисления, например, значениями ’em’ в других свойствах, основаны на вычисленное значение font-size.

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

body {font-family: Gill, Helvetica, sans-serif}
 

Хотя многие шрифты содержат глиф «недостающий символ», обычно это открытый ящик, поскольку его название подразумевает, что это не должно быть считается совпадением для символов, которых нет в шрифте. (Должно, однако считается соответствием U + FFFD, «отсутствующий символ» код символа).

Существует два типа названий семейств шрифтов:

<фамилия>

Название выбранного семейства шрифтов.В последнем примере «Гилл» и «Helvetica» — семейства шрифтов.

<родовое-семейство>

В приведенном выше примере последним значением является родовое имя семейства. В определены следующие общие семейства:

• ‘serif’ (например, Times)
• «без засечек» (например, Helvetica)
• ‘курсив’ (например, Zapf-Chancery)
• «фэнтези» (например, вестерн)
• «моноширинный» (например, Courier)

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

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

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

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

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

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

body {font-family: "New Century Schoolbook", serif}

<ТЕЛО>
 

Семейство шрифтов имен , которые совпадают с ключевым словом value (‘наследование’, ‘с засечками’, ‘без засечек’, ‘моноширинный’, ‘фантазия’ и ‘cursive’) необходимо заключить в кавычки, чтобы избежать путаницы с ключевыми словами с те же имена. Ключевые слова initial и default зарезервированы для для будущего использования и также должны быть заключены в кавычки при использовании в качестве названий шрифтов.UA должны не рассматривать эти ключевые слова как совпадающие с ‘‘ тип.

15.3.1 Общие семейства шрифтов

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

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

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

15.3.1.1

serif

Символы шрифтов с засечками, как этот термин используется в CSS, как правило, имеют завершение. штрихи, расклешенные или сужающиеся концы или имеющие окончание с засечками (включая плоские засечки).Шрифты с засечками обычно пропорционально разнесены. Они часто демонстрируют большую разницу между толстые и тонкие штрихи, чем шрифты из общего шрифта ‘sans-serif’ семья. CSS использует термин ‘serif’ для применения к шрифту любого скрипта, хотя для конкретных сценариев могут быть более знакомы другие имена, например как Mincho (японский), Sung или Song (китайский), Totum или Kodig (корейский). Любой шрифт, описанный таким образом, может использоваться для представления родовое семейство ‘serif’.

Примеры шрифтов, подходящих под это описание:

Латинские шрифты	Times New Roman, Бодони, Гарамонд, Minion Web, ITC Stone Serif, MS Georgia, Bitstream Cyberbit
Греческие шрифты	Bitstream Cyberbit
Кириллические шрифты	Adobe Minion Cyrillic, Excelsior Cyrillic Upright, Монотипия Альбион 70, Bitstream Cyberbit, ER Bukinist
Еврейские шрифты	New Peninim, Raanana, Bitstream Cyberbit
Японские шрифты	Рюмин Лайт-KL, Киокашо ИКА, Футо Мин A101
Арабские шрифты	Bitstream Cyberbit
Шрифты Cherokee	Ло Цицеро Чероки

15.3.1.2

sans-serif

Глифы в шрифтах без засечек, поскольку этот термин используется в CSS, обычно имеют обводку гладкие окончания — с небольшим расширением или без развальцовки, поперечного штриха и т. д. орнамент. Шрифты без засечек обычно пропорционально разнесены. У них часто есть небольшие различия между толстыми и тонкие штрихи по сравнению со шрифтами из семейства «serif». CSS использует термин «без засечек» для применения к шрифту для любого шрифта, хотя другие имена могут быть более знакомы для конкретных скриптов, например Готический (японский), Кай (китайский) или Патанг (корейский).Любой шрифт, описанный таким образом, может использоваться для обозначения общего «без засечек» семья.

Примеры шрифтов, подходящих под это описание:

Латинские шрифты	MS Trebuchet, ITC Avant Garde Gothic, MS Arial, MS Verdana, Univers, Futura, ITC Stone Sans, Gill Sans, Akzidenz Grotesk, Helvetica
Греческие шрифты	Attika, Typiko New Era, MS Tahoma, Monotype Gill Sans 571, Helvetica Greek
Кириллические шрифты	Helvetica Cyrillic, ER Univers, Lucida Sans Unicode, Bastion
Еврейские шрифты	Arial Hebrew, MS Tahoma
Японские шрифты	Shin Go, Heisei Kaku Gothic W5
Арабские шрифты	MS Tahoma

15.3.1.3

cursive

Глифы курсивным шрифтом, как этот термин используется в CSS, обычно имеют либо присоединение штрихов, либо другие характеристики курсива, помимо тех курсивных шрифтов. Глифы частично или полностью связаны, и результат больше похож на рукописную ручку или кисть письмо, чем печатное письмо. Шрифты для некоторых скриптов, например Арабский, почти всегда пишется курсивом. CSS использует термин «курсив» для применять к шрифту для любого скрипта, хотя другие названия, такие как Chancery, Кисть, Swing и Script также используются в названиях шрифтов.

Примеры шрифтов, подходящих под это описание:

Латинские шрифты	Caflisch Script, Adobe Poetica, Sanvito, Ex Ponto, Snell Roundhand, Zapf-Chancery
Кириллические шрифты	ER Architekt
Еврейские шрифты	Корсива
Арабские шрифты	DecoType Naskh, монотипия урду 507

15.3.1.4

фэнтези

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

латинские шрифты

Alpha Geometrique, Critter, Cottonwood, FB Reactor, Studz

15.3.1.5

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

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

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

Латинские шрифты	Courier, MS Courier New, Prestige, Everson Mono
Греческие шрифты	MS Courier New, Everson Mono
Кириллические шрифты	ER Kurier, Everson Mono
Японские шрифты	Осака Моноширинный
Шрифты Cherokee	Эверсон Моно

«стиль шрифта»

Значение:	нормальное | курсив | косой | наследовать
Начальный:	нормальный
Применимо к:	все элементы
Унаследовано:	да
В процентах:	Н / Д
Медиа:	визуальный
Расчетное значение:	как указано

Свойство font-style выбирает между обычным (иногда называемые «римскими» или «вертикальными»), курсивом и наклонным шрифтом внутри семейство шрифтов.

Значение «нормальный» выбирает шрифт, который классифицируется как «нормальный». в базе данных шрифтов UA, в то время как ‘oblique’ выбирает шрифт, который помечены как «наклонные». Значение «курсив» выбирает шрифт, который помечен «курсив» или, если он недоступен, помеченный как «наклонный».

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

Шрифты с наклонными, наклонными или наклонными названиями будут обычно обозначается как «наклонный» в базе данных шрифтов UA.Шрифты с Курсив, Курсив или Курсив в их названиях будут обычно обозначается курсивом.

h2, h3, h4 {font-style: italic}
h2 em {font-style: normal}
 

В приведенном выше примере выделенный текст в ‘h2’ появится в нормальное лицо.

‘вариант шрифта’

Значение:	нормальное | малые шапки | наследовать
Начальный:	нормальный
Применимо к:	все элементы
Унаследовано:	да
В процентах:	Н / Д
Медиа:	визуальный
Расчетное значение:	как указано

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

Значение ‘normal’ выбирает шрифт, который не является шрифтом с маленькими заглавными буквами, ‘small-caps’ выбирает шрифт small-caps. Это приемлемо (но не требуется) в CSS 2.1, если шрифт с маленькими заглавными буквами создается с помощью обычный шрифт и замена строчных букв масштабированными прописными символы. В крайнем случае будут использоваться прописные буквы в качестве замена капельного шрифта.

Следующий пример приводит к элементу ‘h4’ в малых заглавных буквах, с любыми подчеркнутыми словами наклонными и любыми подчеркнутыми словами внутри и наклонные малые заглавные буквы ‘h4’:

h4 {font-variant: small-caps}
em {font-style: oblique}
 

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

Примечание: , поскольку это свойство приводит к тому, что текст преобразовано в верхний регистр, применяются те же соображения, что и для ‘text-transform’.

‘начертание шрифта’

Значение:	нормальное | жирный | смелее | зажигалка | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | наследовать
Начальный:	нормальный
Применимо к:	все элементы
Унаследовано:	да
В процентах:	Н / Д
Медиа:	визуальный
Расчетное значение:	см. Текст

Свойство font-weight выбирает толщину шрифта.В значения от ‘100’ до ‘900’ образуют упорядоченную последовательность, где каждое число указывает на вес, который по крайней мере такой же темный, как и его предшественник. В ключевое слово «нормальный» является синонимом «400», а «жирный» — синонимом. с «700». Ключевые слова, отличные от «нормального» и «жирного», были показаны часто путают с названиями шрифтов, поэтому числовая шкала выбран для списка из 9 значений.

p {font-weight: normal} / * 400 * /
h2 {font-weight: 700} / * полужирный * /
 

Значения «жирнее» и «светлее» выбирают толщину шрифта, относительно веса, унаследованного от родителя:

сильный {font-weight: bolder}
 

Шрифты (данные шрифта) обычно имеют одно или несколько свойств, значения — это имена, которые описывают «вес» шрифта.Там не имеет общепринятого универсального значения для этих названий веса. Их основные роль заключается в том, чтобы различать лица разной темноты в одном семейство шрифтов. Использование разных семейств шрифтов весьма вариативно; Например, шрифт, который можно было бы назвать жирным, можно описать как быть Regular, Roman, Book, Medium, Semi- или DemiBold, Жирный, или Черный, в зависимости от того, насколько черным «нормальное» лицо. шрифта в дизайне. Потому что нет стандартного использования имен, значения свойств веса в CSS 2.1 даны на числовом шкала, в которой значение «400» (или «нормальный») соответствует «нормальное» текстовое лицо для этой семьи. Название веса, связанное с это лицо обычно будет Книжный, Обычный, Римский, Обычный или иногда Средний .

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

• Если в семействе шрифтов уже используется числовая шкала с девятью значениями (например, e.g., OpenType делает), веса шрифтов должны быть сопоставлены напрямую.
• Если есть лицо с надписью Medium и одно лицо с надписью Книжный, Обычный, Римский или Обычный, , затем Средний обычно присваивается «500».
• Шрифт с надписью «Полужирный» часто соответствует значению веса «700».

Как только веса семейства шрифтов отображаются на шкале CSS, недостающие веса выбираются следующим образом:

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

В следующих двух примерах показаны типичные сопоставления.

Предположим, что у семейства «Гремучая змея» четыре веса, от самого легкого до самый темный: Обычный, Средний, Полужирный, Плотный.

Rattlesnake Bold »

Первый пример отображения веса шрифта

Доступные грани	Назначения	Заполнение отверстий
«Rattlesnake Regular»	400	100, 200, 300
«Rattlesnake Medium»							700	600
« Rattlesnake Heavy »	800	900

Предположим, что в Семейство «Ice Prawn»: Book, Medium, Bold, Heavy, Black, ExtraBlack. Обратите внимание, что в этом случае пользовательский агент решил , а не присвоить числовой значение «Ice Prawn ExtraBlack».

Ice Prawn Extra

Второй пример отображения веса шрифта

Доступные грани	Назначения	Заполнение отверстий
«Книга ледяных креветок»	400	100, 200, 300
«Ice Prawn Medium»	500 909	500 909	«Ice Prawn Bold»	700	600
«Ice Prawn Heavy»	800
Ice Prawn Black	900
(нет)

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

Значения «смелее» и «светлее»

Унаследованное значение	смелее	Зажигалка
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700

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

Нет гарантии, что лицо будет темнее для каждого из значения ‘font-weight’; например, некоторые шрифты могут иметь только нормальное и жирное лицо, в то время как у других может быть восемь толщин лица. Нет никакой гарантии, как UA будет отображать шрифты внутри семейства. к значениям веса. Единственная гарантия — это то, что лицо заданной стоимости будет не менее темным, чем грани более светлых оттенков.

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

<абсолютный размер>

Ключевое слово — это индекс таблицы шрифтов. размеры рассчитываются и хранятся UA. Возможные значения:

[xx-маленький | x-small | маленький | средний | большой | x-большой | xx-большой]

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

Значения абсолютного размера CSS	xx-малый	x-маленький	малый	средний	большой	x-большой	xx большой
Размеры шрифта HTML	1		2	3	4	5	6	7

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

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

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

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

<относительный размер>

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

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

Отрицательные значения не допускаются.

Во всех остальных свойствах значения длины em и ex относятся к вычисленный размер шрифта текущего элемента. В свойстве font-size эти Единицы длины относятся к вычисленному размеру шрифта родительского элемента.

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

Примеры:

п {размер шрифта: 16 пикселей; }
@media print {
п {размер шрифта: 12 пт; }
}
blockquote {font-size: больше}
em {размер шрифта: 150%}
em {размер шрифта: 1.5em}
 

Свойство ‘font’: за исключением описанного ниже, сокращенное свойство для параметр ‘стиль шрифта’, ‘вариант-шрифта’, ‘font-weight’, ‘размер шрифта’, ‘line-height’ и ‘font-family’ одновременно место в стиле простыня. Синтаксис этого свойства основан на традиционном типографская сокращенная запись для установки нескольких свойств, связанных с шрифты.

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

p {font: 12px / 14px без засечек}
п {шрифт: 80% без засечек}
p {font: x-large / 110% "New Century Schoolbook", serif}
p {шрифт: полужирный курсив, большой Palatino, serif}
p {font: normal, small-caps 120% / 120% fantasy}
 

Во втором правиле процентное значение размера шрифта (‘80% ‘) относится к к размеру шрифта родительского элемента. В третьем правиле строка процент высоты относится к размеру шрифта самого элемента.

В первых трех правилах выше «стиль шрифта», «вариант шрифта» и font-weight явно не упоминаются, что означает, что они все три установлены на свое начальное значение («нормальное»). Четвертый набор правил начертание шрифта на жирный, стиль шрифта на курсив и неявно устанавливает для ‘font-option’ значение ‘normal’.

Пятое правило устанавливает ‘font-option’ (‘small-caps’), ‘font-size’ (120% родительского шрифта), ‘line-height’ (120% раз размер шрифта) и «font-family» («фантазия»).Отсюда следует, что ключевое слово ‘normal’ применяется к двум оставшимся свойствам: ‘font-style’ и font-weight.

Следующие значения относятся к системным шрифтам:

заголовок

Шрифт, используемый для элементов управления с субтитрами (например, кнопок, раскрывающихся списков и т. Д.).

значок

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

меню

Шрифт, используемый в меню (например, раскрывающихся меню и списках меню).

Окно сообщений

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

маленькая подпись

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

строка состояния

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

Системные шрифты можно устанавливать только целиком; то есть шрифт семья, размер, вес, стиль и т. д. настраиваются одновременно. При желании эти значения затем могут быть изменены индивидуально. Если нет шрифт с указанными характеристиками существует на данной платформе, пользовательский агент должен либо разумно заменить (например, меньший версия шрифта ‘caption’ может использоваться для ‘small-caption’ font) или замените шрифт пользовательского агента по умолчанию.Что касается обычных шрифтов, если для системного шрифта какие-либо отдельные свойства не являются частью доступных пользовательских настроек операционной системы, эти свойства должны быть установлены на их начальные значения.

Вот почему это свойство является «почти» сокращенным свойством: system шрифты могут быть указаны только с этим свойством, а не с самим ‘font-family’, поэтому ‘font’ позволяет авторам делать больше, чем сумма его подсвойств. Однако отдельным свойствам, таким как font-weight, по-прежнему присваиваются значения, взятые из системного шрифта, которые можно изменять независимо.

Примеры:

button {font: 300 italic 1.3em / 1.7em "FB Armada", sans-serif}
кнопка p {font: menu}
кнопка p em {font-weight: bolder}
 

Если шрифт, используемый для раскрывающихся меню в определенной системе оказался, например, углем 9-point, весом 600, то P элементы, являющиеся потомками BUTTON, будут отображаться, как если бы это правило действовало:

кнопка p {font: 600 9px Charcoal}
 

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

button p {
  семейство шрифтов: Уголь;
  стиль шрифта: нормальный;
  вариант шрифта: нормальный;
  font-weight: 600;
  размер шрифта: 9 пикселей;
  высота строки: нормальный;
}
 

---

Выберите правильный шрифт для своего контента

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

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

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

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

Наука о выборе шрифтов для вашей книги

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

• Главный приоритет при выборе шрифта — разборчивость и читаемость.
• Учитывайте тематику и аудиторию (например, в научно-популярном контенте может использоваться более традиционный шрифт; в художественном контенте может использоваться более современный шрифт).
Шрифты
• с засечками, такие как Times New Roman или Cambria, обычно предпочтительны в длинных отрывках текста, потому что они помогают глазу быстрее перемещаться по строке.
Шрифты
• без засечек, такие как Arial и Verdana, могут быть хорошим выбором, если вы хотите, чтобы ваша книга демонстрировала более либеральный или современный подход к дизайну. Шрифт без засечек часто лучше подходит для текста в диаграммах, графиках и диаграммах, потому что простые буквы легче читать при меньшем размере текста.
• Различные шрифты придают страницам книги разный тон голоса. Чистый, гладкий геометрический шрифт без засечек, в котором геометрические формы используются в качестве основы письма (например, Europa или Futura PT), выглядит гладким и современным — отлично подходит для книги по технологиям или архитектуре.Модное издание, скорее всего, предпочтет классические и элегантные высококонтрастные шрифты с засечками.
• Контрастность означает различие между толстыми и тонкими штрихами в каждом символе. Высококонтрастные шрифты, такие как Bodini, передают достоинство и элегантность, тогда как низкоконтрастные шрифты сплошные и однородные, что делает яркое и мощное заявление. Как правило, очень высококонтрастные и очень низкоконтрастные шрифты часто неразборчивы при меньшем размере.
• Шрифты могут передать надежность. Читатели с большей вероятностью поверят информации, набранной шрифтом с засечками, таким как Baskerville, чем шрифтом без засечек, таким как Helvetica.
• Знайте свою аудиторию. Например, для детской книги нужен простой стандартный шрифт, который могут разобрать начинающие читатели, тогда как подростки или техническая аудитория предпочитают более современный, резкий шрифт. Для старшей аудитории чистый, простой шрифт без засечек наиболее разборчив, но для этой аудитории более крупный шрифт даже важнее, чем выбор шрифта.

Убедитесь, что шрифт соответствует среднему значению

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

• Засечки обычно маленькие и тонкие, поэтому на цифровых экранах они часто искажаются. Шрифты без засечек более четкие и четкие, поэтому их легче читать даже на небольших экранах портативных дисплеев.
• В целом, большие шрифты легче читать, чем мелкие. Большинство экспертов сходятся во мнении, что 16 пунктов — это идеальный размер для чтения текста в Интернете, потому что с учетом расстояния чтения он примерно такой же, как при чтении типичного печатного текста с 10 пунктами.
• Для чтения текста на мобильном устройстве оптимальным размером является 14 пунктов.
Шрифты
• в Интернете похожи на печатные шрифты в том, что касается эмоционального отклика, который они передают (т. Е. Используйте шрифт без засечек, чтобы внушать доверие; используйте традиционный шрифт с засечками, чтобы передать достоинство и элегантность).
• Встраивайте все шрифты, чтобы обеспечить единообразный вид даже на устройствах, на которых нет шрифтов, используемых в вашей электронной книге.
• Шрифты масштабируемой векторной графики OpenType (SVG), изначально предназначенные для веб-дизайна, начинают появляться в печатных работах, но эти шрифты не поддерживаются в PDF-файлах и не всегда правильно импортируются в InDesign и другие программы публикации печати.

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

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