みんなの文字®CSS調整

当HPでは、ユニバーサルデザインWEBフォント「みんなの文字®」を採用させていただいております。

あわせて読みたい

UDフォント「みんなの文字®」採用 NPO法人日本過眠症患者協会（過眠症患者会）では、Webページのフォントに、ユニバーサルデザインフォント「みんなの文字®」を採用しています。科学的検証を経て、第三者による「見やすい」「わかりやすい」と認証を受けたUDフォントを使用することで、幅広い年齢層のユーザーに向け、どなたにもより見やすい表示を心掛けています。

科学的根拠に基づき開発され、人の目でテストを重ねて検証された、最強の読みやすいフォント。…のはずなのですが、あれ？なんだか読みにくい…？ブラウザに表示される文字、特に横棒のウェイト（太さ）が一定ではなく、倍率によっては、フォントが崩れてみえるのです。解決策や同様の事例を探して検索した結果、このような記事を見つけました。

https://qiita.com/AumyF/items/af5faa689c6700e4ea3a

なるほど、ほんのちょっとだけ傾けるのか💡

ところで、公式サイトではどう対策しているんだろう？と思ってCSSを覗いてみたところ、

<link rel="stylesheet" href="https://minmoji.ucda.jp/pages/wp-content/themes/minmoji2017/style.css">

あるではないか、rotateの設定が(;^_^A

/* 文字にアンチエイリアスを掛けるための設定 */
h1, h2, h3, h4, h5, h6, p, li, span {
    -webkit-transform: rotate(0.028deg);
    -moz-transform: rotate(0.028deg);
    -ms-transform: rotate(0.028deg);
    -o-transform: rotate(0.028deg);
    transform: rotate(0.028deg);
}

真似して解決です◎

せっかくみんなの文字®を導入したのに、文字がキレイに表示されなくて困っている…という方の参考になれば幸いです。