Typography
Font family
このドキュメントでは、InhouseのFlavorのひとつであるPepper flavorを例にFont familyを紹介します。実際には、ブランドごとに使用するフォントは異なります。
Pepper flavorでは、欧文にOpen Sans、和文にNoto Sans JPを使用します。また、和文の場合はNoto Sans JPと合うように設計された約物のみのフォントであるYaku Han JPを読み込むことで、約物のみカーニングを詰めて表示するようにしています。
Sass function
font-familyを取得できます。
get-font-family($name)
@use '@inhouse/inhouse-components-web' as inhouse;
$font-family-latin: inhouse.get-font-family($name: sans-latin);
$font-family-japanese: inhouse.get-font-family($name: sans-japanese);
$font-family-monospace: inhouse.get-font-family($name: monospace);
| Name | Font family（Pepper flavor） |
|---|---|
| sans-latin | 'Open Sans' |
| sans-japanese | 'Noto Sans JP' |
| sans-japanese-kerning | YakuHanJP, 'Noto Sans JP' |
| monospace | 'Roboto Mono' |
| icon | 'Inhouse Icons' |
| ui | apple-system, BlinkMacSystemFont, Roboto, 'Lucida Grande', Helvetica, Arial |
Font stack
Sass function
font-familyの組み合わせを取得できます。
compose-font-stack($name)
@use '@inhouse/inhouse-components-web' as inhouse;
html {
font-family: inhouse.compose-font-stack($name: latin);
&:lang(ja) {
font-family: inhouse.compose-font-stack($name: japanese);
}
}
code {
font-family: inhouse.compose-font-stack($name: monospace);
}
| Name | 組み合わせ | Font stack（Pepper flavor） |
|---|---|---|
| latin | sans-latin, ui | 'Open Sans', apple-system, BlinkMacSystemFont, Roboto, 'Lucida Grande', Helvetica, Arial, sans-serif |
| japanese | sans-latin, sans-japanese, ui | 'Open Sans', 'Noto Sans JP', apple-system, BlinkMacSystemFont, Roboto, 'Lucida Grande', Helvetica, Arial, sans-serif |
| japanese-kerning | sans-latin, sans-japanese-kerning, ui | 'Open Sans', YakuHanJP, 'Noto Sans JP', apple-system, BlinkMacSystemFont, Roboto, 'Lucida Grande', Helvetica, Arial, sans-serif |
| monospace | monospace | 'Roboto Mono', monospace |
| icon | icon | 'Inhouse Icons' |
Sizing
バーティカルリズムを4px相当のグリッドで揃えるために、3種類の行間と文字サイズに応じた行間の値を計算できるTypographic Scaleを制作しました。これによって算出された値をValue Tokenとして使用します。
Typographic Scaleで算出した値のうち、11px以上の実用的なバリエーションを選んで、Mサイズが1rem = 16pxに相当するようにXXSからXXXLまでの名前を割り当てました。
Sass function
font-sizeを取得できます。
get-font-size($level)
@use '@inhouse/inhouse-components-web' as inhouse;
.example {
font-size: inhouse.get-font-size($level: m);
}
| Level | Font size（Pepper flavor） |
|---|---|
| xxs | 11px |
| xs | 12px |
| s | 14px |
| m | 16px |
| l | 18px |
| xl | 21px |
| xxl | 26px |
| xxxl | 32px |
line-heightを取得できます。
get-line-height($level, $density)
@use '@inhouse/inhouse-components-web' as inhouse;
.example {
font-size: inhouse.get-line-height($level: m, $density: normal);
}
| Level | Density | Line height（Pepper flavor） |
|---|---|---|
| xxs | comfort | 20px |
| normal | 20px | |
| dense | 16px | |
| xs | comfort | 24px |
| normal | 20px | |
| dense | 16px | |
| s | comfort | 28px |
| normal | 24px | |
| dense | 20px | |
| m | comfort | 28px |
| normal | 24px | |
| dense | 20px | |
| l | comfort | 32px |
| normal | 28px | |
| dense | 24px | |
| xl | comfort | 40px |
| normal | 32px | |
| dense | 28px | |
| xxl | comfort | 48px |
| normal | 40px | |
| dense | 36px | |
| xxxl | comfort | 56px |
| normal | 40px | |
| dense | 40px |
Sass mixin
font-sizeとline-heightの組み合わせを取得できます。
text($level, $density)
@use '@inhouse/inhouse-components-web' as inhouse;
.example {
@include inhouse.text($level: m, $density: normal);
}