Skip to content
MENU

Soracom

Design System

Heading

Heading is a general component for styling heading content

Overview 

By default, the heading font, size and weight are optimized for UI usage but can be toggled for more general website usage using a global css var.

Options 

Basic usage 

<div class="ds-heading">空色 Sky blue</div>
<h1>空色 Sky blue</h1>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-heading">空色 Sky blue</div>
<h1>空色 Sky blue</h1>

HTML H1-H6 defaults 

SDS sets the standard html heading elements (h1-h6) to a default set of styles. There are 2 different sets of styles - UI (the default) and Web:

UI usage 

By default headings use Source Han Sans JP under a certain size:

Note: 1rem == 10px

Sample Element Typeface Size

空色 Sky blue

H1

空色 Sky blue

H2

空色 Sky blue

H3

空色 Sky blue

H4
空色 Sky blue
H5
空色 Sky blue
H6

Web usage 

You can switch SDS to use a different font size scale for headings by setting a global css var:

:root {
 --is-web-heading-scale: var(--ON);
}
Note: 1rem == 10px
Sample Element Typeface Size

空色 Sky blue

H1

空色 Sky blue

H2

空色 Sky blue

H3

空色 Sky blue

H4
空色 Sky blue
H5
空色 Sky blue
H6

Size and weight classes 

<div class="ds-heading --huge-bold">空色 Sky blue</div>
<div class="ds-heading --xxlarge">空色 Sky blue</div>
<h2 class="ds-heading --xxlarge">空色 Sky blue</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-heading --huge-bold">空色 Sky blue</div>
<div class="ds-heading --xxlarge">空色 Sky blue</div>
<h2 class="ds-heading --xxlarge">空色 Sky blue</div>

Normal weights 

UI usage 

By default headings use Source Han Sans JP under a certain size:

Note: 1rem == 10px

Sample Class Typeface Size
空色 Sky blue --xxhuge
空色 Sky blue --xhuge
空色 Sky blue --huge
空色 Sky blue --xxlarge
空色 Sky blue --xlarge
空色 Sky blue --large
空色 Sky blue --medium
空色 Sky blue --small
空色 Sky blue --xsmall
空色 Sky blue --xxsmall

Web usage 

You can switch SDS to use a Aeonik for all headings by setting a global css var:

:root {
 --is-web-heading-scale: var(--ON);
}
Note: 1rem == 10px
Sample Class Typeface Size
空色 Sky blue --xxhuge
空色 Sky blue --xhuge
空色 Sky blue --huge
空色 Sky blue --xxlarge
空色 Sky blue --xlarge
空色 Sky blue --large
空色 Sky blue --medium
空色 Sky blue --small
空色 Sky blue --xsmall
空色 Sky blue --xxsmall

Bold weights 

UI usage 

By default headings use Source Han Sans JP under a certain size:

Note: 1rem == 10px

Sample Class Typeface Size
空色 Sky blue --xxhuge-bold
空色 Sky blue --xhuge-bold
空色 Sky blue --huge-bold
空色 Sky blue --xxlarge-bold
空色 Sky blue --xlarge-bold
空色 Sky blue --large-bold
空色 Sky blue --medium-bold
空色 Sky blue --small-bold
空色 Sky blue --xsmall-bold
空色 Sky blue --xxsmall-bold

Web usage 

You can switch SDS to use a Aeonik for all headings by setting a global css var:

:root {
 --is-web-heading-scale: var(--ON);
}
Note: 1rem == 10px
Sample Class Typeface Size
空色 Sky blue --xxhuge-bold
空色 Sky blue --xhuge-bold
空色 Sky blue --huge-bold
空色 Sky blue --xxlarge-bold
空色 Sky blue --xlarge-bold
空色 Sky blue --large-bold
空色 Sky blue --medium-bold
空色 Sky blue --small-bold
空色 Sky blue --xsmall-bold
空色 Sky blue --xxsmall-bold

Visual states 

<div class="ds-heading --xxlarge-bold --alert">空色 Sky blue</div>
<div class="ds-heading --xlarge --success">空色 Sky blue</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-heading --xxlarge-bold --alert">空色 Sky blue</div>
<div class="ds-heading --xlarge --success">空色 Sky blue</div>

Component colors 

<div class="ds-heading --xxlarge-bold --color-celeste">空色 Sky blue</div>
<div class="ds-heading --xlarge --color-ink-light">空色 Sky blue</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-heading --xxlarge-bold --color-celeste">空色 Sky blue</div>
<div class="ds-heading --xlarge --color-ink-light">空色 Sky blue</div>

Icons 

<div class="ds-heading --xxlarge-bold --icon-basic-user">空色 Sky blue</div>
<div class="ds-heading --xlarge --icon-online">空色 Sky blue</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-heading --xxlarge-bold --icon-basic-user">空色 Sky blue</div>
<div class="ds-heading --xlarge --icon-online">空色 Sky blue</div>

Overriding heading size and weight 

ds-heading supports 2 css variables to control the font size and font weight --ds-heading-size and --ds-heading-weight.

The following global css variables are available for use when creating a custom css class.

Note: 1rem == 10px

var(--ds-heading-size-xxhuge);  //8.8rem
var(--ds-heading-size-xhuge);  //7.2rem
var(--ds-heading-size-huge);  //5.6rem
var(--ds-heading-size-xxlarge);  //4.2rem
var(--ds-heading-size-xlarge);  //3.2rem
var(--ds-heading-size-large);  //2.6rem
var(--ds-heading-size-medium);  //2.2rem
var(--ds-heading-size-small);  //1.8rem
var(--ds-heading-size-xsmall);  //1.5rem
var(--ds-heading-size-xxsmall);  //1.3rem
Overriding headings with preset css vars
<style>
  h1 {
    --ds-heading-size: var(--ds-heading-size-huge);
    --ds-heading-weight: normal;
  }

  .my-class {
    --ds-heading-size: var(--ds-heading-size-huge);
    --ds-heading-weight: normal;
  }
</style>
<h1>空色 Sky blue</h1>
<div class="ds-heading my-class">空色 Sky blue</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<style>
  h1 {
    --ds-heading-size: var(--ds-heading-size-huge);
    --ds-heading-weight: normal;
  }

  .my-class {
    --ds-heading-size: var(--ds-heading-size-huge);
    --ds-heading-weight: normal;
  }
</style>
<h1>空色 Sky blue</h1>
<div class="ds-heading my-class">空色 Sky blue</div>