Zenn
✏️

デザイナーとフロントエンドエンジニアに知ってほしいWebのフォント周りのお話

2020/10/18に公開
2件
CSS
HTML
デザイン
webフォント
tech

こんにちは。TAK(@tak_dcxi)です。

今回記事にするのはタイトル通り「デザイナーとフロントエンドエンジニアに知ってほしいWebのフォント周り」についてです。以前ツイートしましたが、特に説明もなかったので自分の備忘録も兼ねて。

Androidに明朝体は無い

Apple製品しか利用しないデザイナーの方に話したら非常に驚かれるのですが、Androidにはデフォルトで明朝体は入っていないです。

よく明朝体マシマシのデザインを見かけたりするのですが、デバイスフォントだけではAndroidでそのデザインを実現することは不可能だと思っておいたほうが良いでしょう。

ただ、明朝体のWebフォントを利用すればAndroidでも明朝体は表示できるので、デザイン的に明朝体が必須って場合はWebフォントを利用しない手は無いと思います。

個人的見解ですが、デザイン重視なら明朝体はGoogle FontsでNoto Serif CJKを利用するのが一番だと思います。Androidを意識しない場合でもそうです。

  • 游明朝はWindowsだとかすれて読みにくくなる可能性（後述）
  • だからといって他のWindowsのデバイス明朝体はダサい
  • Internet Explorer(笑)でline-heightがズレるバグが起こらない

もちろん、日本語のWebフォントは重く、キャッシュの効かない初回アクセス時には不利であることは間違いないでしょう。デザインとパフォーマンス、どちらを優先するかは案件や環境とご相談ください。

■参考記事：
Webにおいて明朝体はNoto Serif CJKを使うべし -IE11対応版

Windowsにはヒラギノフォントは無い

これもApple製品しか利用しないデザイナーの方に話したら非常に驚かれるのですが、Windowsにはデフォルトでヒラギノフォントは入っていないです。購入すれば利用できますが、高額です。

ヒラギノフォントでデザインを作る場合、Windowsでは代替としてどのフォントで表示するかを実装者に伝えましょう。個人的にはWindowsではなんだかんだ「メイリオ」を一番おすすめしています。（理由は後述）

ヒラギノに似たフォントでないとダメ！って場合は「Noto Sans JP」か後ほど説明する「Yaku Han JP」がいいかなと。ただ、これもWebフォントの利用が必須です。

游ゴシックはWindowsでは汚く見える可能性がある

游ゴシックはWindowsやMacで利用できる非常に美しいフォントですが、Windowsでは（特に非HiDPIモニターやGoogle Chromeでは）かえって汚く見える可能性があります。

スクリーンショット：Macで表示された游ゴシックの様子

スクリーンショット：Windowsで表示された游ゴシックの様子

Windowsのフォントレンダリングで余計な処理が掛かっているようで、このような仕様になってしまっているとのこと…。

■参考記事：
游ゴシックは何故Windowsでかすれて見えるのか - Ryusei’s Notes (a.k.a. M59のブログ)

游ゴシックを使い、この問題を解決したい場合は以下の2点が対策例として挙げられます。

  • font-familyに「游ゴシック Medium」を指定する
  • font-weightに500を指定する

対策1: font-familyに「游ゴシック Medium」を指定する

body {
  font-family:
    "游ゴシック体"
    YuGothic,
    "游ゴシック Medium",
    "Yu Gothic Medium",
    "游ゴシック",
    "Yu Gothic",
    sans-serif;
}

まず、前提としてWindowsでは"游ゴシック", "Yu Gothic"、Macでは"游ゴシック体, YuGothicが游ゴシックの名称となります。

上記の指定でMacでは「游ゴシック」が適用され、Windowsでは原則的に「游ゴシック Medium」、游ゴシック Mediumが効かない環境では「游ゴシック」が適応されます。（游ゴシックが無い場合はsans-serif→ブラウザにフォント指定を委ねることとなります）

メリット

後述する方法のようにfont-weightを弄らなくて済むため、他のフォントの太さの変動を恐れる心配がなくなります。

デメリット

「游ゴシック Medium」が掛かったフォントを太字化する（font-weight: boldなどを指定する）と無理やりMediumのフォントを太字化する関係で滲んだように表示されます。

もしも「游ゴシック Medium」が掛かったフォントを太字にしたい場合は、直接font-weightを指定するのではなく、一旦font-familyで「游ゴシック Medium」を解除して「游ゴシック」で指定しなおした上でfont-weightを指定するという処理を行いましょう。

