『教科書体』ってどんなフォント? UDデジタル教科書体を使ってみた

2017-12-06

フォント
Macのキーボードには『San Francisco』というフォントが使われています。AppleがApple WatchやiPhoneの為にデザインしたフォントです。

 

こんにちは! アキオ(@hiroakio97)です。

2017年10月、マイクロソフトはWindows 10向けの無償アップデート『Windows 10 Fall Creators Update』をリリースしました。

このアップデートで『UDデジタル教科書体』という新しいフォントが追加されたこと、みなさんご存知でしょうか?

 

今回はこの新フォント・UDデジタル教科書体をウェブサイトに使ってみましたというお話。
新フォントの特徴からあなたのウェブサイトのフォントを変更する方法までお伝えします。

たかがフォント、されどフォント。
フォントを変えると、サイトのイメージもけっこう変わります!

UDデジタル教科書体ってどんなフォント?

このページを最新のWindows 10 PCでご覧の方は、今ディスプレイに表示されている文字がUDデジタル教科書体です。
それ以外の端末でご覧の方、以下に何点かフォントのスクリーンショットを貼りますので参考にしてください。

フォントを変更しました。
現在、このブログ内で使われているフォントは游ゴシックです。

そもそも教科書体ってどんな書体?

通常、「フォント」といえばゴシック体明朝体が一般的ですね。

では、教科書体とこのゴシック体・明朝体は一体何が違うのでしょう?
三省堂の大辞林によると、教科書体とは

和文書体の一。教科書に用いるための、毛筆の楷書体に近い書体。
出典元 : 教科書体コトバンク

 

とのことです。

つまり、教科書体とは私たちが普段手で書く文字に近い書体ということですね。

 

具体的に比較してみましょう。

教科書体の特徴が分かりやすい3文字を例に挙げてみました。

いかがでしょう?

こうして比較すると、ゴシック体と明朝体はけっこうデフォルメされてるのが分かります。

”心”の点の位置や”道”のしんにょうは、手書きの文字とはかなり違いますね。

対して、教科書体は文字本来の形や画数を素直に表現したフォントと言えます

 

UDデジタル教科書体の特徴

じゃあなんでウェブの世界では教科書体は使われず、ゴシック体が一般的なの?ということですが、原因は以下の2点です。

  • 昔はディスプレイの解像度が低かった
  • Windowsの和文フォントのレンダリングがショボかった

 

これらの要因のため、これまでは教科書体と明朝体のトメ・ハネなど強弱を含んだ線微妙な曲線をディスプレイ上でうまく表現することができませんでした。
線がギザギザしたり、細部が潰れたりして読みにくかったわけです。

 

この欠点を解決し、満を持して投入されたのが今回の新フォント・UDデジタル教科書体です!

UDデジタル教科書体の”UD”はユニバーサルデザインの頭文字をとったもの。

このフォントを開発したTypeBankさんによると”「UDデジタル教科書体」は、デジタル教科書をはじめとしたICT教育の現場に効果的なユニバーサルデザイン書体です。学習指導要領に準拠し、書き方の方向や点・ハライの形状を保ちながらも、太さの強弱を抑え、ロービジョン(弱視)、ディスレクシア(読み書き障害)に配慮したデザイン”とのことです。

 

つまり、紙やパッケージにプリントされた姿ではなく、ディスプレイに表示されることを第一義としてデザインされた教科書体ということですね。

詳しくはTypeBankさんのデジタル教科書のための新しい教科書体「UDデジタル教科書体」をみていただくとして、ここでは従来の教科書体とUDデジタル教科書体がどう違うかを見ていきましょう。

筆書きの楷書ではなく硬筆やサインペンを意識”しているという言葉の通り、これなら従来の教科書体や明朝体と違い、ディスプレイ上でも読みやすそうです!

 

CSSのfont-familyでUDデジタル教科書体を指定する

ということで、さっそくUDデジタル教科書体をあなたのブログに使ってみましょう。

方法は簡単。
CSSのfont-familyプロパティにUDデジタル教科書体を意味する値『'UD デジタル 教科書体 NK-R’』を指定してやるだけです。

末尾の”NK-R”は英数かなプロポーショナルでレギュラーウェイトを意味します。

「プロポーショナルとかウェイトとか、何さ?」って方、ここでは深く考えすぎずそういうものだと覚えておきましょう。

具体的にはCSSの中にこう書きます。

CSSの例
p {

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

セレクタ(上記例の”p”にあたる部分)はお使いのサービスやテーマに合わせて適宜変更してください。

なお、レギュラー(R)太字(B)の2つのウェイトと、それぞれのウェイトに等幅(N)英数プロポーショナル(NP)英数かなプロポーショナル(KP)の3つのバリエーションが用意されています。



まとめ 『いくら図書館のきまりでもね』ではなぜ教科書体を使うのか?

最近、6歳の長男がよく字を読み書きするようになりました。

本や街の看板、お店のチラシなどなど、いろんなところで活字を目にするわけですが、「さ」や「ふ」、「や」など、フォントによって微妙に形が違うので少し混乱している節があるんですよね。
なので、「せめて私が運営するブログくらい正しい字を使いたいなー」と思ったのが教科書体を採用した理由です。

単に私が新しい物好きっていうのもありますが。。

 

(追記)

ここまで持ち上げてきたUDデジタル教科書体ですが、このブログでも結局元の游ゴシックに戻しました。
理由に興味のある方は下の記事をご覧ください。

ということで、Windows 10で新たに追加されたUDデジタル教科書体について紹介しました。
「面白いフォントだなー」って思ったらぜひ一度使ってみてください!

 

なお、「フォントって面白いな」「フォントについてもっと知りたい!」と思われた方には、こちらの書籍がオススメです。

デザインの中でフォントが果たす役割や効果について詳しく解説されています。
デザインの参考書としてはもちろん、単に読み物としても面白いです。

 

ではでは。