OSごとに文字の描画方式が違う
WindowsとMacでは、文字を画面に描くときの方式が異なります。輪郭をピクセルに合わせて整える度合いや、色のにじみで滑らかさを出す処理の傾向が違うため、同じフォント・同じサイズでも見え方に差が生まれます。
一般にMacは輪郭をやや太めに、にじませて表示する傾向があり、Windowsはくっきりと細めに見えることが多いとされています。これはCSSの問題ではなくOSの設計差なので、どちらかに完全に合わせることはできません。
前提として「ピクセル単位で同一にはならない」と理解しておくと、無理な調整に時間を使わずに済みます。
font-weightの解釈差に注意
同じfont-weightでも、フォントファミリーやOSの太さの再現方法によって印象が変わります。可変フォントや複数ウェイトを持つフォントでは、利用環境によって近い太さに丸められることもあります。
システムフォントに頼ると、WindowsとMacで実際に使われる書体が変わり、太さ以前に字形が異なります。見え方をそろえたいなら、両OSで共通して利用できるWebフォントを指定して、書体そのものを固定するのが有効です。
症状別チェック表
WindowsとMacで文字の太さ・見え方が違うは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。
確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。
- 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
- 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
- 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
- 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する
差を埋めるための工夫
完全一致は難しくても、差を目立たせない工夫はできます。極端に細いウェイトは環境差が出やすいため、本文には中間の太さを選ぶと安定します。文字サイズに対して行間を十分に取ると、にじみの差も気になりにくくなります。
CSSにはアンチエイリアスの挙動に影響する指定もありますが、効果は限定的で副作用もあります。まずはWebフォントの採用と無理のないウェイト選びで土台をそろえるのが現実的です。
見え方をそろえる手順
次の順で進めると差を抑えやすくなります。
- 両OSで共通して使えるWebフォントを指定し書体を固定する
- 本文には極端でない中間ウェイトを選ぶ
- 行間や字間に余裕を持たせてにじみの差を目立たせない
- 実際にWindowsとMacの両方で表示を確認する
- 完全一致を目指さず、許容範囲を関係者で合意する
確認用URLで両OSの見え方を比較する
文字の見え方の差は、両方のOSで実機表示を並べて初めて判断できます。スクリーンショットのやり取りだけでは、相手の環境での実際の太さや滲みが伝わりにくいことがあります。
ギガサイト便にHTMLをドロップすると共有URLが発行され、WindowsとMacそれぞれの担当者が同じページを自分の環境で確認できます。フォント指定を変えた版を同じURLのまま差し替えれば、調整前後の見え方を両OSで同時に比べやすくなります。
よくある質問
同じCSSなのにWindowsとMacで文字の太さが違います。
OSごとに文字の描画方式とアンチエイリアスの傾向が違うためで、CSSの不具合ではありません。ピクセル単位で同一にはできないので、差を目立たせない設計を目指すのが現実的です。
見え方を完全に一致させられますか。
OSの設計差に由来するため完全一致は困難です。共通のWebフォントで書体を固定し、無理のないウェイトを選ぶことで差を小さくできます。
システムフォント指定だと環境で印象が変わります。
システムフォントはOSごとに実際の書体が変わるため字形から異なります。両OSで利用できるWebフォントを指定すると、書体そのものをそろえられます。
両OSでの見え方を効率よく確認したいです。
同じページのURLを共有し、WindowsとMacそれぞれの担当者が自分の環境で確認すると差が把握できます。修正版を同一URLで差し替えれば調整前後を比較しやすくなります。
原因が分からないときはどこから確認すべきですか？
まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。