strong {
  font-family:
    "游ゴシック体",
    YuGothic,
    "游ゴシック",
    "Yu Gothic",
    sans-serif;
  font-weight: bold;
}

対策2: font-weightに500を指定する

游ゴシックが指定されているテキストにfont-weight: 500を指定することで、ある程度太く表示することができます。

body {
  font-family:
    "游ゴシック体",
    YuGothic,
    "游ゴシック",
    "Yu Gothic",
    sans-serif;
  font-weight: 500;
}

スクリーンショット：font-weight:500を指定したWindowsでの游ゴシックの様子

メリット

font-familyに「游ゴシック Medium」を指定する方法とは違い、太字にしたい場合はfont-weightだけを弄ればOKです。

デメリット

游ゴシック以外に指定しているフォント（游ゴシックが無効化された環境で表示されるフォント）の太さを意識する必要があります。つまり、font-weight:500で太字にならないフォントをfont-familyで指定する必要があるということ。

基本的には問題はないですが、Windowsに金かけて入れたヒラギノはfont-weight:500で太字になるらしい？（Windows機にヒラギノ入れてないので未検証）

■参考記事：
游ゴシックのfont-family指定方法！@font-faceは絶対NG！WindowsのChromeでかすれる問題徹底検証 | WEMO

ちなみに、Internet Explorer(笑)では游フォント（ゴシックと明朝両方）を表示するとline-heightがズレるバグが発生します。IEとかコンテンツが読めれば十分だろ！って思ったりもしますが、クライアントのブラウザが実はIEだったというお話はこの業界の「あるある」なので、そういった場合にツッコまれる可能性はあります。 （こういった事情からも要件定義でクライアントのブラウザ確認と対応ブラウザの選定は必須）

IE対応案件では游フォントは利用しないほうが良いのでは？と思ったりします。

10px未満のテキストはGoogle Chromeで表示できない

よく10px未満のテキストを用いたデザインをお見かけすることがあるのですが、原則的にGoogle Chromeで10px未満のテキストは表示できません。

一応transformのscaleを利用すれば10px未満のテキストもGoogle Chromeで表示はできますが、10px未満のテキストって非常に読みにくくアクセシビリティ面は最悪ですし、何よりモニターによっては潰れて表示されることもあります。

10px未満のテキストを使ってデザインしている人は、どうしてそのテキストを10px未満で表示させたいのか理由づけて説明してください。また、実装者の方もデザインで10px未満のテキストが使われていたらデザイナーの方にその理由を聞きましょう。

10px未満のテキストに拘りましたが、個人的には12px未満のテキストは利用を控えたほうがいい気はします。

■参考記事：
ブラウザごとの最小フォントサイズ一覧 | ウェブラボ（株）スタッフブログ

文字組を妥協する勇気を持ちましょう

主にDTPからやってきたデザイナーの方に多いのですが、Webデザインでガチガチの文字組を行う方がいらっしゃいます。文字組してるorしてないでやっぱり見栄えは大きく変わりますし、そこに拘りたい気持ちは分かります。デザイナーとしての心意気は素晴らしいです。

幸いCSSで文字間隔調整やカーニング、行間調整は調整できます。コンポーネント毎の全体的な調整なら容易でしょう。

body {
  font-feature-settings: "palt"; /* カーニング */
  letter-spacing: 0.06em; /* 文字間隔調整 */
  line-hight: 1.75; /* 行間調整 */
}

ただし、ガチガチの文字組（文字の種類によって大きさを変えたり、文字の種類ごとに字間を調整するなど）をWebデザインでされると実装側が泣きます。できないと言えば嘘にはなりますが、一文字一文字spanで囲って一つずつ調整するという保守性の欠片もない実装を強いられることとなります。（ピクセルパーフェクトを求められる現場だと特に）

リリースしたら終わりのDTPとは違ってWebサイトはリリースしてからが始まりです。リリース後も定期的なコンテンツの改修が行われる場合、このようなやり方をされていると更新担当者の顔は青ざめます。WordPressなどクライアントが管理画面を経てコンテンツの更新を行う場合は絶望的でしょう。まだ画像化して実装したほうがマシです。

約物の空きが気になるという場合は約物半角専用のWebフォント「Yaku Han JP」を利用するのも手です。ただし、デザインはNoto Sansベースで作ることが必須となります。また、明朝体の約物半角専用のWebフォントは知る限りない…と思っていたら明朝体と丸ゴシックにも対応したようです（情報ありがとうございます！）

