Typography
Spice Factory Design System
欧文と和文を役割で組み分けるためのページ。Cormorant Garamond は装飾的な欧文と数字、Zen Old Mincho は和文の見出しとエディトリアル本文、Noto Sans JP は和文の標準本文と機能的英数字を担う。すべて Open Font License で配布可能。和欧混植では用途のフォントが英数字も担当し、書体を混ぜない原則を取る。
欧文 Display = Cormorant Garamond、日本語見出し・エディトリアル本文 = Zen Old Mincho、日本語標準本文 = Noto Sans JP。すべて Open Font License。。
フォント別 Type Specimen
3 つの採用フォントの素材感（グリフ・字種・ウェイト・サイズ階段）を 1 ページで把握できる見本。
Cormorant Garamond
役割: 装飾的欧文 — ロゴ、英文見出し、タグライン、Display 数字。oldstyle-nums がデフォルト。
Weights & Styles
Zen Old Mincho
役割: 日本語見出し（700）／ エディトリアル本文（400）。書籍トーン、長文の読みもの向け。
Weights
Noto Sans JP
役割: 日本語標準本文。UI 文字列、機能的英数字（URL / 日付 / 版番号）も担当。
Weights
英数字の組み方ルール
英数字を含むテキストは「装飾的か機能的か」で組み分ける:
| 種別 | 対象 | フォント |
|---|---|---|
| 装飾的欧文 | ブランド表記、英文見出し Spice Factory Inc. |
ds.font.family.cormorant Cormorant Garamond |
| 機能的英数字単独表記 | URL、メール、コード、電話番号、年月日、版番号 https://spice-factory.co.jp / 2026-05-21 / v1.0.0 創業 2010 年 / 10 周年 |
ds.font.family.notoSansJp Noto Sans JP（標準・サンセリフ） or ds.font.family.zenMincho Zen Old Mincho（書籍・明朝） |
| 和欧混植 | 和文中に英数字が混じる文 クライアントの DX を Digital Integrator として支援 |
用途のフォントが英数字も担当 見出し→Zen Old Mincho／本文→Noto Sans JP |
NG 例: URL を Cormorant で組む → セリフ細線が小サイズで潰れて読みにくくなる。
数字スタイル（Cormorant Garamond）
Cormorant Garamond は oldstyle-nums がデフォルト（書籍・本文に馴染む）。揃った数字が必要な箇所は .num-lining クラスで切替。Noto Sans JP / Zen Old Mincho にはこの切替は意味を持たない。
| Token | サンプル | 用途 |
|---|---|---|
| ds.font.feature.numerals.default oldstyle-nums |
0 1 2 3 4 5 6 7 8 9 Since 2010 — Vol. 4 |
本文・書籍トーンの装飾的欧文。3 4 5 7 9 がディセンダで、テキストに馴染む |
| ds.font.feature.numerals.display lining-nums .num-lining |
0 1 2 3 4 5 6 7 8 9 Since 2010 — Vol. 4 |
大型 Display の統計・年号・揃った数字が映える箇所 |
Token 一覧
| Token | Family | Weight | Style | Size | Line | Tracking | 用途 |
|---|---|---|---|---|---|---|---|
| ds.text.brand.logo | Cormorant | 400 | normal | 72px | 1.05 | −0.03em | Spice Factory Inc. |
| ds.text.display.h1 | Cormorant | 400 | normal | 44px | 1.05 | −0.03em | 英文 H1 |
| ds.text.display.h2 | Cormorant | 400 | italic | 28px | 1.2 | −0.02em | 英文 H2 |
| ds.text.heading.h2 | Zen Old Mincho | 700 | normal | 28px | 1.5 | 0.02em | 日本語見出し H2 |
| ds.text.heading.h3 | Zen Old Mincho | 700 | normal | 22px | 1.5 | 0.02em | 日本語見出し H3 |
| ds.text.body.default | Noto Sans JP | 400 | normal | 15px | 1.9 | 0.04em | 日本語本文（標準） |
| ds.text.body.editorial | Zen Old Mincho | 400 | normal | 15px | 1.9 | 0.04em | 日本語本文（エディトリアル） |
| ds.text.caption | Noto Sans JP | 400 | normal | 12px | 1.5 | 0.04em | キャプション |
サンプル
英文 H1 / Cormorant 400 Roman / 44px
Priority 5.
英文 H2 / Cormorant 400 Italic / 28px
We make the world a better place, one pixel at a time
日本語見出し H2 / Zen Old Mincho 700 / 28px
世界に驚きと感動を、僕らのこの手で。
日本語見出し H3 / Zen Old Mincho 700 / 22px
世界に驚きと感動を、僕らのこの手で。
日本語本文（標準） / Noto Sans JP 400 / 15px / 行間 1.9
高度なシステム開発から息を飲むような美しい UI デザイン、そしてサービスのグロースを強力に推進するマーケティング支援まで。クライアント企業のデジタル・トランスフォーメーション（DX）を全方位で支援する Digital Integrator です。
エディトリアル本文 / Zen Old Mincho 400 / 15px / 読み物用
スパイスファクトリーは 2016 年に創業した。当時、まだ「DX」という言葉も一般化していなかったころ、私たちはすでにデジタルがビジネスの形そのものを変える時代を見据えていた。
キャプション / Noto Sans JP 400 / 12px
注釈・出典・補助情報を表示するためのキャプションスタイル。
Composed preview — 全要素を組み合わせた 1 ページ風
Spice Factory Inc.
Priority 5.
We make the world a better place, one pixel at a time
世界に驚きと感動を、
僕らのこの手で。
高度なシステム開発から息を飲むような美しい UI デザイン、そしてサービスのグロースを強力に推進するマーケティング支援まで。クライアント企業のデジタル・トランスフォーメーション（DX）を全方位で支援する Digital Integrator です。
私たちが目指すのは、テクノロジーとデザインの両輪で、世界中の人々に驚きと感動を届けること。プロジェクトの規模やフェーズを問わず、戦略立案から実装・運用まで一気通貫で伴走します。
— Editorial body example
スパイスファクトリーは2016年に創業した。当時、まだ「DX」という言葉も一般化していなかったころ、私たちはすでに、デジタルがビジネスの形そのものを変える時代を見据えていた。創業から10年、関わってきたプロジェクトの数は数百を超える。けれども、その一つひとつに込めた想いは創業時から変わらない。それは「世界に驚きと感動を、僕らのこの手で」届けるということ。