ブログをひと手間でおしゃれに!文字のデザイン3つのポイント

一からブログテーマを自作したことのあるITエンジニアの僕が実際に使っている、文字に関するちょっとしたデザインのテクニックを3つご紹介いたします。

ひと手間かけるだけで結構ブログの見栄えやユーザビリティが変わりますよ。

1. 文字の間隔

文字が詰まっていると非常に読みにくいものです。見栄えだけでなく、ユーザビリティにも関わってくる要素ですね。

文字間隔はCSSで調節します。

行と行との間隔は「line-height」、文字と文字の間隔は「letter-spacing」というプロパティで設定できます。

僕のブログは以下のようにしています。

body {
  line-height: 1.8em;
  letter-spacing: 0.1em;
}

ブログで使用しているテーマやフォントによって最適な間隔は違うと思います。一般的には、日本語フォントは欧文フォントよりも広めな行間隔が必要となるそうです。更には、日本語フォントの中でも明朝体よりもゴシック系のほうが広めな行間隔が望ましいです。

少しずつCSSの値を変えていって調節するといいと思います。

2. 文字の色

本文内の重要な部分の色を変えて強調することはあっても、意外と通常の文字の色は意識しない部分だと思います。

本文の背景は真っ白(#ffffff)である場合が多いと思います。その場合のあなたのブログの文字の色、「真っ黒(#000000)」になっていませんか?

真っ白な背景に真っ黒な文字色である場合、コントラストの強さで目が疲れやすくなるそうです。これではユーザビリティが良くないですね。

そこで、本文の背景が真っ白である場合は文字色を灰色に近づけることをおすすめします。そうすることで背景と文字との色のコントラストが緩和されます。

僕のブログでは以下の設定となっています。

body {
  color: #545454;
}

3. ウェブフォント

ウェブフォントとは、ネット上のストレージ経由で参照可能なフォント形式のことです。

ウェブフォントは自身のサーバに置いてもOKですし、CDN(コンテンツデリバリネットワーク)の仕組みを使うこともできます。

CDNの定番はGoogle Fontsです。日本語フォントもあります。

以前は日本語のウェブフォントは重いとよく言われていました。Google Fontsは実際に使用していますが、重くないです。技術が進歩したのでしょうか。

ウェブフォントを使うと簡単にブログに個性を出すことができます。

Google Fontsであれば使い方は簡単です。

まずは以下をブログ内のheadタグの間に挿入します。(以下は「Noto Sans JP」の例です。フォントによって?family=以下が変わりますので詳しくはhttps://fonts.google.com/を参照してください)

<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP" rel="stylesheet">

これで自分のブログ内にウェブフォントが読み込まれ、いつでも使用可能な状態になります。

あとは、使いたい場面で以下のようにCSSを設定するだけです。

body {
  font-family: 'Noto Sans JP', sans-serif;
}

まとめ

文字主体になりがちなブログにおいて、文字に関するデザインは見栄えやユーザビリティに関わる大事な要素です。

せっかくなので文字のデザインにはこだわっていきましょう。