Typography.jsによるフォントスタイルの設定まとめ

はじめに

前回 gatsby-starter-typescript-power-blog を使ったブログを構築しました。

Netlify CMS と Gatsby の Typescript Starter を使ってブログを構築

しかしこの Starter を使うと記事の見出しに使われる文字の大きさが日本語とアルファベット全然違いました。かなりバランスがおかしいです。

私は普段 webpack と font loader を利用してフォントを読み込んでいるのですが、今回 gatsby-starter-typescript-power-blog では typography がデフォルトで設定されていました。

フォントはNoto Sans JPという Google の日本語フォントで統一したかったので、今回は勉強をかねて Typography でのフォントの設定方法をまとめていきたいと思います。

Typography

Typographyはフォント周りのスタイルを簡単に提供できるようになった API です。

デザインを一から作成する場合にテキストのマージンや太さ文字列の高さを毎回定義して、計算するのはかなりの労力と手間がかかってしまいます。

そこで今回使うものが Typography になります。

どうやら Typography は gatsby を開発されたチームが開発に携われているようです。

これは各フォントの設定を行うと自動的に文字の大きさやウエイト、マージンを計算し直し、定義してくれます。これによりフォントのスタイル定義の工数を大幅に減らすことができるのがメリットとなります。

Typography の導入

まず Gatsby を使用されている場合には typography 自体と gatsby で使用するためのプラグインを入れましょう

yarn add typography gatsby-plugin-typography

gatsby-config.js でプラグインに以下の設定を追加します

{  
   resolve:'gatsby-plugin-typography',
   options:{  
      pathToConfigModule:'src/utils/typography.ts',
   }
}

gatsby の設定ファイルを書いたら次に typography の設定ファイルを作成します。

src/utils/typography.ts

import Typography from 'typography';
import config from '../../config/SiteConfig';

const typography = new Typography({
  baseFontSize: config.baseFontSize,
  baseLineHeight: 1.66,
  scaleRatio: 3.157,
  headerFontFamily: [config.headerFontFamily, 'sans-serif'],
  bodyFontFamily: [config.bodyFontFamily, 'sans-serif'],
  headerWeight: 700,
  googleFonts: [
    {
      name: config.headerFontFamily,
      styles: ['700'],
    },
    {
      name: config.bodyFontFamily,
      styles: ['400'],
    },
  ],
});

// Hot reload typography in development.
if (process.env.NODE_ENV !== 'production') {
  typography.injectStyles();
}

export default typography;

今回は Starter でデフォルトで設定されている/config/SiteConfig については省きますが、config.headerFontFamily と config.bodyFontFamily には Noto Sans JP という文字列を定義しています。

これで body と header のフォントをそれぞれ定義しました。非常に簡単です。

設定内容一覧

option	内容
title	テーマのタイトル
baseFontSize	ピクセルによる基本のフォントサイズ。デフォルトは 16px
baseLineHeight	基本の line height の大きさ。単位なしの数値で定義。デフォルトは 1.45
scaleRatio	文字の大きさの割合。baseFontSize との相対的な文字の大きさを定義。例えば scaleRatio が 2、baseFontSize が 16px であれば h1 は 32px となる。
googleFonts	Google Font の設定を配列で設定できる
headerFontFamily	header のフォントに対しての['Helvetica', 'sans-serif']のようなフォントファミリースタックの配列を設定。デフォルトは system UI のフォントスタックが適用される
bodyFontFamily	body に対するフォントに対して font family のスタックの配列を設定。デフォルトは['georgia', 'serif']
headerColor	header の基本フォントカラーを指定。デフォルトは上位からの継承
bodyColor	body の基本フォントカラーを指定。デフォルトは hsl(0,0%,0%,0.8)
headerWeight	header の基本フォントウエイトを指定。デフォルトは bold
bodyWeight	body の基本フォントウエイトを指定。デフォルは normal.
boldWeight	bold の大きさを定義。デフォルトは bold
blockMarginBottom	ブロック要素に対する基本 margin bottom の指定。デフォルト line-height の高さがそのままそのブロック要素の高さになる
includeNormalize	normalize.css を読み込ませるかどうかの指定。デフォルトは true で normalize.css を読み込む。読み込まない場合は false にする
overrideStyles	自動的に追加された style に対し、オーバーライドで上書きするために必須の API。 Vertical Rhythm object や the options object、algorithmically generated styles と一緒に呼び出される
overrideStyles	基本的にはサードパーティー製のテーマを使用する場合にそれをオーバーライドで上書きするために必要なAPI

まとめ

普段私は最初に scss でテーマカラーやフォントのスタイルを定義していったり、アトミックデザインに基づいたコンポーネントに対して Atom の下に_nano というグループを作成し、styled-component でのフォントの定義をエクスポートして利用したりと初期設定の工数がそれなりにかかっていました。

ただ Typography のテーマを使用すればそういった初期の style 定の工数を減らして開発環境を整えることが可能になるかと思うのでまた別プロジェクトに今の設定ファイルを使いまわせそうかと思います。
みなさんもぜひ Typography 利用して爆速で開発を進めていきましょう。