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を取得できます。

Syntax

get-font-family($name)

Usage

@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);
NameFont family(Pepper flavor)
sans-latin‘Open Sans’
sans-japanese‘Noto Sans JP’
sans-japanese-kerningYakuHanJP, ‘Noto Sans JP’
monospace‘Roboto Mono’
icon‘Inhouse Icons’
uiapple-system, BlinkMacSystemFont, Roboto, ‘Lucida Grande’, Helvetica, Arial

Font stack

Sass function

font-familyの組み合わせを取得できます。

Syntax

compose-font-stack($name)

Usage

@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)
latinsans-latin, ui‘Open Sans’, apple-system, BlinkMacSystemFont, Roboto, ‘Lucida Grande’, Helvetica, Arial, sans-serif
japanesesans-latin, sans-japanese, ui‘Open Sans’, ‘Noto Sans JP’, apple-system, BlinkMacSystemFont, Roboto, ‘Lucida Grande’, Helvetica, Arial, sans-serif
japanese-kerningsans-latin, sans-japanese-kerning, ui‘Open Sans’, YakuHanJP, ‘Noto Sans JP’, apple-system, BlinkMacSystemFont, Roboto, ‘Lucida Grande’, Helvetica, Arial, sans-serif
monospacemonospace‘Roboto Mono’, monospace
iconicon‘Inhouse Icons’

Sizing

バーティカルリズムを4px相当のグリッドで揃えるために、3種類の行間と文字サイズに応じた行間の値を計算できるTypographic Scaleを制作しました。これによって算出された値をValue Tokenとして使用します。

Typographic Scaleで算出した値のうち、11px以上の実用的なバリエーションを選んで、Mサイズが1rem = 16pxに相当するようにXXSからXXXLまでの名前を割り当てました。

Sass function

font-sizeを取得できます。

Syntax

get-font-size($level)

Usage

@use '@inhouse/inhouse-components-web' as inhouse;

.example {
  font-size: inhouse.get-font-size($level: m);
}
LevelFont size(Pepper flavor)
xxs11px
xs12px
s14px
m16px
l18px
xl21px
xxl26px
xxxl32px

line-heightを取得できます。

Syntax

get-line-height($level, $density)

Usage

@use '@inhouse/inhouse-components-web' as inhouse;

.example {
  font-size: inhouse.get-line-height($level: m, $density: normal);
}
LevelDensityLine height(Pepper flavor)
xxscomfort20px
normal20px
dense16px
xscomfort24px
normal20px
dense16px
scomfort28px
normal24px
dense20px
mcomfort28px
normal24px
dense20px
lcomfort32px
normal28px
dense24px
xlcomfort40px
normal32px
dense28px
xxlcomfort48px
normal40px
dense36px
xxxlcomfort56px
normal40px
dense40px

Sass mixin

font-sizeとline-heightの組み合わせを取得できます。

Syntax

text($level, $density)

Usage

@use '@inhouse/inhouse-components-web' as inhouse;

.example {
  @include inhouse.text($level: m, $density: normal);
}