メールデザインのタイポグラフィ

電子メールニュースレターのデザインの開発では、多くの専門家がタイポグラフィに十分な注意を払っていません。 それにも関わらず、電子メールは設計上の決定のための環境として多少制限されていますが、タイポグラフィは電子メールをより良くすることができます。

本日は、権威あるリソースSmashingMagazineのページに最初に掲載された、アメリカの代理店の共同設立者でありディレクターであるAnna Yeamanによる研究の適応翻訳をご紹介します。



昨年、私はJan Constantinの投稿である Trends and Modern Typographic Design Methodsを読み、すぐに同様の仕事をすることに決めましたが、メーリングリストに関してです。 当時、私はレスポンシブWebタイポグラフィを勉強していました。 気に入ったサイトのグループを選び出し、タイポグラフィの秘密を理解しようと試みました。それにより、後でメールマガジンのデザインの開発に新しい知識を適用できるようになりました。

Konstantinの仕事に精通した後、他のメールマーケティングデザイナーがどのようにアダプティブタイポグラフィを使用したかを理解したいと思いました。 その結果、さまざまな分野からメーリングリストの50の例を収集しました。私の意見では、高品質のタイポグラフィが選択され、共通点があるかどうかを確認することにしました。 Googleスプレッドシートでこの作業のソースデータと結果を確認できます。

方法論

すべての電子メールの約50％がモバイルデバイスから開かれているという事実を考慮すると、調査のために選択されたすべての文字は適応性があり、メインテキストとヘッダーの1列で構成されていました。 画面の幅に応じて、大（PC）、中（450ピクセル）、小（320ピクセル）の3種類のデバイスに関する統計を収集しました。



各メールの概要が記載されたGoogleスプレッドシート

50文字のサンプルが統計的に有意である可能性は低いことを知っていました。 多くの一般的な傾向を特定したかっただけです。 記事の平均値は数学的な期待を意味します。 最も一般的な値は、最も頻繁に発生する値です。 また、いくつかのケースでは、中央値の概念を使用しています。 作品で検討されたすべての手紙は、2014年11月から2015年1月の間に送信されました。 私の仕事では、WhatFont、Charcounter、WebPagetestなどのツールを使用しました。



WhatFontアプリケーションの3種類のデバイスでのレターの表示方法

何が面白かった

コンスタンチンとほとんど同じ質問に答えましたが、いくつかの例外がありました。 合計で約90の結論が出され、この投稿では主な結論のみが考慮されました。

• ヘッダーとボディにセリフとサンセリフのヘッドセットはどれくらい人気がありますか？
• どのタイプのヘッドセットが最も頻繁に使用されますか？
• 文字の本文で最もよく見られるフォントサイズは何ですか？また、PCからモバイルデバイスに切り替えると、この頻度は変わりますか？
• 各タイプの画面の1行あたりの平均文字数は？
• PCのレターで最も一般的な線幅はどれくらいですか？
• 文字の本文の行の高さとフォントサイズの平均比はどのくらいですか？
• 文字の本文の行の高さと長さの平均的な関係は何ですか？
• ヘッダーとボディは同じ色を使用していますか？
• 背景に最もよく使用される色は何ですか？
• 画面のタイプに応じて、ヘッダーのテキストと文字の本文はどのように整列されますか？
• 見出しで最もよく使用されるフォントサイズは何ですか？
• リンクは見出しに添付されますか？
• 電子メールのサブタイトルのテキストのサイズと色はどのくらいですか？このテキストはモバイルデバイスに表示されますか？
• 手紙の平均負荷はどれくらいですか？
• Webフォントは写真と比べてどれくらいの重量がありますか？

セリフとサンセリフのフォント

