#14/ px？rem？フォントサイズは62.5%を理解せよ
こんにちは、梅本です。
2月18日は安眠の日です。
皆さん、しっかり睡眠できてますか？
私は短めなので睡眠には何年も悩まされています。
だから、Onsen*というサービスを自ら作っていろいろトライしてるのですが、これで必ず安眠できる！にはまだ到達できず。
睡眠薬ではない、快眠メソッドを目指してがんばります。
1) デザインの単位をpxからremへ変更すべき
このツイートに”いいね”を多くいただけました。
理由の言語化はさぼっているのですが、多くの人にとって身近なテーマであり、表示が崩れない方法があるのか？が端的にご理解いただける内容だったからかなと思ってます。
ただ、私が本記事を雑に理解してツイートしたので、「Figmaにそんな設定方法はないよ！」とのご指摘もいただきました。
こちらに関しては本当にご迷惑をおかけしました。
原文：Why designers should move from px to rem (and how to do that in Figma)
要約
pxでは、画面の拡大・縮小に対応できず、文字が見えにくくなったり、デザインが崩れたりすることがあります。
一方で、remはブラウザーのフォントサイズに基づいてサイズが変わるため、ユーザーの好みに合わせたフォントサイズ設定ができます。
pxの代わりにremを使うとデザインはどうなるのか
ルートのフォントサイズを変更しないすべてのユーザーにとっては、まったく何も変わらない。
作ったデザインは
pxの場合と同じように見える。ルートのフォントサイズを変更しているユーザー（少数派）にとっては、すべてのテキストが比例して拡大縮小されます。
remでデザインすると何が良いのか？
rem単位でフォントサイズを定義することで、デザイナーとして書体スケールの調和と階層性を保てる。
ユーザーのニーズに合わせて柔軟にフォントサイズを変更することができる
Figmaにはremの設定方法がない！
そう。ないのです。だから代替案を以下に示します。
解決策1：設計はPXで行い、プログラミング時に相対的な単位に変換する。チーム全体がこのルールを認識する
この方法は、チームとして緊密に連携し、明確な責任の分担がなされている場合には、うまく機能する
開発者は「Figmaのpxのみの問題」を意識し、CSSですべてのpxを相対的な単位に変換する
このあたりは「The 62.5% Font Size Trick」に詳しく書かれています
html {
font-size: 62.5%;
/* 62.5% of the base size of 16px = 10px.*/
}
body {
font-size: 1.6rem;
/* reset 10*1.6 = 16px, to make sure you do not get any 10px around */
}
.someClass {
font-size: 2.4rem;
/* 10*2.4 = 24px */
}解決策2：zeplinなど別ツールを使う
zeplinなど別ツールと連携して単位換算を行う
解決策3：スタイルシートでPXとREMの値を定義する
この方法はすべてのデザインを相対的な単位で行うことが骨子
そのための変換表を用意して、チームで共有する
私の所感
Figmaに変換系の設定、もしくはプラグインでぱぱっとできる状態かと思いましたが、まだのようですね。
Figmaの現状を鑑みると、勝手な予測ですがこのあたりの機能もいずれは標準機能として実装されるのではないでしょうか？
ただ、それよりは「The 62.5% Font Size Trick」の内容を理解しておくことが重要のようです。
私もこのあたり曖昧な理解だったので、こちらの記事をサクッと要約しておきます。
文字サイズ62.5%のトリック
このトリックは、bodyタグのフォントサイズを62.5%に設定することで、後続のフォントサイズの計算をしやすくすることができます。
例えば、16pxのフォントサイズを指定したい場合、16px ÷ 62.5% = 10pxという計算になる。
このトリックを使うと、レスポンシブデザインにおいてもフォントサイズの調整がしやすくなる
また、ユーザーがブラウザのフォントサイズを変更した場合でも、レイアウトの崩れを防ぐことができる。
ただし、このトリックを使う場合は、他の要素のフォントサイズもbodyタグに対して相対的に設定する必要がある。
また、すべてのブラウザで正しく動作するわけではないため、注意が必要。
2)今週の気になるツール
和文欧文のフォントを個別に設定できるFigmaプラグイン『Japanese Font Mixer』
Figma のプラグインの紹介です。
例えば「今日のOnsenは最高だったYO」という文章をFigmaで書くとき、この文章に対して日本語はヒラギノ、欧文はRobotoなどを設定できるプラグインです。
ちょうど社内でそんなプラグインがないかね？と探していたときに見つけました。便利です。
あとがき
今日の内容は昔のWebデザイナーっぽい感じになりました。
いまはUXデザイナーやUIデザイナー、フロントエンドエンジニアなど様々な職種があります。
同じ課題に取り組むけど領域をまたぐときの連携の難しさに直面しますよね。
この記事はデザイナーとフロントエンドエンジニアの連携が大事って内容ですが、私の場合、過去に何でもやっていたことが理解を助けてくれております。
無駄な経験もあるけど、無駄が大事というイチロー大先生の教えですね。
まだしばらく隔週配信となります。
ぜひお付き合いのほどよろしくお願いいたします。