Newcomposers.ru

IT Мир
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Шрифты для писем html

Выбираем шрифты для письма: стильные, уместные, безопасные

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

Содержание

Популярные шрифты для письма

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

Сравнение шрифтов sans serif и serif

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

Times New Roman

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

Начертание шрифта Times New Roman

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

Для наглядности мы набрали лид дайджеста от SendPulse антиква-шрифтом Times New Roman:

Шрифт Times New Roman в дайджесте от SendPulse

Georgia

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

Начертание шрифта Georgia

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

Так выглядит лид, набранный антиква-шрифтом Georgia:

Шрифт Georgia в дайджесте от SendPulse

Arial

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

Начертание шрифта Arial

Мы рекомендуем использовать именно Arial, потому что он входит в число системных шрифтов и для Windows, и для MacOS. Helvetica предустановлена только на MacOS.

Вот так выглядит лид, набранный гротеск-шрифтом Arial:

Шрифт Arial в рассылке от SendPulse

Verdana

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

Начертание шрифта Verdana

Если вам нравится такой шрифт, но хочется более плотного начертания, обратите внимание на Tahoma — ближайшего родственника Verdana.

Так этот шрифт выглядит в письме:

Лид, набранный шрифтом Verdana

Как выбрать себе шрифт для писем

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

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

Вот список основных веб-безопасных шрифтов:

Без засечек

  • Arial
  • Arial Black
  • Helvetica
  • Lucida Sans
  • Tahoma
  • Trebuchet MS
  • Verdana

С засечками

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

Сравнение шрифтов Comic Sans MS и Arial

Выбор шрифта — серьезное дело. Если не уверены в собственных силах, обратитесь к дизайнеру.

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

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

Сочетание шрифтов в рассылке интернет-магазина Michael Kors

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

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

Шрифт-антиква в рассылке портала MarketingProfs

А рассылка Greenpeace набрана гротеском, несмотря на большой объем текста:

Рассылка от Greenpeace, набранная шрифтом-гротеском

Нюансы при выборе почтового шрифта

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

Проверьте, есть ли все нужные символы и начертания

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

В начале статьи мы показали шрифт Georgia c «прыгающими» цифрами. Смотрите, что получится, если заменить их на цифры из Times New Roman:

Цифры из Times New Roman в тексте, напечатанном Georgia

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

Декоративные шрифты вставляйте картинкой

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

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

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

При верстке письма всегда выбирайте несколько шрифтов для каждого уровня текста с помощью свойства font-family. Если на компьютере пользователя нет основного указанного шрифта, отобразится запасной. Например, font-family: Helvetica, Arial, sans-serif означает, что текст отобразится у получателя шрифтом Helvetica, а если этого шрифта нет, то Arial. Если нет обоих, то любым системным шрифтом без засечек.

Что стоит запомнить

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

  • антиква (serif) — с засечками;
  • гротеск (sans serif) — без засечек.

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

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

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

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

Вот список веб-безопасных шрифтов:

  • без засечек — Arial, Arial Black, Helvetica, Lucida Sans, Tahoma, Trebuchet MS, Verdana;
  • с засечками — Georgia, Times New Roman, Courier.

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

Всё, что нужно знать о шрифтах в рассылках

Несколько лет назад Рос Ходжекисс (Ros Hodgekiss) — супервумен от email-маркетинга — написала популярный пост о шрифтах электронной почты. Недавно команда Campaign Monitor обновила эту статью силами двух других самородков от маркетинга — Джастина Ху (Justin Khoo) и Джайны Мистри (Jaina Mistry).

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

1. Веб-шрифты против безопасных шрифтов

Вероятно, в рассылках вы используете именно безопасные шрифты. Arial, Verdana, Georgia, Times New Roman и Courier, они и считаются «безопасными» — то есть, шрифтами, пригодными для «живого текста» (live text) в email. Это стандартные шрифты, которые корректно отображаются на разных компьютерах, устройствах и операционных системах.

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

