フォントを比較する

右側の検索パネルから、比べたいGoogleフォントやシステムフォントを追加します。フォントはそれぞれカードに表示されるので、並べて比べられます。自分の文章を入力すれば、各書体でどう表示されるかをリアルタイムで確認できます。

本文ならInter、Roboto、Open Sans、Poppins、見出しならPlayfair Display、Merriweather、Loraがよく使われます。日本語なら、Noto Sans JP、Noto Serif JP、M PLUS 1p、Zen Maru Gothicなどを名前で入力して追加できます。実際の文章で並べて比べ、プロジェクトにいちばん合うものを見つけましょう。

フォント同士が対照的でありながら競合しないとき、よい組み合わせになります。たとえば、セリフ体の見出しとサンセリフ体の本文（Playfair Display + Source Sans 3、Lora + Open Sans）、幾何学的なサンセリフ体の見出しと読みやすいセリフ体の本文（Montserrat + Merriweather）、同じファミリーの2書体（Roboto Slab + Roboto）などです。ツールを「組み合わせ」表示に切り替え、見出し用と本文用のフォント、または定番の組み合わせを選び、見出し・小見出し・段落のある実際のページで確認してください。

試せます。ページ上部のプレビュー欄に好きな文章を入力すると、すべてのフォントのカードにすぐ反映されます。見出し、段落、ブランド名など、実際の内容が各書体でどう見えるかを正確に確認できます。

セリフ体（Georgia、Merriweather、Loraなど）は、文字の端に小さな飾り（セリフ）があり、クラシックで信頼感のある印象を与えます。日本語なら明朝体にあたります。サンセリフ体（Inter、Roboto、Open Sansなど）は飾りのないすっきりした線で、モダンでミニマルな印象です。日本語ならゴシック体にあたります。このツールで両方を並べて比べてみましょう。

制限はありません。必要なだけGoogleフォントやシステムフォントを追加できます。グリッドのレイアウトは自動で調整されるので、2つでも5つでも10個以上でも、ひと目で比べられます。

できます。各フォントのカードには、サイズ、大文字、斜体、太さの設定があります。太さはそのフォントに実際にあるものだけを表示するので、見たとおりの仕上がりをCSSで再現できます。上部の全体用ツールバーですべてのフォントを一度に変えてから、カードごとに微調整することもできます。

はい、無料で、利用制限もアカウント登録もありません。フォントの表示はブラウザ内で行われ、外部への通信はGoogle Fontsからフォントファイルを読み込むときだけです。

「組み合わせ」表示で「CSSをコピー」を押すと、選んだウェイトだけを含むGoogle Fontsの@importが1つと、本文用フォントを指定したbodyのルール、見出し用フォントを指定したh1〜h6のルールが得られます。それぞれに代替フォント（serifまたはsans-serif）と行の高さが付いています。スタイルシートの先頭に貼り付けるか、@importのURLをHTMLのhead内のlinkタグに移してください。