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

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

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

Типы шрифтов

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Запомнить

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

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

Шрифты, общие для всех (актуальных) версий Windows, и их Mac-эквиваленты / Хабр

Введение

В данном списке перечислены шрифты, общие для всех актуальных на данный момент операционных систем Windows (фактически начиная с Windows 98), и их эквиваленты в Mac OS. Такие шрифты иногда называют «безопасными шрифтами для браузеров» (browser safe fonts). Это небольшой справочник, которым я пользуюсь, когда делаю Web-страницы и думаю, что он будет полезен и Вам.

Если Вы новичок в web-дизайне, то может быть думаете что-нибудь типа: «Почему это я должен ограничиваться таким небольшим набором шрифтов? У меня есть огромная коллекция прекрасных шрифтов!» Дело в том, что браузер посетителя может отобразить только те шрифты, которые установлены в его операционной системе (прим. переводчика: в настоящее время уже есть возможность применять фактически любые шрифты при оформлении страниц используя CSS 3 и его новое свойство @font-face; правда, поддерживают эту функцию пока ещё далеко не все браузеры), а это означает, что каждый посетитель Вашей страницы должен быть обладателем выбранных Вами шрифтов. Поэтому Вы должны использовать только те шрифты, которые есть в каждой операционной системе. К счастью, в CSS есть свойство @font-family, облегчающее эту задачу.

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

Список

¹ Шрифты Georgia и Trebuchet MS поставляются вместе с Windows 2000/XP и включены в пакет шрифтов IE (да и вообще поставляются со многими приложениями от Microsoft), поэтому они установлены на многих компьютерах с ОС Windows 98.

² Символьные шрифты отображаются только в Internet Explorer, в остальных браузерах они обычно заменяются на стандартный шрифт (хотя, например, шрифт Symbol отображается в Opera, а Webdings — в Safari).

³ Шрифт Book Antiqua практически идентичен Palatino Linotype; Palatino Linotype поставляется с Windows 2000/XP, а Book Antiqua — с Windows 98.

⁴ Обратите внимание, что эти шрифты не TrueType, а bitmap, поэтому они могут плохо выглядеть с некоторыми размерами (они предназначены для отображения в размерах 8, 10, 12, 14, 18 и 24 pt при 96 DPI).

⁵ Эти шрифты работают в Safari только в стандартном начертании, но не работают при выделении жирным или курсивом. Comic Sans MS также работает жирным, но не курсивом. Другие Mac-браузеры, кажется, нормально эмулируют отсутствующие у шрифтов свойства самостоятельно (спасибо Christian Fecteau за подсказку).

⁶ Эти шрифты установливаются в Mac только при Classic-инсталляции

Скриншоты

• Mac OS X 10. 4.8, Firefox 2.0, ClearType включён (за скриншот спасибо Juris Vecvanags)
• Mac OS X 10.4.4, Firefox 1.5, ClearType включён (за скриншот спасибо Eric Zavesky)
• Mac OS X 10.4.11, Safari 3.0.4, ClearType включён (за скриншот спасибо Nolan Gladius)
• Mac OS X 10.4.4, Safari 2.0.3, ClearType включён (за скриншот спасибо Eric Zavesky)
• Windows Vista, Internet Explorer 7, ClearType включён (за скриншот спасибо Michiel Bijl)
• Windows Vista, Firefox 2.0, ClearType включён (за скриншот спасибо Michiel Bijl)
• Windows XP, Internet Explorer 6, ClearType включён
• Windows XP, Firefox 1.0.7, ClearType включён
• Windows XP, Internet Explorer 6, Сглаживание шрифтов включено
• Windows XP, Firefox 1.0.7, Сглаживание шрифтов включено
• Windows 2000, Internet Explorer 6, Сглаживание шрифтов включено
• Windows 2000, Firefox 1.0.7, Сглаживание шрифтов включено
• Linux (Ubuntu 7. 04 + Gnome), Firefox 2.0 (за скриншот спасибо Juris Vecvanags)

Несколько примеров из скриншотов (по одному на каждую операционную систему)

Mac OS X 10.4.8, Firefox 2.0, ClearType включён

Windows Vista, Internet Explorer 7, ClearType включён

Windows XP, Internet Explorer 6, ClearType включён

Windows 2000, Internet Explorer 6, Сглажмвание шрифтов включёно

Linux (Ubuntu 7.04 + Gnome), Firefox 2.0

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

Как узнать, какие шрифты и цвета используются?

Где найти информацию о шрифтах и ​​цветах вашего логотипа

Вместе с нашим пакетом Premium Logo и подписками Brand Kit мы отправляем вам файл get_started_guide.html , в котором перечислены названия шрифтов, а также ваш цвет Информация. (Мы не отправляем информацию о шрифте вместе с пакетом Basic).

Поиск сведений о шрифте и цвете

Чтобы получить доступ к get_started_guide документ:

1. Загрузите файлы логотипа из своей учетной записи Looka или загрузите электронную почту.

2. Откройте папку с вашим логотипом.

