Web サイトで使用するフォントは、デザインを左右します。
しかし、オンラインで利用できる何千ものフリー フォントがあり、完璧な組み合わせを選ぶことは、経験のあるデザイナーであっても時間のかかる作業となります。
この記事では、Web サイトに簡単に追加できる、Google の最も美しいフォントの組み合わせを紹介します。
注意: フォントの選択は主観的なので、当社のデザイン チームは、読みやすさ、デザインの柔軟性および全体の美学に基づいてトップ フォントを厳選しました。
Classic Font Pairings
/web/google-font-pairing-playfair-display-source-sans-pro-gb75d.png)
/web/google-font-pairing-playfair-display-alice-v30a4.png)
/web/google-font-pairing-quattrocento-quattrocento-ne687.png)
/web/google-font-pairing-quattrocento-fanwood-text-w83f1.png)
/web/google-font-pairing-oswald-quattrocento-q0b4d.png)
/web/google-font-pairing-fjalla-one-libre-baskerville-f926b.png)
/web/google-font-pairing-lustria-lato-9cd0c.png)
/web/google-font-pairing-cormorant-garamond-proza-libre-g72fd.png)
/web/google-font-pairing-oswald-eb-garamond-oa2b5.png)
/web/google-font-pairing-libre-baskerville-source-sans-pro-pacdb.png)
Elegant Fonts
/web/google-font-pairing-cinzel-fauna-one-c89ff.png)
/web/google-font-pairing-sacramento-alice-jd4bd.png)
を追加しました。
/web/google-font-pairing-yeseva-one-josefin-sans-j580e.png)
/web/google-font-pairing-libre-baskerville-montserrat-u2019.png)
/web/google-font-pairing-cardo-josefin-sans-u9b6b.png)
/web/google-font-pairing-lora-roboto-af70d.png)
/web/google-font-pairing-spectral-karla-k0aa8.png)
/web/google-font-pairing-halant-nunito-sans-kea57.png)
/web/google-font-pairing-karla-karla-e464d.png)
/web/google-font-pairing-lora-merriweather-e3a94.png)
モダンフォント
/web/google-font-pairing-roboto-nunito-bd1c5.png)
/web/google-font-pairing-quicksand-quicksand-w464d.png)
/web/google-font-pairing-ubuntu-bold-open-sans-i8306.png)
/web/google-font-pairing-montserrat-hind-ffa16.png)
/web/Screen_Shot_2020-03-06_at_4.07.55_PM-e4f07.png)
/web/google-font-pairing-oswald-merriweather-rd2a2.png)
/web/google-font-pairing-montserrat-cardo-mb91d.png)
を使用。
/web/google-font-pairing-montserrat-crimson-text-hde18.png)
/web/google-font-pairing-open-sans-open-sans-condensed-420dc.png)
/web/google-font-pairing-nunito-nunito-wd204.png)
Creative Fonts
/web/google-font-pairing-arvo-lato-se577.png)
/web/google-font-pairing-abril-fatface-poppins-cafa1.png)
/web/google-font-pairing-playfair-display-italic-source-sans-pro-gf4f6.png)
/web/google-font-pairing-karla-inconsolata-92cac.png)
を使用。
/web/google-font-pairing-ultra-slabo-27px-l05c9.png)
/web/google-font-pairings-nixie-one-ledger-qa325.png)
/web/google-font-pairings-stint-ultra-expanded-pontano-sans-mf934.png)
/web/google-font-pairing-amatic-sc-andika-nc434.png)
/web/google-font-pairings-unica-one-crimson-text-p1bde.png)
/web/google-font-pairing-philosopher-muli-j4080.png)
Minimal Fonts
/web/google-font-pairing-source-sans-pro-source-serif-pro-u8e3d.png)
/web/google-font-pairing-fjalla-one-cantarell-v82f2.png)
/web/google-font-pairing-work-sans-open-sans-g4a2d.png)
/web/google-font-pairing-hind-open-sans-q13eb.png)
/web/google-font-pairing-nunito-open-sans-qcd61.png)
/web/google-font-pairing-oxygen-source-sans-pro-fb4fc.png)
/web/google-font-pairing-pt-sans-cabin-hbd86.png)
/web/google-font-pairing-roboto-condensed-cabin-l1037.png)
/web/google-font-pairing-raleway-open-sans-c0d00.png)
/web/google-font-pairing-roboto-lora-k939e.png)
Summary
上で共有したフォントの組み合わせと配色が、あなたの次の Web サイト プロジェクトのインスピレーションになることを願っています。 追加のオプションを作成するには、PageCloud Editor を使用して、ブランドに最適なものが見つかるまで、フォントや色を自由に組み合わせます。
You may also like: PageCloud でプロフェッショナルな Web サイトを簡単に構築する方法
。