SNS上で文字サイズ62.5%問題が賑わっているので
内容をまとめてみようと思います。
と言っても、コリスの記事がかなりバランス良く情報がまとまっている内容かな？とは思いますが…
https://coliss.com/articles/build-websites/operation/css/about-pixels-and-accessibility.html
論点を絞って、最後に自分的な結論（今後どう制作していくか）をまとめようと思います。
px、em、rem何を使うべきか？
emやremのように相対的なサイズ指定がベストではあるものの、
最近のブラウザではズーム機能なども最適化されてきているので、px指定でもそこまで問題は大きくなく、アクセシビリティにどこまでコストを割くかという部分で決めれば良いのではないかと思います。
ちなみに以前制作を担当した案件では
p {
font-size: 16px ;
font-size: 1rem ;
}というようにrem優先、px補助…というような位置づけで併記した記述をするレギュレーションになっていました。
これなら各要素を見ただけでも1rem=16pxになっているんだな、と分かり他人が保守する際も分かりやすいかもしれません。
文字サイズを62.5%指定するのは辞めるべきなのか？
これは元々remなど相対的なサイズを扱いやすくするための裏技的なハックなので
辞めるべきなのだろうと思いますが…
デフォルトの1rem=16pxを変更してしまうもので、サードパーティー製のフレームワークなど1remを16pxのまま扱っているものと混合して使う場合、不具合が生じる場合があることもあるようですが、使わない場合、影響は限定的なのかもしれません。
視覚障害者の方など、ブラウザの設定で文字のデフォルトサイズ（スケーリング）を変更している場合、基本サイズ（1rem）を32pxにしていても、20pxでの表示になってしまい
2/3のサイズで表示されることになってしまうなどユーザーの意図しない表示結果になってしまいますが、
こちらも以下のように
htmlにフォントサイズ62.5%にして、bodyに1.6remすることでブラウザ設定の文字サイズの問題は回避できそうです。
html {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
}先に紹介したpxとremの併記で（他人が見た際の）メンテナンス性を担保することも可能です。
p {
font-size: 16px ;
font-size: 1.6rem ;
}62.5%ハックを使わない方法：CSS変数を使用する
62.5%ハックを使わない方法としては、CSSの問題はCSSで解決したほうがいいと思うので、
CSS変数を使ったコリスの解決方法が最もスマートな方法ではないかと思います。
（もともとSass環境で開発しているなどの場合は、そちらで解決しても良いかも。）
html {
--10px: 0.625rem;
--11px: 0.6875rem;
--12px: 0.75rem;
--13px: 0.8125rem;
--14px: 0.875rem;
--15px: 0.9375rem;
--16px: 1rem;
--17px: 1.0625rem;
--18px: 1.125rem;
--19px: 1.1875rem;
--20px: 1.25rem;
--21px: 1.3125rem;
--22px: 1.375rem;
--23px: 1.4375rem;
--24px: 1.5rem;
}
p {
font-size: var(--16px);
}自分的結論
現時点（2023.01）での私個人の結論としては、
・アクセシビリティへの大きな配慮などが必要な場合は62.5%を使ってrem
・デザイン性を優先する場合はpx
サードパーティー製のフレームワークともともと混合して使う場合や、将来的に混合しそう（WordPressベースでサイトを構築しているなど）な場合は、CSS変数を使うなど、適宜使い分けるのが良いかもしれません。
これだとやや結論としては弱いので私個人としては
・基本はpx
・アクセシビリティ対応が必要な場合は62.5%+rem（別途見積として料金を載せる）
で今後制作していこうかな？と思います。（アクセシビリティ対応が必要ということは、簡易的にでもレギュレーションが必要ということかな…と。）
参考：https://coliss.com/articles/build-websites/operation/css/about-pixels-and-accessibility.html
https://zenn.dev/tak_dcxi/articles/26280e7607bcd2
