Email Typography: 8 Best Fonts for Email (And Custom Email Font Ideas)

確かな支持を得ているほとんどのビジネスは、この時点でメールマーケティングが提供するすべてを完全に受け入れていることでしょう。 メールニュースレター、オートレスポンダー、何でもありです。

顧客がウェブサイトを去った後でも、ずっと連絡を取り続けることができるという事実は、とても強力です。

顧客がウェブサイトを離れてからずっと後に到達できるという事実は、非常に強力です。しかし、古い電子メールでは意味がありません。

ここで重要な役割を果たすのが、デザインです。

デザインはここで重要な役割を果たしますが、最も注意すべき点は、フォントの選択でしょう。

メールセーフフォントとは

メールに派手なフォントを使いたくなることがありますよね。 結局のところ、ポジティブな印象を与えたいのです。 そして、あなたのコンテンツを目立たせたいのです。 しかし、特殊なフォントは、すべてのメールクライアントで常に正しく表示されるとは限りません。 実際、フォントがサポートされていない場合、メールクライアントは代替フォントを使用することになり、意図したトーンが台無しになったり、最悪の場合、コンテンツの読みやすさが損なわれる可能性があります。

そのため、メールマーケティングのコンテンツを作成するときは、メールセーフフォントのみにこだわることを強くお勧めします。

どのようにメールを表示するかによって、読者がメールを読むか、あるいはゴミ箱に直接送るかの違いが生まれます。 😬 🗑メールセーフフォントとその必要性についての詳細はこちら ⬇️Click to Tweet

優れたフォントがコンバージョンを高める方法

ほとんどの人がメールにかける時間はわずか11秒間です。 つまり、どのフォントも読みやすく、スキャンしやすいものでなければならないのです。 また、「一目でわかる」利便性を提供する必要があります。 多くの場合、これは、誰もがすでに慣れ親しんでいる標準的なフォントに頼ることを意味します。 退屈に感じますか? それどころか、もっと悪い結果が待っています。 実際、人は派手なフォントを読むのに2倍の時間がかかると言われています。

読書時間

Script vs. Sans Serif読書時間

しかし、変換に影響を与えるのは、選択したフォントだけではありません。 選択したフォントのサイズも重要です。

この研究では、Arialフォントに設定されたテキストブロックを10ptから13ptに増やしました。

調査では、Arialフォントに設定されたテキストブロックを10ptから13ptに増やしました。

この小さな変更により、直帰率が10%低下し、コンバージョン率が133%も上昇しました!

フォントの選択にも心理学があります。

フォントの選択にも心理学があります。これは主にロゴに適用されますが、メールフォントを選択する際にも、この情報を心に留めておくとよいでしょう。 ある種のフォントは、それに関連する特定の「感情」を持っています。 According to Crazy Egg, the five main font types elicit different emotions or associations:

Serif Fonts

Examples include Times New Roman, Baskerville, and Georgia. Serif fonts exude a sense of respectability, reliability, and tradition. Older brands (or those that want to appear as though they’ve been around for decades) make solid use of these sorts of fonts to instill confidence. The Tiffany & Co logo serves as a solid example.

Tiffany and co

Tiffany & Co

Vogue, too:

vogue

Vogue

Sans Serif Fonts

Examples include Helvetica, Calibri, and Franklin Gothic. Sans serif fonts give off a modern look that’s clean, simple, and straightforward. These fonts give off the impression of reliability and stability. Sans serif fonts are very corporate-looking. Netflix features a sans serif font:

netflix

Netflix

Modern Fonts

Examples include Futura and Century Gothic. Modern fonts can appear stylish, chic, or give an overall sense of strength. Hulu’s logo is a popular example of one using a modern font:

Hulu

Hulu

Script Fonts

Examples include Edwardian Script and Bickham Script. Script fonts will likely not be a wise choice for use in your emails. However, they do make an impact when used in logos and that could work for graphical elements. Coca-Cola is a timeless example of a script font used well:

Coca-Cola

