フォントサイズ結局どれがいい？px?rem?勝手にきめてみた | 福岡のホームページ制作はマリオ君にお任せ

本日は会社でフォントサイズの書き方・認識をできるだけ統一しようということで、何がいいか検索で調べたあと、会社でどれを使っていくか方向性を決めたので書いていきたいと思います。

そもそも、弊社は

「完成すればいいじゃん派閥」なのであまり細かなことを気にする会社ではありません。

大型案件（200ページ～）のサイトもほぼほぼ作りませんし、他社と協業する機会も少ないので、複数人でサイトを制作する機会が少ないので共有した時の使いやすさなどはあまり意識せず、ガラパゴス的な感じで特にルールはありません。

しかし、どうせやるならスマートに少しでも効率よく制作したいし、競合他社様やクライアント様にソースを見られたときに、

「ダセー書き方してんな」

って思われたくないのでちょっと調べて議論することになりました。（ただの井戸端会議レベルです）

まずマリオ君の現状を書いておきます。

おおまかなフォントの大きさはきめている。

使っている単位は主にpxかremを使用しています。

弊社ではホームページを作る際に会社の方針としては、ベースとなるフォントサイズは

パソコンサイトは
15px～17px

スマホサイトは
14px～15px

と大まかには決まっていて上記サイズをpxで表記したりremで表記したりしています。上記を基準に見出しなどは30pxとか4remとかで書いています。

絶対これで！とは決まっていませんが、クライアントのご要望や、サービスの内容、ターゲットとなるエンドユーザーに合わせて、大体上記範囲内で制作しています。

フォントサイズの単位確認

話し合いにあたり、まず先にどんなものがあるかざっくり確認しました。

他にもありますがとりあえず上記でお話合い。

pxとremはマリオ君で現状使っていますので決勝進出。ほかをどうするか話しましたが、

em・%

はとにかく難しい（複雑になる）のですぐに不採用（5秒ぐらい）。

相対的単位なのでサイズ変更とか一括でできたりとか、たくさんのメリットもあるのでしょうが、メリットを相殺するぐらいのあまりある複雑感で文系webデザイン会社の脳ミソではさばききれないので、すぐさま却下されました。
※なれればむしろ作りやすいのでしょうが弊社では食わず嫌いで使われておりません。

vwも横幅とかでは使っていますが、フォントサイズではこちらもほとんど使っていませんでした。

フォントでvwの単位を使う際は主にリキッドレイアウト（画面幅いっぱいでデザインする）の時によく使うと思いますが、
そもそもマリオ君はレスポンシブデザインでwebサイトを制作する際なんちゃってフレキシブルレイアウト（最大幅を決めてリキッドさせる）をメインで制作しておりフォントサイズはブレイクポイントで変更するのみで可変にはしておりません。


よって、使う候補

px,rem,
の2つになりました。

あとは、記述方法について話しました。

pxの場合は絶対値なので、記述方法もなにもありませんが（とにかく書いていく）

remの場合どうやって書くかなどの話をしました。

こちらも話す前に、少し調べるとpx対remの争いやremの記述方法でいろいろ論争がありましたのでそちらも含めて書いていきます。
（フォントサイズとかを調べる機会などめったにないので、こんなに論争になっているのは知りませんでした）

使う候補はpx,rem

px対rem

ネットで少し検索すると、px対remの論争などの記事がたくさん出てきました。

「完成すればいいじゃん派閥」の弊社も少し気になり調べてみました。

pxのメリット・デメリット、remのメリット・デメリットをご紹介します。

pxメリット

pxのメリットはやはりわかりやすいし、なじみもあるし、絶対値なのでレイアウトが崩れないことがメリットだと思います。

ユーザーの環境に左右されず、思い通りのデザインを提供することができます。

pxデメリット

メリットと表裏一体なのですが、ユーザーの環境に左右されず、思い通りのデザインを提供することができるということは、逆を言えば、ユーザーが文字設定を変更していて大きく見たい場合などユーザーの思い通りにサイズを変更することができないということになります。
アクセシビリティ（使い勝手）が悪いということになるようです。
※ズーム機能は機能します。
※ブラウザの設定の中にあるフォントサイズを変更した場合拡大されません。

また、絶対置なので、クライアント様等に

「フォントサイズ一回り大きくしてくれない？」

などと言われれると、複数の場所を変更しなければなりません。

remメリット

remのメリットは相対的（htmlの値を参照）なので、文字サイズの一括変更などをする場合にとても便利です。
あと、なんかかっこいいですよね。だいたいcssを勉強するときの単位はpxで勉強することが多いので、使ったことがない単位を使うことは成長した感じがしていいですよね。

また、ユーザーが文字設定を変更していて大きく見たい場合などユーザーの環境に合わせて文字が大きくなります。

remデメリット

記述が少し難しいところです。

一般的にブラウザのデフォルトサイズ（remが参照する元のサイズ）は16pxが一般的です。

1rem=デフォルトのサイズとなりますので

1rem=16pxとなります。

32pxの大きさにしたい時は2remとすぐに書けますが

18pxの大きさにremで記述したいときは？？？ちょっとまって計算しますって感じになります。
（1.125rem）


また、ユーザの環境に合わせて拡大するのでレイアウトが崩れることがあります。

こんな感じでpxとremのいいとこ悪いところがわかりました。

pxは直感的にわかりやすいけど、後でフォントサイズが変わった場合大変で、ユーザーの環境に合わせて文字が拡大されないのでアクセシビリティが悪い

remはかっこよくて一括変更もできてユーザーの環境に合わせて文字が拡大されるけど、記述が少しむずかしいしレイアウトが崩れることがある。

