MacとWindowsで、文字の見え方が違う理由 | フォントを学ぶ

① まず結論

MacとWindowsでは、最初から入っている標準フォントが違い、さらに「文字を画面に描く仕組み（描画エンジン）」も違います。だから同じCSSを書いても、文字の太さ・行間・改行位置が少し変わります。完全に同じには絶対になりません。

② たとえ話

楽譜と楽器の関係に置き換えると分かりやすいです。

HTML/CSSは「楽譜」。MacとWindowsは「楽器」。同じ楽譜でも、ピアノで弾くかオルガンで弾くかで音色が変わるのと同じで、同じCSSでもOSによって表示される音色（見え方）が変わります。

これは「どちらかが間違っている」のではなく、楽器が違うから当然そうなる、という話です。実装ミスを疑う前に、まずOS差の可能性を頭の片隅に置いておくと、無駄なバグ探しが減ります。

実装ミスより先に、OS差を疑う。

③ 図解で見る

MacとWindowsで何が違うかを並べたもの。

ChromeやFirefoxなどブラウザごとの差も加わるので、完全一致は前提にしないのが安全です。

④ よくある失敗

MacのヒラギノとWindowsの游ゴシックでは、同じ文字数でも字幅がわずかに違うため、改行位置がズレます。「カンプ通りに実装してください」と無条件で言うのではなく、Windowsで2行になる前提のレイアウトを考えておきます。

Windowsにはヒラギノが入っていないので、システムのフォールバックフォントで表示されます。クロスプラットフォームで揃えたいなら、Webフォントを使うか、両OSのフォントを順番に並べたフォントスタックを書きます。

1pxの太さや行間のズレは、OSとブラウザの描画の違いから来ることが多いです。ピクセル単位で完全一致を求めるのではなく、「ある程度の差は許容する」基準をチーム内で決めておくと、無駄な手戻りが減ります。

⑤ 実務ではこう判断する

ブランドの主役見出しや、ロゴまわりの文字は、Webフォント（Google FontsやWOFF2のself-host）で同じフォントを両OSに送ると、ほぼ揃えられます。

本文まで完全に揃える必要はないので、Mac用とWindows用のフォントを順番に並べたCSSを書きます。例：font-family: 'Hiragino Sans', 'Yu Gothic UI', sans-serif;

Macで作ったらWindowsでもざっと見る、Windowsで作ったらMacでも見る。これだけで「実装後に初めて気づく差」がぐっと減ります。

⑥ 用語メモ

⑦ 学習後のチェック

情報を、まっすぐ届ける。

清潔で中立。企業サイト、UI、長文本文まで安定して使える日本語ゴシックの基準線です。

ゴシック / OFL

品よくなじむ。

Noto Sans JPより表情を足したいときに扱いやすい、モダンで柔らかいゴシックです。

UD・公共 / OFL

読みやすさは、信頼になる。

教育、公共、業務画面、FAQなど、情報伝達の失敗を減らしたい場面に向くUD書体です。