フォントで色気を出してみる

フューチャー・デザイン・コンソーシアム代表の岡本です。今回はフォントの話をしたいと思います。サンプルページを作った後にすべきことを期待されている方がいるかもしれませんが、書いていてあまり楽しくはないので、楽しそうな話題を優先します。

ウェブサイトのフォント問題も実は厄介です。ここでグダグダ書く前にChatGPTに次のように言って、基本の考え方を聞いてください。

ウェブサイトのフォントはどうすればいい？

間違いなくその中で紹介されるであろうGoogle Fontsをここでも推奨したいと思います。Google Fontsはすべてオープンソースで、費用はかからず、商用目的で使用でき、どのロゴにも使用できるという神フォントです。詳しくはGoogle Fontsのよくある質問のページをご確認ください。

一般的な設定だとOS標準のゴシック体を使うことになると思いますが、それだとあまりに花がないです。色々と制約の多かった時代ならまだしも、いまやフォントもオンラインで（しかもフォントによっては無料で）利用できる時代です。フォントを変えるだけで、かなり凝った印象を演出できたり、OSによらず文字化けせず安定した表示を提供できたりします。せっかくなので、いま作ろうとしているウェブサイトの母体組織に見合ったフォントを、ぜひGoogle Fontsから選んでみてください。

とは言え、よくわからない人もいるかもしれないので、そんな方は次のようにしておけば良いでしょう。今やウェブ界隈の万能標準フォントとなったと言っても過言ではないNotoフォント（Noto Sans JP）を使う設定です。ただ、あまりに使われすぎているため、色気はありません。

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;700&display=swap');

body {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  line-height: 1.8;
  font-weight: 400;
}

h1, h2, h3 {
  font-weight: 700;
}

詳しく知りたければ、ChatGPTに次のように聞いてみてください。

ウェブページにNoto Sans JPを使いたい。HTMLには何も追加せず、CSSの中だけで Noto Sans JP を適用したい。

独自路線を追求したい人は、ぜひイメージを膨らませ、近いものをGoogle Fontsから選んでください。その際、フォントウェイトが複数あるものがおすすめです。複数あると、見出しや強調と地の文をわけることができます。

コンソーシアムのサイトでは、あまり堅苦しい雰囲気にしたくなかったため、丸ゴシック風にしたいと最初から思っていました。それでChatGPTに相談して候補のフォントをいくつか挙げてもらい、それを手がかりにしてGoogle Fontsで確認し、M PLUS Rounded 1cフォントを選びました。CSSは次の通りです（フォントの共通設定に関係する部分のみの抜粋で、これが地の文に反映されます。）。

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@100;300;400;500;700;800;900&display=swap');

body {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-weight: 400;
    text-align: center;
    font-size: 16px;
    word-spacing: 0.5em;
}

地の文はこれでいいのですが、大見出し（h2）はもっと大きく、太くしたかったので、次のようにしました。

h2 {
    font-size: 2.4rem;
    font-weight: 900;
    margin: 2.4rem 0;
    padding: 0;
}

開発の初期段階では、このままフォントサイズのみ大きくして、ページのタイトルであるh1を設定していました。しかし、それだと「普通の文書」感が抜けずイマイチだったので、次のようにウィンドウサイズに応じてフォントサイズが変わるようにし、さらに縦に1.8倍に伸ばすことにしました（他の細かな設定については、ChatGPTに聞いて説明してもらってください）。

@media screen and (min-width: 1200px) { h1 { font-size: 3.5rem; } }
@media screen and (max-width: 1199px) and (min-width: 1100px) { h1 { font-size: 3.2rem; } }
@media screen and (max-width: 1099px) and (min-width: 1000px) { h1 { font-size: 2.9rem; } }
@media screen and (max-width: 999px) and (min-width: 900px) { h1 { font-size: 2.6rem; } }
@media screen and (max-width: 899px) and (min-width: 800px) { h1 { font-size: 2.3rem; } }
@media screen and (max-width: 799px) and (min-width: 700px) { h1 { font-size: 2rem; } }
@media screen and (max-width: 699px) and (min-width: 600px) { h1 { font-size: 1.7rem; } }
@media screen and (max-width: 599px) { h1 { font-size: 1.4rem; } }

h1 {
    font-weight: 900;
    margin: 5rem auto 3rem;
    letter-spacing: -0.1em;
    white-space: nowrap;
    text-align: center;
    width: auto;
    transform: scaleY(1.8);
    display: inline-block;
}

これでしばらくは満足していたのですが、ウィンドウサイズによってはタイトルの左右のスペースが詰まったり、意図せず改行されたりすることがあって、イマイチだと思っていました。ウィンドウの横幅を基準にフォントサイズを変えられないものかと、ChatGPTに相談したり、自分で考えたりして、最終的には次のようにしました。ここでは@mediaを使ってフォントサイズを変えておらず、ウィンドウの横幅を基準にして変えています。こちらも詳細が知りたければ、ChatGPTに「font-size: clamp(1.4rem, calc(80vw / 20), 3.5rem);の意味を教えて」と聞いてください。

h1 {
    font-weight: 900;
    font-size: clamp(1.4rem, calc(80vw / 20), 3.5rem);
    letter-spacing: -0.1em;
    transform: scaleY(1.8);
    display: inline-block;
    line-height: 1;
    margin: 0 0.5ch 0 0;
}

これでタイトルまで含め、フォントの設定は一応できました。ここからさらにロゴタイプをデザインし、タイトルの左（スマホだと上）に置くことになりますが、ロゴタイプの話はまた次の機会に。