フォントサイズの指定でpxを使うべきかremを使うべきかの（個人的な）結論
公開日 2019/12/29
Twitterでフォントサイズの指定にpxを使うべきかremを使うべきかという議論が起きて軽く盛り上がっていたので僕の中での結論をまとめておきたいと思います。
事の始まり
始まりは以下の記事でした。是非読んでみてください。
この記事によると
- ブラウザデフォルトの文字サイズ設定を反映させるなら rem
- 一括で文字サイズ変更したいなら rem
- 記述の直観性を重視するなら px
という選択が存在するということです。巷のブログや開発現場で、あまりにもpx＝悪という言及が目立つので、その点についてもう少し正しい認知を広めたい思いで書きました。
との事でした。
記事の内容としてはGAFAでもpxを使っているのだから、開発時の直観性を重視しpxで良いのでは？という結論だと理解しました。
さらに、1.4remより14pxのほうが2タイプ少なくすみます。チリも積もればなんとやらです。
また、remを使った時のタイピング数にも言及されていました。
rem派の意見
半田氏がツイートをしていましたので、以下のツイートにぶら下がっているツイートを是非読んでみてください。
Embedded content: https://twitter.com/assialiholic/status/1209767961885462533
僕の結論
僕も半田氏の意見に賛成でrem派です。
理由としては以下のツイートで言及されている通りです。
Embedded content: https://twitter.com/assialiholic/status/1209799539776868352
開発の手間とユーザーの選択肢を天秤にかけた時に、開発の手間を優先するべきではありません。
でも、開発の手間がかかるのが嫌なのも事実です。
じゃあ 効率化しましょう。
実際の記述方法
実際にCSSでフォントサイズを記述する時を考えてみましょう。
まずはpxで指定する時。
.hoge{
font-size: 12px;
}
emmetを利用していることを前提としてこの指定をする時に実際にタイピングするキーは、以下のようになるかと思います。
fz12
tabキー
5回の打鍵で済むということですね。
次に、remで指定する時です。
まずはmixinに以下のコードを記述します。
@mixin font-size($size) {
font-size: ($size / 16) + rem;
}
このmixinを呼び出して使うので、以下のようなコードになります。
.hoge{
@include font-size(12);
}
確かに、記述が増えてしまいますね…。
ここでスニペットツールを使いましょう。世の中には沢山のスニペットツールがあると思いますが僕はDashというツールを使っています。
このツールであれば好きな文字列を入力すると、任意のコードを呼び出せるのでコーディングにもってこいです。
実際の動きをご覧ください。
Embedded content: https://twitter.com/pino_ebiebi/status/1211290266302156800
実際にタイピングするキーは、以下のようになります。
;fz12
打鍵数は5回です。
emmetを使った時と同じですね。
補足
mixinでの実装方法を紹介しましたが、functionでも出来ました。
Embedded content: https://twitter.com/pino_ebiebi/status/1211293971445506048
コンパイル結果は同じになりますのでお好きな方を使ってみてください。
「開発の手間とユーザーの選択肢を天秤にかけた時に、開発の手間を優先するべきではない」という理由だけでは納得出来ないという方のために補足すると、px指定ではWCAG2.1の達成基準 1.4.4 テキストのサイズ変更（レベル AA）を達成出来ないという観点もあります。
Embedded content: https://waic.jp/docs/WCAG21/#resize-text
まとめ
pxとremのお話の本質は、ブラウザデフォルトサイズ設定と開発時の直観性のどちらを取るかということでした。
僕はどちらも重要だと思うので、ツールを使い両方を取れる方法を紹介しました。
ユーザーの選択肢が開発者の都合で奪われそうな時は、このように解決策を探し出せると良いのではないでしょうか。
この施工で助かるユーザー数がごく僅かだとしても、そのごく僅かなユーザーの助けになるのであれば価値があることだと僕は思います。
