CSS: шрифты
CSS: шрифтыСмотрите также указатель всех приёмов работы.
На этой странице:
- Семейства шрифтов
- Стили шрифта
Семейства шрифтов
После цвета шрифт — возможно, важнейшее свойство страницы. На этой странице я не буду демонстрировать никаких «трюков», но покажу ряд вариаций шрифтов, допустимых в CSS.
Поскольку не все шрифты доступны на всех компьютерах (существуют тысячи шрифтов и большинство из них не бесплатны), CSS предусматривает резервную систему. Первым вы указываете шрифт, который хотели бы использовать. Затем следуют любые шрифты, которые вы могли бы использовать, если первый указанный шрифт не доступен. А закончить список вы должны типовым шрифтом, который имеет 5 видов: serif, sans-serif, monospace, cursive и fantasy.
Следующая таблица показывает примеры различных шрифтов (ваш браузер может не знать их все) и вы можете увидеть, что ваш браузер делает с каждым из пяти типовых шрифтов:
‘sans-serif’: обычные шрифты без засечек | ||
---|---|---|
‘serif’: обычные шрифты с засечками | ||
‘monospace’: шрифты фиксированной ширины | ||
‘cursive’: шрифты, имитирующие почерк | ||
‘fantasy’: декоративные шрифты, для названий и т. д.. |
Стили шрифтов
Большинство шрифтов имеют разнообразные стили в пределах одного и того же шрифтового семейства. Обычно это жирный стиль (bold) или курсив (italic), часто встречается также стиль «жирный курсив» (bold italic), реже — капитель (малые прописные буквы — small-caps), а в ряде случаев — экстра-светлые/экстра-жирные или растянутые/сжатые версии.
В таблице ниже приведены несколько различных стилей. Многие из строк будут выглядеть одинаково, если у вас нет большой коллекции шрифтов.
правило | serif | sans-serif |
---|---|---|
Стили | ||
font-style: normal | Съешь же… | Съешь же… |
font-style: italic | Съешь же… | Съешь же… |
font-style: oblique | Съешь же… | Съешь же… |
Насыщенность шрифта | ||
font-weight: 100 | Съешь же… | Съешь же… |
font-weight: 200 | Съешь же… | Съешь же… |
font-weight: 300 | Съешь же… | Съешь же… |
font-weight: normal | Съешь же… | Съешь же… |
font-weight: 500 | Съешь же… | Съешь же… |
font-weight: 600 | Съешь же… | Съешь же… |
font-weight: bold | Съешь же… | Съешь же… |
font-weight: 800 | Съешь же… | Съешь же… |
font-weight: 900 | Съешь же… | Съешь же… |
Варианты | ||
font-variant: normal | Съешь же… | Съешь же… |
font-variant: small-caps | Съешь же… | Съешь же… |
Растяжение | ||
font-stretch: ultra-condensed | Съешь же… | Съешь же… |
font-stretch: extra-condensed | ||
font-stretch: condensed | Съешь же… | Съешь же… |
font-stretch: semi-condensed | Съешь же… | Съешь же… |
font-stretch: normal | Съешь же… | Съешь же… |
font-stretch: semi-expanded | Съешь же… | Съешь же… |
font-stretch: expanded | Съешь же… | Съешь же… |
font-stretch: extra-expanded | ||
font-stretch: ultra-expanded | Съешь же… | Съешь же… |
Модуль «Шрифты» в CSS имеет больше свойств для указания специальных стилей (для шрифтов, которые поддерживают несколько вариантов), в частности, свойство font-variant имеет гораздо больше значений.
Created 17 Jan 2001;
Last updated
Текстовые стили — Текст — Принципы — Контур.Гайды
Текстовые стили подобраны с учетом гайда по сетке и модулю, используйте эти стили в интерфейсах Контура. Рекомендации по набору текста смотрите в гайде по типографике.
Шрифт
Основной шрифт в интерфейсах Контура — «Lab Grotesque K». Это специальная версия «Lab Grotesque» с небольшими доработками, сделанными для Контура ребятами из Швеции.
Файлы шрифтов для дизайна можно взять в общей папке на Google Drive.
Для фронтенда — подключайте CSS со стилями с сервера статики:
<link rel=»stylesheet» href=»https://s.kontur.ru/common-v2/fonts/LabGrotesque/LabGrotesque.css» />
Для того чтобы загрузить шрифты первыми, до того как распарсится CSS, добавьте код:
<link rel=»preload» href=»https://s.kontur.ru/common-v2/fonts/LabGrotesque/LabGrotesque-Regular.woff2″ as=»font» type=»font/woff2″ crossorigin=»anonymous» />
<link rel=»preload» href=»https://s.
<link rel=»preload» href=»https://s.kontur.ru/common-v2/fonts/LabGrotesque/LabGrotesque-Bold.woff2″ as=»font» type=»font/woff2″ crossorigin=»anonymous» />
Стили для заголовков
Для использования на одном экране или странице выбирайте стили которые не стоят рядом в этом списке — заголовки различных уровней должны хорошо отличаться. Это помогает ориентироваться в тексте и вычленять главное. Например для Гайдов мы выбрали кегли 40, 32 и 20 для заголовков h2, h3, h4 и 16 для наборного текста. Выбирайте размеры и насыщенность, которые больше подойдут аудитории вашего продукта.
56 / 64 / 32
Header sample
48 / 56 / 28
Header sample
40 / 48 / 24
Header sample
36 / 44 / 22
Header sample
32 / 40 / 20
Header sample
28 / 36 / 18
Header sample
Для заголовков, лидов и обычного текста
Для размеров меньше 24px есть две высоты строки. Выбирайте высоту строки в зависимости от ширины колонки: «до 40» — вариант для узких колонок текста до 40 символов в строке и для использования в контролах, «40 и больше» для колонок текста больше 40 символов. Вместе с высотой строки меняется и абзацный отступ.
Длина строки до 40 символов40 и больше
24 / 32 / 16 Продуктовая линейка компании включает сервисы для электронного документооборота 22 / 30 / 14 Продуктовая линейка компании включает сервисы для электронного документооборота 20 / 28 / 14 Продуктовая линейка компании включает сервисы для электронного документооборота 18 / 24 / 12 Продуктовая линейка компании включает сервисы для электронного документооборота 16 / 22 / 12 Продуктовая линейка компании включает сервисы для электронного документооборота 14 / 20 / 10 Продуктовая линейка компании включает сервисы для электронного документооборота 12 / 16 / 8 Продуктовая линейка компании включает сервисы для электронного документооборота | 24 / 36 / 18 Продуктовая линейка компании включает сервисы для электронного документооборота 22 / 34 / 16 Продуктовая линейка компании включает сервисы для электронного документооборота 20 / 32 / 16 Продуктовая линейка компании включает сервисы для электронного документооборота 18 / 28 / 14 Продуктовая линейка компании включает сервисы для электронного документооборота 16 / 24 / 12 Продуктовая линейка компании включает сервисы для электронного документооборота 14 / 22 / 12 Продуктовая линейка компании включает сервисы для электронного документооборота 12 / 18 / 10 Продуктовая линейка компании включает сервисы для электронного документооборота |
Больше примеров с учетом длины строки в файле в Фигме.
Сетка и высота строк
Высота строки и кегль подобраны так, чтоб соответствовать гайду по сетке. Для заголовков высота строки составляет 120% от размера шрифта, для узких колонок обычного текста — 140%, для широких — 160% и округлена до модуля в 8, 4 и иногда 2 пикселя.
Модуль и сетка имеют прикладное значение — помогают выбирать размеры и отступы, но самостоятельной ценности у них нет, поэтому текстовые блоки, а тем более их базовые линии, не нужно фанатично вписывать в восьмипиксельную сетку. Достаточно использовать предложенные в этом гайде параметры типографики, и отступы рекомендованные в гайде по отступам.
стилей шрифтов — Etsy Turkey
Etsy больше не поддерживает старые версии вашего веб-браузера, чтобы обеспечить безопасность пользовательских данных. Пожалуйста, обновите до последней версии.
Воспользуйтесь всеми преимуществами нашего сайта, включив JavaScript.
( 1000+ релевантных результатов, с рекламой Продавцы, желающие расширить свой бизнес и привлечь больше заинтересованных покупателей, могут использовать рекламную платформу Etsy для продвижения своих товаров. Вы увидите результаты объявлений, основанные на таких факторах, как релевантность и сумма, которую продавцы платят за клик. Узнать больше. )лучших стилей шрифтов для информационных бюллетеней для использования в маркетинговых кампаниях
Как шрифт может определить успех вашей маркетинговой кампании Веб-безопасные шрифты против веб-шрифтов в электронных письмах Различные типы шрифтов для информационных бюллетеней Как выбрать лучший шрифт для информационного бюллетеня Лучшие шрифты для информационных бюллетеней для различных текстовых элементов Вывод
Шрифты информационных бюллетеней, их цвет, размер и интервалы играют большую роль в восприятии бюллетеня читателями. Кроме того, хотя электронный маркетинг прошел долгий путь, браузеры и почтовые клиенты по-прежнему не могут корректно отображать многие шрифты.
В этой статье мы поговорим о том, какие шрифты для рассылок самые лучшие, как они вписываются в электронное письмо и почему простота все же лучше замысловатой даже при выборе из сотен вариантов.
Как шрифт может определить успех вашей маркетинговой кампании
Шрифт, его размер и расстояние между строками и буквами имеют значение, когда речь идет о том, насколько легко и удобно читать контент.
Согласно исследованию, проведенному Бенджамином Берманом (оно включало в себя викторину, проверьте его), опубликованном в New York Times в 2012 году, доверие людей к утверждению будет варьироваться в зависимости от того, какой шрифт был использован для его написания. Таким образом, подходящая типографика может сделать ваши информационные бюллетени более достоверными, задать правильный тон, создать связь и повысить узнаваемость бренда. Это открывает невероятную возможность повысить конверсию или, наоборот, снизить ее, если дизайн сделан некачественно.
Веб-шрифты и веб-шрифты в электронных письмах
Когда ваши читатели открывают вашу электронную почту на своих компьютерах или мобильных устройствах, их веб-браузеры и почтовые клиенты «читают» код этого электронного письма, «говоря» им, какой шрифт отображать. Если шрифт недоступен на конкретном устройстве, он заменяется шрифтом по умолчанию, предварительно установленным в операционной системе устройства.
Такое изменение может привести к тому, что дизайн вашей электронной почты будет выглядеть иначе, чем вы предполагали.
Проблема с недоступными шрифтами чаще возникает у пользователей, использующих старое оборудование или медленное интернет-соединение. Верный способ избежать этого — использовать веб-безопасные шрифты.
Веб-шрифты
Веб-шрифты предустановлены на большинстве компьютеров вместе с операционной системой. Не существует шрифтов, подходящих абсолютно для любой системы, но некоторые подходили довольно близко.
Лучшие безопасные веб-шрифты, которые работают (почти) везде:
- Arial
- Вердана
- Тахома
- Требюше MS
- Таймс Нью Роман
- Грузия
- Гарамонд
- Курьер Новый
- Сценарий кисти MT
При выборе шрифта для электронного письма необходимо убедиться, что он одинаково выглядит на всех типах устройств, будь то мобильный телефон, планшет или настольный компьютер. Веб-безопасные шрифты — лучший выбор, так как они установлены на большинстве устройств и будут отображаться в электронной почте так, как вы задумали.
Веб-шрифты
Веб-шрифты не устанавливаются заранее, вместо этого они загружаются, когда браузер или почтовый клиент «видит» такой шрифт и загружает его с сервера. Веб-шрифт необходимо загрузить только один раз. Затем он будет отображаться при необходимости, если пользователь не удалит его из системы вручную.
Выбор веб-шрифтов больше, но, по словам Litmus, они работают только в нескольких почтовых клиентах — Apple Mail, Outlook для Mac и iOS. В других, включая Gmail, Yahoo! Mail, Outlook Office 365 и т. д., они не будут отображаться, а вместо них будет отображаться безопасный веб-шрифт по умолчанию. Чтобы учесть это, не забудьте включить подходящие резервные веб-шрифты в настройки электронной почты, если вы решите использовать веб-шрифт.
Различные типы шрифтов для информационных бюллетеней
Хотя безопасные веб-шрифты всегда являются хорошим и безопасным выбором, важно также учитывать фирменный стиль и дизайн электронной почты. Давайте посмотрим, какие шрифты вообще существуют и где подходят веб-безопасные шрифты.
Шрифты с засечками
В типографике засечками называются маленькие штрихи в конце вертикальных или горизонтальных линий букв. Они могут быть большими и очевидными или маленькими и едва заметными.
Один из наиболее распространенных шрифтов, Times New Roman, представляет собой шрифт с засечками. Некоторые другие популярные шрифты этой категории — Garamond, Libre Baskerville, Courier и Didot.
Шрифты без засечек
Гарнитуры без штрихов в конце букв называются шрифтами без засечек. Современные и минималистичные, они очень разборчивы и являются лучшими шрифтами для цифрового использования.
Некоторые из популярных шрифтов без засечек: Arial, Calibri, Helvetica, Franklin Gothic.
Шрифты рукописные
Шрифты рукописного разряда являются декоративно-художественными, имитируют почерк пером, кистью или маркером. Эти шрифты красивы, но не являются хорошим выбором в качестве основного шрифта, поскольку их трудно читать. Тем не менее, они могут стать отличным шрифтом для заголовка и подзаголовков информационного бюллетеня, если они соответствуют стилю бренда.
Примерами рукописных шрифтов являются Liesel, Amarone и Bayamo.
Экранные шрифты
Экранные шрифты не являются отдельной категорией, а относятся к шрифтам, предназначенным для краткого и часто широкоформатного использования, т. е. на билбордах, плакатах, логотипах, обложках книг, заголовках печатных журналов. Они включают в себя шрифты из стилей с засечками, без засечек и сценариев, а также могут использоваться в качестве шрифтов для электронной почты. Они часто имеют более эксцентричный и вариативный дизайн.
Существует множество шрифтов, созданных исключительно как экранные шрифты, а также существуют экранные версии шрифтов с засечками и других типов.
Walbaum является примером шрифта, предназначенного исключительно для отображения:
Как выбрать лучший шрифт для информационного бюллетеня
Примите во внимание эти рекомендации при работе над следующим информационным бюллетенем.
Выберите шрифты, соответствующие бренду и отрасли.
Каждый бренд имеет свой собственный тон голоса, и в каждой отрасли обычно существуют ожидания относительно того, как компании должны представлять себя. Шрифты, которые подходят для индустрии моды, не подойдут для медицинской отрасли, в то время как формальные и корпоративные шрифты будут выглядеть неуместно в электронных письмах от бренда, продающего товары для детей.
При выборе шрифтов учитывайте отрасль, стиль и голос вашего бренда и старайтесь, чтобы они соответствовали тому, как ваш бренд представлен в кампаниях по электронной почте и других маркетинговых материалах.
Выбирайте шрифты, которые легко читаются и хорошо читаются при небольшом размере.
Тип шрифта и его размер являются важными факторами, влияющими на его удобочитаемость. В общем, шрифты без засечек больше подходят для Интернета, потому что их легче читать, даже если они небольшого размера.
Почему это важно? Часто размер шрифта электронной почты может быть 11-12 пикселей, что довольно мало для настольных компьютеров и плохо читается на мобильных устройствах. Кроме того, подписчики будут открывать письмо на различных устройствах с разными размерами экрана и почтовыми клиентами. Декоративные шрифты могут быть неразборчивы при таком размере, и читатели могут решить вообще отказаться от рассылки.
Поэтому вы можете использовать минимальный размер шрифта не менее 16 пикселей, чтобы его было легко читать на любом устройстве. В идеале выберите шрифт, который будет четким даже при 11 пикселях, убедитесь, что размер шрифта приличный, и постарайтесь получить межстрочный интервал 1,15.
В приведенном ниже примере Courier использует размер шрифта 16 пикселей в своем информационном бюллетене, чтобы его было легко читать как на настольных компьютерах, так и на мобильных устройствах:
Попробуйте пользовательские шрифты
Возможно, вы захотите рассмотреть возможность настройки существующего шрифта — Open/Libre Шрифты позволяют легально изменять их и использовать результаты в коммерческих целях. Этот вариант проще и дешевле, чем создание шрифта с нуля. Если все сделано правильно, бренд получает уникальный и отличный шрифт, который может стать частью его индивидуальности.
Наем дизайнера может быть дорогостоящим, но если у вашего бренда уже есть индивидуальный шрифт, подумайте об использовании его в информационном бюллетене в качестве заголовка или баннера. Кроме того, поскольку заголовки обычно используют больший размер шрифта, чем основной текст информационного бюллетеня, не будет проблем с читаемостью в веб-браузерах.
A/B-тестирование ваших информационных бюллетеней
A/B-тестирование — это самый быстрый способ избавиться от догадок и выяснить, что нравится вашей аудитории. Затем вы можете соответствующим образом оптимизировать свои информационные бюллетени по электронной почте и получить повышение вовлеченности, рейтинга кликов и коэффициента конверсии.
A/B-тестирование электронной почты, также известное как сплит-тестирование электронной почты, — это просто способ сравнить и оценить две вещи друг с другом. В принципе это просто: из всего вашего списка подписчиков вы выбираете группу людей, делите ее на две части и отправляете каждому свою версию электронного письма. Электронное письмо, получившее наибольшее количество открытий и кликов (также известное как «выигрышная версия»), будет отправлено остальным вашим подписчикам.
Некоторые из вещей, которые вы, возможно, захотите провести A/B-тестирование, включают:
- Выбор шрифтов для тела и заголовков электронной почты
- Количество используемых шрифтов
- Шрифты и их размеры
- Расстояние
- Цвет
- Обычный текст против более сложного форматирования
Обратите внимание, как наличие или отсутствие форматирования меняет восприятие электронной почты. Электронное письмо Джейкоба Макмиллана выглядит гладко и легко читается, в нем нет ничего, что бросалось бы в глаза, кроме ссылки в конце. Райан Дайсс привлекает внимание (и внимание) во многих местах благодаря использованию жирного шрифта , курсив и ЗАГЛАВНЫЕ БУКВЫ.
Лучшие шрифты информационных бюллетеней для различных текстовых элементов
Заголовки и подзаголовки
Заголовки, заголовки и подзаголовки короткие и больше по размеру, чем остальная часть письма, поэтому они хорошо сочетаются с декоративными шрифтами. Хорошо подобранные шрифты для дисплеев могут привлечь внимание и заявить о себе, а также хорошо выглядеть с эстетической точки зрения.
Следующие шрифты могут быть хорошим выбором для заголовка информационного бюллетеня.
Тизерный текст
Тизерный текст, также называемый текстом прехедера, может использоваться в качестве дополнения к заголовку и дать читателю более полное представление о том, что находится внутри электронного письма. Его роль заключается в том, чтобы повысить интерес читателей и побудить их читать дальше. Шрифт для этой части должен быть меньше и светлее заголовка, но все же крупнее основного текста.
Основной текст
Когда дело доходит до основного текста электронного письма, самое главное, чтобы его было легко читать.
Еще раз, рассмотрите возможность использования веб-безопасных шрифтов для этой части:
- Ариал
- Вердана
- Тахома
- Требюше MS
- Таймс Нью Роман
- Грузия
- Гарамонд
- Курьер Новый
- Сценарий кисти MT
Cutlines
Cutlines — это подписи к фотографиям под изображением, которые описывают, о чем это изображение, и дают прекрасную возможность донести ключевые идеи. Подумайте о том, чтобы сделать их того же размера, что и основной текст электронной почты, или больше, используя полужирный шрифт или курсив, или используйте шрифт, который отличается от основного текста.
Цитаты и блок-кавычки
Цитата — это типографская техника, при которой фрагмент текста из статьи перепечатывается в той же статье или на странице, но с другим форматированием. Печатные журналы и газеты любят использовать его, чтобы добавить визуальной привлекательности и привлечь внимание читателя.
Цитата (или цитата блока) также публикуется в виде отдельного абзаца или блока. В отличие от вытягивающей цитаты, она относится к какой-то внешней цитате, которая не упоминалась в статье. Блочные цитаты обычно размещаются в потоке читателя — как в примере ниже.
Для публикации отзывов или выделения ключевых идей можно использовать приемы вытягивания и блокирования цитат.
Поскольку цель цитаты — привлечь внимание, шрифт для этой части электронного письма должен быть как минимум больше основного текста. Он может использовать тот же шрифт, что и основной текст электронной почты, но курсивом, жирным шрифтом или другим цветом.
В приведенном выше примере Sensey использует шрифт Roboto для заголовков и основного текста электронной почты.
Однако цитата не является текстом — она написана прямо на картинке. В этом решении команды Sensey есть свои плюсы: они могут использовать любой шрифт, какой захотят, и могут быть уверены, что он будет выглядеть одинаково на любом устройстве. В то же время, если изображение не отображается (из-за медленного интернет-соединения или отключения изображений), электронное письмо все равно можно прочитать и понять без каких-либо проблем.
Заключение
Выбор шрифта играет решающую роль в восприятии информационного бюллетеня и, как следствие, в успехе маркетинговой кампании. При выборе шрифтов учитывайте следующее:
- Почтовые клиенты могут правильно отображать основные безопасные веб-шрифты, в то время как другие шрифты будут отображаться в одних, но не отображаться в других. Выбор совместимого шрифта очень важен для того, чтобы все подписчики могли прочитать письмо.
- Убедитесь, что размер шрифта легко читается, даже если он маленький. Различные почтовые клиенты будут отображать текст по-разному, и он может быть как больше, так и меньше, чем вы ожидали. Вы также можете рассмотреть возможность установки размера шрифта не менее 16 пикселей. Это считается хорошей практикой для размера шрифта веб-сайта и может помочь в качестве ссылки для электронной почты.
- Заголовок, текст тизера, изображения с вырезами и кавычки вместе с основным текстом образуют визуально привлекательное электронное письмо. Существует большой выбор шрифтов помимо веб-безопасных шрифтов — экранные шрифты, такие как Hello Rogest, скриптовые шрифты, такие как Liesel, и другие. Подумайте, какие шрифты и размеры шрифтов лучше всего подходят для каждого из этих элементов и стоит ли использовать не веб-безопасный шрифт.
- A/B-тестирование шрифтов и других элементов бюллетеня может помочь вам найти варианты с лучшим взаимодействием, рейтингом кликов, коэффициентами конверсии и рентабельностью инвестиций. Если вы чувствуете, что ваши KPI слишком низкие, A/B может помочь с решением.