代替名
echo.cssでは、文字の大きさを変更するクラス名には、プロパティの値ではなく代替名を使用しています。
xxs, xs, sm, md, lg, xl, xxl, 3l, 4l, 5l
の10段階があります。 xxs
と 3l
以上は、慎重に使用する必要があります。
スタイルガイドでは (fontsize) と記載しています。
文字サイズの変化
スタイルガイドには、以下のような表が記載されている場合があります。
この表は、各要素(ここではヘッダ・本文・フッタのリンク)が画面サイズ (breakpoint) に達したときにどの (fontsize) に変化するかを示した一覧です。
( .echo-hero
の解説からの抜粋)
(breakpoint) | (fontsize) | ||
---|---|---|---|
.echo-***-header | .echo-***-lead | .echo-***-body .echo-***-link | |
sm以下 | lg | md | sm |
md以上 | xl | lg | md |
xl以上 | xxl | xl | lg |
例えば .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, em | px |
---|---|---|
xxs | 0.625 | 10px |
xs | 0.75 | 12px |
sm | 0.875 | 14px |
md | 1 | 16px |
lg | 1.125 | 18px |
xl | 1.25 | 20px |
xxl | 1.5 | 24px |
3l | 1.75 | 28px |
4l | 2 | 32px |
5l | 2.5 | 40px |
高度:文字サイズを変化させるクラス
echo.cssでは、精緻なタイポグラフィを実現するために、文字サイズを変更させるユーティリティクラスが2種類あります。
ここでは挙動の違いのみ解説します。詳細はスタイルガイドを参照ください。
echo-text-(fontsize)
文字サイズが特に定義されていないときに(fontsize)に変化するようにします。
echo-text-(fontsize1)to(fontsize2)
文字サイズが(fontsize1)のときに(fontsize2)に変化するようにします。 .echo-hero-header
など、文字サイズが定義されているオブジェクトの文字サイズを正確に変更したいときに使用します。