2. Где найти веб-шрифты?

Самый популярный и простой в использовании источник веб-шрифтов — Google Fonts. Хотя он не содержит некоторые популярные примеры, вы можете найти здесь интересные варианты, доступные бесплатно. Да, совершенно бесплатно. К тому же можете загрузить любой шрифт на компьютер — если верстаете письма в Adobe Photoshop или Sketch.

Чтобы использовать веб-шрифты в своих email-кампаниях, обратитесь к любому email-билдеру. Например, Litmus или Campaign Monitor. Мощные билдеры предлагают множество шрифтов, пригодных для email-кампаний и поддерживаемых большинством почтовых клиентов. А если шрифт не поддерживается, он будет автоматически заменён подходящим резервным вариантом — без усилий с вашей стороны. Кроме того, любой хороший email-билдер предложит полезные услуги за дополнительную плату.

3. Лицензирование

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

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

4. Совместимость email-клиента

Как и другие элементы email-дизайна, веб-шрифты не на 100% совместимы со всеми почтовыми клиентами.

Поддерживают веб-шрифты

— Apple Mail
— Lotus Notes 8
— iOS Mail
— Outlook 2011 for Mac
— Outlook 2016
— Android App
— Android Mail 2.3, 4.2, 4.4

Не поддерживают веб-шрифты

— Lotus Notes 7, 8.5
— Gmail
— Yahoo!
— Outlook.com, 2003, 2007, 2010, 2013
— Thunderbird
— AOL
— Blackberry
— Alto
— IBM Notes 9

Фактическая поддержка шрифта зависит от почтового клиента и от того, как шрифт встроен в email.

5. Как встраивать шрифты в электронную почту

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

@import

Сегодня метод @import не поддерживается в AOL через IE11 и Android 2.3.

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

@font-face

Подумайте о методе @font-face, как о прямом способе импортировать шрифты. Это надёжнее, чем переносить их непосредственно из источника, и так вы можете выбрать формат для импорта. Особенно если задан выбор из шрифтов, которые действительно есть у поставщиков.

В примере выше формат шрифта WOFF был импортирован. Он считается одним из наиболее поддерживаемых форматов для email.

Получить версию WOFF-шрифта от Google Fonts можно только через Safari или Internet Explorer. Найдите нужный шрифт и выберите его, нажав на символ «+». В нижней части экрана появится чёрная полоса — нажмите на неё.

Вы увидите URL выбранного шрифта (выделен на скриншоте). Скопируйте и откройте его в Safari или Internet Explorer. Сделав это, вы увидите код, который нужно вставить в email

Но помните, если использовать метод в сочетании с Google Fonts, URL в будущем может измениться. Следите за этим.

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

6. Можно ли использовать шрифт в своих email’ах?

Да, конечно. Хотя кажется, что число email-клиентов и провайдеров, поддерживающих веб-шрифты, невелико, недавний опрос рынка от Litmus показал — три из пяти популярнейших клиентов поддерживают веб-шрифты.

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

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

7. Выбор правильного резервного шрифта

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

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

Анимированная GIF выше показывает три шрифта, которые хорошо сочетаются по высоте. Хотя Verdana в целом больше, её высота примерно аналогична остальным. С таким комплектом вертикальная вёрстка письма не пострадает.

Ещё один вопрос, который важно учитывать — «чувство шрифта». Если ваш выбор — шрифт с засечками (например, Times New Roman), то резервные варианты тоже должны быть с засечками. Аналогично при выборе шрифта без засечек (как Arial). Эти принципы гарантируют, что общий вид рассылки не изменится при форс-мажорных ситуациях. Дизайн ваших писем должен быть единым для всех клиентов.

8. Версии Outlook 2007/10/13 отображают Times New Roman

