• Facebook
  • Twitter
  • Instagram
  • GitHub
search

フォントサイズの指定でpxを使うべきかremを使うべきかの(個人的な)結論

フォント指定でremとpxどちらを使うべきか個人的な結論のサムネイル

Twitterでフォントサイズの指定にpxを使うべきかremを使うべきかという議論が起きて軽く盛り上がっていたので僕の中での結論をまとめておきたいと思います。

事の始まり

始まりは以下の記事でした。是非読んでみてください。

闇雲なrem信仰に物申す | CAMP

この記事によると

  • ブラウザデフォルトの文字サイズ設定を反映させるなら 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とremのお話の本質は、ブラウザデフォルトサイズ設定と開発時の直観性のどちらを取るかということでした。
僕はどちらも重要だと思うので、ツールを使い両方を取れる方法を紹介しました。

ユーザーの選択肢が開発者の都合で奪われそうな時は、このように解決策を探し出せると良いのではないでしょうか。
この施工で助かるユーザー数がごく僅かだとしても、そのごく僅かなユーザーの助けになるのであれば価値があることだと僕は思います。

オススメのコンテンツ

えびのnote xd最新機能紹介動画 えびのreadme