Coca-Cola

Display Fonts

Examples include Cooper and Valencia. Words and feelings commonly associated with display fonts include a sense of individuality or uniqueness, friendliness, or expressiveness. ロゴ (および、場合によってはヘッダー) では、ディスプレイ フォントは本当にインパクトを与え、際立たせることができます。

Disney

Disney

これらの情報を念頭に置いて、次に、メールに最適なフォントを選択する方法について考えてみましょう。 最適なフォントを選択する方法

利用可能な 5 つの基本的なフォントの種類 (記号を除く) はおわかりいただけたと思います。 そして、異なるフォントの種類は、顧客に異なる感情をもたらすこともご存知でしょう。

会社の電子メールに使用するフォントは、次の 4 つの品質が必要です。

品質その 1: 読みやすさ

この品質についてはすでに述べましたが、最も重要であるため、繰り返し説明します。 フォントが読みにくいと、誰もあなたの電子メールを読むことができません。

品質その2:明瞭さ

正確な線を持つ、すっきりとしたフォントが、メールのコピーに最も適しています。 華美な装飾や不規則な動きは一切ありません。 また、極端に細かったり、軽かったりする線もダメです。 フォントサイズも大きいほうがよいでしょう。 フォントは通常より1~2ポイント大きくし、フォントウェイトを適切に設定し(ただし太字は不可)、行間は1.15を目安にしましょう。 心理的に適切であること

前述のように、特定のフォントの種類は、それらに関連する特定の感情を持っています。 選択したフォントが、コンテンツで伝えようとしている全体的な雰囲気や、コンテンツの目的に合っていることを確認しましょう。

品質その 4: ブランドにふさわしい

同様に、選択するフォントは、業界やニッチで使用するために論理的な意味を持つものでなければなりません。 あなたの会社が古風な雰囲気を持っている場合、超モダンなフォントやディスプレイ スタイルのフォントを使用することは適切ではありません。 同様に、テクノロジー系の企業であれば、素朴でフォーマルなフォントが最適とは言えないでしょう。

電子メールに最適な 8 つのフォント

私たちは、電子メールに適したフォントを定義しました。 また、フォントの選択をどのように絞り込むかについてもお話しました。

基本のメール セーフ フォント

ほとんどのメール クライアントが認識できる、(退屈ではありますが)読みやすいメール セーフ フォントの基本セットは存在します。 Let’s take a look at each of those now.

Arial

arial

Arial

Arial is a very commonly used typeface. It was originally created in 1982 by Patricia Saunders and Robin Nicholas of Monotype Imaging. Though originally designed for use in an IBM laser printer, it has since become a web content favorite.

Verdana

verdana

Verdana

Verdana is a font that was designed with screen displays in mind. It was developed by Matthew Carter and features wide characters and large spacing between each character to improve on-screen legibility. It’s another staple choice supported by most email clients.

Helvetica

Helvetica

Helvetica

And then there’s Helvetica, one of the most popular fonts currently in existence. 読みやすく、目に優しく、ほとんどのワープロソフト、電子メール クライアント、および Web ブラウザでサポートされています。

ジョージア

georgia

Georgia

Georgia は、メール クライアントでサポートしていることを見つけるのによく使われている別のフォントです。 本質的に読みやすく、文字間隔が広く、混乱を防ぐために各文字が区別できるような文字デザインを使用しています。

Tahoma

tahoma

Tahoma

Tahoma は、ほとんどのメール クライアントでサポートされているもう 1 つのオプションです。 これは、Windows オペレーティング システムで最も人気のあるサンセリフ フォント ファミリの 1 つです。 画面上での表示を念頭に置いて作成され、明瞭さと読みやすさは、さらに小さなフォント サイズでも達成可能です。 It was originally created by Matthew Carter.

Lucida

lucida

Lucida

Or, you could use Lucida, another sans font family that prioritizes clean lines, a clear style, and distinct letterforms. Letter spacing is wider than standard and each character is a bit taller as well, adding more elements of legibility.