基本的には全体的な文字間隔調整や行間調整に留めておいて、他の細々とした文字組は実装者と要相談といったところでしょうか。個人的には、

  • バナーとか画像化するとこには文字組拘ろう
  • 画像化しないテキストは拘らないでほしい

というのが現在まで一貫した僕のWebデザインにおける文字組への思想です。

■参考記事：
文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング - ICS MEDIA
font-feature-settingsが効かない時の確認点 - Qiita

デバイスフォント以外はWebフォントとして使えるか確認必須

これもDTPからやってきたデザイナーの方に多いのですが、使用フォントに「モリサワ」とか「Futura」とかガンガン利用する方がいらっしゃいます。綺麗なフォントですから気持ちはわかります。

ただし、これらのフォントをWebサイトで使うには別途お金がかかります。誰がお金を払うのか？はサービスによって異なりますが、有名なAdobeフォントの場合はクライアント側がサブスクサービスを契約する必要があります。

つまり、デバイスにデフォルトでインストールされている以外のフォントを利用する際はそれがWebフォントとして利用できるか？有料フォントではないか？は確認しましょう。有料を使う場合は誰がお金を払うのか確認し、クライアント側がお金を出すようなら事前に承諾を得ましょう。至極当たり前の話ですが。

無料で使えるWebフォントでも商用利用不可もしくは商用利用するなら課金必須だったり、ライセンスの表記が必須だったりと制約がある可能性もあります。どのみちWebフォントのライセンスの確認は必須です。

基本的にはWebフォントはGoogle Fontsを利用するのがライセンスの心配が無くオススメです。ですから、デバイスフォント以外のものを使いたい場合はまずGoogle Fontsでそれが利用できるか確認すると良いかと。

個人的推奨・非推奨のfont-familyの設定

推奨・非推奨のfont-familyについて、個人的な見解は以下です。ICS MEDIA様の記事『2020年に最適なfont-familyの書き方』と内容はほぼ同じですが…。理由もこちらの記事にてしっかり説明されています。

推奨

/* ゴシック体 */
.sans-serif {
  font-family: "Helvetica Neue",
    "Segoe UI",
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
}

/* 明朝体 */
.serif {
  font-family: "Noto Serif JP", serif;
}

ゴシック体はICS MEDIA様の記事とほぼ同じ。（Arial→Segoe UIとしている程度）

明朝体については冒頭で触れたとおりAndroid対応のためにもWebフォントでNoto Serif CJKを利用。Yaku Han JPの明朝体でも良さそう。日本語のWebフォントなのでパフォーマンス面とはご相談。

游フォントは実質Windows用でありながら（個人的感想）、Windowsで汚く見える可能性があるので利用する機会は少ない。Windowsの日本語デバイスフォントはなんだかんだメイリオが一番安定しています。デザイナーやクライアントがメイリオが嫌だって場合は選択肢に入るとは思いますが。

非推奨

/* ゴシック体 */
.sans-serif {
  font-family: sans-serif;
}

/* 明朝体 */
.serif {
  font-family: serif;
}

sans-serifとserifはブラウザにフォント指定を委ねる指定で、実装側としては非常に楽ではあるのですが、ブラウザの仕様変更やバグに大きく影響を受ける指定方法でもあります。

例えばこの記事を書いた丁度1年前にAmazonをはじめとする多くのサイトがMacのGoogle Chromeで明朝体で表示されるというバグがありました。これはChromeの不具合によるもので、sans-serifに指定されていたヒラギノの指定が無効になってしまった故に起こった現象なのですね。

■参考記事：
macOS Catalina アップデート後 Chromeが明朝体フォントになった時の対処方法 - ものくろぼっくす

こういった現象はこの先も起こり得ないとは言えませんし、ブラウザの仕様もどんどん変わっていきます。総称フォント指定（sans-serifとserif）はこういった事情からあまりオススメできる指定方法ではありません。

また、新しい総称フォント指定のsystem-uiもWindowsでは游フォントで表示されるので、游フォントを除外したい場合は選択肢に入らないです。

まとめ

  • フォント周りはデザイナーと実装者でコミュニケーションを取る必要があるかもしれない
  • 游フォントの利用には待ったをかける選択肢を持ったほうがいいかもしれない
  • Webフォントのご利用は計画的に

Webデザイン向けのテキスト周りのお話は僕が過去に書いたnote「Webデザインガイドライン テキスト編」をお読みください。

Discussion

クラククラク

Yaku Han JPはアップデートで明朝体と丸ゴシックにも対応しました！👍

TAKTAK

キャッチアップできていませんでした。情報ありがとうございます！