目に優しいフォントをパソコンに入れてみる【UDフォント】

「いろんな人に配慮された設計」のことを、「ユニバーサル デザイン」といいます。

文字でも同様で、「ユニバーサル デザイン フォント（UDフォント）」は、加齢などで視力が弱くなっても、視認しやすくなるように配慮されています。

誰でも読みやすい字体なんだね♪

今回は、フォントメーカーとして有名な「モリサワ」が、一般公開したBIZ UDフォントを使ってみたいと思います。

1. モリサワのUDフォントがGoogleフォントに追加された

モリサワのフォントは、美しさに定評があり、通常は利用するのにライセンスを購入する必要があります。

デザイン用の字体データなので、けっして安くはありません。

そのモリサワのUDフォントが、Googleフォントに追加され、無料で公開されるようになりました。

モリサワのBIZ UDゴシック・明朝は、教育やビジネス文書作成などに活用できるよう、より多くの方にとって読みやすく使いやすいように設計されたユニバーサルデザインフォントです。

GitHub – googlefonts/morisawa-biz-ud-gothic

「ユニバーサル・デザイン」とは？

「ユニバーサル・デザイン」とは、どの年齢層や障害のある人でも、できるだけ自分で行動できるように設計することです。例えば、字体の視認性を高める工夫や、絵柄の色使いなどがあります。

chiilabo.com

字体は組み合わせて、見出し用（ゴシック体）と本文用（明朝体）で使い分けることが多いです。

BIZ UD明朝体は、線が細くなりがちな明朝体の中ではかなり読みやすいですね。

1-1. ライセンスはSIL OFL

BIZ UDフォントのライセンスは「SIL Open Font License 1.1」（OFL-1.1）で、個人利用・商用にかかわらず無償で利用でき、Webサイトやアプリに埋め込むこともできます。

ちなみに モリサワでは、他にもたくさんのUDフォントが販売され、いろいろな出版物で利用されています。

文字を見やすくする工夫がいっぱい詰まっているんだね！

2. GitHubからフォントをダウンロードする

ページにアクセスしたんだけど、どこからダウンロードできるの？

GitHubのGoogle Fontsにアクセスすると、「morisawa」のフォントは２種類 公開されています。

配布ページには、それぞれファイル一覧と「README.md（説明文）」が表示されます。

2-1. ttfファイルをダウンロードする

ファイルの場所（fonts/ttf）を探して、一つずつフォントを選び、「Download」ボタンを押します。

「ttf」って何？

「ttf」は、「TrueTypeフォント」というフォントファイルの形式です。

「ダウンロード」フォルダに、全部で6つのファイルが保存されました。

全部で約30MBですので、まぁまぁ大きなファイルですね。

3. ttfファイルをインストールする

フォントをダウンロードしても、そのままでは文章作成などで利用できません。ファイルを開いて「インストール」することで、利用できるようになります。

macの場合は、フォントは「Font Book.app」で開かれ、中身を確認できます。インストールを押すと、システムに組み込まれます。

これまでは、説明スライドを作成するのに、主に Googleの「Noto Sans JP」を使っていました。これも癖がなくて読みやすいです。これからは さらに「Biz UD」フォントも活用してみようと思います。

こちらもどうぞ

スマホの文字を大きく見やすくしたい【ディスプレイの設定】（Pixel 3の場合）

スマホの文字をもっと見やすくできないかな？「らくらくスマートフォン」などシニア向けスマホは、文字などが大きいことが特色です。しかし、一般のスマートフォンでも、自分に使いやすく設定を変更することができます。環境Pixel 3、Android 11まずは、アプリ一覧から「設定」アプリを探します。ほとんどのスマートフォンで、「ディスプレイ（画面）」の中に、「フォントサイズ」の項目があります。機種による細かな設定スマートフォンの機種によっては、ほかにも見やすくする設定があります。手元...

chiilabo.com

[WordPress] ブログの一部をウェブフォントに変更する 【Google Fontsを追加する】

ホームページを見ながら、デザインのメリハリをつけたいと思いました。そこで、今回はウェブフォントの変更をした話を書きます。コンテンツ管理システムとテーマこのホームページはWordPressのCocoonを利用して管理しています。環境コンテンツ管理システム：WordpressWordpressのテーマ：Cocoon利用したウェブフォント：Google Fonts利用しているシステム・テーマによって、CSSの読み込み・記述をどこにするか変わってきますよーGoogle Fontsでフ...

chiilabo.com

ブログの印刷時のスタイルを変更する【@media print】

スタイルシートは表示画面だけではなく、印刷時のスタイルを指定することもできます。今回は、先日（2020年6月1日）更新した。追加スタイルシートの中身をまとめておきます。追加CSSの中身このブログは冊子印刷でA4に2ページ分印刷したときに、文字サイズなど読みやすいように編集しています。そのまま印刷すると文字が大きすぎるかもしれません。このホームページではちょこちょこっとしたスタイルはWordPressの追加CSSに記述しています。今回、少し整理したので、まずはずらっとCSSをお...

chiilabo.com

QRコードを読み込むと、関連記事を確認できます。