• 見出しで使用されているフォントの74％はサンセリフ体でした。
• 手紙の本文で使用されているフォントの64％はサンセリフでした。
• 見出しで最も人気のあるsans-serifフォントはHelvetica（16％）とArial（14％）です。
• 見出しで最も人気のあるセリフフォントは、ジョージア（14％）とメリウェザー（4％）です。
• 文字の本文で最も人気のあるサンセリフフォントは、HelveticaまたはNeue Helvetica（20％）、Arial（10％）です。
• レターの本文で最も人気のあるセリフフォントは、ジョージア（24％）、メリウェザー、タイムズ（それぞれ4％）です。
• セリフフォントは、ヘッダーよりもレターの本文で10％多く使用されていました。
• 手紙の本文には、5つの異なるセリフフォントと15の異なるサンセリフフォントしか見つかりませんでした。
• ヘッダーには24種類のフォントがあり、そのうち16種類が一度見つかりました。
• 手紙の本文には20種類のフォントがあり、そのうち11種類が一度見つかりました。
• Times New Romanは人気がありませんでした。どの見出しでも使用されていませんでした。

Helveticaはヘッドラインで最も人気のあるフォントになり、たとえばOffscreenやTGDの郵送など、ケースの16％で使用されました。 ジョージアは、たとえば、 ポーター氏とニューヨークタイムズの郵送のように、手紙の本文（24％）で最も頻繁に使用されました。 Googleフォントスイートの2つのヘッドセット、MerriweatherとOpen Sansは、 iOS Dev WeeklyとInVisionのニュースレターで見ることができ、人気を集めています。



ヘッダーとボディで最も人気のあるヘッドセット

Konstantinは、セリフフォントがWebサイトのメインテキストで非常に頻繁に使用されるようになったと指摘しています（61.5％）。 私たちの研究では、文字の場合、この数字は36％であることが示されました。 おそらく彼の作品では、セリフフォントがより一般的なニュースサイトをさらに研究しました。 また、メインコンテンツは通常ランディングページにあるため、ニュースレターに多くのテキストが含まれることはめったにありません。 興味深い例は、メッセージのヘッダーと本文の両方でGoogle FontsのLora serifフォントを使用する Craig Mod Webサイトです。 ほとんどの場合、セリフフォントとサンセリフフォントが一緒に使用されます。例は、 MailChimpメーリングリストの古典的なHelveticaとジョージアの組み合わせです。



36％のケースでは、セリフフォントがメッセージ本文で使用され、64％で-サンセリフフォント

ヘッドセットを選択するには、「ヘッドセットの組み合わせ」のマニュアルと「クールなフォントの組み合わせ」の記事を読むことをお勧めします 。 さらに、Paul Airy は 、電子メールニュースレターでフォントを組み合わせる方法について書いています。 また、文字にWebフォントが含まれていないと思われる場合は、 間違いです。

ボディレター

ButterickのPractical Topography Webサイトでは、「どのプロジェクトでも、最初に行うべきことは、本文を美しくデザインし、それ以外は気にしないことです」と書いています。 また、多くのタイポグラフィの記事は、常に本文のデザインから始めるべきだと言っています。 最も重要なことは、デバイスの画面の幅を考慮して、フォントサイズ、フォーマットまたは行の長さと行の高さの比率を観察することです。

フォントサイズ

• 最も一般的な（44％）PCフォントサイズは16ピクセルです。
• PCのフォントサイズの中央値も16ピクセル（平均値-15.7ピクセル）です。
• PCから開くレターの本文では、フォントサイズは13から20ピクセルまで変化しました。
• モバイルデバイスで最も一般的な（38％）フォントサイズは16ピクセルです。
• モバイルデバイスのフォントサイズの中央値も16ピクセル（平均値-15.58ピクセル）です。
• モバイルデバイスから開くレターの本文では、フォントサイズは13から20ピクセルまで変化しました。
• 72％のケースでは、PCからモバイルデバイスに切り替えたときに、フォントサイズは変更されませんでした。
• 残りの28％のケースでは、PCからモバイルデバイスに切り替えると、テキストは増加（36％）よりも減少（64％）することがよくありました。

フォントサイズを選択する際の重要な要素は、[リーダーから]デバイス画面までの距離です。 PCの画面は手の届くところにあるため、ヘルベチカのRobocatからの20ピクセルの電子メール（右の写真）は、14ピクセルのMuli（左の写真）を含むパタゴニアの電子メールよりも読みやすくなっています。 iAは、iPad上で読む場合、iPadを自分から少し離しておくため、iPadで読む場合、iPhoneよりも大きいフォントを使用することをWriterアプリケーションで記述しています。



