ブログデザイン備忘録 ～ モリサワフォント

以前紹介したGoogle Fontに読みやすいことで定評のあるモリサワフォントが使用できるようになった。

利用方法については通常のGoogle Fontと同じ。

atatat.hatenablog.com

モリサワのBIZ UDゴシックは、教育やビジネス文書作成などに活用できるよう、より多くの方にとって読みやすく使いやすいように設計されたユニバーサルデザインフォントです。読みやすさとデザインバランスに優れた、すっきりとしたUDゴシック書体で、漢字の省略できるハネやゲタを取ることで、文字をクリアに見せています。大きめな字面でも文字としてのかたちのバランスを損ねないよう、フトコロなどの空間を細かく調整しています。かなは漢字に比べてやや小ぶりに作られており、細いウエイトで長文を組むとほどよい抑揚が生まれます。

以下のようにGoogle fontからモリサワフォント(BIZUDGothic, BIZUDPGothic, BIZUDPMincho)をインポートする。

<style>
@import url('https://fonts.googleapis.com/css2?family=BIZ+UDGothic&family=BIZ+UDPGothic&family=BIZ+UDPMincho&display=swap');
</style>

<div class="BIZUDGothic">彼らの機器や装置はすべて生命体だ。</div>
<div class="BIZUDPGothic">彼らの機器や装置はすべて生命体だ。</div>
<div class="BIZUDPMincho">彼らの機器や装置はすべて生命体だ。</div>

CSSのフォント名は'それぞれ 'BIZ UDGothic', 'BIZ UDPGothic', 'BIZ UDPMincho'として指定する。

.BIZUDGothic{
font-family: 'BIZ UDGothic', sans-serif;
font-size:30px;
}
.BIZUDPGothic{
font-family: 'BIZ UDPGothic', sans-serif;
  font-size:30px;
}
.BIZUDPMincho{
font-family: 'BIZ UDPMincho', serif;
font-size:30px;
}

以下、上からMSゴシック、MSPゴシック、MSP明朝、モリサワ BIZ UDゴシック, BIZ UDPゴシック, BIZ UD明朝のフォント比較になる。

See the Pen moriawa font by ATATAT (@atatat) on CodePen.