タイポグラフィ改善でブログの可読性を向上させる

前回[[ブログの課題を解決する「考える技術・書く技術」の実践フレームワーク]]でUIの問題を洗い出しました。その結果、タイポグラフィの問題があるという仮説を立てています。これが正しいか検証します。修正方法は1冊ですべて身につくWeb ＆グラフィックデザイン入門講座を参考にしました。タイポグラフィの詳細はWeb上に豊富な資料があります。そこで本稿では要点だけを簡潔にまとめています。

いまのblogの状態

修正前1

文字の色や書体について何も気にしていません。
backgroundが灰色で見づらい気がします。
見出しの大きさ、行間はこれでいいのか分かりません。

タイポグラフィではどう考えるのか、みていきます。

タイポグラフィとは

簡単にいうと文字を綺麗にする技術。文字の配置、色、形などが含まれます。基本的なことを記述していきます。

書体

見た目の分類です。

和文の長文は明朝体、セリフ体が良く、太字は可読性を下げるので避ける。
スライドや一目で分かるようにするのは、ゴシック体やサンセリフ体がいい。

文字サイズ

文字サイズの基準は一般的なようです。

用途	デジタル
本文(通常)	14~20px
本文(子供、高齢者など)	16~20px
最小文字サイズ	10px以上

ジャンプ率

本文に対しての見出しの比率のことをいいます。

本文に対して1.5～2倍がいいようです

行間

通常、0.5~1文字分です。このあたりは試してみます。１行は４０文字前後が一般的です。６０文字以上の場合、行間を通常よりも広めに設定したほうが見やすくなります。

タイポグラフィの原理を適用する

実際に修正していきます。

書体

本文にはNoto Serif Japaneseを採用しました。見出しはNoto Sans Japaneseにしました。劇的な変化はまだ感じにくいです。

修正前2

Next.jsではこのように書きました。

// src\app\(i18n)\lang\[lang]\layout.tsx

const notoSerifJp = Noto_Serif_JP({
  subsets: ['latin'],
  weight: ['400'],
  style: ['normal'],
  display: 'swap',
  variable: '--font-noto-serif-jp',
});

const notoSansJp = Noto_Sans_JP({
  subsets: ['latin'],
  weight: ['400'],
  style: ['normal'],
  display: 'swap',
  variable: '--font-noto-sans-jp',
});

export default async function RootLayout({
  children,
  params,
}: Readonly<{
  children: React.ReactNode;
  params: Promise<{ lang: 'en' | 'ja' }>;
}>) {
  return (
    <html lang={(await params).lang} className={`${notoSansJp.variable} ${notoSerifJp.variable}`}>
      <body>
        <OriginalI18nProvider>{children}</OriginalI18nProvider>
        <FirebaseAnalytics />
      </body>
    </html>
  );
}

cssでの記載はこんな感じで記載する。


.blog {
  margin-top: 50px;
  font-family: var(--font-noto-serif-jp), serif;
  background-color: #f9f9f9;
  color: #333;
  line-height: 1.6;
  padding: 1rem;
  max-width: 84vw;
}

文字サイズとジャンプ率

本文の大きさを20pxとしました。これを1remにしました。ジャンプ率はh2は1.5倍、h1は2倍にしました。

やや見やすくなったと思います。

修正前3

CSSはこのような感じです。

html {
  font-size: 125%;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

:root {
  --h1FontSize: 2rem;
  --h1FontWeight: 400;
  --h2FontSize: 1.5rem;
  --h2FontWeight: 400;
  --pFontSize: 1rem;
  --pLineHeight: 1.8;
  --timeFontSize: 1rem;
}

行間

line-heightの値を通常は1.5、mediaのwidthが768pxより大きくなったら、1.8にしました。見やすくなったと思います。

修正後

まとめ

今回、UIが悪い原因としてあったタイポグラフィを改善をしました。

書体をNoto Serif Japanese,Noto Sans Japaneseに変えました。
本文フォントを20 px / 1 rem に統一しました。見出しのジャンプ率を1.5～2にしました。
line-heightを1.5(768px以上の場合は1.8)にしました。もちろん、修正すべき点はまだ残っています。それでも改善の一歩は踏み出せました。