Trebuchet

trebuchet

Trebuchet

Trebuchet is another option available that you could easily use in your email designs. It was created by Vincent Connare in 1996 and is a sans serif font. It was designed for screen reading and features larger line-heights, rounded edges, and wider character spacing.

Times New Roman

times new roman

Times new roman

Lastly, there’s Times New Roman, a font that really doesn’t need much of an introduction. これは伝統的な外観を持ち、しばしばワープロ プログラムのデフォルトのフォント選択として使用されます。

メールソフトで他のフォントを使用できる場合もありますが、上記のフォントが最も読みやすく、一般的に認識されています。

Sign Up For the Newsletter

WordPressで1,187%アクセスアップを達成しました。

WordPress のインサイダー情報を毎週お届けする 20,000 人以上のニュースレターに参加しましょう!

カスタム電子メール フォント

基本のフォント選択が魅力的でない場合、別のオプションがあります。 代わりに HTML フォントを使用して、よりカスタムな外観を作成することができます。

その前に、Web フォントがどのように機能するかについて説明します。 オペレーティング システム、デバイス、アプリケーション、またはソフトウェアに含まれているわけではありません。 Web フォントはオンラインに存在し、コード スニペット、プラグイン、およびその他の手段によってプロジェクトに追加することができます。 多くの場合、WebフォントがWebサイトで使用されているのを見かけます。

  • Android Mail
  • Apple Mail
  • iOS Mail
  • Outlook 2000
  • Outlook.com App
  • Thunderbird

しかし、Web フォントはこれらのメール クライアントですべて同じようにサポートされているわけではありません。 リンクを必要とするだけのものもあれば、Web フォントをインポートするコード スニペットを必要とするものもあります。 これについては、後ほど詳しく説明します。 メール クライアントが選択した Web フォント (またはその取り込み方法) をサポートしていない場合でも、コンテンツは必ずしもひどい状態にならないことを最初に認識しておくことが重要です。 つまり、電子メールに含まれる Web フォントが正しく読み込まれない場合、電子メール クライアントは、代わりに代替フォントを提供します。

私たちが何を意味しているのか理解していただくために、Gmail のデフォルトのフォントは Arial で、Apple Mail は Helvetica を使用しています。

ウェブ フォントを使用することを決めたら、開始する前にさまざまなプラットフォームでテストする必要があります。

メールマーケティングサービスによっては、ウェブフォントサポートがすでに含まれています。たとえば、Campaign Monitorでは、ドラッグ&ドロップ式のメールビルダーにいくつかのウェブフォントオプションが含まれており、フォールバックオプションが自動的に設定されるので、最小限の手間で済みます。

campaign monitor

Campaign Monitor Web Fonts

メールマーケティング環境にウェブフォントのサポートがない場合、コードによって追加できる可能性もあります。

HTML 電子メールに Web フォントを埋め込むために使用できるコード スニペットがいくつかあります。

<link>

メールに Web フォントを追加するには、<link> を使用するとよく行われる方法です。 選択した Web フォントは、あなたに代わって URL を定義します。 そのため、フォントを自分でホストしている場合は、自分のサイトのフォントの URL に変更します。

このコード スニペットは、メール コードの <head> セクションに配置されます。 メールの冒頭に表示されるはずです。 この方法は、ほとんどのメールクライアントでサポートされており、読み込みもかなり速いです。 しかし、ウェブフォントファイルのサイズが大きい場合、いくつかの問題が発生する可能性があります。

ですから、Google Fonts から Web フォントを取得する場合、フォントのスタイルを選択し、希望の埋め込み方法としてリンクを選択すると、次のようになります。

link

Roboto on Google Fonts

@import

メールに Web フォントを追加するもうひとつの方法として @import を使用することが挙げられます。 これは超簡単で、ほとんどの電子メール クライアントでもうまく機能します。

コード スニペット <link><head> セクションで @import を挿入してください。 繰り返しますが、Google Fonts では、フォントとそのスタイルを選択し、@import の横にあるバブルをクリックすると、このように表示されます。

