無料で使えるGoogle Fontsに追加された「モリサワ BIZ UDフォント」4種の特徴と表示例

タイムリーな話題ではなく、4月まで遡るお話ですが「モリサワ BIZ UDフォント」がGoogle Fontsで利用可能になりました。

かかかず
かかかず

私は、日頃から新ゴUDをよく使っているモリサワフォントユーザーです。

Google Fontで使えるようになった「モリサワ BIZ UDフォント」について、今回追加された4種類のフォントの特徴を、表示例を交え見ていきます。

是非、最後までご覧いただけたら嬉しいです。

Google Fontsに「モリサワ BIZ UDフォント」が追加

モリサワの「BIZ UDフォント」は、日常的なビジネス文書作成のためのUDフォント「MORISAWA BIZ+」で提供が開始されたフォントです。

写真:モリサワ公式 より

BIZ UDフォントは、「文字の形がわかりやすい」「文章が読みやすい」「読み間違えにくい」をコンセプトに開発されたユニバーサルデザインに配慮して作られたフォントです。

そんなモリサワの「BIZ UDフォント」が、Google Fontsに追加されました。

SILオープンフォントライセンスとは?

SILオープンフォントライセンスとは、フォントライセンスの1種です。モリサワのBIZ UDフォントは、商用利用が可能で、ソフトウェアに組み込んでの利用に制約がないSILオープンフォントライセンスです。有名なものではFontAwesomeもこれにあたるようです。

参考記事 「SILオープンフォントライセンス」って何?という方のためのざっくり解説

かかかず
かかかず

モリサワのフォントが無料で使えるなんて、すごい時代です。ありがとうございます。

Google Fontsの使い方と導入方法

ちなみに、Google FontsはHTMLとCSSにそれぞれコピペするだけで導入できてしまう簡単仕様です。

以下記事の冒頭の方に、導入方法をご紹介しているので詳細は以下の記事を参考にしてください。

Googleフォント 簡単に導入できるGoogle日本語Webフォント21種類とそれぞれの特徴と表示例

Google Fontsに追加されたモリサワ BIZ UDフォント4種

今回、Google Fontsに追加されたモリサワ BIZ UDフォントは以下の通りです。

  • BIZ UDMincho
  • BIZ UDPMincho
  • BIZ UDGothic
  • BIZ UDPGothic

大きく分けて「明朝体」と「ゴシック体」の2種に、それぞれのフォント名にPがついたプロポーショナルフォントも含め、全部で4つのフォントが追加されました。

この4種について、それぞれ見ていきましょう。

BIZ UDMincho

BIZ UDMinchoは、はねや払い・縦横の線に強弱がある明朝体のフォントです。

利用可能な font-weight は「Regular 400」の1種類で、線の強弱があるので長めの文章でも見やすい特徴があります。

BIZ UDMincho 400

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。1234567890 ABCDEFG

コードを表示する

HTML

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=BIZ+UDMincho&display=swap" rel="stylesheet">

CSS

font-family: 'BIZ UDMincho', serif;

Google Fontsに、同じ明朝で「Noto Serif JP」がありますが、

それよりも線が強くはっきりしており、縦書きでも横書きの場合でも明朝体を汎用的に使えそうなフォントです。

かかかず
かかかず

ちなみに、英数字が小さくなるので、英数字を漢字などと混合で使う場合は、後述のプロポーショナルフォントにした方が使い易いです。

BIZ UDPMincho

BIZ UDPMinchoは、この前に出てきた「BIZ UDMincho」のプロポーショナルフォントです。

プロポーショナルフォントは、以下のように特定の文字の間隔が自動調整されて,表示や印刷時に文字間が間延びしたような見栄えにならないフォントです。

BIZ UDMincho

iiiilllmmmmwwwwaaaaAAAAbbbBBB12345

BIZ UDPMincho

iiiilllmmmmwwwwaaaaAAAAbbbBBB12345

かかかず
かかかず

プロポーショナルフォントだと、英数字が調整されて、ひらがな・漢字などと併記しても馴染み易い形になります。

BIZ UDPMinchoの font-weight は「Regular 400」の1種類のみです。

BIZ UDPMincho 400

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。1234567890 ABCDEFG

コードを表示する

HTML

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=BIZ+UDPMincho&display=swap" rel="stylesheet">

CSS

font-family: 'BIZ UDPMincho', serif;

BIZ UDGothic

BIZ UDGothicは、ゴシック体のフォントで多少手描き感のある曲線を持つフォントです。

ほとんどの漢字が文字化けせずに利用することができ、多少の曲線がありながらもふところが広く、おおらかな印象なので、非常に使いやすいフォントだと思います。

かかかず
かかかず

Google Fontsの「M PLUS」フォントに近い印象でした。

BIZ UDGothicの font-weight は、「Regular 400」と「Bold 700」の2種類が使えます。

BIZ UDGothic 400

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。1234567890 ABCDEFG

コードを表示する

HTML

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=BIZ+UDGothic:wght@400;700&display=swap" rel="stylesheet">

CSS

font-family: 'BIZ UDGothic', sans-serif;

BIZ UDPGothic

BIZ UDPGothicは、ゴシック体のプロポーショナルフォントです。

このフォントでも、プロポーショナルフォントと比較すると以下のように、英数字のような文字幅の狭い文字と広い文字が調整されることで、使い易い見栄えのフォントです。

BIZ UDGothic

iiiilllmmmmwwwwaaaaAAAAbbbBBB12345

BIZ UDPGothic

iiiilllmmmmwwwwaaaaAAAAbbbBBB12345

BIZ UDPGothicの font-weight は、「Regular 400」と「Bold 700」の2種類が使えます。

BIZ UDPGothic 400

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。1234567890 ABCDEFG

コードを表示する

HTML

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=BIZ+UDPGothic:wght@400;700&display=swap" rel="stylesheet">

CSS

font-family: 'BIZ UDPGothic', sans-serif;

かかかず
かかかず

ふところと重心の絶妙なバランスは、さすがモリサワです。

さいごに

今回モリサワから追加された4種のフォントを使ってみましたが、デフォルトの状態だと「文字間」が狭めです。ので、余白を大きく取るクリエイティブなどでは、カーニングで調整をして余白をとるとハマりそうな印象でした。

そんなモリサワのUDフォントですが、格調高くビジネスライクなフォントなので是非使ってみてください。

カテゴリーのイラスト

同じカテゴリの記事一覧

ボタンの影