フォントワークス株式会社はMonotype株式会社へ商号変更しました
2026.06.04 フォントワークス LETS ゲーム・アプリ組込・頒布オプションおよび Monotype LETS ゲーム組込・頒布オプション提供開始のご案内 ニュース ›
ア
あおかね EB
# アニメ # ブログ # つばめ # 藤田重信 # 極小画面 # 字幕 # フォトからフォント検索 # たづがね角ゴシック ↗
COLORS
配色
Brand
Crimson
#d70c19
主色。CTA の枠と文字・カード見出し・現在地
Deep Crimson
#b1000f
KV 右面 ＋ その上のタグの面（最頻 61 回）
Notice Black
#0a1111
商号変更の告知バー。純黒ではない
Neutral
Ink
#1a1a1a
既定の文字色・ツールチップ／メニューの面
Background
#fafafa
ページ地色。純白ではない
Surface
#ffffff
ボタン・入力・チップの面（押せるものの白）
Border
#dddddd
セカンダリの枠・区切り罫
Disabled
#c9c9c9
非活性の面。文字は白
TYPOGRAPHY
組版 — 3 系統の書体を用途で使い分ける
# 藤田重信　# たづがね角ゴシック　# Fate/Grand Order
筑紫明朝（代替 Shippori Mincho）/ 20.57px / 450 / ls 1.03px (0.05em) / font-feature-settings: "palt"KV タグ — 唯一の明朝・唯一の字間
筑紫書体という選択肢——書体が文章の温度を決める
UD角ゴ（代替 BIZ UDPGothic）/ 18px / 500 / lh 1.667 (30px) / ls normal / "halt"カード見出し — 紅で組む
書体見本　／　あ 明朝系　／　か 角ゴシック系
UD角ゴ / 16px / 300（R） / lh 1.0 / ls normalナビ・本文系 — 300 で軽い
企業情報　Fontへの取り組み　製品・サービス
UD角ゴ / 14px / 500（D）/ lh 1.0 / ls normalグローバルナビ
カード本文 — 小さい文字を読ませるために、行間だけを 1.875 に広げます。字間は normal のまま。約物「」（）、。の詰めは font-feature-settings: "chws" が担当するので、letter-spacing で足しません。
UD角ゴ / 14px / 300 / lh 1.875 (26.25px) / ls normal読ませるブロック
書体見本 ›　ニュース ›　あとで見るに追加
UD角ゴ / 12px / 500 / lh 1.571 (18.86px) / ls normalボタン（S）
アニメ　ゲーム　出版・印刷　パッケージ　オリジナルフォント制作
UD角ゴ / 10px / 300（R）/ lh 1.0絞り込みチップ — サイト最小の文字

OpenType 機能を 3 つ打ち分ける

機能適用先効き方
chws既定（body から全継承）文脈を見て約物を詰める。本文向き
haltカード見出し・ニュース見出し約物を一律半角へ。短い見出しを締める
paltKV のタグ（明朝）のみ詰めた上で letter-spacing 0.05em で開き直す
normalbutton / input / selectフォームコントロールでは機能を切る
SPECIMEN
書体見本 — 大きい文字は常に商品の書体に譲る
テロップ明朝 Pro D
国語の授業で永遠を
テロップ明朝 ProN D（N仕様）
国語の授業で永遠を
UD角ゴ_スモール Pr6 DB
おきにいりのフライパン

見本の文字は 40px / weight 300 / line-height 1.333。UI の見出しは 20px を超えさせない。Pro と ProN は両方を等価に並べて字形の違いを見せる。書体名は white-space: nowrap で折り返さない。

BUTTONS
操作 — 塗りボタンは存在しない
ニュース ›
Primary — 白地 ＋ 1px #d70c19
書体見本 ›
Secondary — 枠だけ #dddddd に
各プランを見る
Primary（大）— 18px / 400
オリジナルフォント制作
Filter Chip — radius 100px
グリッドビュー
Tooltip — 面 #1a1a1a
送信できません
Disabled — 面 #c9c9c9
1 2 3 » Pagination — 現在地だけ紅の塗り（radius 100px）
# アニメ # 筆文字フォント # LETS20周年

radius は 32px（ボタン）と100px（チップ・丸）の 2 値だけ。4px / 8px / 16px を持ち込まない。KV のタグは面を #b1000f（背景と同色）にして 1px solid rgba(255,255,255,0.3) の半透明枠で浮かせる。

CARDS
カード・ニュース — 角丸ゼロ
筑
筑紫書体の 20 年
藤田重信が設計した筑紫書体シリーズの歩みと、仮名の造形について。
読む ›
UD
UD書体を UI に使う
10〜14px の小さい文字ほど、UD 書体の字面の広さが効きます。
読む ›
た
たづがね角ゴシック
和文と欧文の重心を合わせるために設計された、多言語対応のゴシック体。
読む ›
2026.06.04 フォントワークス LETS ゲーム・アプリ組込・頒布オプション提供開始のご案内 詳細 ›
2026.05.21 書体検索に「フォトからフォント検索」機能を追加しました 詳細 ›
2026.04.02 新書体「あおかね」EB ウェイトをリリース 詳細 ›
FORMS
入力 — フォームでは OpenType 機能を切る
デフォルト — 1px solid #dddddd / radius 32px / font-feature-settings: normal
フォーカス — border: #d70c19（影は付けない）
エラー — border: #d70c19（既存の紅をそのまま使い、新しい赤を足さない）
Textarea は radius 0（32px のピルに複数行は入らない）
ELEVATION
階層 — 影は 1 つも無い
地 #fafafa
ページ全体・ヘッダー
面 #ffffff
ボタン・入力・チップ
反転 #1a1a1a
ツールチップ・フッター
紅 #d70c19
KV・現在地・強調

box-shadow はサイト内に 1 つも存在しない。地 #fafafa と面 #ffffff の「5 の差」だけで押せるものを浮かせる。

LAYOUT
寸法
XXS 3
XS 6
S 10
S 13
M 16
L 32
XL 40
XXL 60
Main Container 1320px
Header Padding 0 40px 0 60px（左右非対称）

ボタンの padding が 6px 13px / 7px 10px と奇数を含むのは、1px の枠を含めた実寸を揃えるため。

Generated from fontworks.co.jp DESIGN.md — awesome-design-md-jp / computed style 実測値（2026-08-15）
実サイトの書体は 既定 "Tsukushi Gothic"（筑紫ゴシック）、 UI "UD Kakugo Small"（UD角ゴ_スモール）、 KV タグ "Tsukushi Mincho"（筑紫明朝）。 いずれも自社書体のドメイン配信のためローカルでは表示されない。 ここでは Zen Kaku Gothic New（筑紫ゴシック）／BIZ UDPGothic（UD角ゴ_スモール。同じ UD 系）／Shippori Mincho（筑紫明朝）で代替している。 font-feature-settings: "chws" も代替書体では効かないため、実サイトの約物の詰まり方とは異なる。