Браво, Outlook! Он всегда оригинален, не правда ли? Даже если вы правильно установили резервный шрифт, этот клиент отобразит не его, а… Times New Roman.

Читать еще:  Obd memorial ru html info htm

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

Используйте класс fallback-text вместо семьи веб-шрифтов:

Теперь CSS-класс таргетирует текст и служит альтернативным источником шрифтов для Outlook. Можете заменить Arial на любой другой безопасный веб-шрифт.

9. Размер файла со шрифтами

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

10. Объединение шрифтов

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

Заключение

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

Пользуйтесь email-билдерами, перебирайте библиотеку Google Fonts, покупайте лицензии — и не забывайте о резервных шрифтах. Словом, задумайтесь о типографике своих электронных писем. Это станет маленьким шагом для вас, но огромным шагом для вашего маркетинга.

Привлекайте внимание подписчиков с помощью оригинальных шрифтов Google Fonts

Заинтересованность аудитории зависит не только от контента, но и от способа его подачи. Другими словами, важно и то, О ЧЁМ вы пишете, и то, КАК вы пишете.

Хотите сделать письмо более стильным? Попробуйте шрифты, которые бросаются в глаза. Выберите шрифт, который отражает настроение письма, и не забудьте убедиться, что он будет красиво и правильно отражаться на компьютерах и мобильных устройствах подписчиков. С возможностями вёрстки HTML рассылку сделать проще простого, даже если вы не умеете писать код самостоятельно. Есть веб-сервисы, такие как Google Fonts, которые выкладывают в общий доступ готовый код, который вам надо будет просто добавить в рассылку по определённым правилам. Будьте креативными, а удобный онлайн-сервис бесплатных веб-шрифтов от Google поможет вам в этом.

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

Авторы рассылок часто делают заголовки в Photoshop, а потом вставляют его в письмо как картинку.

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

Почему при вёрстке в HTML email рассылок текст лучше картинки?

  • У подписчика может стоять блокировка картинок в email , и, чтобы увидеть картинки, он должен будет снять эту блокировку. А шрифты отображаются в любом случае.
  • Использование шрифтов из онлайн-коллекции уменьшает время загрузки письма. Не имеет значения, сколько раз в письме используются веб-шрифты: при загрузке происходит всего один запрос к серверу, на котором хранится шрифт. С картинками дело обстоит иначе: для подгрузки каждой картинки нужен отдельный запрос, поэтому письмо загружается медленнее. Если у подписчика медленный интернет, то он может просто закрыть письмо. Поэтому готовые html шаблоны для email рассылок, состоящие из одних картинок, не всегда приносят лучшие результаты.
  • Даже самая качественная картинка с высоким разрешением будет выглядеть менее чётко и читабельно, чем текст.

Применяйте в письмах веб-шрифты Google

Попробуйте преобразить шаблон вашего письма с помощью веб-шрифтов Google! Расскажем подробнее о том, что это за шрифты, и почему они так хороши.
Шрифты Google Fonts – это качественные шрифты высокого разрешения, которые можно добавлять на сайты или в email.
Преимущества Google Fonts:

  • Большой выбор бесплатных веб-шрифтов для использования в коммерческих и некоммерческих целях.
  • Применить шрифт к тексту письма в HTML-формате очень легко: просто следуйте нашей инструкции из 6 пунктов, опубликованной чуть ниже.
  • Шрифты Google поддерживаются большинством почтовых программ, включая Apple mail, Outlook 2000/2011, Lotus Notes версий 8 и 8.5, Thunderbird, Android 2.3/4.2 и всеми устройствами на iOS.

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

Как использовать в HTML-письмах веб-шрифты Google

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

Шаг 1

Перейдите по ссылке https://www.google.com/fonts и выберите подходящий шрифт. Для примера мы возьмем Shadows Into Light.

Шаг 2

Когда вы определитесь со шрифтом, нажмите Quick use.

Шаг 3

Слева появится вот такое окошко с HTML-кодом:

