{"id":35160,"date":"2023-11-16T19:15:17","date_gmt":"2023-11-17T00:15:17","guid":{"rendered":"https:\/\/www.litmus.com\/?p=35160"},"modified":"2025-01-31T10:04:47","modified_gmt":"2025-01-31T15:04:47","slug":"email-typography-fonts","status":"publish","type":"post","link":"https:\/\/www.litmus.com\/blog\/email-typography-fonts","title":{"rendered":"How to Use Email Typography That Speaks Volumes"},"content":{"rendered":"\n\n\t<div id=\"simple-text-block-block_62cdfd9bd71e2a6e8a3ffe4785ff0fe2\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p><span style=\"font-weight: 400;\">When we think about creativity in email, we often consider imagery as the go-to solution for eye-catching designs. There&#8217;s another way to get creative\u2014typography.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Learn how you can make an impact, too, as this guide explores:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#whatemailtypography\"><span style=\"font-weight: 400;\">What email typography is<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#whatsatypeface\"><span style=\"font-weight: 400;\">What\u2019s a typeface?<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#whichtype\"><span style=\"font-weight: 400;\">Which typefaces you can use in email<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#benefits\"><span style=\"font-weight: 400;\">The benefits of email typography<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#howto\"><span style=\"font-weight: 400;\">How to add font styles to your email<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#bestpractice\"><span style=\"font-weight: 400;\">Email typography best practices<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#creative\"><span style=\"font-weight: 400;\">Real-life examples of great email typography<\/span><\/a><\/li>\n<\/ul>\n<h2 id=\"whatemailtypography\"><span style=\"font-weight: 400;\">What is typography in email?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Typography is the <\/span><i><span style=\"font-weight: 400;\">styling<\/span><\/i><span style=\"font-weight: 400;\"> of the written content and includes typeface, weight, size, color, and letter spacing. Typography in email is all about your copy&#8217;s overall look and arrangement to make a visual impact.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Many brands today are grabbing subscriber attention and getting their message across with well-styled copy and few or no images.<\/span><\/p>\n<h2 id=\"whatsatypeface\"><span style=\"font-weight: 400;\">What\u2019s a typeface?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">A typeface, <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.howtogeek.com\/325644\/whats-the-difference-between-a-font-a-typeface-and-a-font-family\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">or a font family<\/span><\/a><span style=\"font-weight: 400;\">,\u00a0 is the design of a set of characters, including letters, numbers, punctuation marks, and symbols. So, the typeface you choose is one aspect of your typography in email.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">There are a plethora of typefaces out there that you can use to style email copy in your <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/state-of-email-design-tools\" rel=\"noopener\" target=\"_blank\">email design tool<\/a>. The number of options can make deciding a little daunting, especially if you&#8217;re not bound by <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/why-you-need-email-brand-guidelines-and-what-to-put-in-them\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">brand guidelines<\/span><\/a><span style=\"font-weight: 400;\">. But you can follow some general guidelines to help with your selection.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">What are typeface classifications?<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">A typeface classification is a category of typeface. There are five basic classifications of typefaces: serif, sans serif, script, monospaced, and display.<\/span><\/p>\n<p>&nbsp;<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<div id=\"text-two-columns-block_f92a5971828fb06946cbb9c34bb59941\" class=\"block-text-two-columns alignfull\" style=\"background-color:#f2f3f6\">\n  <div class=\"container\">\n      \t<div class=\"row \">\n  \t\t<div class=\"col-md-6 column\">\n        <div class=\"\">\n          <img decoding=\"async\" class=\"alignnone wp-image-35178 size-full\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/classification.png\" alt=\"examples of how serif, sans serif, monospaced, script, and display fonts look\" width=\"1151\" height=\"1280\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/classification.png 1151w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/classification-270x300.png 270w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/classification-921x1024.png 921w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/classification-768x854.png 768w\" sizes=\"(max-width: 1151px) 100vw, 1151px\" \/>\n        <\/div>\n  \t\t<\/div>\n      <div class=\"col-md-6 column\">\n        <div class=\"\">\n         <ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Serif<\/b><span style=\"font-weight: 400;\"> fonts are recognizable by the decorative stroke at the end of letters, also often described as feet.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Sans serif<\/b><span style=\"font-weight: 400;\">, meaning \u2018without serif\u2019 in French, has clean, precise ends to each letter.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Monospaced<\/b> <span style=\"font-weight: 400;\">typefaces have characters that each occupy the same amount of horizontal space. Fonts without monospacing are variable-width, with letters and spacings of different widths.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Script<\/b><span style=\"font-weight: 400;\">, or cursive fonts, are often fluid, joined letters, similar to handwriting.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><strong>Display<\/strong><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">or fantasy fonts, are decorative, creative typefaces you can use in large format or logo design.<\/span><\/li>\n<\/ol>\n                 <\/div>\n      <\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n\n\t<div id=\"simple-text-block-block_a3bd4d1771bf588b747e2e0ce42019bc\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>&nbsp;<\/p>\n<h2 id=\"whichtype\"><span style=\"font-weight: 400;\">The typefaces you can use in email<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">To use a typeface within an email, it needs to be a web font.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">A typeface needs to be a <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-web-fonts\" target=\"_blank\">web safe font<\/a> to use within an email, which is a <\/span><i><span style=\"font-weight: 400;\">digital<\/span><\/i><span style=\"font-weight: 400;\"> typeface that you call in with your code. There are many free web fonts available, plus options you can purchase. Let\u2019s look at the two types of digital fonts you can call into your email: web safe fonts and<\/span> <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-web-fonts\/\"><span style=\"font-weight: 400;\">web fonts<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Web safe fonts\u00a0<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Web safe fonts are typefaces installed on most operating systems, meaning that calling these fonts into your email code will result in consistent rendering across email clients, devices and operating systems.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here are the web safe fonts best supported across Windows and Mac devices:<\/span><\/p>\n<figure id=\"attachment_35170\" aria-describedby=\"caption-attachment-35170\" style=\"width: 800px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"wp-image-35170 size-full\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/web-safe.png\" alt=\"web safe fonts best supported across Windows and Mac are Arial, Arial Black, Arial Narrow, Tahoma, Trebuchet MS, Verdana, Baskerville, Courier New, Georgia, Palatino, and Times New Roman\" width=\"800\" height=\"529\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/web-safe.png 800w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/web-safe-300x198.png 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/web-safe-768x508.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption id=\"caption-attachment-35170\" class=\"wp-caption-text\">List devised using <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.cssfontstack.com\/\" target=\"_blank\" rel=\"noopener\">CSS Fonts<\/a> and font availability on personal machine (Mac)<\/figcaption><\/figure>\n<p class=\"zero\">Pro tip: you can grab web safe CSS font stacks from <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.cssfontstack.com\/\" target=\"_blank\" rel=\"noopener\">CSS Fonts!<\/a><\/p>\n<p class=\"zero\">Font stacks are a list of fonts starting with the primary typeface you want to render, followed by fallback fonts that will appear if a subscriber doesn\u2019t have your chosen font installed. For example:<\/p>\n<p><code>font-family:\u2019Helvetica Neue\u2019,Helvetica,Arial,sans-serif;<\/code><\/p>\n<h3><span style=\"font-weight: 400;\">Web fonts\u00a0<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Web fonts are typefaces that are <\/span><i><span style=\"font-weight: 400;\">not<\/span><\/i><span style=\"font-weight: 400;\"> available on all operating systems.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Therefore, you need to add some extra code to your emails to put them to use. You also need to use fallback web safe fonts in your font stack, as not all email clients will render email typography the same way.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You can find web fonts in many different places, such as <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/fonts.google.com\/\"><span style=\"font-weight: 400;\">Google Fonts<\/span><\/a><span style=\"font-weight: 400;\">, a free resource, and <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/fonts.adobe.com\/\"><span style=\"font-weight: 400;\">Adobe Fonts<\/span><\/a><span style=\"font-weight: 400;\">, which requires a subscription. If you have custom fonts created in-house, you\u2019ll also treat them like a web font that needs a web safe backup.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For a comprehensive guide to web fonts, check out our <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-web-fonts\/\"><span style=\"font-weight: 400;\">Ultimate Guide to Web Fonts<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ideally, you shouldn\u2019t use more than two font styles at a time, or the design can become noisy and confusing. Too many web fonts can also increase the load time of your email.<\/span><\/p>\n<h2 id=\"benefits\"><span style=\"font-weight: 400;\">Why typography matters in your email design and development<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Sure, unique typography looks cool, but is it worth the extra effort to customize? Here\u2019s what you stand to gain by standing out with email typography.\u00a0<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Help subscribers identify your brand<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Using brand-specific fonts helps subscribers identify your brand when they open your email. Some fonts are very distinctive, even out of context\u2014think of Walt Disney and Coca-Cola. Cohesive and consistent branding could increase recognition, reputation, and trust.\u00a0<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Differentiate communication types<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">You can style different types of communication, like transactional messages and <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/email-newsletter-examples-engage-prospects\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">email newsletters<\/span><\/a><span style=\"font-weight: 400;\">, using separate font styles. Unique visual identities help your audience quickly identify the type of communication. The typeface you use can also elicit different emotions. For example, you need password reset messages to feel secure and<\/span><span style=\"font-weight: 400;\"> professional\u2014so Comic Sans is definitely off the table.\u00a0\u00a0\u00a0<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Elevate brand personality<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Creative typography can also elevate brand personality, like if you use display fonts in the hero area.<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n<div id=\"post-cta-buttonblock_2ef8c590aa64e29ea4c36e8e1574b365\" class=\"block-post-cta-button mt-5\">\n  <div class=\"container px-0\">\n    <div class=\"row\">\n      <div class=\"blog-post-cta-button-wrapper col-12 col-lg-10 mx-auto p-4 d-block d-lg-flex align-items-lg-center align-items-start\">\n\t\t  \t\t  \t\t  \t\t  \t\t  \t\t  \t\t  \t\t \t\t\t  \t\t  \t\t  <div class=\"blog-post-cta-button-icon col-2 float-start mx-auto float-lg-start float-none background-white d-flex flex-column justify-content-center align-items-center text-center\">\n\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/10\/emailguardianicon.png\" alt=\"Litmus Email Guardian icon\" width=\"244\" height=\"244\"\/>\n\t\t\t\t\t  \t\t  <\/div><!--blog-post-cta-button-icon-->\n\t\t\t\t\t\t\t\t  \t\t  <div class=\"col-12 col-lg-9 ps-lg-4 ps-0 text-center text-lg-start mt-3 mt-lg-0\">\t\t\t  \t\t\t  <h2 class=\"h-sm\"><strong>Keep eyes on your email, even when you\u2019re away<\/strong><\/h2>\n\t\t\t   \n\t\t\t  \t\t\t\t\t<p>Litmus Email Guardian monitors your emails continuously so you know if a previously-perfect message suddenly breaks because of email client updates.<\/p>\n\t\t\t\t\t \n\t\t\t  \t\t  <\/div><!--col-12 col-lg-9 ps-lg-4 ps-0 text-center text-lg-start mt-3 mt-lg-0-->\t\t\t  \t\t  <div class=\"text-center text-lg-end col-12 col-lg-1 ms-lg-2 ms-0\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"btn btn-primary\" rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-guardian\">\n\t\t\t\t\t\tMonitor your email\t\t\t\t\t\t<\/a>\n\t\t\t  \t\t  <\/div><!--text-center text-lg-end col-12 col-lg-1 ms-lg-2 ms-0-->\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        <\/div><!--blog-post-cta-button-wrapper-->\n    <\/div><!--row-->\n  <\/div><!--container-->\n<\/div>\n\n\n\n\t<div id=\"simple-text-block-block_bc3cd3a2dafbeeb2a2b9c18f53ba3398\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<h3><\/h3>\n<h3><span style=\"font-weight: 400;\">Create hierarchy<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Your subscribers are inundated with emails daily, so you have limited time to get your message across and capture their attention. <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/page.litmus.com\/trends-in-email-engagement\"><span style=\"font-weight: 400;\">Our research<\/span><\/a><span style=\"font-weight: 400;\"> found that the amount of time readers spend with your email keeps getting shorter.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Opened emails are often scanned as the reader searches for anchor points within your email to understand the value, which is where typography comes in handy.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Your email typography&#8217;s size, style, location, spacing, and color determine where subscribers look first, second, and so on.<\/span><\/p>\n<figure id=\"attachment_37341\" aria-describedby=\"caption-attachment-37341\" style=\"width: 500px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"wp-image-37341\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/content-meme-1.png\" alt=\"\" width=\"500\" height=\"500\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/content-meme-1.png 1640w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/content-meme-1-300x300.png 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/content-meme-1-1024x1024.png 1024w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/content-meme-1-150x150.png 150w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/content-meme-1-768x768.png 768w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/content-meme-1-1536x1536.png 1536w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/content-meme-1-545x545.png 545w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/content-meme-1-700x700.png 700w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><figcaption id=\"caption-attachment-37341\" class=\"wp-caption-text\"><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/ifunny.co\/picture\/lastly-you-will-read-this-later-on-you-notice-this-hWhbLWms8\" target=\"_blank\" rel=\"noopener\">Source of inspiration<\/a><\/figcaption><\/figure>\n<p><span style=\"font-weight: 400;\">Using typography intentionally shows which parts of your email are most important. Although I am not a believer in \u2018<\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-fold-in-email\/\"><span style=\"font-weight: 400;\">the fold<\/span><\/a><span style=\"font-weight: 400;\">\u2019, I do think it\u2019s important to give subscribers the opportunity to understand the aim of the email, and take action without having to commit to reading lots of copy.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let\u2019s look at an example.<\/span><\/p>\n<img decoding=\"async\" class=\"aligncenter wp-image-35171\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/hierarchy-comp.png\" alt=\"email typography example showing the power of hierarchy\" width=\"307\" height=\"840\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/hierarchy-comp.png 1200w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/hierarchy-comp-110x300.png 110w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/hierarchy-comp-768x2099.png 768w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/hierarchy-comp-562x1536.png 562w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/hierarchy-comp-749x2048.png 749w\" sizes=\"(max-width: 307px) 100vw, 307px\" \/>\n<p><span style=\"font-weight: 400;\">You looked at the large, bold text at the very top of the message first, didn\u2019t you? Typography in the hero section is the perfect place to sum up the value or purpose of the email because it\u2019s bound to get attention.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Next, did your eye go to the solid button? If clicks and conversions are the objectives of your email campaign, following up with a call to action can help the reader take action without consuming the whole email.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Finally, the less dominant headlines break up body copy to make the message easily scannable so you don\u2019t have to commit to reading every word.<\/span><\/p>\n<h2 id=\"howto\"><span style=\"font-weight: 400;\">How to add font styles in an email<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Want to add some visual interest to your emails with typography? There are two ways to add font styles in email: in the <code>&lt;head&gt;<\/code> section and inline. In the past, all styles needed to be added inline, but more email clients are supporting styles in the head section. We recommend including the styles in the head and then using inline styles only when necessary. This creates clearer, cleaner code that also has a smaller file size.\u00a0<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Bold\u00a0<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">While bolding text can help sighted subscribers identify key information, only through semantic coding will screen readers pick up on the difference.<\/span><\/p>\n<h4>How to add bold text to your email<\/h4>\n<p><span style=\"font-weight: 400;\">There are several ways to bold your text. The best way if you are just looking to make some text bold is to use CSS property font-weight. If you are looking to emphasize a word or phrase you can use the <code>&lt;strong&gt;<\/code> tag. The <code>&lt;b&gt;<\/code> bold tag isn\u2019t semantic and will not emphasize your chosen word(s) to the screen reader user. Be aware that using the <code>&lt;strong&gt;<\/code> tag is a signal to your screen reader to emphasize your word or phrase, so be intentional when using this tag.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Font weight accepts keyword values such as normal, bold, and light. It also accepts numerical values with 700 being equivalent to the traditional bold and 400 being equivalent to the traditional normal. The numerical values are more commonly seen with web fonts.<\/span><\/p>\n<p>&nbsp;<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<div id=\"text-two-columns-block_81c9de37f8a46f003d7b95990f10f1d5\" class=\"block-text-two-columns alignfull\" style=\"background-color:#f0f4f9\">\n  <div class=\"container\">\n      \t<div class=\"row \">\n  \t\t<div class=\"col-md-6 column\">\n        <div class=\"\">\n          <h4 style=\"text-align: left;\">In the head (Better)<\/h4>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">To make a bold class that you can apply anywhere you want bolded text:<\/span><span style=\"font-weight: 400;\"><br \/>\n<code><span style=\"font-weight: 400;\">.bold { font-weight: bold; }<\/span><\/code><br \/>\n<\/span><span style=\"font-weight: 400;\">\u2013or\u2013<br \/>\n<\/span><code><span style=\"font-weight: 400;\">.bold { font-weight: 700; }<\/span><\/code><\/p>\n<p>What it looks like:<\/p>\n<img decoding=\"async\" class=\"alignnone size-medium wp-image-85183 alignleft\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Typography-Litmus-2023-10-31-at-12.44.31-PM-300x214.jpg\" alt=\"\" width=\"300\" height=\"214\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Typography-Litmus-2023-10-31-at-12.44.31-PM-300x214.jpg 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Typography-Litmus-2023-10-31-at-12.44.31-PM.jpg 762w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/>\n        <\/div>\n  \t\t<\/div>\n      <div class=\"col-md-6 column\">\n        <div class=\"\">\n         <h4 style=\"text-align: left;\">Inline styles (OK)<\/h4>\n<p style=\"text-align: left;\"><code><span style=\"font-weight: 400;\">&lt;p&gt;Be &lt;strong&gt;bold&lt;\/strong&gt;,&lt;br \/&gt;be &lt;strong&gt;brave&lt;\/strong&gt;&lt;\/p&gt;<\/span><\/code><\/p>\n<p>What it looks like:<\/p>\n<img decoding=\"async\" class=\"alignnone size-medium wp-image-85185 alignleft\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Typography-Litmus-2023-10-31-at-1.07.56-PM-300x156.jpg\" alt=\"\" width=\"300\" height=\"156\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Typography-Litmus-2023-10-31-at-1.07.56-PM-300x156.jpg 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Typography-Litmus-2023-10-31-at-1.07.56-PM.jpg 428w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/>\n                 <\/div>\n      <\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n\n\t<div id=\"simple-text-block-block_a0e1d0dd72ff99dff99e8a93ed557f3e\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>&nbsp;<\/p>\n<h3><span style=\"font-weight: 400;\">Italic\u00a0<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Italicizing your text is a stylistic way to make your text stand out. As such, you could italicize your copy with with the font-style CSS property.<\/span><\/p>\n<h4>How to add italic text in email<\/h4>\n<p><span style=\"font-weight: 400;\">You can use font-style property to create italicized text inline or in the style block.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you are specifically trying to emphasize a word or phrase, you can use the <code>&lt;em&gt;<\/code> tag instead as this automatically adds the italic styles to your copy, however as this is a semantic tag make sure you are intentional in your use and make sure to test on a screen reader so that you are sure your copy is being read correctly.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">If you are italicizing for <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/i\"><span style=\"font-weight: 400;\">idomatic reasons <\/span><\/a><span style=\"font-weight: 400;\">&#8211; the tone of voice, to convey thoughts, or technical terms to name a few examples &#8211; you may use the <code>&lt;i&gt;<\/code> tag. This tag is a generic tag (like a div or a span) and will not carry any semantic weight. However, this tag isn\u2019t automatically italicized everywhere, so be\u00a0 sure to include the font-style to properly italicize your copy. If you are using this to call attention to a specific language, make sure to include a lang attribute as well.<\/span><\/p>\n<p>&nbsp;<\/p>\n<table class=\"table\">\n<thead>\n<tr>\n<th scope=\"col\">Calling out a specific language (good)<\/th>\n<th scope=\"col\">Emphasizing a word (better)<\/th>\n<th scope=\"col\">Adding italics stylistically in the head (Best)<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<th scope=\"row\"><span style=\"font-weight: 400;\">In the style block:<br \/>\n<\/span><span style=\"font-weight: 400;\"><code>i { font-style: italic; }<\/code><\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">In the body:<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\"><code>&lt;p&gt;The Latin phrase &lt;i lang=\"la\"&gt;Veni,<br \/>\n<\/code><\/span><span style=\"font-weight: 400;\"><code>vidi, vici&lt;\/i&gt; is often mentioned in<br \/>\nmusic, art, and literature.&lt;\/p&gt;<\/code><\/span>What it looks like:<\/p>\n<p><span style=\"font-weight: 400;\"><code><\/code><\/span><span style=\"font-weight: 400;\"><img decoding=\"async\" class=\"alignnone size-medium wp-image-85186\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Typography-Litmus-2023-10-31-at-12.38.38-PM-300x140.jpg\" alt=\"\" width=\"300\" height=\"140\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Typography-Litmus-2023-10-31-at-12.38.38-PM-300x140.jpg 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Typography-Litmus-2023-10-31-at-12.38.38-PM-768x358.jpg 768w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Typography-Litmus-2023-10-31-at-12.38.38-PM.jpg 776w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/span><\/th>\n<td><span style=\"font-weight: 400;\"><code>&lt;p&gt;I love funny English words like<br \/>\n&lt;em&gt;gubbins&lt;\/em&gt; and &lt;em&gt;gnarly&lt;\/em&gt;.&lt;\/p&gt;<\/code><\/span>What it looks like:<\/p>\n<p><span style=\"font-weight: 400;\"><code><\/code><\/span><span style=\"font-weight: 400;\"><img decoding=\"async\" class=\"alignnone size-medium wp-image-85187\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Typography-Litmus-2023-10-31-at-1.07.20-PM-300x129.jpg\" alt=\"\" width=\"300\" height=\"129\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Typography-Litmus-2023-10-31-at-1.07.20-PM-300x129.jpg 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Typography-Litmus-2023-10-31-at-1.07.20-PM.jpg 688w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/span><\/td>\n<td><span style=\"font-weight: 400;\">To make a paragraph italic:<\/span><\/p>\n<p><span style=\"font-weight: 400;\"><code>p { font-style: italic; }<\/code><\/span><\/p>\n<p>What it looks like:<\/p>\n<p><span style=\"font-weight: 400;\"><img decoding=\"async\" class=\"alignnone size-medium wp-image-85188\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Typography-Litmus-2023-10-31-at-12.40.58-PM-300x137.jpg\" alt=\"\" width=\"300\" height=\"137\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Typography-Litmus-2023-10-31-at-12.40.58-PM-300x137.jpg 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Typography-Litmus-2023-10-31-at-12.40.58-PM-768x351.jpg 768w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Typography-Litmus-2023-10-31-at-12.40.58-PM.jpg 780w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3>Strikethrough<\/h3>\n<p>Strikethrough text has a horizontal line bisecting it, and applying this styling can draw attention to a price reduction or information update.<\/p>\n<p>The\u00a0<code>&lt;strike&gt;<\/code>\u00a0HTML tag is obsolete and should not be used any more.<\/p>\n<p>It\u2019s also worth noting that there is an accessibility issue with this style, as screen readers won\u2019t emphasize a word with a strikethrough, which could negatively impact the experience of those reliant on assistive technology. Adding context before each amount, such as \u2018was\u2019 and \u2018now,\u2019 will make this a valuable experience for everyone.<\/p>\n<h4>How to add strikethrough text in email<\/h4>\n<p>In the style block this utilizes the text-decoration property with the line-through attribute. Inline the\u00a0<code>&lt;s&gt;<\/code>\u00a0tag can be used to strike out a word or phrase.<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<div id=\"text-two-columns-block_98cdd44a4479b339ee1ae6b5de55f0ba\" class=\"block-text-two-columns alignfull\" style=\"background-color:#f0f4f9\">\n  <div class=\"container\">\n      \t<div class=\"row \">\n  \t\t<div class=\"col-md-6 column\">\n        <div class=\"\">\n          <h4>Inline to a word or phrase (OK)<\/h4>\n<p><code><span style=\"font-weight: 400;\">&lt;p&gt;Was&lt;br \/&gt;&lt;span style=\"color:#32716A; font-size:30px; line-height: 40px;\"&gt;<\/span><b>&lt;s&gt;<\/b><span style=\"font-weight: 400;\">$200<\/span><b>&lt;\/s&gt;<\/b><span style=\"font-weight: 400;\">&lt;\/span&gt;&lt;\/p&gt;<\/span><\/code><\/p>\n<p>What it looks like:<\/p>\n<img decoding=\"async\" class=\"alignnone size-medium wp-image-85189\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Typography-Litmus-2023-10-31-at-1.08.47-PM-300x193.jpg\" alt=\"\" width=\"300\" height=\"193\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Typography-Litmus-2023-10-31-at-1.08.47-PM-300x193.jpg 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Typography-Litmus-2023-10-31-at-1.08.47-PM.jpg 358w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/>\n        <\/div>\n  \t\t<\/div>\n      <div class=\"col-md-6 column\">\n        <div class=\"\">\n         <h4>In the head (Better)<\/h4>\n<p><span style=\"font-weight: 400;\">In the style block:\u00a0<\/span><\/p>\n<p><code><span style=\"font-weight: 400;\">.sold-out { text-decoration: line-through; }<\/span><\/code><\/p>\n<p><span style=\"font-weight: 400;\">In the code:\u00a0<\/span><\/p>\n<p><code><span style=\"font-weight: 400;\">&lt;p&gt;Today\u2019s special:&lt;br&gt;&lt;span class=\u201dsold-out\u201d&gt;Tomato Soup&lt;\/span&gt; SOLD OUT&lt;\/p&gt;<\/span><\/code><\/p>\n<p>What it looks like:<\/p>\n<img decoding=\"async\" class=\"alignnone size-medium wp-image-85190\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Typography-Litmus-2023-10-31-at-12.58.23-PM-300x137.jpg\" alt=\"\" width=\"300\" height=\"137\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Typography-Litmus-2023-10-31-at-12.58.23-PM-300x137.jpg 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Typography-Litmus-2023-10-31-at-12.58.23-PM.jpg 688w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/>\n                 <\/div>\n      <\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n\n\t<div id=\"simple-text-block-block_1099be8cbbf92006ce74b4d6a5c51e92\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<h3><span style=\"font-weight: 400;\">Uppercase\u00a0<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">I recommend styling uppercase text using CSS styling, as writing in capitals could negatively impact screen readers. In some cases, a screen reader may read words out letter by letter as it is identifying them as acronyms.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Screen readers don\u2019t identify CSS styling, so they treat uppercase text styled using CSS like regular text.<\/span><\/p>\n<h4>How to add uppercase text in email<\/h4>\n<p><span style=\"font-weight: 400;\">Since this is a CSS property, it\u2019s best to set a class that you can use over and over again in the head section instead of writing it out inline every time. <\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<div id=\"text-two-columns-block_1d576b000d3946df0a1cb8e4f2a290fb\" class=\"block-text-two-columns alignfull\" style=\"background-color:#f0f4f9\">\n  <div class=\"container\">\n      \t<div class=\"row \">\n  \t\t<div class=\"col-md-6 column\">\n        <div class=\"\">\n          <h4>In the head<\/h4>\n<p><span style=\"font-weight: 400;\">In the style block:\u00a0<\/span><\/p>\n<p><code><span style=\"font-weight: 400;\">.capitalize { text-transform: uppercase; }<\/span><\/code><\/p>\n<p><span style=\"font-weight: 400;\">In the code: <\/span><\/p>\n<p><code><span style=\"font-weight: 400;\">&lt;p&gt;We need to shout about this &lt;br \/&gt;&lt;span class=\"capitalize\"&gt;big win&lt;\/span&gt;&lt;\/p&gt;<\/span><\/code><\/p>\n        <\/div>\n  \t\t<\/div>\n      <div class=\"col-md-6 column\">\n        <div class=\"\">\n         <h4>Inline<\/h4>\n<p><code><span style=\"font-weight: 400;\">&lt;p&gt;We need to shout about this &lt;br \/&gt;&lt;span style=\"text-transform:uppercase;\"&gt;big win&lt;\/span&gt;&lt;\/p&gt;<\/span><\/code><\/p>\n                 <\/div>\n      <\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n\n\t<div id=\"simple-text-block-block_13bcaeef03fea8b8ede2b8acefe3c8a2\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p><span style=\"font-weight: 400;\">Both versions above will produce this\u2026\u00a0<\/span><\/p>\n<img decoding=\"async\" class=\"alignnone wp-image-85191 size-full\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Typography-Litmus-2023-10-31-at-1.06.43-PM.jpg\" alt=\"\" width=\"678\" height=\"288\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Typography-Litmus-2023-10-31-at-1.06.43-PM.jpg 678w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Typography-Litmus-2023-10-31-at-1.06.43-PM-300x127.jpg 300w\" sizes=\"(max-width: 678px) 100vw, 678px\" \/>\n<h3><span style=\"font-weight: 400;\">Letter spacing<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Adding letter spacing can bring a little extra character and identity to your fonts, and it can also make some font styles more readable.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Support is <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.caniemail.com\/search\/?s=letter-spacing\"><span style=\"font-weight: 400;\">good across email clients<\/span><\/a><span style=\"font-weight: 400;\">, with just Outlook offering partial support.<\/span><\/p>\n<h4>How to change letter spacing in email<\/h4>\n<p><span style=\"font-weight: 400;\">Again, this is a CSS property, so it is best to set a class that you can use over and over again in the head section instead of writing it out inline every time. <\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<div id=\"text-two-columns-block_ab6c7c95e380a5c9d6dc30c5b5321101\" class=\"block-text-two-columns alignfull\" style=\"background-color:#f0f4f9\">\n  <div class=\"container\">\n      \t<div class=\"row \">\n  \t\t<div class=\"col-md-6 column\">\n        <div class=\"\">\n          <h4>In the head<\/h4>\n<p><span style=\"font-weight: 400;\">In the style block:\u00a0<\/span><\/p>\n<p><code><span style=\"font-weight: 400;\">.negative { <\/span><span style=\"font-weight: 400;\">letter-spacing: -2px;<\/span><span style=\"font-weight: 400;\"> }<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">.good { <\/span><span style=\"font-weight: 400;\">letter-spacing: 2px; }<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">.too-much { <\/span><span style=\"font-weight: 400;\">letter-spacing: 10px; }<\/span><\/code><\/p>\n<p><span style=\"font-weight: 400;\">In the code: <\/span><\/p>\n<p><code><span style=\"font-weight: 400;\">&lt;p class=\"negative\"&gt;Negative spacing is bad for readability&lt;\/p&gt;<\/span><\/code><\/p>\n<p><code><span style=\"font-weight: 400;\">&lt;p class=\"good\"&gt;A little letter spacing helps readability&lt;\/p&gt;<\/span><\/code><\/p>\n<p><code><span style=\"font-weight: 400;\">&lt;p class=\"too-much\"&gt;Too much impacts readability&lt;\/p&gt;<\/span><\/code><\/p>\n        <\/div>\n  \t\t<\/div>\n      <div class=\"col-md-6 column\">\n        <div class=\"\">\n         <h4>Inline<\/h4>\n<p><code><span style=\"font-weight: 400;\">&lt;p style=\"letter-spacing: -2px;\"&gt;Negative spacing is bad for readability&lt;\/p&gt;<\/span><\/code><\/p>\n<p><code><span style=\"font-weight: 400;\">&lt;p style=\"letter-spacing: 2px;\"&gt;A little letter spacing helps readability&lt;\/p&gt;<\/span><\/code><\/p>\n<p><code><span style=\"font-weight: 400;\">&lt;p style=\"letter-spacing: 10px;\"&gt;Too much impacts readability&lt;\/p&gt;<\/span><\/code><\/p>\n                 <\/div>\n      <\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n\n\t<div id=\"simple-text-block-block_ef84636686488e84243121d80cd32808\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p><span style=\"font-weight: 400;\">Both versions above will produce this\u2026\u00a0<\/span><\/p>\n<img decoding=\"async\" class=\"alignnone wp-image-85192 size-full\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Typography-Litmus-2023-10-31-at-1.13.20-PM.jpg\" alt=\"\" width=\"1160\" height=\"324\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Typography-Litmus-2023-10-31-at-1.13.20-PM.jpg 1160w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Typography-Litmus-2023-10-31-at-1.13.20-PM-300x84.jpg 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Typography-Litmus-2023-10-31-at-1.13.20-PM-1024x286.jpg 1024w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Typography-Litmus-2023-10-31-at-1.13.20-PM-768x215.jpg 768w\" sizes=\"(max-width: 1160px) 100vw, 1160px\" \/>\n<h3><span style=\"font-weight: 400;\">Line height<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">The amount of items on the shelves of a big box store is very different from that of a high-end boutique, which affects the feeling of the space. Similarly, line height in email can be an intentional styling choice to affect the mood and readability of the copy. <\/span><\/p>\n<h4>How to adjust line height in email<\/h4>\n<p><span style=\"font-weight: 400;\">Setting this CSS property on the element type selector so that the style is applied to all of the same HTML tags is much more efficient than adding it inline to every HTML tag. <\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<div id=\"text-two-columns-block_b6524e1a16d90f19498522d10079733f\" class=\"block-text-two-columns alignfull\" style=\"background-color:#f0f4f9\">\n  <div class=\"container\">\n      \t<div class=\"row \">\n  \t\t<div class=\"col-md-6 column\">\n        <div class=\"\">\n          <h4>In the head<\/h4>\n<p><span style=\"font-weight: 400;\">In the style block:\u00a0<\/span><\/p>\n<p><code><span style=\"font-weight: 400;\">p { <\/span><span style=\"font-weight: 400;\">line-height: 1.5em;<\/span><span style=\"font-weight: 400;\"> }<\/span><\/code><\/p>\n<p><span style=\"font-weight: 400;\">In the code: <\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/p>\n<p><code><span style=\"font-weight: 400;\">&lt;p&gt;\"Science is not a boy's game; it's not a girl's game. It's everyone's game. It's about where we are and where we're going. Space travel benefits us here on Earth. And we ain't stopped yet. There's more exploration to come.\" &lt;br&gt;- Nichelle Nichols&lt;\/p&gt;<\/span><\/code><\/p>\n        <\/div>\n  \t\t<\/div>\n      <div class=\"col-md-6 column\">\n        <div class=\"\">\n         <h4>Inline<\/h4>\n<p><code><span style=\"font-weight: 400;\">&lt;p style=\"line-height: 1.5em;\"&gt;\"Science is not a boy's game; it's not a girl's game. It's everyone's game. It's about where we are and where we're going. Space travel benefits us here on Earth. And we ain't stopped yet. There's more exploration to come.\" &lt;br&gt;- Nichelle Nichols&lt;\/p&gt;<\/span><\/code><\/p>\n                 <\/div>\n      <\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n\n\t<div id=\"simple-text-block-block_3298d7874c26f3d4080c71a45d3d4ae7\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p><span style=\"font-weight: 400;\">Both versions above will produce this when using different values for the line-height:\u00a0<\/span><\/p>\n<img decoding=\"async\" class=\"alignnone wp-image-85193 size-full\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/emailtypographylinespacing.png\" alt=\"\" width=\"1716\" height=\"1000\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/emailtypographylinespacing.png 1716w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/emailtypographylinespacing-300x175.png 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/emailtypographylinespacing-1024x597.png 1024w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/emailtypographylinespacing-768x448.png 768w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/emailtypographylinespacing-1536x895.png 1536w\" sizes=\"(max-width: 1716px) 100vw, 1716px\" \/>\n<h3><span style=\"font-weight: 400;\">Text alignment\u00a0<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">To code text alignment you can use the HTML align attribute. However, this will also align any other elements you have within the cell. Using CSS on semantic tags, such as headers or paragraphs, is the most effective way to align your copy.<\/span><\/p>\n<h4>How to change text alignment in email<\/h4>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<div id=\"text-two-columns-block_d3438a9de9003af5419c6d6cf1a9df9e\" class=\"block-text-two-columns alignfull\" style=\"background-color:#f0f4f9\">\n  <div class=\"container\">\n      \t<div class=\"row \">\n  \t\t<div class=\"col-md-6 column\">\n        <div class=\"\">\n          <h4>In the head<\/h4>\n<p><span style=\"font-weight: 400;\">In the style block:\u00a0<\/span><\/p>\n<p><code><span style=\"font-weight: 400;\">p { <\/span><span style=\"font-weight: 400;\">text-align: left;<\/span><span style=\"font-weight: 400;\"> }<\/span><\/code><\/p>\n<p><span style=\"font-weight: 400;\">In the code: <\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><br \/>\n<code><span style=\"font-weight: 400;\">&lt;p&gt; Actually, I do like pink clothes, but it's not because I'm girly, it's because I'm the reincarnation of Oscar Wilde. &lt;br&gt;-Mara Wilson &lt;\/p&gt;<\/span><\/code><\/p>\n        <\/div>\n  \t\t<\/div>\n      <div class=\"col-md-6 column\">\n        <div class=\"\">\n         <h4>Inline<\/h4>\n<p><code><span style=\"font-weight: 400;\">&lt;p style=\"text-align: left;\"&gt; Actually, I do like pink clothes, but it's not because I'm girly, it's because I'm the reincarnation of Oscar Wilde. &lt;br&gt;-Mara Wilson <\/span><span style=\"font-weight: 400;\">&lt;\/p&gt;<\/span><\/code><\/p>\n                 <\/div>\n      <\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n\n\t<div id=\"simple-text-block-block_bad6fb79ec1364d11305f88b4e744e88\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p><span style=\"font-weight: 400;\">Both versions above will produce this when using different values for the text-align:\u00a0<\/span><\/p>\n<img decoding=\"async\" class=\"alignnone wp-image-85194 size-full\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/typographyalignment.png\" alt=\"\" width=\"1850\" height=\"699\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/typographyalignment.png 1850w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/typographyalignment-300x113.png 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/typographyalignment-1024x387.png 1024w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/typographyalignment-768x290.png 768w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/typographyalignment-1536x580.png 1536w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/typographyalignment-1800x680.png 1800w\" sizes=\"(max-width: 1850px) 100vw, 1850px\" \/>\n<h3><span style=\"font-weight: 400;\">Color\u00a0<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Brand-specific colors create consistency in your typography but don\u2019t sacrifice readability for style. Limiting your typography to a few colors is also a good idea.<\/span><\/p>\n<h4>How to change text color in email<\/h4>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<div id=\"text-two-columns-block_3cd18a308333b447d3aa620e46c57232\" class=\"block-text-two-columns alignfull\" style=\"background-color:#f0f4f9\">\n  <div class=\"container\">\n      \t<div class=\"row \">\n  \t\t<div class=\"col-md-6 column\">\n        <div class=\"\">\n          <h4>In the head<\/h4>\n<p><span style=\"font-weight: 400;\">In the style block:\u00a0<\/span><\/p>\n<p><code><span style=\"font-weight: 400;\">.blue { <\/span><span style=\"font-weight: 400;\">color: #10618B;<\/span><span style=\"font-weight: 400;\"> }<\/span><\/code><\/p>\n<p><code><span style=\"font-weight: 400;\">.teal { <\/span><span style=\"font-weight: 400;\">color: #3B857B;<\/span><span style=\"font-weight: 400;\"> }<\/span><\/code><\/p>\n<p><span style=\"font-weight: 400;\">In the code: <\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><br \/>\n<code><span style=\"font-weight: 400;\">&lt;p&gt;\u201dFairy tales are more than true: not because they tell us that dragons &lt;span class=\"blue\"&gt;exist&lt;\/span&gt;, but because they tell us that dragons can be &lt;span class=\"teal\"&gt;beaten&lt;\/span&gt;.\u201d &lt;br \/&gt;\u2015 Neil Gaiman, Coraline&lt;\/p&gt;<\/span><\/code><\/p>\n        <\/div>\n  \t\t<\/div>\n      <div class=\"col-md-6 column\">\n        <div class=\"\">\n         <h4>Inline<\/h4>\n<p><code><span style=\"font-weight: 400;\">&lt;p&gt;\u201dFairy tales are more than true: not because they tell us that dragons &lt;span style=\"color: #10618B;\"&gt;exist&lt;\/span&gt;, but because they tell us that dragons can be &lt;span style=\"color: #3B857B;\"&gt;beaten&lt;\/span&gt;.\u201d &lt;br \/&gt;\u2015 Neil Gaiman, Coraline&lt;\/p&gt;<\/span><\/code><\/p>\n                 <\/div>\n      <\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n\n\t<div id=\"simple-text-block-block_054a6e3b66d80a562b22a21e49c3c388\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p><span style=\"font-weight: 400;\">Both versions above will produce this when using different values for the text-align:\u00a0<\/span><\/p>\n<img decoding=\"async\" class=\"alignnone wp-image-85195 size-full\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Typography-Litmus-2023-10-31-at-1.46.50-PM.jpg\" alt=\"\" width=\"946\" height=\"378\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Typography-Litmus-2023-10-31-at-1.46.50-PM.jpg 946w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Typography-Litmus-2023-10-31-at-1.46.50-PM-300x120.jpg 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Typography-Litmus-2023-10-31-at-1.46.50-PM-768x307.jpg 768w\" sizes=\"(max-width: 946px) 100vw, 946px\" \/>\n<p><span style=\"font-weight: 400;\">It\u2019s important to keep the contrast ratio in mind when altering colors of text to ensure your copy is still legible.\u00a0<\/span><\/p>\n<img decoding=\"async\" class=\"alignnone wp-image-35174 size-full\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Contrast.png\" alt=\"Contrast\" width=\"2560\" height=\"787\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Contrast.png 2560w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Contrast-300x92.png 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Contrast-1024x315.png 1024w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Contrast-768x236.png 768w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Contrast-1536x472.png 1536w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Contrast-2048x630.png 2048w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Contrast-1800x554.png 1800w\" sizes=\"(max-width: 2560px) 100vw, 2560px\" \/>\n<h3><span style=\"font-weight: 400;\">Size\u00a0<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Email text size plays an important role in your content hierarchy, but be sure to test your design across devices to ensure readability. <\/span><\/p>\n<h4>How to change text size in email<\/h4>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<div id=\"text-two-columns-block_81434c3b33e203f7d5d93893c9d0831c\" class=\"block-text-two-columns alignfull\" style=\"background-color:#f0f4f9\">\n  <div class=\"container\">\n      \t<div class=\"row \">\n  \t\t<div class=\"col-md-6 column\">\n        <div class=\"\">\n          <h4>In the head<\/h4>\n<p><span style=\"font-weight: 400;\">In the style block:\u00a0<\/span><\/p>\n<p><code><span style=\"font-weight: 400;\">h1 { font-size: 120px; }<\/span><\/code><\/p>\n<p><code><span style=\"font-weight: 400;\">H2 { font-size: 48px; }<\/span><\/code><\/p>\n<p><code><span style=\"font-weight: 400;\">p { font-size: 18px<\/span><span style=\"font-weight: 400;\">;<\/span><span style=\"font-weight: 400;\"> }<\/span><\/code><\/p>\n<p><code><span style=\"font-weight: 400;\">.small{ <\/span><span style=\"font-weight: 400;\">font-size: 12px;<\/span><\/code><\/p>\n<p><span style=\"font-weight: 400;\">In the code: <\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/p>\n<p><code><span style=\"font-weight: 400;\">&lt;h1&gt;Ginormous&lt;\/h1&gt;<\/span><\/code><\/p>\n<p><code><span style=\"font-weight: 400;\">&lt;h2&gt;Big and beautiful&lt;\/h2&gt;<\/span><\/code><\/p>\n<p><code><span style=\"font-weight: 400;\">&lt;p&gt;A nice readible size for large blocks of text, such as body copy&lt;\/p&gt;<\/span><\/code><\/p>\n<p><code><span style=\"font-weight: 400;\">&lt;p class=\u201dsmall\u201d&gt;Houston we have a problem&lt;\/p&gt;<\/span><\/code><\/p>\n        <\/div>\n  \t\t<\/div>\n      <div class=\"col-md-6 column\">\n        <div class=\"\">\n         <h4>Inline<\/h4>\n<p><code><span style=\"font-weight: 400;\">&lt;h1 style=\u201d<\/span><span style=\"font-weight: 400;\">font-size: 120px<\/span><span style=\"font-weight: 400;\">\u201d&gt;Ginormous&lt;\/h1&gt;<\/span><\/code><\/p>\n<p><code><span style=\"font-weight: 400;\">&lt;h2 style=\u201d<\/span><span style=\"font-weight: 400;\">font-size: 48px<\/span><span style=\"font-weight: 400;\">\u201d&gt;Big and beautiful&lt;\/h2&gt;<\/span><\/code><\/p>\n<p><code><span style=\"font-weight: 400;\">&lt;p style=\u201d<\/span><span style=\"font-weight: 400;\">font-size: 18px<\/span><span style=\"font-weight: 400;\">\u201d&gt;A nice readible size for large blocks of text, such as body copy&lt;\/p&gt;<\/span><\/code><\/p>\n<p><code><span style=\"font-weight: 400;\">&lt;p\u00a0 style=\u201d<\/span><span style=\"font-weight: 400;\">font-size: 12px<\/span><span style=\"font-weight: 400;\">\u201d&gt;Houston we have a problem&lt;\/p&gt;<\/span><\/code><\/p>\n                 <\/div>\n      <\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n\n\t<div id=\"simple-text-block-block_c1521bbeacc90170b317e57f823eadf4\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p><span style=\"font-weight: 400;\">Both versions will create:\u00a0<\/span><\/p>\n<img decoding=\"async\" class=\"alignnone wp-image-85197 size-large\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Typography-Litmus-2023-10-31-at-1.57.15-PM-1024x449.jpg\" alt=\"\" width=\"1024\" height=\"449\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Typography-Litmus-2023-10-31-at-1.57.15-PM-1024x449.jpg 1024w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Typography-Litmus-2023-10-31-at-1.57.15-PM-300x131.jpg 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Typography-Litmus-2023-10-31-at-1.57.15-PM-768x336.jpg 768w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Typography-Litmus-2023-10-31-at-1.57.15-PM.jpg 1292w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/>\n<h2 id=\"bestpractice\"><span style=\"font-weight: 400;\">Best practices for using email typography\u00a0<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">You can get creative with email typography, but there are a few guidelines to keep in mind to balance style and substance.\u00a0<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Head or inline<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Throughout we\u2019ve offered both ways to include styles for your text. The true power of putting your styles in the head becomes apparent when you have to use multiple styles. <\/span><\/p>\n<p>&nbsp;<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<div id=\"text-two-columns-block_08d9f4406ec4c8e0bace6466efc33095\" class=\"block-text-two-columns alignfull\" style=\"background-color:#f0f4f9\">\n  <div class=\"container\">\n      \t<div class=\"row \">\n  \t\t<div class=\"col-md-6 column\">\n        <div class=\"\">\n          <h4>In the head<\/h4>\n<p><span style=\"font-weight: 400;\">In the style block:\u00a0<\/span><\/p>\n<p><code><span style=\"font-weight: 400;\">h1 { font-size: 48px line-height: 1.5em; color: #<\/span><span style=\"font-weight: 400;\">3B857B<\/span><span style=\"font-weight: 400;\">; }<\/span><\/code><\/p>\n<p><code><span style=\"font-weight: 400;\">p { font-size: 18px<\/span><span style=\"font-weight: 400;\">; line-height: 1.5em; color: #262524; margin: 20px 0;<\/span><span style=\"font-weight: 400;\"> }<\/span><\/code><\/p>\n<p><code><span style=\"font-weight: 400;\">a { color: #<\/span><span style=\"font-weight: 400;\">10618B<\/span><span style=\"font-weight: 400;\">; text-decoration: underline; }<\/span><\/code><\/p>\n<p><span style=\"font-weight: 400;\">In the code:<\/span><\/p>\n<p><code><span style=\"font-weight: 400;\">&lt;h1&gt;An important headline&lt;\/h1&gt;<\/span><\/code><\/p>\n<p><code><span style=\"font-weight: 400;\">&lt;p&gt;A bit of supporting information about your headline. And then &lt;a rel=\"noopener\" target=\"_blank\" href=\u201d\u201d&gt;your link goes here&lt;\/a&gt;.&lt;\/p&gt;<\/span><\/code><\/p>\n<p><code><span style=\"font-weight: 400;\">&lt;img src=\"[your image url]\" width=\"600\" height=\"300\"&gt;<\/span><\/code><\/p>\n<p><code><span style=\"font-weight: 400;\">&lt;p&gt;But don\u2019t forget about &lt;a rel=\"noopener\" target=\"_blank\" href=\u201d\u201d&gt;this other link&lt;\/a&gt;. Which could also be important to your headline.&lt;\/p&gt;<\/span><\/code><\/p>\n        <\/div>\n  \t\t<\/div>\n      <div class=\"col-md-6 column\">\n        <div class=\"\">\n         <h4>Inline<\/h4>\n<p><code><span style=\"font-weight: 400;\">&lt;h1 style=\"font-size: 48px line-height: 1.5em; color: #3B857B;\"&gt;An important headline&lt;\/h1&gt;<\/span><\/code><\/p>\n<p><code><span style=\"font-weight: 400;\">&lt;p style=\"font-size: 18px; line-height: 1.5em; color: #262524; margin: 20px 0;\"&gt;A bit of supporting information about your headline. And then &lt;a rel=\"noopener\" target=\"_blank\" href=\"\" style=\"color: #10618B; text-decoration: underline;\"&gt;your link goes here&lt;\/a&gt;.&lt;\/p&gt;<\/span><\/code><\/p>\n<p><code><span style=\"font-weight: 400;\">&lt;img src=\"[your image url]\" width=\"600\" height=\"300\"&gt;<\/span><\/code><\/p>\n<p><code><span style=\"font-weight: 400;\">&lt;p style=\"font-size: 18px; line-height: 1.5em; color: #262524; margin: 20px 0;\"&gt;But don\u2019t forget about &lt;a rel=\"noopener\" target=\"_blank\" href=\"\" style=\"color: #10618B; text-decoration: underline;\"&gt;this other link&lt;\/a&gt;. Which could also be important to your headline.&lt;\/p&gt;<\/span><\/code><\/p>\n                 <\/div>\n      <\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n\n\t<div id=\"simple-text-block-block_fb4f31ee43fcc1e684606d6f8677d05b\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p><span style=\"font-weight: 400;\">Both of the html samples above will show:\u00a0<\/span><\/p>\n<img decoding=\"async\" class=\"alignnone wp-image-85196 size-full\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Typography-Litmus-2023-10-31-at-2.15.47-PM.jpg\" alt=\"\" width=\"1284\" height=\"1122\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Typography-Litmus-2023-10-31-at-2.15.47-PM.jpg 1284w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Typography-Litmus-2023-10-31-at-2.15.47-PM-300x262.jpg 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Typography-Litmus-2023-10-31-at-2.15.47-PM-1024x895.jpg 1024w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Typography-Litmus-2023-10-31-at-2.15.47-PM-768x671.jpg 768w\" sizes=\"(max-width: 1284px) 100vw, 1284px\" \/>\n<p><span style=\"font-weight: 400;\">But the one with the styles in the head is much cleaner and easier to read and also has a smaller file size. If you use the styles in your head section and find some of them not translating in a certain email client, you can duplicate them inline in the specific place where you are seeing the issue. This is a good way to troubleshoot and identify an email clients that do not support a specific style in the head section.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Choose readable fonts<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">The best font for the job depends on where it lives in your email:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Use serif and sans-serif for body copy<\/b><span style=\"font-weight: 400;\">. T<\/span><span style=\"font-weight: 400;\">hese typefaces are the most commonly used, especially for body copy, because they are the most readable and, therefore, accessible.<\/span><span style=\"font-weight: 400;\"> They also render well when scaled down and at lower weights.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Reserve script and display for headlines<\/b><span style=\"font-weight: 400;\">. These typefaces are often too complex for body copy because they can be hard to read and even harder to scan.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Differentiate technical content with monospaced typefaces<\/b><span style=\"font-weight: 400;\">. Monospaced typefaces are also less commonly used as body copy. Instead, they are favored in technical resources for programming languages to distinguish code from natural language.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Prioritize readability and accessibility<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">We briefly mentioned readability and accessibility in regards to typefaces, but there are more factors to consider when designing email typography that\u2019s easiest for sighted subscribers to read and comprehend. Coding your email typography\u2014not locking it away within an image\u2014also ensures screen readers and subscribers with images turned off can fully enjoy your design.\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Add a little letter spacing to uppercase and small typography<\/b><span style=\"font-weight: 400;\">. Uppercase and small text benefit from some breathing room between letters, but too much letter spacing harms readability. For more information on the dos and don\u2019ts here, <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.kevinpowell.co\/article\/letter-spacing-dos-and-donts\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">check out this helpful post on letter spacing<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Use a line height that\u2019s 1.5x or 2x your font size<\/b><span style=\"font-weight: 400;\">. Spacing between lines of text prevents copy from looking like a solid wall of words, but too much room between each line can feel like it\u2019s independent from the next, making reading and scanning a challenge. We aim for line heights between 1.5 and 2 times the size of the text. For example, a font size of 20px should have a line height of 30-40px.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Maintain a high font contrast<\/b><span style=\"font-weight: 400;\">. <\/span><span style=\"font-weight: 400;\">When you select text colors, make sure they&#8217;ll stand out against your <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/background-colors-html-email\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">background colors<\/span><\/a><span style=\"font-weight: 400;\"> or <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-background-images-in-email\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">images<\/span><\/a><span style=\"font-weight: 400;\">. This will help make your content readable for subscribers with vision impairments. The best way to find out whether you have a good contrast ratio is to test your colors in the <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">WebAim contrast checker<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Use bold, italic, and uppercase styling sparingly<\/b><span style=\"font-weight: 400;\">. Bold fonts, italic words, and uppercase headers all help copy stand out. But, there can be too much of a good thing. Use these typography styles mindfully to maintain readability.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Align text based on language and copy length<\/b><span style=\"font-weight: 400;\">. Right-aligned body text should only be used for languages that read right to left. Center-aligned text should be reserved for headlines or short paragraphs of no more than 3 lines. Use left-aligned for left-to-right languages to create a visual anchor point to return to each time a line is read.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Use at least a 14px font size<\/b><span style=\"font-weight: 400;\">. There isn\u2019t really an upper limit to how big you style your text, but there is a limit to how small text should be. Anything below 14px becomes hard for many people to read, and iOS Apple Mail\u2019s automatic text adjustment feature will kick in and enlarge your text. At Litmus, we rarely stray below 18px. If we do, we limit it to tertiary information such as caveats, footnotes, and footer content.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Pro tip: for a deeper dive into creating, designing, and coding accessible content for email, check out the<\/span> <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/trailhead.salesforce.com\/live\/videos\/a2r3k000001vD99\/episode-1-introduction-to-email-accessibility\/?lang=en\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Salesforce Trailhead sessions<\/span><\/a><span style=\"font-weight: 400;\"> we recorded with Mark Robbins, Software Engineer at Salesforce.\u00a0<\/span><\/p>\n<img decoding=\"async\" class=\"alignnone size-full wp-image-35176\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Trailheads.jpg\" alt=\"Trailheads\" width=\"1000\" height=\"560\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Trailheads.jpg 1000w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Trailheads-300x168.jpg 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Trailheads-768x430.jpg 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/>\n<h3><span style=\"font-weight: 400;\">Customize typography for your audience<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">There are general best practices for email typography, but you can also use email engagement metrics to learn what your audience likes. For example, you can try placing information in different spots within the content hierarchy to see which increases clicks. Or, you can play around with styling and take note of which typography increases read time.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Of course, it\u2019s always a good idea to check how your email <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/smarter-email-client-testing\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">renders across different devices<\/span><\/a><span style=\"font-weight: 400;\"> to know what subscribers will see, and you can prioritize testing for the devices and email providers your subscribers use most.\u00a0<\/span><\/p>\n<h2 id=\"creative\"><span style=\"font-weight: 400;\">Brands getting creative with email typography<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Now for some examples of brands with great use of typography in their email designs. What makes them stand out and draw readers in?<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">DAMP<\/span><\/h3>\n<a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.damp.wine\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">DAMP<\/span><\/a><span style=\"font-weight: 400;\">, a newsletter highlighting winemakers and retailers that focus on making and selling natural wines, leans heavily into typography, working with serif and sans-serif fonts to lay out the hierarchy of content.<\/span><\/p>\n<p><img decoding=\"async\" class=\"wp-image-35184 size-full\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/damp.jpg\" alt=\"damp\" width=\"1600\" height=\"1600\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/damp.jpg 1600w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/damp-300x300.jpg 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/damp-1024x1024.jpg 1024w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/damp-150x150.jpg 150w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/damp-768x768.jpg 768w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/damp-1536x1536.jpg 1536w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/damp-545x545.jpg 545w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Source: <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/reallygoodemails.com\/emails\/ways-to-progress-in-farming-restaurants-and-wine\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Really Good Emails<\/span><\/a>\n<p><span style=\"font-weight: 400;\">Fonts used: Helvetica neue with Arial fallback, and serif system font Times New Roman.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The hero area displays the only image in this long form newsletter, with bold typography setting the tone for the email on open. This <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/trending-in-email-design-bold-typography\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">email design trend of bold typography<\/span><\/a><span style=\"font-weight: 400;\"> makes a statement. It\u2019s no wonder so many brands have adopted this style.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">What is really interesting about this email, is that they achieve this modern and clean style using system fonts rather than web fonts\u2014meaning that the fonts will render similarly across all email clients.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Ready Mag<\/span><\/h3>\n<a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/readymag.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Ready Mag<\/span><\/a><span style=\"font-weight: 400;\">, an in-browser graphics editor, also leans into system fonts, leading with Mac system fonts, followed by an array of Helveticas. This is probably beyond what is required of a font stack in email.<\/span><\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-35168\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/readymag.jpg\" alt=\"readymag email\" width=\"1600\" height=\"1600\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/readymag.jpg 1600w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/readymag-300x300.jpg 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/readymag-1024x1024.jpg 1024w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/readymag-150x150.jpg 150w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/readymag-768x768.jpg 768w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/readymag-1536x1536.jpg 1536w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/readymag-545x545.jpg 545w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Source: <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/reallygoodemails.com\/emails\/chic-portfolio-template-animation-in-action\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Really Good Emails<\/span><\/a>\n<p><span style=\"font-weight: 400;\">Fonts used: Apple system fonts, falling back to Helvetica and Arial.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">What I love about this email is how bold typography separates content. It makes the email easy to scan. And with minimal body copy, readers in a hurry can get the value of each section and take action quickly.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Blurb\u00a0<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Self-publishing platform <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.blurb.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Blurb<\/span><\/a><span style=\"font-weight: 400;\"> uses web fonts to bring its brand identity to emails, using light and bold weights as well as uppercase letters to outline hierarchy and action areas.<\/span><\/p>\n<img decoding=\"async\" class=\"size-full wp-image-35181\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/blurb.jpg\" alt=\"blurb\" width=\"1600\" height=\"1089\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/blurb.jpg 1600w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/blurb-300x204.jpg 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/blurb-1024x697.jpg 1024w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/blurb-768x523.jpg 768w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/blurb-1536x1045.jpg 1536w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/>\n<p><span style=\"font-weight: 400;\">Source: <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/reallygoodemails.com\/emails\/bookwright-tips-projects\"><span style=\"font-weight: 400;\">Really Good Emails<\/span><\/a><\/p>\n<p><span style=\"font-weight: 400;\">Fonts used: Futura and Proxima Nova (web fonts), falling back to Helvetica and Arial.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">It\u2019s great to see the numbers\u2013the ones that make up the steps\u2013styled using live text rather than imagery. This creates a much smoother experience for subscribers reliant upon screen readers and also means that these will render when images are not loaded.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Tripadvisor<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Like many brands, travel platform Tripadvisor sent out their COVID-19 messaging using a letter-style template. This is a more personal and direct way of communicating with customers, offering important information without the distraction of imagery, or the likelihood of being mistaken as a marketing email.<\/span><\/p>\n<img decoding=\"async\" class=\"size-full wp-image-35182\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Tripadvisor.jpg\" alt=\"Tripadvisor email\" width=\"1600\" height=\"1121\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Tripadvisor.jpg 1600w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Tripadvisor-300x210.jpg 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Tripadvisor-1024x717.jpg 1024w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Tripadvisor-768x538.jpg 768w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/Tripadvisor-1536x1076.jpg 1536w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/>\n<p><span style=\"font-weight: 400;\">Source: <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/reallygoodemails.com\/emails\/covid-19-message-from-tripadvisor-ceo-steve-kaufer\"><span style=\"font-weight: 400;\">Really Good Emails<\/span><\/a><\/p>\n<p><span style=\"font-weight: 400;\">Fonts used: Arial.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Big, bold typography highlights the overarching message of the email. At the same time, the headline stands out against blocks of body copy, breaking up content and providing anchor points for the reader to understand the value of a section.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This highly scannable email also has ample padding left and right of the main container, which is a great technique for preventing large blocks of copy from overwhelming the reader.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Tattly\u00a0<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Temporary tattoo retailer <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/tattly.com\/\"><span style=\"font-weight: 400;\">Tattly<\/span><\/a><span style=\"font-weight: 400;\"> has a very creative approach to email design, with promotional emails often leveraging exciting design techniques and trends. They use bold typography in the hero of this email to draw attention to the new products featured within the email.<\/span><\/p>\n<img decoding=\"async\" class=\"wp-image-35165 size-full\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/tattly.jpg\" alt=\"tattly email\" width=\"1600\" height=\"1363\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/tattly.jpg 1600w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/tattly-300x256.jpg 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/tattly-1024x872.jpg 1024w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/tattly-768x654.jpg 768w, https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/09\/tattly-1536x1308.jpg 1536w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/>\n<p><span style=\"font-weight: 400;\">Source: <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/reallygoodemails.com\/emails\/fun-new-tattly\"><span style=\"font-weight: 400;\">Really Good Emails<\/span><\/a><\/p>\n<p><span style=\"font-weight: 400;\">Fonts used: Open Sans (web font), falling back to Helvetica and Arial.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">It is common with highly designed emails, such as this one, for typography to be image based, rather than live text.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">There are a number of accessibility considerations that need to be made when using imagery for text, such as applying ALT text that echoes the copy, and taking into account what the text will look like for people who need to enlarge the email due to a visual impairment. Will the text pixelate and become unreadable? Also, how readable is image-based text when the email scales down on mobile devices?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Although live text is the best way to keep <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/ultimate-guide-accessible-emails\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">your emails accessible<\/span><\/a><span style=\"font-weight: 400;\"> and readable, there is a way to make image based hero areas valuable to a wider audience, by wrapping your hero image in an H1 tag and adding the image text to your ALT tag, like this:<\/span><\/p>\n<p><code>&lt;h1 style=\u201dHelvetica Neue,Helvetica,sans-serif; font-size:50px; line-height:75px; color:#262524;\u201d&gt;&lt;img src=\u201dhero.png\u201d alt=\u201dImage based hero messaging - there is a way!\u201d&gt;&lt;\/h1&gt;<\/code><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n\n\t<div id=\"simple-text-block-block_ce3c65de3390492d2e2b893f282be083\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p><span style=\"font-weight: 400;\">This approach makes the email scannable for subscribers reliant upon screen readers, as they are able to use shortcut functionality to navigate through headlines.<\/span><\/p>\n<p class=\"h-md\"><em>\u201cWrapping an image within a H1 tag is valid semantic code and will be included in screen reader headings shortcut menus. However, it is important to note that ALT text may not be read out by all text reading tools.\u201d \u2014 Mark Robbins, Software Engineer, Salesforce<\/em><\/p>\n<h2><span style=\"font-weight: 400;\">Email typography packs a punch\u00a0<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">With the rapidly growing number of messages competing for your subscribers\u2019 attention, the burden to stand out and still provide a reliable experience\u2014fast\u2014keeps getting heavier. Typography is a great way to make your emails beautiful, effective, and accessible without slowing you down.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Keep this guide in mind, and share how you use typography in your emails. We\u2019d love to see them!<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n<div id=\"post-cta-buttonblock_0b55ddc16999a14c3d1bdb029d2bf163\" class=\"block-post-cta-button mt-5\">\n  <div class=\"container px-0\">\n    <div class=\"row\">\n      <div class=\"blog-post-cta-button-wrapper col-12 col-lg-10 mx-auto p-4 d-block d-lg-flex align-items-lg-center align-items-start\">\n\t\t  \t\t  <div class=\"blog-post-cta-button-icon col-2 float-start mx-auto float-lg-start float-none background-white d-flex flex-column justify-content-center align-items-center text-center\">\n\t\t\t  <img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/07\/blog-cta-buttons-design.svg\">\n\t\t  <\/div><!--blog-post-cta-button-icon-->\n\t\t  <div class=\"col-12 col-lg-9 ps-lg-4 ps-0 text-center text-lg-start mt-3 mt-lg-0\">\n\t\t\t  <h2 class=\"h-sm\"><strong>Boost efficiency and scale email development<\/strong><\/h2>\n\t\t\t  <p>Craft consistent, on-brand emails with Litmus. Create and store reusable templates, code modules, and more.<\/p>\n\t\t  <\/div><!--col-12 col-lg-9 ps-lg-4 ps-0 text-center text-lg-start mt-3 mt-lg-0-->\n\t\t  <div class=\"text-center text-lg-end col-12 col-lg-1 ms-lg-2 ms-0\">\n\t\t\t  <a class=\"btn btn-primary\" rel=\"noopener\" target=\"_blank\" href=\"\/email-design\/\">Learn more<\/a>\n\t\t  <\/div><!--text-center text-lg-end col-12 col-lg-1 ms-lg-2 ms-0-->\n\t\t  \t\t  \t\t  \t\t  \t\t  \t\t  \t\t  \t\t       <\/div><!--blog-post-cta-button-wrapper-->\n    <\/div><!--row-->\n  <\/div><!--container-->\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Find out the ins and outs of email typography, learn the best fonts for emails and how to style them, and see examples of effective typography in email.<\/p>\n","protected":false},"author":25,"featured_media":82336,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"tags":[478,102,1789,9805],"blog_category":[10303],"class_list":["post-35160","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-design","tag-html","tag-subscriber","tag-text","blog_category-email-design"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.5 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Use Email Typography That Speaks Volumes - Litmus<\/title>\n<meta name=\"description\" content=\"Find out the ins and outs of email typography, learn the best fonts for emails and how to style them, and see examples of effective typography in email.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.litmus.com\/blog\/email-typography-fonts\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use Email Typography That Speaks Volumes\" \/>\n<meta property=\"og:description\" content=\"Find out the ins and outs of email typography, learn the best fonts for emails and how to style them, and see examples of effective typography in email.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.litmus.com\/blog\/email-typography-fonts\" \/>\n<meta property=\"og:site_name\" content=\"Litmus\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/litmusapp\" \/>\n<meta property=\"article:published_time\" content=\"2023-11-17T00:15:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-31T15:04:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/10\/Typography-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1382\" \/>\n\t<meta property=\"og:image:height\" content=\"725\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@litmusapp\" \/>\n<meta name=\"twitter:site\" content=\"@litmusapp\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Use Email Typography That Speaks Volumes - Litmus","description":"Find out the ins and outs of email typography, learn the best fonts for emails and how to style them, and see examples of effective typography in email.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.litmus.com\/blog\/email-typography-fonts","og_locale":"en_US","og_type":"article","og_title":"How to Use Email Typography That Speaks Volumes","og_description":"Find out the ins and outs of email typography, learn the best fonts for emails and how to style them, and see examples of effective typography in email.","og_url":"https:\/\/www.litmus.com\/blog\/email-typography-fonts","og_site_name":"Litmus","article_publisher":"https:\/\/www.facebook.com\/litmusapp","article_published_time":"2023-11-17T00:15:17+00:00","article_modified_time":"2025-01-31T15:04:47+00:00","og_image":[{"width":1382,"height":725,"url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/10\/Typography-1.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_creator":"@litmusapp","twitter_site":"@litmusapp","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.litmus.com\/blog\/email-typography-fonts#article","isPartOf":{"@id":"https:\/\/www.litmus.com\/blog\/email-typography-fonts"},"author":{"name":"","@id":""},"headline":"How to Use Email Typography That Speaks Volumes","datePublished":"2023-11-17T00:15:17+00:00","dateModified":"2025-01-31T15:04:47+00:00","mainEntityOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/email-typography-fonts"},"wordCount":8,"commentCount":0,"publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/email-typography-fonts#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/10\/Typography-1.png","keywords":["Design","HTML","Subscriber","Text"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.litmus.com\/blog\/email-typography-fonts#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.litmus.com\/blog\/email-typography-fonts","url":"https:\/\/www.litmus.com\/blog\/email-typography-fonts","name":"How to Use Email Typography That Speaks Volumes - Litmus","isPartOf":{"@id":"https:\/\/www.litmus.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/email-typography-fonts#primaryimage"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/email-typography-fonts#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/10\/Typography-1.png","datePublished":"2023-11-17T00:15:17+00:00","dateModified":"2025-01-31T15:04:47+00:00","description":"Find out the ins and outs of email typography, learn the best fonts for emails and how to style them, and see examples of effective typography in email.","breadcrumb":{"@id":"https:\/\/www.litmus.com\/blog\/email-typography-fonts#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.litmus.com\/blog\/email-typography-fonts"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/blog\/email-typography-fonts#primaryimage","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/10\/Typography-1.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/10\/Typography-1.png","width":1382,"height":725,"caption":"email-typography"},{"@type":"BreadcrumbList","@id":"https:\/\/www.litmus.com\/blog\/email-typography-fonts#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.litmus.com\/"},{"@type":"ListItem","position":2,"name":"How to Use Email Typography That Speaks Volumes"}]},{"@type":"WebSite","@id":"https:\/\/www.litmus.com\/#website","url":"https:\/\/www.litmus.com\/","name":"Litmus","description":"Are you getting the most out of your email marketing?","publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.litmus.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.litmus.com\/#organization","name":"Litmus Software","url":"https:\/\/www.litmus.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","width":600,"height":314,"caption":"Litmus Software"},"image":{"@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/litmusapp","https:\/\/x.com\/litmusapp"]},{"@type":"Person","@id":""}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/35160","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/comments?post=35160"}],"version-history":[{"count":16,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/35160\/revisions"}],"predecessor-version":[{"id":108463,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/35160\/revisions\/108463"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media\/82336"}],"wp:attachment":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media?parent=35160"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/tags?post=35160"},{"taxonomy":"blog_category","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/blog_category?post=35160"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}