CSS : "font-family" 2021年版 - メモ

＜2021年版＞ CSS Font-Family "角ゴシ"

シンプルかつ持続可能なコーディング編

今回は 2021年に記述すべき CSS フォント・ファミリー・プロパティ（サンセリフ＝ゴシック体の場合）について解説したい。

ゴシック体の CSS フォント・ファミリーは、以下のように記述すると良いだろう。

body {font-family:"Helvetica Neue",Helvetica,Arial,"Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif}

このスタイルを適用した場合、ブラウザ上では以下のように表示される。画像を張り付けている訳では無いため、閲覧環境や利用可能なフォントによって見え方が異なるはずだ。

あいうえお
ABCDEFGHIJK
abcdefghijk
1234567890

私が手掛けるいくつかのサイトでは、この基本のフォント・ファミリーに加えて Google Fonts の Open Sans（英語）をケースバイケースで加えている（下記コード参照）。

h1 {font-family:"Open Sans",sans-serif}

ベース（body など）に使用する font-family プロパティの指定は、Web 標準の策定やトレンド、閲覧デバイスやブラウザの多様化などによって年々移り変わるが、前述の "Helvetica Neue", Helvetica, Arial, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; を記述しておけば、ある程度長いスパンは持続可能なコーディングになるだろう。

投稿日：2021年2月4日

Author：對川 徹 -　Toru Tsugawa（https://tsugawa.tv/）

Contact : https://tsugawa.biz/contact/