フォントサイズ

代替名

echo.cssでは、文字の大きさを変更するクラス名には、プロパティの値ではなく代替名を使用しています。
xxs, xs, sm, md, lg, xl, xxl, 3l, 4l, 5l の10段階があります。 xxs3l 以上は、慎重に使用する必要があります。

スタイルガイドでは (fontsize) と記載しています。

文字サイズの変化

スタイルガイドには、以下のような表が記載されている場合があります。
この表は、各要素(ここではヘッダ・本文・フッタのリンク)が画面サイズ (breakpoint) に達したときにどの (fontsize) に変化するかを示した一覧です。
.echo-hero の解説からの抜粋)

文字サイズの変化 group: display
(breakpoint)(fontsize)
.echo-***-header.echo-***-lead.echo-***-body
.echo-***-link
sm以下lgmdsm
md以上xllgmd
xl以上xxlxllg

この表の解説

例えば .echo-hero の本文 .echo-hero-body は、(breakpoint) が xl 以上のときは (fontsize) が lg となります。

各表には group: display というラベルがあります。これは、この表が「display」のレスポンシブグループ(先述「レスポンシブデザイン」)であることを示しています。

あなたがデザイナーではない場合

「ヘッダはそれ以外と比較して、1emの文字サイズが、かなり大きくなる」程度に捉えてください。echo.cssが常に適切な文字サイズを提供します。

あなたがデザイナーである場合

後述「代替名と実際の値」の表から、実際の値を確認してください。
「ヘッダの1emの文字サイズは、スマートフォンで18px、タブレットで20px、デスクトップで24pxになる」と換算してください。

相対サイズのオブジェクト

見出しを表示する module > .echo-title や、ラベルを表示する module > .echo-label は、現在の要素が継承している文字サイズに対する相対となります。

このため .echo-title-level-1 は通常、最大文字サイズが40px (1rem * 2.5em = 2.5rem) ですが、 .echo-hero-header 内で .echo-title-level-1 を使用した場合は、最大で60px (1rem * 1.5 * 2.5em = 3.75rem) となります。

高度:代替名と実際の値

代替名 (size) と実際の値の対応は以下のとおりです。
px列は、16pxの文字に対して適用したときの参考値です。

(size)rem, empx
xxs0.62510px
xs0.7512px
sm0.87514px
md116px
lg1.12518px
xl1.2520px
xxl1.524px
3l1.7528px
4l232px
5l2.540px

高度:文字サイズを変化させるクラス

echo.cssでは、精緻なタイポグラフィを実現するために、文字サイズを変更させるユーティリティクラスが2種類あります。
ここでは挙動の違いのみ解説します。詳細はスタイルガイドを参照ください。

echo-text-(fontsize)

文字サイズが特に定義されていないときに(fontsize)に変化するようにします。

echo-text-(fontsize1)to(fontsize2)

文字サイズが(fontsize1)のときに(fontsize2)に変化するようにします。 .echo-hero-header など、文字サイズが定義されているオブジェクトの文字サイズを正確に変更したいときに使用します。