離れた場所では、20ピクセル（右側）のテキストは14ピクセル（左側）のテキストよりも知覚されやすい

行フォーマット

フォントの割合を考慮するときに忘れてはならないもう1つの要素は、行形式 、つまり文字の本文の幅です。 文字列の形式は、ピクセルまたは文字列の文字数で測定されます。通常、メール開発者はサイズを処理しません。 Robert Bringhurst（Robert Bringhurst） は 、45から75文字、理想的には66文字（スペースを含む）の、PCに適合した単一列のテキスト列から使用することを推奨します。

• 600ピクセル-PCで最も一般的な筆記体の幅（範囲-480〜760ピクセル、平均値-623ピクセル）。
• 540ピクセル-PCの平均列幅。
• PCの平均テキスト行は78.5文字です。
• 450ピクセルの幅のテキスト行は、平均53.86文字です。
• 320ピクセルの幅のテキスト行は、平均39.02文字です。
• モバイルデバイスの文字列形式は22〜57文字です。
• 76％の場合、この範囲は36〜46文字に狭まります。

540ピクセルの平均ラインフォーマットで16ピクセルのジョージアフォントを少し試しました。 これらのパラメーターを使用すると、行の文字数は70を少し超えますが、75が最大であることを考えると、それほど悪くはありません。 ただし、理想的には、文字数を66に減らし、行幅を480ピクセルの範囲に抑える方が良いでしょう。



Robert Bringhurstは、理想的には66文字の1行に45〜75文字を配置することをお勧めします。 出典：実用的なタイポグラフィ

Konstantinの計算によると、平均83.9文字がWebページの1行に配置されています。 私たちの研究では、文字の本文行に平均78.5文字が含まれています。 モバイルデバイスで電子メールを表示する場合、平均文字数は39に減少します。Typecastは、通常のスマートフォンで電子メールを表示するときに35〜40文字の範囲に固定することをお勧めします。 私たちの調査の結果によると、手紙の48％がこの範囲に分類されました。

PCに適合したレターテンプレートで最も一般的な（53％）行形式は、600ピクセル幅のオプションでした。 一般的に、画面の幅は480から760ピクセルまで変化しました。 列を広くしたい場合は、最適な文字数になるまでフォントサイズを大きくするだけです。 トレントウォルトン（トレントウォルトン） は独自のソリューションを提供します 。45文字と75文字の2つのマークに記号「*」を付ける必要があります。 したがって、ある時点で両方の星が同じ行に表示される場合、これはフォントを増やす必要があることを意味します。

行の高さ

以下は、行の高さに関する主な調査結果です。

• フォントサイズが16ピクセルの場合、最も一般的な行の高さは24ピクセルでした。
• テキストの「高さ」（総体積）に対する行の高さの平均比は1.51でした（コンスタンティンの場合-1.46）。
• 450ピクセルの線幅では、テキストの高さに対する行の高さの比率は1.49に減少します。
• 320ピクセルの線幅では、テキストの高さに対する行の高さの比率は1.45に減少します。
• この調査に参加した企業の22％は、モバイルデバイスに適合した電子メールの行の高さを削減しました。
• 52％は行の高さをピクセル単位で設定します。
• 24％は、行の高さをパーセンテージで設定します。
• 弦の長さと高さの比率は平均23.1（コンスタンチンの場合-24.9）。
• 段落間のインデントと行の高さの比率は、平均1.38（コンスタンティン-1.39の場合）です。

標準ルール：行の高さはフォントサイズの1.5倍にする必要があります。 つまり、フォントサイズが16ピクセルの場合、行の高さは24ピクセルになります。 この調査では、このルールが確認されています。フォントサイズに対する行の高さの比率は1.51でした。 線が長いほど、その高さは大きくなります。

