「フォントサイズ指定、pxかremか」
htmlにfont-size:62.5%;を指定した上で1rem＝10pxとする、というやつが一時期はファイナルソリューションのように思われたけど、昨今どうも状況が変わっているっぽく、ピクセル派も復活していて、掲題の件が再び問題になっているらしい。
あくまで各々の判断によるところですけどね、的な口調で書かれたブログ記事のコメント欄で、結局ブログ主が来訪者と荒れモードの口論になってしまっているのを見かけて悲しい気持ちになった。
Sassを使うと何かしらの計算式を組み込んでシンプルな記述ができるようだけど、静的サイトにCMSでお知らせ機能をくっつける程度の案件を単独でやる零細コーダーの当方としては、Sassは残念ながら引き続き導入する予定がない。
別件で、巷でどんどんシェアが上がっているというTailwind CSSのCDN版の中身を見てみていたところ、1em＝デフォルトの1文字＝16pxとするところの「em」が、あらゆるサイズの基準として採用されている。
さしあたり1rem＝10px戦法で何も困らないながら、世の潮流がそうではなくなってきているのならば順応していくよりほか無い。
しかし今更、大昔ベースを13pxとしていた頃の「108%, 116%, 123,1%...」というアレみたいなことをやるかというと、二度と御免。ではどうしたものか。
正式にIEとオサラバできてからというもの、gridやら、aspect-ratio＋object-fitやらclampやら、CSSコーディングが劇的にやりやすくなった中で、最もありがたく思っているもののひとつが、値を「var(--xxx)」の形で記述するカスタムプロパティ（変数）。
それを使って、文字サイズは1rem＝16pxのまま、「名前がピクセル、値がrem」となる変数一式をベースのCSSの片隅に書いておけばいいじゃないですか。ということで以下、それです。
:root {--fs10:.625rem; --fs11:.6875rem; --fs12:.75rem; --fs13:.8125rem; --fs14:.875rem; --fs15:.9375rem; --fs16:1rem; --fs17:1.0625rem; --fs175:1.09375rem; --fs18:1.125rem; --fs185:1.15625rem; --fs19:1.1875rem; --fs195:1.21875rem; --fs20:1.25rem; --fs205:1.28125rem; --fs21:1.3125rem; --fs215:1.34375rem; --fs22:1.375rem; --fs225:1.40625rem; --fs23:1.4375rem; --fs24:1.5rem; --fs25:1.5625rem; --fs26:1.625rem; --fs27:1.6875rem; --fs28:1.75rem; --fs29:1.8125rem; --fs30:1.875rem; --fs31:1.9375rem; --fs32:2rem; --fs33:2.0625rem; --fs34:2.125rem; --fs35:2.1875rem; --fs36:2.25rem; --fs37:2.3125rem; --fs38:2.375rem; --fs39:2.4375rem; --fs40:2.5rem; --fs41:2.5625rem; --fs42:2.625rem; --fs43:2.6875rem; --fs44:2.75rem; --fs45:2.8125rem; --fs46:2.875rem; --fs47:2.9375rem; --fs48:3rem; --fs49:3.0625rem; --fs50:3.125rem; --fs51:3.1875rem; --fs52:3.25rem; --fs53:3.3125rem; --fs54:3.375rem; --fs55:3.4375rem; --fs56:3.5rem; --fs57:3.5625rem; --fs58:3.625rem; --fs59:3.6875rem; --fs60:3.75rem; --fs61:3.8125rem; --fs62:3.875rem; --fs63:3.9375rem; --fs64:4rem; --fs65:4.0625rem; --fs66:4.125rem; --fs67:4.1875rem; --fs68:4.25rem; --fs69:4.3125rem; --fs70:4.375rem; --fs71:4.4375rem; --fs72:4.5rem; --fs73:4.5625rem; --fs74:4.625rem; --fs75:4.6875rem; --fs76:4.75rem; --fs77:4.8125rem; --fs78:4.875rem; --fs79:4.9375rem; --fs80:5rem;}
10pxから5remまで作っておきました。見出しに使いがちな22pxくらいまでは0.5刻みで。
これならスマホ対応で全体の文字サイズをほんのり小さくしたい時も「html {font-size:90%;}」みたいなのが使えるし、ピクセル数そのまんまでコーディングできるし（「font-size:var(--fs00);」となって字数はかさむが）、ブラウザでの文字サイズ指定を無効化もしない、三方よしのソリューションなのでは。
既出だったらすいませんが、困って調べてたどり着いた方、ご自由にコピペでお使いください。