Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

はじめに

前回 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 利用して爆速で開発を進めていきましょう。

MikihiroSaito
Javascript好きな人。ボホール在住エンジニア。 技術関連の記事をメインに情報を発信します。 Tyepscript、React、Vue(Nuxt)、Git、Docker等
https://blog.boholabo.com
yyphp
PHPerが毎週集まり、ざっくばらんに情報交換する雑談コミュニティ
https://yyphp.connpass.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away