主页
衬线字体可以通过字母末尾的装饰性笔划来识别，也经常被描述为脚。
Sans serif在法语中的意思是“无衬线”，每个字母都有干净、精确的结尾。
等宽字体的字符占据相同的水平空间。 非等宽字体是可变宽度字体，字母和间距的宽度不同。
Script或草书字体通常是流动的、连接的字母，类似于手写。
Display或 Fantasy fonts 是装饰性的创意字体，旨在用于大幅面或徽标设计。
Serif 和 sans-serif 是最常用的字体，尤其是正文。 这是因为它们最易读，因此易于访问。 当按比例缩小和重量较轻时，它们渲染得很好。
脚本和显示字体对于正文副本而言通常过于复杂。 这意味着，它们可能难以阅读，甚至更难以扫描。 所以它们通常保留在头条新闻中。
等宽字体也不太常用作正文。 相反，它们在编程语言的技术资源方面受到青睐，以将代码与自然语言区分开来。
要在电子邮件中使用字体，它需要是网络字体。
这是一种可以在您的代码中调用的数字字体。 有许多免费的 Web 字体可用，也可以购买。 不过，首先让我们看一下您可以在电子邮件中调用的两种数字字体：网络安全字体和网络字体。
这些是安装在大多数操作系统上的字体，这意味着将这些字体调用到您的电子邮件代码中将导致电子邮件客户端、设备和操作系统之间的呈现一致。
以下是最受 Windows 和 Mac 设备支持的网络安全字体：
您可以从 CSS Fonts 中获取 Web 安全的 CSS 字体堆栈。 字体堆栈是一个字体列表，从您要呈现的主要字体开始，然后是在订阅者没有安装您选择的字体时将呈现的后备字体。 例如： |
这些字体并非在所有操作系统上都可用。
因此，您需要在电子邮件中添加一些额外的代码才能使用它们。 您还必须确保您的字体堆栈中有后备 Web 安全字体，因为并非所有电子邮件客户端都会呈现 Web 字体。
您可以在许多不同的地方找到网络字体，例如免费资源 Google Fonts 和需要订阅的 Adobe Fonts。
有关 Web 字体的综合指南，请查看我们的 Web 字体终极指南。
理想情况下，您不应一次使用两种以上的字体样式。 这部分是因为如果您应用太多它会变得嘈杂和混乱，但如果您使用多种网络字体调用它也会增加电子邮件的加载时间。
我们可以设计和编码其他字体样式，以帮助引起对电子邮件中单词和句子的注意。 但是，我们如何以及何时使用它们很重要，因为它们会影响我们电子邮件的可读性和可访问性。
 | 电子邮件无障碍终极指南 发现编写、设计和编码电子邮件所需的见解和分步建议，任何人都可以享受——无论他们的能力如何。 获取您的指南 |
