（2016年7月26日：フォロー記事を書きました。「Windowsで游ゴシックが汚いのは、結局誰が悪いのか？」）
（2016年7月11日追記：Windows8.1においても細字ではなく標準が使用されているのではないかというご指摘を受けて、若干表記を修正しました）
（2016年6月29日追記：Twitterでご指摘を受けて、Windows8.1と10での違いを追記しました）
（2017年3月27日追記：当サイトでの使用CSSについて追記しました）
（2020年9月13日追記：当サイトでの使用フォントについて追記しました）
タイトルが旬を外していて、しかもちょっと釣り気味で申し訳ありません・・・
OS X MavericksとWindows 8.1に共通のフォント「游ゴシック」・「游明朝」が搭載され、CSSのfont-familyに「游ゴシック」を指定すれば、Webデザイナーの長年の悲願であった「MacとWindowsで同じ見た目にする」ということが可能になりました。
しかし実際に指定してみると、Macでは綺麗なのに、Windowsでは文字がかすれたように見えて非常に読みづらくなってしまいます。
これについて「やっぱりWindowsはMacに比べて表示が汚い」とか言われてWindows使いの私はガッカリしていたのですが、実は違うところに原因があったんです。
Macに搭載されている游ゴシックは「ミディアム」「ボールド」なのに対し、Windowsに搭載されているのは「細字」「標準」「中」「太字」（「中」は、Windows10から搭載）。
そのため、font-familyで「游ゴシック」と指定すると、Macでは「ミディアム」で表示されて綺麗なのに、Windowsでは「細字」で表示されるためにかすれてしまうんです。
（追記）これに関しては、ブラウザがchromeだと他のブラウザに比べて細く見える傾向があるので、「標準」なのに「細字」のように見えているのではないかというご指摘をいただいています。
ちなみに、私がこのサイトで使用しているCSSでのフォント指定は下記のようになっています。
（この投稿を行った当時の設定です。現在はfontplusのWebフォントを指定しています）
body {
font-family: "Hiragino Maru Gothic W4 JIS2004", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 500;
}この “font-weight: 500;” という指定が肝で、この数値を指定してやると、Macでは「ミディアム」、Windows10では「中（ミディアム）」が使用されます。
これで、Windowsでも読みやすく表示されます。
（追記）ただし、Windows8.1では「標準」が使用されるので改善されません。
なお、Bootstrapを使用していると、リード文に使うクラスなどで、わざと細いウェイトが指定されていることがあるので、後から追記して変更したりする必要があります。
こちらは、Windows8.1でも効果があります。
.lead {
font-weight: 300;
}
.jumbotron p {
font-weight: 200;
}Windowsで游ゴシックの表示がかすれてしまうのは、勉強不足のWebデザイナーのせいでもあるんです。
よく調べもせずに、Windowsのせいばかりにしないでくださいね。
（公開当初は「Windowsは悪くない、Webデザイナーが悪い」と書いていましたが、皆さんの意見を聞いて、若干表現を変えました）
追記
「Windowsのせいにしないで」って書きましたが、
- 「デフォルトがLightなのはどうかと思う」
- 「W3Cの仕様では、font-weight:400; が normal だからWindowsの仕様のほうが悪いのでは」
というご意見もいただいています。
うーん、やっぱり、Windowsが悪いのかもしれませんね・・・
（他にも、ご意見お待ちしています）
追起 その2
たくさんのご意見をいただいた中で、「Windows10だと "font-weight: normal;" で「游ゴシック 標準」が適用されるので、見づらいほど細くならない」という話があり、調べてみたところ確かにそのようでした。
下記の記事で、CSSの仕様から本記事について考察していただいているのですが、仕様上、"font-weight: normal;" では「游ゴシック 標準」がマッチするはずなのに、なぜかマッチせずに、より細い「游ゴシック 細字」が適用されるという現象になり、これはやっぱりWindowsが悪いということでいいんじゃないかということです。
Windows で游ゴシックが細字になってしまう件は誰が悪いのかについて CSS 仕様から考えてみる | WWW WATCH
Windows10になって、ひそかに問題が解決してしまっているのでしょうか？
もし事情に詳しい方がいらっしゃいましたら、教えていただけるとありがたいです。
追記 その３
何人かの方の検証記事で、Windows8.1でChromeを使用している場合、他のブラウザより文字が細く見えるので「標準」が使用されているのに「細字」が使用されていると誤認したのではないかというご指摘をいただいています。
となると、追記その２は、これが理由なのかもしれません。
私の意見としては、Windows8.1の場合はWindows10にアップグレードしない理由が見当たらないので、早くアップグレードしたほうがいいと思います。
追記 その４
フォロー記事を書きました。
この記事を書いた人
-
FAシステムメーカー、国内最大手印刷会社製版部、印刷・ウェブ制作会社を経て、家庭の事情で実家に帰省して独立
現在はフリーランスと制作会社シニアディレクターのマルチワーク
ウェブ制作のほぼ全般を見渡せるディレクター業務が主だが、デザイン・コーディングも好き
1997年ブログ開設
WordPressコミュニティには2011年から参加
WordCamp Kansai 2016 セッションスピーカー
WordCamp Tokyo 2023 パネルディスカッションパネラー
WordBench京都、WordBench神戸、WordPress Meetup八王子など登壇多数
最新の投稿
技術記事2025年6月15日ブロックテーマ時代のWordPress制作ワークフローとは
技術記事2025年3月7日WordPressに百千鳥フォントを入れて遊んでみました
ブログ2025年1月3日移転のお知らせ（2024年）
日記2024年12月24日2024年もベクトルさんの質問相談会に助けられました
ご質問・ご相談などありましたら
お気軽にお問い合わせください
資料請求・お問い合わせにはメールアドレスが必要です
川井 昌彦 へ返信する コメントをキャンセル