Saitoユーザの閲覧環境にかかわらず同じ見た目で表示してくれて、しかも超絶カッコイイとあって、爆発的な勢いでウェブ界を席巻しつつあるGoogleフォント。今回の記事では、そのGoogleフォントの中でも特におすすめの40フォントを雰囲気・用途別に分類し、紹介していく。文章用Googleフォントの導入方法解説Googleフォントにアクセス使用したいフォントをコレクションに追加する選んだフォントの詳細情報を指定WebページにGoogleフォントを導入CSSファイルにコピペし、Googleフォントを実装!紹介の前にフォント選びの基準とコツ変わったフォントや特徴的なフォントが良いフォントなのではない。理想的なフォントというのは、悪目立ちせず、印象にも残らないのだけど、よくよく見てみるとその制作物の雰囲気にバッチリと合っているもの。奇抜なファッションよりもさりげなく似合う服が好感度を上げてくれるのと同じことだ。本当にかっこいいものは、さりげない。ユニークなフォントを選ぶときには、本当にそれでないといけないのかをよく考えないといけない。商業デザインでは当たり前のことだが、素人はつい忘れがちになってしまうので注意したい。本記事では、フォントをロゴ用と文章用に区別している。フォントがいくらかっこよくても、長文になったときに読みづらければ文章で使うのには向かない。そのため、可読性の低いフォントはロゴ用とした。ロゴ用はなるべくロゴやタイトルのみに使うことをおすすめする。逆に、文章用としたフォントをロゴやタイトルに使う分には全然問題ない。Googleフォントは重い?Webフォントは使い過ぎるとページの表示が遅くなると言われる。確かに、10個も20個も導入すれば重くなりうるが、2~3個の英文用フォントを導入する程度であればほとんど影響はない。選んだフォントがどれくらい重いかは、フォントを選び終わった段階で確認することができる。右側のスピードメーターのような画像が、フォントの重さを表している。ご覧のとおり、2個選んでも緑色の安全圏におさまっている。CJKといった、漢字・ひらがな・カタカナを含むフォントは非常に重いので、現時点では導入はお勧めしていない。万能フォント優れたフォントとは、シンプルさと読みやすさを極め、特徴を排したものだ。した何にでも使える万能フォントが以下の7つ。この中から選ぶことをオススメする。Sans定番のサンセリフ体。シンプルで読みやすい。Serifセリフ体なので、長文や印刷物用におすすめ。Lab.でも採用しているオススメのシンプルフォント。SansBitter読みやすく説得力があり、長文におすすめ。Baskervilleちょっとだけエレガント寄りのシンプルフォント。Text読みやすいのに心にグッとくる。TextSignika親しみやすく、それでいてしっかりしている。特徴のあるフォントが向いている。ロゴ用Candal親しみやすさを印象づけるために。CandalAbelシックに気取るなら。Webレトロゲームのような一周回ったオシャレさ。WebPlayレトロゲーム感その2。PlayMuli丸みのあるフォント。Oneちょうどいい主張の強さ。OneExoあえてぎこちなさを出す。Exo文章用Slabo読みやすく、長文におすすめ。SlaboDosis遊びのあるクールさ。DosisInconsolataちょっとプログラミングコードっぽいフォント。細めの字体のエレガントなフォントが向いている。One華奢、女性らしさ、高級感の演出に。Sansシックな女性っぽく。SansCinzel大文字しか無い、ロゴ専用文字。大文字で書いた文字はよく見ると微妙に大きく表示されている。Sctipt流れるような美しさ。Sctipt文章用Lora読みやすくかつエレガント。Display読みやすさとかっこよさの両立。DisplaySlabo読みやすく、長文におすすめ。Narrowちょっとした短文を入れたりするのにかっこいいフォント。ちが自然と上がるような、ポップなフォントが向いている。ロゴ用Montserrat丸みがあって、字がすでにおいしそう。Kaffeesatz違うタイプだけど、こちらもなんだかおいしそう。KaffeesatzLobsterポップかつカッコイイ。LobsterPacificoアメリカンを追求するなら。