尝试将粗体文本限制为您希望在电子邮件的其余副本中脱颖而出的几个单词。 这将确保您不会有多个关键字争夺注意力。
虽然加粗文本可以帮助视力正常的订阅者识别关键信息，但屏幕阅读器只能通过语义编码来识别差异。
<b> 粗体标记没有语义，不会向屏幕阅读器用户强调您选择的单词。 因此，要呼应视力正常的用户所获得的体验，请始终使用 <strong> 标签。
<p>Be <strong> bold </strong> ,<br />be <strong>brave</strong></p>
与粗体类似，斜体字会增加强调，尽管程度较小。
与粗体一样，有多种方法可以对斜体文本进行编码。 但是，它是符合 WCAG 的 <em> 标记（不是 <i> 标记），并且可以为屏幕阅读器指示应该如何理解某些内容。
<p>I love funny English words like <em> gubbins </em> and <em>gnarly</em>.</p>
应用这种样式可以引起人们对降价或信息更新的关注。
但是，它不会在电子邮件客户端之间一致地呈现。
<strike> HTML 标签不受 Hey 支持，Gmail 应用仅部分支持。 并且使用 CSS 线条处理这种样式也对某些电子邮件客户端的支持有限，因为它们将线条渲染得如此细，以至于很难看到。
还值得注意的是，这种风格存在可访问性问题，因为屏幕阅读器不会强调带有删除线的单词，这可能会对依赖辅助技术的人的体验产生负面影响。 在每个金额之前添加上下文，例如“过去”和“现在”，这将使每个人都获得宝贵的体验。
编写删除线的最佳方法是使用 HTML <strike> 标签，如下所示：
<p>Was<br /><span> <strike> $200 </strike> </span></p>
使用大写字母可以引起对关键字的注意并显示层次结构。 不过也可以看成是喊叫，所以最好少用。
大写字母宽松的另一个原因是它会影响可读性。 我们熟悉通过形状来识别单词。 大写文本的统一矩形形状会减慢我们的速度并降低可扫描性。
我还建议使用 CSS 样式设置大写文本的样式，因为大写字母可能会对屏幕阅读器产生负面影响。 在某些情况下，屏幕阅读器在遇到大写字母时可能会增加音量，或者它可以将单词一个字母一个字母地读出来，因为它将单词识别为首字母缩略词。
屏幕阅读器无法识别 CSS 样式，因此它会像处理常规文本一样处理使用 CSS 设置样式的大写文本。
<p>We need to shout about this <br /><span>big win</span></p>
添加字母间距可以为您的字体带来一些额外的字符和标识，它还可以使某些字体样式更具可读性。
例如，如果您确实需要对文本应用一些大写样式，那么添加一点字母间距也可以提高可读性。 然而，这是一个很好的平衡，因为太多的字母间距会损害可读性。
有关字母间距的注意事项的更多信息，请查看这篇有用的帖子。
对电子邮件客户端的支持很好，只有 Outlook 提供部分支持。 要添加一些字母间距，您需要使用 CSS 设置样式：
<p style=”font-family:'Helvetica Neue',Helvetica,sans-serif; font-size:18px; line-height:28px; color:#0C4B6A; text-transform:uppercase; letter-spacing: 2px ;”>A little letter spacing helps readability</p>
文本对齐有几个明显的禁忌。
首先，对齐样式：这将使文本锚定在其容器的左侧和右侧。 为了实现这一点，它增加了单词之间的不等间距，严重影响了可读性。
右对齐的正文应该只用于从右到左阅读的语言。 从左到右的语言在右对齐时被阅读是非常不自然的，也会对可读性产生负面影响。
应为标题或不超过 3 行的短段落保留居中对齐的文本。
对于从左到右的语言，最佳对齐方式是左对齐。 这会创建一个锚点，以便在每次阅读一行时返回，并且是无障碍阅读体验的关键考虑因素。
要编码文本对齐，您可以使用 HTML align 属性。 但是，这也会对齐单元格中的任何其他元素。 在语义标签（例如标题或段落）上使用 CSS 是对齐副本的最有效方法：
<p style=”font-family:Helvetica Neue,Helvetica,sans-serif; font-size:18px; line-height:28px; color:#0C4B6A; text-align:left ;”>I am left aligned</p>
颜色要记住的是对比度。
当您选择文本颜色时，您需要确保它们在您的背景颜色或背景图像中脱颖而出。 这将有助于使具有一系列视力障碍的订阅者可以阅读您的内容。 确定您是否具有良好对比度的最佳方法是在 WebAim 对比度检查器中测试您的颜色。
要更深入地为电子邮件创建、设计和编码可访问的内容，请查看我与 Salesforce 软件工程师 Mark Robbins 录制的 Salesforce Trailhead 会议。
文字样式的大小并没有真正的上限。 但是，您希望将单词保留在一行上，以便它们可读且不会破坏您的电子邮件。
但是，文本应该有多小是有限制的。 任何低于 14 像素的内容都会让很多人难以阅读，而 iOS Apple Mail 的自动文本调整功能将启动并放大您的文本。
在 Litmus，我们很少偏离 18px 以下。 如果我们这样做，我们会将其限制为第三级信息，例如警告、脚注和页脚内容。 这允许主要内容占主导地位。
良好的可读性还依赖于每行文本之间的足够空间。 太少了，如果你的眼睛不偏离另一行，就很难跟随一行文本。 太多了，每一行都感觉像是独立于下一行，使阅读和扫描成为一项挑战。
为此，行高应介于文本大小的 1.5 到 2 倍之间。 例如，20px 的字体大小应该有 30-40px 的行高。
通过为书面内容设计样式可以实现很多目标。 我将解释四种方法，您可以在电子邮件中有效地使用排版来产生影响并引导读者。
首先，您可以应用品牌字体来帮助订阅者在打开您的电子邮件时识别您的品牌。 有些字体非常独特，甚至脱离了上下文。 想想沃尔特迪斯尼和可口可乐。
您可以使用不同的字体样式来设计不同类型的通信，例如交易电子邮件和时事通讯。 这有助于您的听众快速识别他们收到的通信类型。
品牌个性也可以通过创造性的排版来提升，例如在英雄区域使用显示字体来呼唤关键信息。
 | 你传达的信息正确吗？ 避免错误——并确保您的电子邮件产生影响。 在 100 多个应用程序和设备中预览、验证链接和图像、测试可访问性等等。 不犯错误 |
