remをピクセル（px）に変換

remはCSSの相対的な長さの単位で、値はページのルート要素、つまりhtml要素の計算済みのフォントサイズと同じです[1]。html要素のフォントサイズが16ピクセルなら、ページ内の1 remはすべて16ピクセルです。このサイズが変わると、remで書いたすべての寸法が一緒に変わります。

CSSのピクセル（px）は固定の単位で、規格では1インチの96分の1と定められています[1]。そのためCSSでは1インチが96ピクセルになり、インチをピクセルに変換するツールもDPIの初期値を96にしています。一般的な意味でのピクセルは、コンピューターで画像を扱うときに色の情報を持つ最小単位です[2]。CSSのピクセルは、読み手がブラウザーでフォントサイズを変えても変わりません。Figmaのようなデザインツールも寸法をピクセルで表示するので、remをピクセルに換算すると、スタイルシートとデザインを突き合わせやすくなります。

Chrome、Edge、Firefoxの既定のフォントサイズのままなら、1 remは16ピクセルです。計算式は「ピクセル = rem × 基準のフォントサイズ」なので、1.5 remは24ピクセル、0.875 remはTailwind CSSの文字サイズtext-smと同じ14ピクセルです[3]。

この16という数は、次の2か所で変わります。1つはスタイルシートで、html { font-size: 62.5% }と書くと基準は10ピクセルになり、1.5 remは15ピクセルです。もう1つは読み手の設定で、Chromeの「フォントサイズ」で「大」を選ぶと、1 remは20ピクセルになります。

そこで、このツールにはページの基準を入れる3つ目の欄があります。ページで使っている基準を入力すれば、そのページの読み手が実際に見るピクセル数がわかります。基準がわからない場合は、欄にはじめから入っている16のまま計算してください。

計算式はpx = rem × font-sizeで、font-sizeはhtml要素のフォントサイズです。たとえば1.25 remの余白は、既定の基準16ピクセルなら1.25 × 16 = 20ピクセル、基準20ピクセルなら25ピクセルになります。

62.5%のテクニックは、html要素のフォントサイズを既定値の62.5%にします。16の62.5%は10なので基準は10ピクセルになり、2.4 remが24ピクセルというように数値をそのまま読めます。ただし読み手がブラウザーのフォントサイズを20ピクセルにすると、基準は12.5ピクセルになり、2.4 remは30ピクセルになります。このツールの「基準のfont-size」の欄は、スタイルシートと同じ書き方のパーセントを受け付け、16ピクセルを元に計算します。62.5%と入力すると、基準は10ピクセルです。

逆向きの計算は割り算で、pxをremに変換するツールがこれを行います。emは親要素のフォントサイズを基準にする単位で、emをpxに変換するツールには親要素のフォントサイズを入れる欄があります。寸法がワープロソフトの文字サイズの単位であるポイント（pt）で書かれている場合は、先にptをpxに変換するツールでピクセルにしてください。

remで書いた文字は、読み手がブラウザーでフォントサイズを大きくすると一緒に大きくなり、ピクセルで書いた文字は変わりません。これはW3CのWCAG 2.2の達成基準1.4.4「テキストのサイズ変更」にかかわる点で、WAICによる日本語訳では次のように書かれています。「キャプション及び文字画像を除き、テキストは、コンテンツ又は機能を損なうことなく、支援技術なしで 200％ までサイズ変更可能である。」[5]ピクセルへの換算はデザインとの突き合わせに役立ち、デザインの寸法はpxをremに変換するツールでremにしてスタイルシートに書きます。