ティムブラウンは、この高さの変化を「滑らか」または「流体」と呼びます。 ジェイソンサンタマリアは次のように説明します 。「視線が行末に達したら、行間のギャップを確認し、次の行がどこにあるかを理解する必要があります。迷子にならないように... 。 また、モバイルデバイスへの切り替え時にこの比率が低下することにも注意しました。1.51から1.45に低下しました。



NYT Cookingリストの行の高さは、PCの30ピクセルからスマートフォンの25ピクセルに削減されます（フォントサイズに対する行の高さの比率は1.6から1.5に削減されます）

メーリングリストのデザイナーの52％が行の高さをピクセル単位で設定しています。 一部の企業、たとえばSempliceは、レターのさまざまな要素の行の高さを変更します。 24％はパーセンテージで高さを設定します。 たとえば、 Lagomは150％の高さを設定します。 Oliver Reichenstein（Oliver Reichenstein） は 、140％-「悪いガイドではない」 と考えていますが、選択したヘッドセットに大きく依存しています。 ピクセルでは高さをパーセンテージで設定することをお勧めします。ピクセルでは適切な比率を選択するのが難しいためです。 ただし、多くの電子メールクライアントでサポートされているため、開発者はピクセルに慣れている可能性があります。

色

• ＃000000（黒）が最も一般的なテキストの色（20％）であり、その後に＃333333（トワイライトグレー）（16％）が続きます。
• 文字は28種類の灰色の濃淡を使用しましたが、そのほとんどは濃い灰色です。
• メーリングリストの作成者の56％は、メッセージのヘッダーと本文の両方で同じテキスト色を使用しました。
• 文字の本文の26％はタイトルよりも明るい灰色を使用し、4％-より暗い、14％は異なる色を使用しました。
• 72％が背景として#FFFFFF（白）を使用しました。
• 48％は文字の本文にリンクを挿入しませんでした。20％は異なる色のリンクを強調表示し、18％は強調表示および下線を付け、10％は強調のみを行い、4％は他のオプションを使用しました。
• ＃000000はメイン見出しの最も人気のある色（24％）であり、＃333333（16％）がそれに続きます。
• サブ見出しの40％はメイン見出しと色が異なっていました。たとえば、グレーの明るい色調で目立っていました。

タイトル（上）と文字の本文（下）のいくつかの色の組み合わせ

Oliver Reichenstein は次のように書いています 。「コントラストの高い画面では、メインテキストに濃い灰色を選択するか、白黒ではなく背景に明るい灰色を選択することをお勧めします。」



#FFFFFFは、文字の背景で最も人気のある（72％）色になりました

よりリッチなフォントを使用する場合、Jason Santa Mariaは、コンテンツの残りの部分が読み込まれないように、線の高さを増やすか、明るいトーンを選択することをお勧めします。 開発者は、さまざまなサイズのフォントの表示方法に応じて、さまざまなデバイスのテキストの色を調整することがあります。 Photoshopでは、フォントが配布に適しているかどうかを明確に判断することはできません。仮設プロトタイプ 、 Typecast、またはTypetesterを使用して、ブラウザーでその動作を調べる必要があります。

アライメント

• PCのメインタイトルの54％が中央に配置され、46％が左側にあります。
• モバイルデバイスのメインヘッドラインの54％は左揃えで、46％は中央揃えです。
• ニュースレターの作成者の74％はPCのメインテキストを左に揃え、残りの26％は中央に配置します。
• 76％はモバイルデバイスのメインテキストを左に揃え、残りの24％は中央に揃えます。

メインテキストが中央に配置されている場合、次の行の先頭を探す必要があるたびに読みにくくなる可能性があります。

ニュースレターをテストしたユーザーは、中央に配置されたテキストは読みにくいと常に言っていました。 「おそらく、多くのテキストがあるブロックは、読むのが少し難しいでしょう。 これは、テキストが中央に配置されているためだと思います」と、実験の参加者の1人がUserTestingに書いています。 モバイルデバイスの狭い画面についても同じことが言えます。 中央に揃えられた署名、短い文、見出しは通常認識されますが、段落に関しては、テキストを左揃えにする必要があります。 「中央揃えテキストへのオード」で述べたように、段落全体を中央揃えにすることはできません。