Шаг 4

Скопируйте из кода активную ссылку – все после href:
http://fonts.googleapis.com/css?family=Shadows+Into+Light

Шаг 5

Скопируйте активную ссылку в раздел

Шаг 6

Присвойте эту часть кода выделенному тексту:

Готово! Вот как будет выглядеть ваш заголовок в готовом письме:

Другие веб-шрифты

Кроме Google Fonts есть и другие интересные веб-шрифты, которые вы можете взять для письма, чтобы не ограничиваться надоевшими Arial и Times New Roman.

Вот несколько веб-шрифтов, которые рекомендует команда Mailigen.

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

Подводим итоги по веб-шрифтам

Все хотят, чтобы их письма выделялись среди остальных рассылок, заполняющих почтовый ящик подписчика. Стандартные веб-шрифты и особенно веб-шрифты Google – это отличный способ привлечь внимание читателя. Не захламляйте письмо ненужными картинками вместо заголовков – лучше пользуйтесь веб-шрифтами. Это освежит письмо, уменьшит время его загрузки и улучшит читабельность.
Как выбрать идеальный шрифт? Попробуйте А/В тестировать разные шрифты, и вы найдёте тот, который лучше всего соответствует содержанию письма и характеру аудитории.

Хочется сказать умельцам, которые предпочитают самостоятельно писать скрипт email рассылки : 2016 год на дворе – ваше время стоит дороже! Зачем изобретать велосипед, если все удобные инструменты массовых email рассылок уже есть в удобном и недорогом сервисе Mailigen? Просто загрузите свою базу и начинайте создавать профессиональные рассылки за считанные минуты.

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

Рекомендуемые статьи

Google Analytics (GA) — инструмент контроля за сайтами. С его помощью вы сможете составить портрет…

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

Понравился кейс?

Мы поможем его реализовать и у вас! Напишите нам

Как сделать красивый шрифт в html: размеры, цвета, теги шрифтов html

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

Теги и атрибуты при роботе со шрифтами html

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


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

  • color – устанавливает цвет текста;
  • size – размер шрифта в условных единицах.
  • face – используется для установки семейства шрифтов текста, которые будут использованы внутри тега . Поддерживается сразу несколько значений перечисленных через запятую.
Читать еще:  Html зеркальное отражение текста


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

  • — задает в html жирный шрифт. Тег по действию аналогичный предыдущему;
  • — размер больше установленного по умолчанию;
  • — меньший размер шрифта;
  • — наклонный текст ( курсив ). Аналогичный ему тег ;
  • — текст с подчеркиванием;
  • — зачеркнутый;
  • — отображение текста только в нижнем регистре;
  • — в верхнем регистре.

Возможности атрибута style

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

1) font-family – свойство устанавливает семейство шрифта. Возможно перечисление нескольких значений.
Изменение шрифта в html на следующее значение произойдет, если предыдущее семейство не установлено в операционной системе пользователя .

2) font-size – задается размер от 1 до 7. Это один из основных способов того, как в html можно увеличить шрифт.
Синтаксис написания:

Размер шрифта можно также задать:

  • В пикселях;
  • В абсолютном значении ( xx-small, x-small, small, medium, large );
  • В процентах;
  • В пунктах ( pt ).


3) font-style – устанавливает стиль написания шрифта. Синтаксис:

  • normal –нормальное написание;
  • italic – курсив;
  • oblique – шрифт с наклоном вправо;
  • inherit – наследует написание родительского элемента.

Пример того, как поменять шрифт в html с помощью этого свойства:


4) font-variant – переводит все прописные буквы в заглавные. Синтаксис:

Пример того, как изменить шрифт в html этим свойством:


5) font-weight – позволяет установить толщину написание текста ( насыщенность ). Синтаксис:

  • bold – устанавливает полужирный шрифт html;
  • bolder – жирнее относительно normal;
  • lighter –менее насыщенное относительно normal;
  • normal – нормальное написание;
  • 100-900 – задается толщина шрифта в числовом эквиваленте.

