モリサワ
文字を通じて社会に貢献する
モリサワのフォント

1924 年の邦文写真植字機の発明から、書体をつくり続けてきました。読みやすさを設計するユニバーサルデザイン書体を、あらゆる画面と印刷物へ。

01 — COLORS

カラーパレット

地は純白 #ffffff。テキストは純黒 #000000 と段落用の #0c0c0c。青は用途で 3 段に分かれ、リンクは #0086ce、見出しは #3071b9、プロモと強調小見出しだけが鮮烈な #003cff。カテゴリ面にシアンとイエローを添える。

Link Blue
#0086ce
リンク・アイコン・アウトライン文字
Heading Blue
#3071b9
セクション見出し・ピル面
Vivid Blue
#003cff
プロモバー・強調小見出し(点の色)
Cyan
#00a3e9
製品カテゴリ面
Yellow
#ffcc19
組込み・オリジナルフォント面
Sky
#8ed8f6
Webフォントカテゴリの淡い面
Pale Yellow
#feeea4
注意喚起の淡い黄面
CTA Charcoal
#4c4c4c
主要 CTA の面色
Ink
#000000
見出し・body の基本テキスト
Ink Soft
#0c0c0c
段落テキスト/フッター面
Surface
#f7f7f7
カード・セクション面
Border
#e5e5e5
罫・ページネーションのトラック

02 — TYPOGRAPHY

タイポグラフィ

和文は自社の UD 書体「UD新ゴ NT Pr6N」一系統。太さは font-weight ではなくファミリー名(-Light / -Reg / -Med)の切り替えで作る。letter-spacing 0.05em がグローバルに効き、palt は使わない。

モリサワのフォント
Display (Products) · UD新ゴ NT Reg · 56px · weight 400 · lh 1.0 · ls 0.05em · #3071b9
文字を通じて社会に貢献する
Display (Concept) · UD新ゴ NT Reg · 50px · weight 400 · lh 1.4 · ls 0.05em
書体見本・書体見聞
Page Title · UD新ゴ NT Light · 36px · weight 400 · lh 1.7 · ls 0.05em
PICK UP
Section Head · UD新ゴ NT Reg · 30px · weight 500 · lh 1.0 · ls 0.05em
高品質でバラエティ豊かなフォントを提供する
Accent Head · UD新ゴ NT Med · 18px · weight 400 · lh 1.7 · ls 0.044em · #003cff
美しい書体、読みやすい書体。フォントとつくる無限のアイデア。
Lead · UD新ゴ NT Light · 20px · weight 400 · lh 1.8 · ls 0.05em
読み物本文 — ユニバーサルデザイン書体は、文字の形をできるだけ判別しやすく設計した書体です。ふところを広く取り、濁点や半濁点を大きく、線の交差部分をすっきりと処理することで、小さな文字サイズでも、限られた明るさの環境でも読み違えにくくなります。
Body (Article) · UD新ゴ NT Light · 14px · weight 400 · lh 2.0 · ls 0.05em
本文(既定) — 書体は、読む人のためにあります。組版のリズムをつくるのは、字面と行間と字間の設計です。
Body · UD新ゴ NT Light · 14px · weight 400 · lh 1.5 · ls 0.05em
© Morisawa Inc. — Design System Preview
Footer Small · 12.5px · weight 400 · lh 1.4 · ls 0.08em · #999999

03 — ARTICLE

組版サンプル

読みやすさを、設計する。

モリサワは 1924 年、邦文写真植字機の発明から始まりました。以来 100 年、活字から写植へ、写植からデジタルフォントへと媒体は変わっても、文字をつくるという仕事の芯は変わっていません。

UD 書体という考え方

ユニバーサルデザイン書体は、見た目の美しさと引き換えに読みやすさを犠牲にしないための設計です。ふところを広く、線の交差をすっきりと。小さな文字でも、暗い場所でも、読み違えにくい字形を目指しています。

この考え方は Web でも同じです。行間は 1.5 以上、読み物なら 2.0。字間は 0.05em だけ開く。プロポーショナル詰め(palt)は掛けません。等幅に設計された字面こそが、読みやすさの根拠だからです。書体見本を見る


04 — BUTTONS

ボタン

主要 CTA はチャコール #4c4c4c のソリッド(radius 4px)。副次はブルーアウトライン(radius 8px、右に矢印用の余白)。ピルは出典・カテゴリの表示に使う。彩度の高いブルーはボタンではなく見出しと帯へ。

フォント採用事例を見る ダウンロード 教育機関プラン Webフォント note

05 — CARDS

製品カード

面色の差でカテゴリを識別する。シアン・イエロー・スカイをカテゴリ面に、濃色カードは #333333。角丸は 8px。

個人・法人向け
Morisawa Fonts
サブスクリプションで全書体を利用
組込みフォント
Embedded Fonts
機器・サービスへの組込みライセンス
Webフォント
TypeSquare
デザイナーの意図した書体を画面に
Select Pack
基本7書体パック
明朝体・ゴシック体の定番を収録

06 — FORMS

フォーム

デフォルト / フォーカス / エラーの3状態。radius 4px、フォーカスはリンクブルー #0086ce、エラーは暖色の赤 #cc3333。

正しい電話番号を入力してください。
送信する

07 — ELEVATION

奥行き

全体はフラット寄り。影は「細い 1px の輪郭」か「広く薄いぼかし」の二極で、濃い落ち影は使わない。書体の輪郭を邪魔しないことを優先する。

Level 0
none(既定)
Level 1
0 0 0 1px rgba(0,0,0,.15)
Level 2
0 1px 0 0 rgba(0,0,0,.15)
Level 3
0 2px 20px rgba(0,0,0,.07)

08 — LAYOUT

スペーシング

4 / 8 / 16 / 24 / 40 / 64 / 96px。コンテナは最大 1200px(標準 1032〜1100px)、読み物カラムは 620px。

XS 4
S 8
M 16
L 24
XL 40
XXL 64
XXXL 96
高品質でバラエティ豊かなフォントを提供する、モリサワの新しいサブスクリプションサービス ▶ Morisawa Fonts