見出しの平均フォントサイズ

• 30ピクセルは、PC見出しで最も一般的な（18％）サイズです（30ピクセルも中央値サイズであり、平均サイズは31.6ピクセルです）。
• PCのヘッダーのフォントサイズは、24〜26ピクセルと28〜36ピクセルの2つのグループに分けられました。
• 見出しのフォントは、文字の本文のフォントの平均2倍の大きさでした（それぞれ31.6ピクセルと15.7ピクセル）。
• PCの見出しのフォントは、行の高さの平均1.2倍でした（この比率は0.65から1.8の範囲でした）。
• PCのメインタイトルの62％にリンクが添付されていませんでした。
• メーリングリストの作成者の68％は、PCから450ピクセルの文字幅形式に切り替えるときにヘッダーのフォントサイズを変更しませんでした。 フォントサイズを変更した人の87.5％がフォントサイズを縮小しました。
• 64％が、PCとモバイルデバイス（1スケール）のタイトルに同じフォントサイズを選択しました。
• モバイルデバイスでは、メインタイトルに30および32ピクセル（両方とも12％）のサイズが最もよく選択されました。
• モバイルデバイスのメインタイトルの平均フォントサイズ（320ピクセル）は28.48ピクセル（中央フォントサイズは26.5ピクセル）でした
• タイトルのフォントサイズと行の高さの比率は、モバイルデバイスで平均1.17でした。
• 見出しに大文字のみを使用しているのは14％のみです（原則として、これらは衣料品店でした）。
• 72％は字幕を使用しました。
• 字幕の平均フォントサイズは27.9ピクセルです（デスクトップ用）。

多くの電子メール開発者はh2、h3などのタグを使用しないため、WhatFontアプリケーションを使用してヘッダーの1番目と2番目に大きいフォントを修正しました。 PCのメインの見出しで最も一般的なフォントサイズは30ピクセルですが、Konstantinの場合、この数字はWeb全体で38ピクセルです。 おそらく、PCとモバイルデバイスの両方で読みやすくするために、より小さいフォントが選択されます。

64％は、すべてのタイプのデバイスのヘッダーで同じスケールを使用しました。 残りの36％について話すと、そのうち87.5％がモバイルデバイスの規模を縮小しました。 たとえば、 ポーター氏のメーリングリストでは、モバイルデバイスのフォントサイズが30ピクセルから25ピクセルに縮小されています。これは、PCのかさばるタイトルとは対照的に、スタイルをよりエレガントにする小さな変更です。



Mr PorterニュースレターのヘッダーのフォントサイズがPCの30ピクセルからモバイルデバイスの25ピクセルに減少

ヘッダーの正確なサイズに関するコンセンサスはありませんが、デスクトップバージョンでは、ヘッダーのフォントは平均してレターの本文のフォントの2倍でした。 比較のために、Typecast は h1の値がメインテキストのフォントの3倍であると書いていますが、インターネットではより大きな見出しを見つけることができます。 さまざまな比率で実験する場合は、 Modular Scaleサービスを使用してください。 さらに、標準の活版印刷スケールがあります。



ロバートブリングハーストの「タイポグラフィのスタイルの基礎」からのスケール。 画像：レチナート

視覚的に強調するためにフォントサイズを使用する代わりに、MarkoDugonjićはテキストのスタイルを変更することを提案します。たとえば、斜体、すべて大文字、大文字などです。 スモールキャップ]。 彼のデモを見てください（「スタイルを変更したハイライト」セクション）。 このアプローチは、大きな見出しのスペースが少ないモバイルデバイスで特に役立ちます。 別のオプションは、狭いフォントに切り替えることです。 見出しは、デザイナーにとって創造的なプラットフォームです。 ここでは、文字の本文のテキストとは対照的に、フォントサイズと配置のオプションが増え、Webフォントを使用する機会が増えました。

見出しテキスト

