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);

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の組み合わせを取得できます。

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）
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を制作しました。これによって算出された値をPrimitive 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);
}

Level	Font size（Pepper flavor）
xxs	11px
xs	12px
s	14px
m	16px
l	18px
xl	21px
xxl	26px
xxxl	32px

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);
}

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の組み合わせを取得できます。

Syntax

text($level, $density)

Usage

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

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