您可以使用排版做的最有用的事情之一是创建层次结构，帮助引导读者浏览您的电子邮件。 所以我会花更多的时间在这里。
今天，大多数订阅者收到的电子邮件数量很大。 要通过并消化收到的所有消息是不可能的。 因此，当读者搜索电子邮件中的锚点以了解其价值时，通常会扫描打开的电子邮件。
通过了解字体样式、大小、粗细和颜色，您可以显示电子邮件的哪些部分最重要。 尽管我不相信“折叠”，但我确实认为让订阅者有机会了解电子邮件的目的并采取行动而不必承诺阅读大量副本是很重要的。
让我用这个例子为你分解：
它在英雄区域使用大而粗的字体来引起人们对总结电子邮件价值或目的的标题的注意。
如果点击和转化是您的广告系列的目标，那么跟进号召性用语可以帮助读者采取行动，而无需阅读整封电子邮件。
然后，添加不那么占主导地位的标题来分解正文，以便在读者无法承诺阅读每个单词的情况下轻松浏览这些内容。
现在来看一些在电子邮件设计中大量使用排版的品牌示例。 是什么让它们脱颖而出并吸引读者？
DAMP 是一份新闻通讯，重点介绍专注于生产和销售天然葡萄酒的酿酒师和零售商，它严重倾向于排版，使用衬线和无衬线字体来布置内容的层次结构。
使用的字体：Helvetica Neue字体内含Arial回落，并衬线系统字体Times New Roman字体。
英雄区域显示了这个长篇通讯中唯一的图像，粗体字体为打开的电子邮件设定了基调。 这种大胆排版的电子邮件设计趋势表明了这一点。 难怪这么多品牌都采用这种风格。
这封电子邮件真正有趣的是，他们使用系统字体而不是网络字体实现了这种现代和简洁的风格——这意味着字体将在所有电子邮件客户端上呈现类似的呈现方式。
浏览器内图形编辑器 Ready Mag 也倾向于系统字体，以 Mac 系统字体领先，其次是一系列 Helveticas。 这可能超出了电子邮件中字体堆栈的要求。
使用的字体：Apple 系统字体，回退到 Helvetica 和 Arial。
我喜欢这封电子邮件的是大胆的排版如何区分内容。 它使电子邮件易于扫描。 并且以最少的正文复制，匆忙的读者可以获取每个部分的价值并迅速采取行动。
自助出版平台 Blurb 使用网络字体将他们的品牌标识带入电子邮件，使用轻重和粗体以及大写字母来概述层次结构和操作区域。
使用的字体：Futura 和 Proxima Nova（网络字体），回退到 Helvetica 和 Arial。
很高兴看到数字（构成步骤的数字）使用实时文本而不是图像进行设计。 这为依赖屏幕阅读器的订阅者创造了更流畅的体验，也意味着这些将在未加载图像时呈现。
与许多品牌一样，旅游平台 Tripadvisor 使用字母样式模板发送了他们的 COVID-19 消息。 这是一种更加个性化和直接的与客户沟通的方式，提供重要信息而不会分散图像的注意力，也不会被误认为是营销电子邮件。
使用的字体：Arial。
大而粗的排版突出了电子邮件的总体信息，而标题的样式突出了正文块的内容，为读者提供了锚点，以了解某个部分的价值。
这种高度可扫描的电子邮件在主容器的左右两侧也有充足的填充，这是防止大块副本淹没读者的好方法。
临时纹身零售商 Tattly 在电子邮件设计方面采用了非常有创意的方法，促销电子邮件通常利用令人兴奋的设计技术和趋势。 他们在这封电子邮件的主人公中使用粗体字体来吸引人们对电子邮件中特色的新产品的关注。
使用的字体：Open Sans（网络字体），回退到 Helvetica 和 Arial。
对于高度设计的电子邮件（例如这封电子邮件）来说，排版基于图像而不是实时文本是很常见的。
在为文本使用图像时需要考虑许多可访问性因素，例如应用与副本相呼应的 ALT 文本，并考虑文本对于因视觉效果而需要放大电子邮件的人的外观减值。 文本会像素化并变得不可读吗？ 此外，当电子邮件在移动设备上缩小时，基于图像的文本的可读性如何？
尽管实时文本是保持电子邮件可访问性和可读性的最佳方式，但有一种方法可以使基于图像的英雄区域对更广泛的受众有价值，方法是将英雄图像包装在 H1 标签中并将图像文本添加到 ALT 标签中，像这样：
<h1 style=”Helvetica Neue,Helvetica,sans-serif; font-size:50px; line-height:75px; color:#262524;”><img src=”hero.png” alt=”Image based hero messaging - there is a way!”></h1>
这种方法使依赖屏幕阅读器的订阅者可以扫描电子邮件，因为他们能够使用快捷功能来浏览标题。
“在 H1 标签中包装图像是有效的语义代码，并将包含在屏幕阅读器标题快捷菜单中。 但是，需要注意的是，并非所有文本阅读工具都可以读出 ALT 文本。” – 马克罗宾斯，软件工程师，Salesforce
随着争夺订阅者注意力的消息数量迅速增加，脱颖而出并仍然提供可靠体验（快速）的负担越来越重。 排版是使您的电子邮件美观、有效且易于访问的好方法，而不会减慢您的速度。
请牢记本指南，并分享您如何在电子邮件中使用排版。 我很想见他们！
 | 使用 Litmus 创建品牌上无错误的电子邮件 不再有损坏的电子邮件。 使用 Litmus 构建和测试您的电子邮件，以确保在每个收件箱中都能获得出色的订阅者体验。 开始你的免费试用 |