ここで弊社的なデメリットを考えましたが

pxのデメリットのフォントサイズがクライアントの要望等で変更になった場合を考えてみましたが、弊社の場合ですと、経験上ほぼほぼありません。仮にあったとしても、そんなに全部のフォントサイズを変えるとかは今までありませんし、大規模サイトもほぼほぼ制作しないのでちょっと直すぐらいで対応できます。問題点としてはアクセシビリティぐらいですね。

remは今後のことも考えて相対的数値で作った方が汎用性があっていいけど、記述がすこし複雑なところと、拡大したときにレイアウトが崩れるところですね。

remの記述を楽にする

先ほどremの記述はデフォルトのフォントサイズ（ほとんど16px）を参照していると書きましたが、これを簡単に記述する方法があります。

それは下記です

html{
	
	font-size: 62.5%;
	/* ルートのフォントサイズを10pxに設定　あとはremで指定　 */
}

デフォルトの16pxを62.5％にして

基本となる数字を10pxにしています。

こうすることによって

1rem=10px

となります。

こうしておけばh1タグを18pxの大きさ位にしたい場合は下記の様に直感的に書くことができます。

html{
	
	font-size: 62.5%;
	/* ルートのフォントサイズを10pxに設定　あとはremで指定　 */
}

h1{
font-size: 1.8rem;	/*  18px　 */
}

とっても楽に書くことができますね。

弊社もremで記述する場合は上記で書いております。

しかし、ネットで調べるところ

この

62.5%使わな方が良い説がたくさんありました。

62.5%使わな方が良い説

使ってはいけない理由としては、あんまり理解できなかったのですが、

①そもそもpxと同じで勝手にこっち（作り手側）の基準で基本のフォントサイズを変えない方がいいとか

②ワードプレスのプラグインとかで競合しておかしくなるとか

③引継ぎで作業する人がわかりずらいとか

④ルートをいじらずに計算式でいれたほうがいいとか

上記の問題点などがあるようです。

弊社的なデメリットは

①はふむふむ、弊社はbodyに1.6remをいれてデフォルトに戻しているからそんなに関係ないかな
②は使わないからいいか
③これもほとんどないからいいか
④計算式一応みてみるか

って感じでした。

弊社的にはデメリットはほとんどありません。

sassでの計算式は下記になります。

$root-font-size: 16;
//16pxを基準にして計算

@mixin font-rem($font-size-px) {
  font-size: $font-size-px / $root-font-size * 1rem;
}

.safo {
    @include font-rem(18);//かっこの中にpxの数字を入れる
}

出力結果は下記の様にコンパイルされます

.safo {
  font-size: 1.125rem; 
}

悪くないですね。

しかし、includeはできるだけ使いたくない（特に理由はないがおじさんがそういう）
記述するときに少し遅くなるとのこと（もともとそんなに早くないじゃん）ていう意見もでました。

結論

長々と書かせていただきましたが

「完成すればいいじゃん派閥」の会社ですので、正直なんでもいいよと言う感じでゆるっと終わりましたが方向性は下記になりました。

結論

px,remどっちでもいいけど基本はremでいきましょう!

はい。こちらで決定です。

pxよりアクセシビリティを重視したremをメインにしていきます。
※フォントサイズを拡大した場合、pxは拡大されない、remは拡大される。
※ズーム機能は両方拡大されます。

そして記述方法は

html{
	
	font-size: 62.5%;
	/* ルートのフォントサイズを10pxに設定　あとはremで指定　 */
}

body{
	
	font-size: 1.6rem;
	@media screen and (max-width: 768px){
		font-size: 1.4rem;
	}
	
}

こちらをベースにしていこうという結果になりました。

ルートを（html）を計算しやすいように10pxにして、これだけだと、アクセシビリティに良くないとのことなので、bodyで初期値の1.6rem(16px)に戻す感じですね。

数字はサイトによって変わりますがベースはこんな感じです。

残るremのメリット兼デメリットである拡大した時のレイアウト崩れは

「しょうがない」

で終わらせました。

意識しては作りますが、横幅を固定しているところはフォントサイズをpxでいれてレイアウトが崩れないようにとか横幅もremで制作したほうがいいとか色々検索したらでてきましたが、文字を大きくされたい方が、文字を大きくしてレイアウトが崩れているので、文字を大きくみてもらうことを優先してこちらは気にしなくてOKという会社の方針になりました。

また、クライアント様等から「拡大しないようにして」って万が一言われた際も

アクセシビリティはなくなりますがルートの62.5%の部分を10pxに変更すればよいので、こちらもカバーできると思います。（px表記と同じ状態）
※逆のpxからremはかなりきつそう


残る問題は、フォントサイズをremで書く時余白もremで書くのか問題もありますが余白もremで書いた場合レイアウトは確かに崩れにくいですが、ルートを変更すると余白も変更されることになります大変なことになりそうです。
余白の件はとりあえず忘れてpxで書くことにしました。あまりにもおかしかったりすると直しますが、基本は気にしない方針で終わりました。

そもそもフォトサイズをpxで制作されていて拡大させないような作りのサイトも多数ある中、アクセシビリティもそこまできにしなくてよくね？ってことでした。

大手企業はどうしてるか

最後に大手様はどうしてるか見てみました。

大手様も様々ですね。私のようなものにはわからない複雑な計算式とかで作られているかもしれませんが、ソースを見た感じ上記でした。

長くなり、何が書きたかったのかわからなくなってきましたが

以上がフォントサイズ結局どれがいい？px?rem?勝手にきめてみた！でした。

こちらが正しいとかではないので、あくまで参考にしていただければ幸いです。

それではまた。