ブログの表示フォントにユニバーサルデザインフォントを使う

f:id:c-miya:20190410175655j:plain 先日、Twitterなんかでユニバーサルデザインのフォントが読みやすくてディスレクシアの人にも読みやすいというのを見ました。そんなに読みやすいのなら、ブログの文字もそれにすればいいんじゃない?というのが今回の記事です。

ディスレクシアというのは、Wikipediaによれば 文字の読み書き学習に著しい困難を抱える障害 とのことです。→参考

Windowsには標準でインストール済み

Webフォントでユニバーサルデザインのものを使おうとしても、一応Adobe Fontsなんかにはあるのですが、使える人は限られてるし重さを気にする人もいるので、ローカルにあるものを使います。

実はWindows 10では「UD デジタル 教科書体」と「BIZ UDゴシック」が入っています。どうやら2018年のアップデートで追加されているようです。なのでこれを使うことにします。スマホやMac、古いWindowsではインストールされてませんが、無視します。今回はWindows 10でしっかりアップデートもしている人だけを対象にします。それぐらい大まかでいいじゃない。

ちなみに、Twitterでも話題となったUD デジタル 教科書体というのと、BIZ UDゴシックというのがありました。教科書体でもいいですが、一般的なブログにはBIZ UDゴシックのほうが似合うかもしれません。まぁ好みです。

やり方

簡単に、もうcssでbodyに入れてあげればいいです。

body{
  font-family: 'UD デジタル 教科書体 N-R';
}

フォント名のところはBIZ UDゴシックとか、使いたいものを入れればOKです。日本語名のほかに英語名も入れるのが一般的ですが、そのあたりは先日書いた記事を見てください。

使ってみる

メイリオ あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。私は Diridon 駅を6:20 p.m. に発車する列車に乗った。ここは<b>タグによる太字です。
游ゴシック あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。私は Diridon 駅を6:20 p.m. に発車する列車に乗った。ここは<b>タグによる太字です。
UD デジタル 教科書体 N-R あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。私は Diridon 駅を6:20 p.m. に発車する列車に乗った。ここは<b>タグによる太字です。
UD デジタル 教科書体 NP-R あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。私は Diridon 駅を6:20 p.m. に発車する列車に乗った。ここは<b>タグによる太字です。
BIZ UDゴシック あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。私は Diridon 駅を6:20 p.m. に発車する列車に乗った。ここは<b>タグによる太字です。
BIZ UDPゴシック あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。私は Diridon 駅を6:20 p.m. に発車する列車に乗った。ここは<b>タグによる太字です。

画像版↓ f:id:c-miya:20190410180911j:plain

メイリオや游ゴシックに比べ、行間がかなり違います。フォントがない場合も考えると、これは統一しておいたほうがよさそうです。

メイリオ あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。私は Diridon 駅を6:20 p.m. に発車する列車に乗った。ここは<b>タグによる太字です。
游ゴシック あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。私は Diridon 駅を6:20 p.m. に発車する列車に乗った。ここは<b>タグによる太字です。
UD デジタル 教科書体 N-R あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。私は Diridon 駅を6:20 p.m. に発車する列車に乗った。ここは<b>タグによる太字です。
UD デジタル 教科書体 NP-R あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。私は Diridon 駅を6:20 p.m. に発車する列車に乗った。ここは<b>タグによる太字です。
BIZ UDゴシック あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。私は Diridon 駅を6:20 p.m. に発車する列車に乗った。ここは<b>タグによる太字です。
BIZ UDPゴシック あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。私は Diridon 駅を6:20 p.m. に発車する列車に乗った。ここは<b>タグによる太字です。

画像版↓ f:id:c-miya:20190410181141j:plain

line-heightをしっかり指定してあげれば、どのフォントでも同じような行間になります。もし使うのであれば、line-heightも一緒に指定したほうがいいでしょうね。

body{
  font-family: 'BIZ UDPゴシック';
  line-height: 1.6;
}

まとめ

表示フォントって、ブログの雰囲気も決めてしまうので慎重に行きたいところです。線の細いちょっとカッコよさをを出したいブログだと游ゴシック使ってるところが多いですよね。でもポップやかわいい系、おちゃらけた雰囲気のブログには合わないかな?と個人的には思います。

私もそういう繊細でかっこいい系にはなれそうにないので今まではメイリオが好きだったのですが、今後はBIZ UDゴシックを使うのもいいかな?と思ってます。英数字はまた別の欧文フォントにするかもですが。

悩ましくて楽しいですね。