主頁
襯線字體可以通過字母末尾的裝飾性筆劃來識別，也經常被描述為腳。
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 構建和測試您的電子郵件，以確保在每個收件箱中都能獲得出色的訂閱者體驗。 開始你的免費試用 |