Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
102
Help us understand the problem. What is going on with this article?
@aktuehr

Webフォントを使う時はbold時のfont-weightを読み込んだ上で扱う

More than 1 year has passed since last update.

はじめに

Webフォントは無償のものもあり、気軽に利用できる環境になっています。中でもGoogle Fontsを利用している人も多いのではないでしょうか。私もよく使わせてもらっています。

今年、 コーディングしたものの、デザインと見比べると、boldの太さが異なるといったという事があり、Webフォントを使う時の注意点の1つを残しておこうと思います。

以下では Google FontsM PLUS 1p を利用する想定の例を挙げながら説明します。(キャプチャはMacのChrome 78.0.3904.108(Official Build) (64 ビット)で表示したものになります)

import時に単一のfont-familyで利用する時の問題

Google Fontsのページを参照して、 M PLUS 1p を利用して選択すると、

@import 'https://fonts.googleapis.com/css?family=M+PLUS+1p&display=swap&subset=japanese';

というようなURLになるよ、と教えてもらえます。

ただ、これで bold を指定しようとすると以下のように、表示されます。

スクリーンショット 2019-12-07 15.27.38.png

font-weight600 以降の数値と、 bold のときに、気持ち太くなっているのに気づくでしょうか。

この太さですが、 400 より少し太いくらいなのですが、 500 よりは細いため、これはブラウザ側でよしなに解釈して bold の太さはこれくらいでしょうと、太くしてくれているようです。

これで問題なければ良いのですが、ブラウザに依存する形になるため、ブラウザのバージョンアップなどで太さが変わってしまうといった事があるかもしれません。

import時にfont-familyにサイズを指定して利用して、太字をきちんと表示する

意図通りの太さの bold にするためには、Webフォントのimport時に bold にあたる font-family も指定する必要があります。

font-weightbold は、数値では 700 にあたります。
https://developer.mozilla.org/ja/docs/Web/CSS/font-weight

また、通常時のフォントサイズは regular ですが、数値では 400 にあたります。

それぞれWebフォントに、 400700 の太さが用意されている事を確認し、その2つのfont-familyを含むようにimportします。

Google Fontsの場合は以下のようになります。

@import 'https://fonts.googleapis.com/css?family=M+PLUS+1p:400,700&display=swap&subset=japanese';

上記のようにしてimportしたところ、以下のように、 bold の値が何も指定しなかった時より太くなりました。
スクリーンショット 2019-12-07 16.30.40.png

ちなみに、Chromeでは 600 以上の数値を入力した場合は 700 で表示されるようになっています。

boldの太さを700ではなくしたい場合

先ほど、 font-weightbold は、数値上では 700 と同じと紹介しましたが、デザイン上の都合などで、「このプロジェクトでは bold はもう少し細い/太いフォントが良い」というケースが出てくることもあります。

その場合は、CSSのカスタムプロパティ (変数)やSCSSの変数などで、 bold の値を定義して使用すると毎回悩みません。

@import 'https://fonts.googleapis.com/css?family=M+PLUS+1p:400,900&display=swap&subset=japanese';

:root {
  --this-site-bold: 900;
}

.element {
  font-weight: var(--this-site-bold);
}

余談

全部のfont-familyを使える状況にするとこんな感じになります。

スクリーンショット 2019-12-07 16.38.00.png

bold700 となっている事が確認できますね。

さいごに

Webフォントは、ダウンロードを必要とするためページの表示速度に影響します。全てのweightfont-familyを存在させる事は稀ですが、通常(regular)と、太字(bold)だけは代表として、400,700(もしくは、フォントが指定する regularboldの数値)をimportしておくのが良いと思います。

また、デザイナーさんが別でいらっしゃる場合は、意図した太さになっているかの確認を一度取るのが良いでしょう。細かいところですが、全体の印象に関わるので大事な事だと思います。

102
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
aktuehr
フロントエンドエンジニア/WACA認定上級ウェブ解析士
yumemi
みんなが知ってるあのサービス、実はゆめみが作ってます。スマホアプリ/Webサービスの企画・UX/UI設計、開発運用。Swift, Kotlin, PHP, Vue.js, React.js, Node.js, AWS等エンジニア・クリエイターの会社です。Twitterで情報配信中https://twitter.com/yumemiinc

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
102
Help us understand the problem. What is going on with this article?