3. В папке вы увидите следующие файлы: файлы логотипа, активы социальных сетей, версия вашего логотипа padded_logo и файл get_started_guide.html

4. Выберите файл get_started_guide.html ; это откроет веб-страницу в вашем браузере, которая покажет детали цвета и шрифта вашего логотипа.

Шрифты

Мы не предоставляем файлы шрифтов (TTF или OTF) вместе с вашим логотипом; мы предоставляем только названия используемых шрифтов. Затем вы можете выполнить поиск в Интернете и приобрести лицензию на использование этих шрифтов в других маркетинговых материалах, таких как ваш веб-сайт, канцелярские товары или вывески (многие шрифты в нашей базе данных также можно использовать бесплатно).

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

Цвета

Мы отправляем сведения о цвете логотипа в шестнадцатеричном формате (не в формате RGB, Pantone или CMYK). Вы можете найти их в своем Руководство по началу работы , а также в редакторе логотипов.

Чтобы найти свою цветовую палитру в редакторе логотипов, нажмите Редактировать логотип в верхней части страницы Brand Kit, и вы вернетесь в редактор логотипов. Затем вы можете прокрутить вниз, чтобы увидеть свою цветовую палитру:

Если у вас есть подписка на Brand Kit, вы также можете найти цвета своего логотипа в разделе «Руководство по использованию бренда» (для просмотра щелкните любой документ «Руководство по использованию бренда»).

Преобразование значений цвета

Если вам нужно преобразовать ваши цвета в RGB, Pantone или CMYK, вы можете использовать следующие веб-сайты для их преобразования:

• https://www. rapidtables.com/convert/color/hex-to-rgb .html

• https://www.rapidtables.com/convert/color/rgb-to-cmyk.html

• https://codebeautify.org/hex-to-pantone-converter  

Примечание: При преобразовании в RGB, Pantone и CMYK из шестнадцатеричного значения они будут равны , а не . Это связано с тем, что шестнадцатеричные значения цвета имеют более широкий диапазон, чем RGB, Pantone и CMYK. Шестнадцатеричные значения цвета используются для дисплеев и Интернета, что позволяет воспроизводить больше цветов, чем традиционная печать для RGB, Pantone и CMYK.

Статьи по теме

Как изменить логотип после покупки?

Как изменить шрифт логотипа?

Как мне отредактировать текст моего логотипа?

В чем разница между подпиской на Brand Kit и пакетами только с логотипом?

Как шрифты озвучивают пункт назначения.

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

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

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

Например, логотип Жоана Миро для Испании представлял страну как творческое, выразительное и страстное место. Буквы «ESPAÑA», написанные от руки и по-настоящему индивидуальные, олицетворяли красочную и яркую индивидуальность Испании. Хотя дизайн персонажа является частью логотипа и не предназначен для утилитарного применения, он усиливает и иллюстрирует восприятие Испании.

Знаменитый логотип Жоана Миро для Испании.

В других местах шрифты используются для изменения восприятия. В логотипе Meatpacking District в Нью-Йорке сочетаются контрастные шрифты с засечками и без засечек разного веса, что отражает его эволюцию от промышленного района до высококлассного культурного центра. Когда Амстердам представил свою кампанию «I Amsterdam», целью было изменить восприятие города как города, наполненного травкой и секс-шопами, в разнообразное и динамичное место, где люди могут собираться вместе. Знаменитая надпись теперь сама по себе является достопримечательностью и популярным местом для фотографий и постов в социальных сетях.

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

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

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

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

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

Шрифт Дубая говорит как об его арабском наследии, так и об устремленности в будущее.

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

Бывший шрифтовой директор Monotype и ведущий дизайнер Надин Шахин прокомментировала: «Речь идет о том, чтобы держать одну руку в прошлом, а другую — в будущем. Вы строите на том, что у вас есть, но вы также смотрите вперед».

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

Вдумчивая модернизация лондонского символа

Транспорт для лондонского шрифта Johnston — от Джонстона до Нью-Джонстона и, совсем недавно, обновленного шрифта Johnston100 от Monotype — стал международным символом города за более чем 100 лет его использования.

«Johnston — это не просто наш шрифт, — говорит Майк Эшворт, менеджер по дизайну и наследию лондонского метрополитена, — это сам шрифт Лондона. Вы не найдете ни одного лондонца, который бы не признал его, а также ту простоту и авторитет, которые Джонстон привносит в этот город».

Johnston 100 отражает суть Лондона, обновляя шрифт для современного использования.

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

»
Johnston — это не просто наш шрифт, — говорит Майк Эшворт, менеджер по дизайну и наследию лондонского метрополитена, — это сам шрифт Лондона.

Исторически сложилось так, что в дополнение к указателям общественного транспорта Johnston использовался на плакатах Transport for London (TfL). Эти плакаты рассказывали о том, куда поезда могут доставить пассажиров, и о волнении новых впечатлений. Джонстон передал такие качества, как свобода, пространство и радость. И спустя десятилетия Джонстон стал определяющим визуальным персонажем всего лондонского метро. Это стало квинтэссенцией его идентичности.

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