font-sizeの単位について｜WDSG策定チーム［#01］

みなさんは普段、CSSでfont-sizeを指定する時にどの［単位］を利用していますか？

WDSG策定チーム専用Slackにて、メンバー間で談義を行い［font-sizeの単位］のガイドラインを作成しました。

WDSG（Web Developer's Sharing Guidelines）とは、Webサイト制作関係者がガイドラインを共有することで、クリエイティブに集中できる環境を作るプロジェクトです。

１．font-sizeの単位

CSSでfont-sizeを指定する場合に利用するガイドラインです。

１）基本的にfont-sizeの単位は［rem］で指定します。

意図：
あるブレイクポイントでサイト全体のfont-sizeを変更する場合、ルートとなる一箇所の変更で反映できます。

注意：
［rem］で指定する場合は、以下（※１）の初期設定を行います。
（※１）コードサンプル①を参照

２）値を固定値で指定する場合は［px］で指定します。

３）自由配置のデザインをレスポンシブで再現する場合は［vw］で指定します。

/* コードサンプル① */

html{
    /* 16px ×　0.625 = 10px */
    font-size: 62.5%; /* 10px */
}

body {
    font-size: 1.6rem; /* 16px */
}

２．策定までの流れ

［font-sizeの単位］について行ったSlackでの流れを、公開議事録として掲載します。

ヒカル：
font-sizeの単位って何を使っていますか？

桑島さん：
基本remです。基準となるhtmlは%で指定してます。

ヒカル：
僕も今年からremに変えたんですが、やはりルートで全体を調整する時に（メディアクエリ）、便利な感じですよね？
いまいち利点が分かっておらず 笑

ケンタロウさん：
僕もあまりremのメリットがあまりわかっておらず、pxで指定してるのがほとんどですね。

ヒカル：
確か、過去にpxだと（IEだったような…）レガシーブラウザでバグがあって、remが良いという話もあった気が…今はもう関係ないですが…。
僕もずっとpx指定してたんですが、最近の下請け案件でremで組むように言われて、それから変えました。
あ、ブラウザ仕様の表示倍率変更が、pxだと効かなかったんじゃ無かったかな？あとで調べてみます…

いなとみさん：
僕も去年からremを使っていますよー。
ルート要素「html」は、pxで指定して、他の要素は全て「rem」です。どこかでサラっと読んだ記事を見て「rem」を使っていたほうが「無難」かなという浅い考えの元、使っていました。たしか、ヒカルさんが言われてあるレガシーブラウザ系のバグだったような気がする。

桑島さん：
私のやり方だと、ルート要素の%を変えてやれば、他のremで指定してあるサイズもすべて変更となるので便利かなと思って使ってます。
なので絶対にサイズを変えたくない場合はpx使ってます。

吉永さん：
自分の場合、基本はremです。
デザイン次第でvwも使います。

園川さん：
世間的にもスタンダードはremっぽいですよね〜
ここは自分たちもアップデートが必要でございまする。

以上が、Slackでの流れです。

実際はもう少し議論を行っていたり、ドキュメント化する時に調査を行いました。

３．WDSG策定チーム専用Slack

WDSG策定チームは、専用Slackで一緒に意見交換をしてくれるメンバーを募集しています！

意見出しチャンネルで制作方法について質問したり、判断に迷っていることや制作の悩みなど、自由な雰囲気で意見交換を行いながら、少しずつガイドライン化を進めています。

この活動が気になった方は、是非とも僕のTwitter（@design_hikaru）へご連絡ください！

最後までお読み頂き、ありがとうございました！