Roboto font styles

@import for the Roboto font

別の Web フォント サービスを使用している場合、このように埋め込みコードを取得できない可能性があります。 Web フォント サービスが提供する URL を使用するか、フォントを自分でホストする場合は、サーバー上の適切なリンクを使用します。

@font-face

このルールにより、サーバーからフォントをダウンロードしたり、Web サイトやこの場合は電子メールで使用できるようにフォントをホストしたりできます。 これは、フォントをその場でダウンロードして、Web サイトや電子メール メッセージで使用できるようにするという点で、前の 2 つの方法と同じように機能します。 ここで説明する他のすべての方法と同様に、このコード スニペットをメールの HTML の <head> セクションに貼り付けます。

ワードプレスに関する問題や遅いホストにはもううんざりですか

?

WordPressの問題や遅いホストにうんざりしていませんか?私たちは、WordPressの専門家が24時間365日対応する世界クラスのサポートと、超高速サーバーを提供します。 私たちのプランをチェックしてください

Mozilla によると、Open Sans フォントをメールに追加する場合、次のコード スニペットを使用します:

@font-face{font-family:"Open Sans";src:url("/fonts/OpenSans-Regular-webfont.woff2")format("woff2"),url("/fonts/OpenSans-Regular-webfont.woff")format("woff");}

代替 Web フォントの選択

慎重に選んだ Web フォントが常に機能してほしいとは思いますが、そうであるとは限りません。 サーバー エラーまたはシステムの互換性のためであれ、選択したフォールバック オプションを偶然のままにしないことは良い考えです。

上記で言及した同じコード スニペットを使用して、フォールバック フォント オプションを含むように変更することができます。 ただ、ライセンス要件がある場合は注意が必要です。

  • Google Fonts。 これは、現在、Web フォントを見つけるのに最も人気のある場所の 1 つで、いつでもどこでも使用できるフォントのオープン ソース ライブラリを提供します。 現在、1,020 のフォント ファミリーを備えています。
  • Fonts.com: これは、デスクトップからウェブフォントまで、あらゆる種類のフォントのためのもうひとつの素晴らしいリソースです。 これは実際には Monotype のストアであり、150,000 以上のフォントを閲覧し、おそらく購入することができます。
  • Typography.com: これは H&Co のストア フロントで、ウェブや印刷で使用できる 1,500 種類の書体を含む鋳造所です。
  • Font Squirrel。 すべて無料のセレクションを探しているなら、Font Squirrel がぴったりかもしれません。 このサイトでは、商業目的で使用できるフリーフォントのみを掲載しています
  • Adobe Fonts: 以前は Typekit として知られていた Adobe Fonts には、Creative Cloud のサブスクリプションで利用可能な、数千ものフォントが含まれています
  • Fontspring: Fontspring にリストされている Web フォントは購入する必要がありますが、サブスクリプションなしで利用でき、通常、利便性を高めるために無制限のライセンスが含まれています。 これは Monotype が所有する別のベンチャー企業で、印刷と Web の両方に関する大量のフォントのリストがあります
  • Village。 これは、実際には、フォントを独立して販売するために団結したいくつかの鋳造所の集合体です。 これは、2 人のタイプ デザイナーによって 2002 年に設立された小規模なビジネスで、彼らが作ったフォントを一般に販売しています
  • FontShop:

高品質で読みやすい Web フォント

何かインスピレーションが必要な場合、以下はすべて読みやすい Web フォントの例であり、上記の方法を使用してメールに追加することが可能です。

Open Sans

Open SansOpen Sans は非常に読みやすいサンセリフ フォントで、画面上で読むのに理想的です。 Steve Mattesonによってデザインされ、オープンなフォームが特徴です。

Roboto

RobotoRoboto は、画面上で美しく見える、もうひとつの高品質の Web フォントです。 幾何学的なデザインとオープンなカーブで、魅力的な二律背反を生み出しており、まさに効果的です。 Each letter maintains a natural width, resisting the typical rigidity of grotesk fonts.