Свойство font и цвет шрифта html

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

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

  • caption – для кнопок;
  • icon – для иконок;
  • menu – меню;
  • message-box –для диалоговых окон;
  • small-caption – для небольших элементов управления;
  • status-bar – шрифт строки состояния.


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

Русскоязычные шрифты и их поддержка

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

  • Arial Black ;
  • Arial ;
  • Comic Sans MS ;
  • Courier New ;
  • Georgia ;
  • Lucida Console ;
  • Lucida Sans Unicode ;
  • Palatino Linotype ;
  • Tahoma ;
  • Times New Roman ;
  • Trebuchet MS ;
  • Verdana .
      Если этого количества мало, то на просторах интернета хватает сайтов, где можно скачать шрифт на любой вкус. Еще можно разработать свой шрифт. Но это уже совсем другая история. И она будет написана уже другим шрифтом.

    HTML вёрстка писем — полная инструкция

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

    Особенности вёрстки писем коротко:

    • используем табличную вёрстка;
    • все стили прописываются инлайново либо в голове страницы — там прописываем все медиазапросы;
    • в стилях предпочтительней использовать развернутую форму записи свойств. Например, так: «border-width: 1px; border-style: solid; border-color: #e1e1e1;» , а не так: «border: 1px solid #e1e1e1;»;
    • аккуратно используем свойства CSS3, так как работать они будут не везде;
    • ширина письма в среднем от 600px до 700px;
    • используем только стандартные шрифты, которые присутствуют на всех устройствах.

    Вёрстка письма имеет структуру стандартной html-страницы:

    Для вёрстки писем подходит доктайп 4.01 и кодировка utf-8.

    Особенности html-вёрстки писем и элементов дизайна

    В письмах используется табличная вёрстка

    Контент письма оборачиваем в две таблицы:

    Первая таблица по ширине 100% экрана задаёт фон, минимальную ширину, размер шрифта в 1px, чтобы не вылезло ненужных отступов.

    Вторая имеет ширину контента, в данном случае 700px, задаёт фон, минимальную ширину. В таблицах обнуляем cellpadding, cellspacing, border.

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

    Скачайте и пользуйтесь

    В html вёрстке писем не используем margin и padding

    Для отступов не используем margin и padding, а берём следующие конструкции: для вертикальных используем div:

    для горизонтальных используем столбец таблицы:

    Вставка текста в html шаблон письма

    Для вставки текста используем следующую конструкцию:

    Свойства шрифта добавляем в span. Чтобы предлог не был оторван от слова, используйте символ неразрывного пробела: «Бесплатно с 07:00 до 21:00» Для ссылок оборачиваем это ещё и в тэг а, и тоже дублируем свойства. У ссылок необходимо указывать атрибут target=”_blank”:

    Изображения

    Для изображений обнуляем border, задаём ширину. Если изображение при адаптации нужно уменьшить, то указываем максимальную ширину 100%. Так изображение будет подстраиваться под ширину блока-родителя. Если нужно, можно указать и минимальную ширину.

    Фоновые изображения Пример использования:

    Видим таблицу шириной 86% и фиксированной высотой. К столбцу прописаны свойства background-image, background-position, background-repeat, background-size, bgcolor. Внутри таблицы расположена структура, благодаря которой можно добиться отображения фона в Outlook. Внутри этой структуры для Outlook располагается таблица с фиксированной высотой. Также можно увидеть таблицу с высотой 60px, которая выполняет роль отступа, так как с ними может возникнуть проблема из-за структуры для Outlook.

    Кнопки

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

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

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

    Адаптивная вёрстка писем — варианты адаптации

    Вариант с «плавающими блоками»

    Вариант с подстраивающимся содержимым

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

  • Ссылка на основную публикацию
    Adblock
    detector