Typography

タイポグラフィに使用するCSS

詳しい導入事例は導入方法を参照してください。

  • DEMO

H1 テキスト Lorem ipsum 012345

H2 テキスト Lorem ipsum 012345

H3 テキスト Lorem ipsum 012345

H4 テキスト Lorem ipsum 012345

H5 テキスト Lorem ipsum 012345
H6 テキスト Lorem ipsum 012345

Bld テキスト Lorem ipsum 012345

body テキスト Lorem ipsum 012345

normal テキスト Lorem ipsum 012345

Min テキスト Lorem ipsum 012345

Sub テキスト Lorem ipsum 012345

Short テキスト Lorem ipsum 012345

monospace テキスト Lorem ipsum 012345

serif テキスト Lorem ipsum 012345

link テキスト Lorem ipsum 012345
hover テキスト Lorem ipsum 012345

text-align: left;

text-align: right;

text-align: center;

Class Copy

使い方

クラス名に+-h1-+等のHTMLタグ名を採用していますが、HTMLタグに関係なくサイズ指定として使用してください。

+-.mono-+は等幅フォント。ランキング等の数字の時に使える。

hover用のCSSはhoverページにあります。

  • CSS
.txt.link {
    color: var(--link-color);
    cursor: pointer;
  }
  
  .txt.h1 {font-size: 2rem;}      /*32px*/
  .txt.h2 {font-size: 1.875rem;}  /*30px*/
  .txt.h3 {font-size: 1.625rem;}  /*26px*/
  .txt.h4 {font-size: 1.5rem;}    /*24px*/
  .txt.h5 {font-size: 1.375rem;}  /*22px*/
  .txt.h6 {font-size: 1.125rem;}  /*18px*/
  .txt.bd {font-size: 1rem;}      /*16px*/
  .txt.min {font-size: 0.875rem;} /*14px*/
  .txt.sub {opacity: 0.7;}
  .txt.bld {font-weight: bold;}
  .txt.nml {font-weight: normal;}
  
  .txt.serif {font-family: "游明朝","Yu Mincho","ヒラギノ明朝 ProN","Hiragino Mincho ProN",serif;}
  .txt.mono {font-family: "Meiryo",monospace;}
  
  .txt.al {text-align: left;}
  .txt.ar {text-align: right;}
  .txt.ac {text-align: center;}
  
  @media screen and (max-width: 768px) {
    .XS_.bld {font-weight: bold;}
    .XS_nml {font-weight: normal;}
  
    .XS_al {text-align: left;}
    .XS_ar {text-align: right;}
    .XS_ac {text-align: center;}
  }