15 eコマースウェブサイトに最適なフォントの組み合わせ

9 min read

科学者たちはあなたが持っていると主張しています 10-20 秒ユーザーを捕まえるために’ 不明な部分のためにサイトを離れる前に注意を払う. だからあなたは本当にそれを最初に作りたいのですか 10 秒数カウント (冗談ではありません).

サイトのヘッダー領域のテキストは重要な情報源です. あなたが言うこと明らかに重要です, しかし、考慮することも重要です どうやって あなたはそれを言います.

タイポグラフィーはウェブサイトの声です. 適切なタイポグラフィーを選択することは、メッセージを伝えるのに役立つだけではありません, しかし、トーンに影響を与え、ブランドをより認識しやすくする力もあります。. だからこそ終わりがあるのです 300,000 世界中のフォントから選べる, 古典的なものから…そうですね, クレイジー.

カナダ人アーティスト、ジェニー・シッパーのフォントはフェデリコ・フェリーニの映画への賛歌です

非常に多くのオプションがあるので、, 自分に合ったスタイルを見つけるのは難しいかもしれません, 特にフォントがどのように連携するのかわからない場合は. この投稿では, 変換効果のあるヘッダーメッセージのデザインに役立つ、お気に入りのフォントの組み合わせをいくつか紹介します。.

以下のすべての例は、ストアを迅速に立ち上げて販売するための無料で効率的な e コマースサイトビルダーである Ecwid インスタントサイトで利用可能なデザインツールを使用して作成されました。. インスタントサイトのデザインオプションの詳細については、こちらをご覧ください。, また無料でお申し込み頂けます実際の動作を見るには.

Ecwid インスタントサイトエディターでフォントを変更する方法:

に行きます Webサイト Ecwid コントロールパネルのタブをクリックし、「編集」をクリックします。;」
「見出し」を選択します & カバー;」
ストアの見出しと説明を入力します. カバーのレイアウトを選択し、必要に応じてその位置と配置を変更します。. ここから, 必要に応じて、背景や行動喚起ボタンを変更することもできます;
下にスクロールして「タイポグラフィ」を選択します;」
フォントファミリーの選択, 色, 見出しと説明のサイズ;
完了したら、忘れずに「保存」ボタンを押してください.

スパイラックス + オープンサンズコンデンスド

スパイラックスのオリジナルの曲線は、ヘッドラインに洗練された風変わりな外観を与え、Open Sans Condensed のオープンでニュートラルな形式とよく合います。. 手作りのジュエリーなど、ユニークなデザインのものを販売する場合は、この組み合わせがうまくいくかもしれません。.

フォントペア

メリウェザー + オズワルド

Merriweather は、文字の形がわずかに凝縮されており、画面上で読むのが楽しいです, 頑丈なセリフ, そしてフォームを開く. オズワルドと完全に一致しています, 19 世紀後半から 20 世紀初頭の古典的なゴシック様式とグロテスクなスタイルにインスピレーションを得たフォント. この組み合わせは、時計や革製アクセサリーなどの高級オーダーメイド製品を販売する店に適している可能性があります。.

eコマースWebサイトのフォントの組み合わせ

アブリル・ファットフェイス + キャビン

アブリルファットフェイスの細いセリフと丸みを帯びた曲線は、見出しにエレガントでありながら遊び心のある外観を与えます, キャビンのモダニズムタッチとよく調和しています. 文具製品や書籍を販売する場合は、これらのフォントをお試しください.

フォントペアリング eコマース

モントセラト + メリウェザー

モントセラトは 20 世紀前半の都市タイポグラフィーに基づいています, Merriweather のわずかに凝縮された文字形によって補完されています。. この組み合わせはバッグやスニーカーの店でよく売られています.

無料のフォントの組み合わせ

オーバーロック + ヌニート

オーバーロックの丸みを帯びたグリフ形状により、雑誌スタイルのレイアウトで素晴らしいタイトルや短いテキストを作成できます. このフォントは大きいサイズで最もよく見えます, Nunitoのバランスのとれた丸みを帯びたフォルムを引き立てます. 洋服を売るなら, これらのフォントは素晴らしい選択です.

