タイムリーな話題ではなく、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に追加されました。
モリサワのフォントが無料で使えるなんて、すごい時代です。ありがとうございます。
Google Fontsの使い方と導入方法
ちなみに、Google FontsはHTMLとCSSにそれぞれコピペするだけで導入できてしまう簡単仕様です。
以下記事の冒頭の方に、導入方法をご紹介しているので詳細は以下の記事を参考にしてください。
簡単に導入できる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種類で、線の強弱があるので長めの文章でも見やすい特徴があります。
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。1234567890 ABCDEFG
コードを表示する
<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">
font-family: 'BIZ UDMincho', serif;
Google Fontsに、同じ明朝で「Noto Serif JP」がありますが、
それよりも線が強くはっきりしており、縦書きでも横書きの場合でも明朝体を汎用的に使えそうなフォントです。
ちなみに、英数字が小さくなるので、英数字を漢字などと混合で使う場合は、後述のプロポーショナルフォントにした方が使い易いです。
BIZ UDPMincho
BIZ UDPMinchoは、この前に出てきた「BIZ UDMincho」のプロポーショナルフォントです。
プロポーショナルフォントは、以下のように特定の文字の間隔が自動調整されて,表示や印刷時に文字間が間延びしたような見栄えにならないフォントです。
iiiilllmmmmwwwwaaaaAAAAbbbBBB12345
iiiilllmmmmwwwwaaaaAAAAbbbBBB12345
プロポーショナルフォントだと、英数字が調整されて、ひらがな・漢字などと併記しても馴染み易い形になります。
BIZ UDPMinchoの font-weight
は「Regular 400」の1種類のみです。
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。1234567890 ABCDEFG
コードを表示する
<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">
font-family: 'BIZ UDPMincho', serif;
BIZ UDGothic
BIZ UDGothicは、ゴシック体のフォントで多少手描き感のある曲線を持つフォントです。
ほとんどの漢字が文字化けせずに利用することができ、多少の曲線がありながらもふところが広く、おおらかな印象なので、非常に使いやすいフォントだと思います。
Google Fontsの「M PLUS」フォントに近い印象でした。
BIZ UDGothicの font-weight
は、「Regular 400」と「Bold 700」の2種類が使えます。
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。1234567890 ABCDEFG
コードを表示する
<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">
font-family: 'BIZ UDGothic', sans-serif;
BIZ UDPGothic
BIZ UDPGothicは、ゴシック体のプロポーショナルフォントです。
このフォントでも、プロポーショナルフォントと比較すると以下のように、英数字のような文字幅の狭い文字と広い文字が調整されることで、使い易い見栄えのフォントです。
iiiilllmmmmwwwwaaaaAAAAbbbBBB12345
iiiilllmmmmwwwwaaaaAAAAbbbBBB12345
BIZ UDPGothicの font-weight
は、「Regular 400」と「Bold 700」の2種類が使えます。
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。1234567890 ABCDEFG
コードを表示する
<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">
font-family: 'BIZ UDPGothic', sans-serif;
ふところと重心の絶妙なバランスは、さすがモリサワです。
さいごに
今回モリサワから追加された4種のフォントを使ってみましたが、デフォルトの状態だと「文字間」が狭めです。ので、余白を大きく取るクリエイティブなどでは、カーニングで調整をして余白をとるとハマりそうな印象でした。
そんなモリサワのUDフォントですが、格調高くビジネスライクなフォントなので是非使ってみてください。