見出しの下のエントリは、手紙の上部にあります。 これは、ユーザーがスマートフォンで通常表示する最初のテキストで、送信者の名前と件名とともに表示されます。 私の研究では、「オンラインで見る」などの教育碑文の概念と、より情報量が多く、手紙の主題を補完することが多い文章の一節を区別しています。 Litmusはこのレビューで詳細にこの問題に対処し、見出しの下にテキストを表示するアプリケーションの表を提供します。

• メーリングリストの作成者の66％は、PCの見出しの下にテキストを使用しています。
• 36％には指示のみが含まれ、33％には指示と手紙の文章が含まれ、30％には文章のみが含まれます。
• PCの見出しの下で最も一般的なテキストサイズは11ピクセル（33％）、12ピクセル（18％）、10ピクセル（12％）です（平均値は12.3ピクセルです）。
• 見出しの下のテキストのフォントサイズは9〜18ピクセルです。
• メインテキストのサイズに対する見出しの下のテキストサイズの比率は平均0.78です。
• PC上の行の高さに対する見出しの下のテキストサイズの比率は平均1.11でした。
• 76％がヘッドセットサンセリフの下のテキストで使用されています。
• 最も人気のあるサンセリフフォントはArialで、セリフフォントはジョージア州でした。
• 見出しの下のテキストでは、22の異なる色が使用されました。最も人気のある色は-＃000000、次に＃999999です。
• 82％がモバイルデバイスの見出しの下にあるテキストをサポートし、18％がそれを隠しました。
• モバイルデバイスの見出しの下で最も一般的なテキストサイズは、11ピクセル（40％）、16ピクセル（22％）、14ピクセル（18％）（平均フォントサイズ-12.9ピクセル）です。
• モバイルデバイスの見出しの下にあるテキストのフォントサイズは、8〜16ピクセルの範囲でした。
• 71％がモバイルデバイスに切り替えたときにサイズを維持し、22％がフォントを増やし、7％を減らしました。
• 見出しの下のテキストのサイズとモバイルデバイスのメインテキストのサイズの比率は平均0.85です。

見出しの下のテキストは、送信者の名前と件名とともに表示されます

性能

• 文字の最初の要素を表示するのにかかった時間は平均0.94秒でした。
• レターの全読み込み時間は平均2.64秒でした。
• HTTPリクエストの総数は平均24です。
• 画像のリクエスト数は平均13.7、つまりリクエストの総数の57％です。
• 完全にロードされた電子メールの平均重量は711 KBです。
• 手紙の画像の平均は568 KBです。
• 画像は手紙の総量の79.8％を占めました。
• 画像サイズは9 KBから4.4 MBの範囲で、そのうち50％は200 KB以上でした。
• Webフォントの平均は69.7 KB（メール全体の9.5％）。
• 30％がWebフォントを使用しました（最も人気があったのはOpen Sans、次にMerriweather）。

Webフォントによってパフォーマンスがどのように低下​​するかについてよく耳にしましたが、当初は研究にパフォーマンスを含めました。 上位20個のGoogleフォントのリストを見ると、フォントごとの平均サイズが28 KB（WOFF形式）であることがわかります。 調査参加者の大半がそれぞれ3つのフォントを使用したことを考慮すると、量は収束します（ダウンロードしたフォントの平均ボリュームは69.7 KBでした）。 - , 9,8% . , 79,8% .

(Guy Podjarny) , . , – Litmus. , .



< 79,8% ( 568 )



, H&M 4,095 , .. -

おわりに

, iA, Fray, Medium Pelican Books «» , email-. , ?

, - , , . , , .



, - ,

, : , 16 24 , . , «» . Google- , , .

, , . , . , . , , .

• 74% , 64% ;
• – 15,7 , – 15,58 ;
• 623 ;
• , , – 78,5, 450 – 53,86;
• , , 22 57 ;
• 1,51 1,45 (320 );
• 23,1;
• 76% ;
• : 24 26 28 36 ;
• (320 ) 28,48 ;
• 12,3 , – 12,9 ;
• (31,6 15,7 );
• 0,78 , – 0,85;
• 文字の最初の要素をロードする平均時間は0.94秒でした。
• HTTPリクエストの総数は平均24です。