フォントの設定をいじって視認性を上げる

iPhone使った後にPCでネットを見ると文字が見づらく感じない？

Windowsのフォントって、ホントに見づらいですよね～

・・・・・

というわけで、WindowsのブラウザでもiPhoneのようなフォント表示にできないか？という話。この手の情報はネット上に多く掲載されているので、先人に倣ってMicrosoft Edgeのフォント表示をカスタムしてみた。

「Noto Sans JP」をインストール

iOSのデフォルトフォントに似ていて、無料で使える人気のフォント。fonts.google.com

Edgeの設定変更

[設定]>[外観]>[フォントのカスタマイズ]
Noto Sans JPを指定、サイズを１つ上げて17と設定。

「Stylus」のインストールとCSSの記述

様々なデザインを変更できるアプリ。
chromewebstore.google.com

トグル式でオン・オフできるので、要素を個別に記述して効果を確認。

文字詰め（Noto Sans JPは文字幅が若干広めなので）

*{font-feature-settings: "palt";}

文字にほんのり影を付ける

*{text-shadow: 0 0 0.3px;}

文字に薄く縁取りを付ける

*{-webkit-text-stroke: 0.3px;}

効果を確認する

文字詰めのみは若干薄い感じ。影を付けるとかなり見やすくなるが、ほんの少しシャギって見える。縁取りはほんの少しボケて見える。影＋縁取りだと一番濃く表示されて見やすくなったが、ダークモードのページだと滲みが気になった。

まとめ

モニターの解像度など環境にもよると思うが、個人的には影を付けるだけでも十分綺麗かなと思う。

また、フォントの表示はWEBサイトで指定したものが優先されるため、ブラウザでの設定が反映されないページがある（ヤフーなど）。

これについてはStylusで
*{font-family: "Noto Sans JP" !important;}
と個別に記述して、必要に応じて強制的にフォントを変更できるようにしておいた。

最後に。

フォントを変えると気分も変わるね😃