個人的に好きなGoogle Fontsの組み合わせ
utsusemi
カスタマイズに役立つ情報を
ブログに書くことにしました
普段、調べ物やノートまとめはnotionを使っているのですが、皆さんに共有したらテンプレートのカスタマイズやサイト制作の参考になるかも？と思うことは、ブログ記事にしておこうかな〜と、思い立ちました。
リニューアル前は、結局ブログは更新情報だけで全然書けてなかったので💦
今後はたまにでも書けたらいいなと思います。
今回はフォントについてです。
空蝉のテンプレートでは、游ゴシック、游明朝以外は、基本的にGoogleフォントを使っています。
でもGoogleフォントってありすぎますよね・・・
私も当然全部は見れてませんが、気に入っているもの、使いやすいものをまとめておこうかと思います。
というのも、テンプレートのCSSで、今後はフォントの指定は変数にしようと思っているので、セットを共有しておけば、代入して着せ替え的にカスタマイズしやすくなるかなあと考えたからです。
実は今までは、テンプレートを作成するときは、入れ子で記述したくてSassを使っていました。
Sassでは変数で色やフォントは一括指定していたのですが、配布するCSSでの編集への配慮はしておらず・・・（自己中）
ですが、少し前からCSSでも入れ子での記述が可能になったので、Sassは使わずCSSで記述して、色やフォントも変数で指定していくし、どうせならメモとして公開しておけば参考になるかなあ、と。
そんな感じで、Tipsというほどでもないですが、自分でも使えるメモ程度にまとめておこうかなと思った次第です。
テイスト別の組み合わせ
独断と偏見で欧文フォントと日本語フォントをあわせていきます・・・！
完全に私の好みです。
シンプル
幾何学的でお洒落な欧文フォントと、可愛い系ゴシック体で、個人的にすごく好きな組み合わせ。
OutfitとJostはよく似ていますが、ちょっと違うので、使う文字が好みのほうで。
LINE Seed JPは最近Googleフォントに追加されましたが、Noto Sansはちょっと固いし、Zen角ゴシックは繊細すぎる、游ゴシックはウェイトの調整が難しい、という場合にちょうど良さそう。めっちゃ好きかもしれない。日本語フォントなのにアルファベットと数字がオシャレなのが良い。
テンプレートでのフォント指定の例
/* フォント設定 */
:root {
--font-base: "LINE Seed JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
--font-title: "outfit", "LINE Seed JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
}
上記と似てますが、もう少しモダンな雰囲気のセット。
Josefin SansがOutfitやJostよりさらに図形的なので、Noto Sansを合わせたほうが落ち着いてて合うかなと思いました。さわらびゴシックもよいかもしれない。
テンプレートでのフォント指定の例
/* フォント設定 */
:root {
--font-base: "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
--font-title: "Josefin Sans", "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
}
オーソドックスでまじめな感じの欧文フォントなので、すっきり落ち着いたさわらびゴシックが、固すぎず可愛すぎずで合いそうです。
テンプレートでのフォント指定の例
/* フォント設定 */
:root {
--font-base: "Sawarabi Gothic", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
--font-title: "Montserrat", "Sawarabi Gothic", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
}
クール
スリムでかっこよすぎるOswald。線が細くてかっこいいZEN角ゴシックを合わせると、めっちゃかっこいい・・・！Oswaldが細いので、大ぶりの日本語フォントより、小ぶりなフォントのほうが合いそうです。
テンプレートでのフォント指定の例
/* フォント設定 */
:root {
--font-base: "Zen Kaku Gothic New", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
--font-title: "Oswald", "Zen Kaku Gothic New", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
}
かわいい
可愛くて大好きなQuicksand。かわいい×かわいいでいくなら、LINE Seedかな。
もう少し落ち着いた感じにするなら、さわらびゴシックがよさそうかなと思います。
テンプレートでのフォント指定の例
/* フォント設定 */
:root {
--font-base: "LINE Seed JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
--font-title: "Quicksand", "LINE Seed JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
}
個性的で使うのが難しいけど、これもすごく好きな欧文フォント。ウェイト細めで小ぶりで使うほうが好きなので、かわいいけど線細めのIBM Plex Sans JPか、きれいめな感じならZEN角ゴシックかなと思いました。
テンプレートでのフォント指定の例
/* フォント設定 */
:root {
--font-base: "IBM Plex Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
--font-title: "Montserrat Alternates", "IBM Plex Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
}
きれい
正統派！なセリフ体の欧文フォントなので、同様にきれいな明朝体を合わせました。
しっぽり明朝と悩んだけど、正統派どうしな感じでNoto Serif。明朝体ならなんでもいけそうだけど・・・
ゴシック体なら、きれいめのZEN角ゴシックかZEN丸ゴシックかなと思います。
テンプレートでのフォント指定の例
/* フォント設定 */
:root {
--font-base: "Noto Serif JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
--font-title: "EB Garamond", "Noto Serif JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
}
上記より、がっしりしっかりのセリフ体と明朝体の組み合わせ。ゴシック体ならIBM Plex Sans JPが好きだなと思いました。
テンプレートでのフォント指定の例
/* フォント設定 */
:root {
--font-base: "Zen Old Mincho", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
--font-title: "Libre Baskerville", "Zen Old Mincho", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
}
おわりに
これらは、すごーくシンプルなサイトに入れて考えたので、サイトデザインのテイストによっても違うし、あくまで私の好みの組み合わせです。
ここで使っていないフォントでも、好きなものもあります。
ひな明朝とか、ZEN丸ゴシックとかは、和風のデザインに使えそう。
あと筆記体も今回は載せていないですし、たぶんまた追加します。
フォントと色を変えるだけで、デザインの印象が本当に変わるので、そういう着せ替えができるようなテンプレートを今後、作っていきたいなと考えています。