Raleway

Raleway

Or, you could opt for Raleway, another sans serif font that offers thinner lines and a more elegant appeal. The typeface family was originally designed by Matt McInerney, then expanded later by Pablo Impallari and Rodrigo Fuenzalida.

Century Gothic

century gothic

Century Gothic

Century Gothic is a web font that offers a classic look. And it makes sense that this is the case since it’s actually a modernized version of older fonts from the 1920s and 30s. It has broad support across browsers and is readable on screens.

Proxima Nova

proxima nova

Proxima Nova

Proxima Nova is another web font option that is actually a re-envisioned version of the Proxima Sans font, which was first created in 1994. The font is slightly geometric but natural as well and would make for an excellent selection for your email copy.

Quasimoda

quasimoda

Quasimoda

Quasimoda is a stylish web font that’s easy on the eyes and universal in its appeal. It was created by Lettersoup, a type foundry based in Berlin, Germany that was started by Botio Nikoltchev in 2014.

PT Sans Pro

pt sans pro

PT Sans Pro

PT Sans Pro might be just what you’re looking for in a web font. It offers rounded letterforms and a natural look. It was designed by Paratype, a digital font company that got its start in the 1980s.

Brandon Grotesque

brandon grotesque

Brandon Grotesque

The Brandon Grotesque web font was created by HVD Fonts.

Sofia Pro

sofia pro

Sofia Pro

Sofia Pro は 2008 年に Mostardesign がデザインしたサンセリフ体のフォントです。 丸みを帯びた形状を含みながら、モダンな印象を与えます。

Museo Sans

Museo Sans

Museo Sans

最後に、Museo Sans があり、人気の Museo フォントをより新しくしたものです。 幾何学的なサンセリフのデザインが特徴で、見出しとコピーテキストの両方に使用できます。 読みやすく、多目的に使えるので、メールの仕事にも使えます。

メールでの画像とテキストの使い分けについての注意

ポスターなどの画像や、きれいなフォントで書かれたテキストのスクリーンショットを埋め込むと、メール セーフ フォントの問題を回避することができます。 しかし、メール内の画像は常に表示されるとは限らず、画面によっては正しく表示されないこともあるため、これには独自の問題があります。

メールに画像を使用する際は、重要な情報を伝えるためではなく、メッセージの内容を向上させるためにのみ使用するよう、注意してください。

少なくとも、画像のテキストをプレーンテキストで含める必要があります。

テキストベースの例外で、テキストを画像として使用することが適切だと考えられるのは、会社名やブランド名がすでに決まっているロゴだけです。

面白いことに、ほとんどの人はメールを読むのに11秒しかかけません。 ⏱その貴重な時間を読みにくいフォントで無駄にしないようにしましょう!🙅♀️このガイドでメールセーフのフォントオプションをチェックして、より多くのリードを獲得しましょう!クリック to Tweet

概要

見込み客や顧客にメールメッセージを送るときは、どのフォントでも良いというわけではありません。 実際、良いフォントを選ばないと、コンバージョン率に大きな影響を与える可能性があります。

この記事では、世の中にある主なフォントの種類と、それらがもたらす心理的な影響について確認しました。 ほとんどの電子メール クライアントがサポートしているフォントの例を紹介しました。

うまくいけば、電子メールの安全なフォントの影響について、より良い考えを持つことができるでしょう。

この記事を楽しんでいただけたなら、Kinsta の WordPress ホスティング プラットフォームを気に入っていただけると思います。 あなたのウェブサイトをターボチャージし、当社のベテランWordPressチームから24時間365日サポートを受けることができます。 当社のGoogle Cloudを利用したインフラは、自動スケーリング、パフォーマンス、およびセキュリティに重点を置いています。 Kinstaの違いをお見せしましょう。 当社のプランをチェックする

div

コメントを残す

メールアドレスが公開されることはありません。