フォントをペアリングする方法

プレイフェアの展示 + ソースサンズプロ

Playfair Display のクラシックなスタイルは、Source Sans Pro と組み合わせるとさらに際立ちます。, ユーザーインターフェイスでうまく機能するように作成されました. このタイムレスな組み合わせは、女性用美容製品の専門店やドレスショップによく合います。.

最適なフォントの組み合わせ

アレグレヤ + ラト

アレグレヤのダイナミックで変化に富んだリズムがページに新鮮さを与えます, Latoの半丸みを帯びたディテールと強力な構造を際立たせる. ランジェリーやその他のエレガントなアクセサリーを販売している場合は、これらのフォントをよく見てください。.

Googleフォントペア

ロックパテ + ラト

Rokkitt は、見出しや見出しの表示フォントとして使用するために設計されました。. 半円形のサンセリフ Lato と組み合わせて、目立つ外観を作成します。. あなたのストアが高級スポーツウェアやスタイリッシュなテクノロジーに重点を置いている場合は、この組み合わせに注意してください。.

オンラインストア用のフォント

流砂 + 次の新しい

幾何学的形状は Quicksand の中核となる基盤です, Proxima Nova のモダンな感性と組み合わせて、レイアウトをすっきりさせましょう。, 新鮮なタッチ. おもちゃやベビーカーを売るなら, これらのフォントはあなたにとってうまく機能するかもしれません.

オンラインストア用のフォントペア

酸素 + メイブンプロ

Oxygen はすべてのグラフィカルユーザーインターフェイスで適切に機能します, デスクトップ, とデバイス, 特に Maven Pro の読みやすさと組み合わせると. ウェブサイトでアイウェアやフィットネスアクセサリーを販売している場合は、この組み合わせをチェックしてください。.

フォントの組み合わせ

ダンススクリプト + ラト

活発でカジュアルな Dancing Script は、ページにフレンドリーでカジュアルな雰囲気を与えます, ラトーの古典的なプロポーションと洗練されたサンセリフの美学を強調. ギフトショップやポストカードショップはこのセットの恩恵を受けることができます.

廊下でペアを作る

シグニカ + 用量

The gentle character of Signika works great for headlines, while Dosis makes supplemental texts fairly easy to read. This pairing works for a wide range of stores, from electronics to flowers.

google font pairings

Reenie Beanie + Muli

Reenie Beanie is based on basic ball-point pen handwriting, providing a playful look, which is complemented by the structured minimalism of the Muli font. Try this mix if you sell something like sketchbooks or you’d like a more laid-back tone for your brand.

font pairing

Questrial + Muli

San serif Muli は完璧な本文フォントを作成します, 控えめな美しさにより、さまざまな見出しフォントとよく合います: モダンなスタイルと全円曲線を備えた Questrial のような. このセットはストリートウェアの頼りになるバリエーションになる可能性があります.

フォントペア

バークシャー・スワッシュ + 次の新しい

バークシャー・スウォッシュは大胆かつ優しい雰囲気を持っています, これは鮮やかな見出しとなり、Proxima Nova のシンプルな要素との驚くべきバランスをもたらします。, モダンなプロポーションと幾何学的な外観. 手作りの化粧品やデザートにこのミックスが役立ちます.

pairing fonts together

Basics of Font Pairings

Didn’t find what you’re looking for in our list? If you’re feeling creative, try playing with fonts in the free Instant Site editor and find your own beautiful font combination.

Here are some basic guidelines to follow:

Create a contrast between your fonts (大胆な & cursive, TALL & short)
Combine serif and san-serif fonts (like Libre Baskerville + シグニカ).
Don’t use two similar fonts (例えば, two cursives) for both your headline and body text. Creating variety will draw the eye and help your customer engage with each section individually.
Make the font match your brand. Playful handwritten letters probably aren’t the best fit for a premium jewelry brand.
Limit yourself to 2-3 fonts to avoid making your content appear cluttered.