EDITORIAL · DESIGN · CULTURE

Latest from Pen Online.

Pen Online のデザインシステム。Optima Nova LT Pro(欧文)と FOT-筑紫ゴシック Pr5 D(和文)の有償フォント混植で、雑誌的な格調を再現するモノクロームエディトリアル UI。記事タイトルには letter-spacing: 4.032px = 0.168em という非常に広い字送りを与え、雑誌『Pen』の組版を Web で再現する。weight は CSS 上 400 で固定し、書体名側で重みを切り替える Adobe Fonts 流の運用。computed style 実測値(2026-05-08 取得)に基づく。

最新記事を読む
Palette カラーパレット / モノクローム
Brand
Pen Black
#000000
本文・見出し・ロゴ
Page White
#ffffff
ページ背景
Surface
Soft Surface
#f6f6f6
補助面・サムネイル
Nav Modal
#86878d
ハンバーガー展開時
Nav Inner Mid
#9d9d9d
Series 等カテゴリ
Nav Inner Dark
#6f6f74
Magazine 帯

Typography タイポグラフィ階層 / Pen 雑誌組版の再現
Latest
56px / 300 / line-height 1.2 / letter-spacing 1.6px (0.04em)Display Optima Light
Art & Design
24px / 300 / line-height 1.0 / letter-spacing 0.96px (0.04em)大ナビカテゴリ
【厚さ10㎜以下の薄型パーペチュアルカレンダーの腕時計3選】
24px / 500 / line-height 1.5 / letter-spacing 4.032px (0.168em) ← 雑誌『Pen』の象徴記事タイトル h2 (筑紫+Syntax 混植)
Pen Membership · Pen Meet · Login · Search
16px / 500 / line-height 1.0 / letter-spacing 0.48px (0.03em)ナビ Optima Medium
本文テキスト / Pen Online は 1998 年創刊のカルチャー・デザイン誌『Pen』のオンライン版です。FOT-筑紫ゴシック Pr5 D(D = Demi Bold 相当)と Optima Nova LT Pro(Medium / Light)の有償フォント混植で、雑誌の権威性と現代性を両立する編集タイポグラフィを実現しています。letter-spacing は要素ごとに細かく設計され、記事タイトルでは 0.168em まで広げる雑誌的字送りが特徴。
16px / 500 / line-height 1.8 / letter-spacing normal / palt on本文 body 筑紫ゴシック
記事メタ情報 / Series · Magazine · Editor's Pick
14px / 500 / line-height 22.4px (1.6) / letter-spacing 1.568px (0.112em)記事メタ h2 sml
Buy Now ログイン 新規会員登録
CTA: 白地黒線(販売)/ 黒地白文字(機能)/ 透明地黒線・和文(登録)ボタン3種
Articles 最新記事 / Editorial Grid
All Art&Design Watch Travel Lifestyle Magazine
ART · DESIGN / 01
ART & DESIGN
【特集】 北欧モダニズムの再考 — フィンランドの巨匠たち
WATCH / 02
WATCH
【厚さ10㎜以下の薄型パーペチュアル】3選を読み解く
TRAVEL / 03
TRAVEL
京都 / 老舗茶舗のスペースデザイン
View All Articles

Badges & Tags バッジ・ラベル
Buy Now Subscribe Pen Magazine 特集 連載 編集部おすすめ
白地黒線(雑誌タグ風)/ 黒地白文字(強調ラベル)— アクセント色なし

Forms フォーム要素
デフォルト — border 1px solid #000 / radius 0
フォーカス — bg #f6f6f6 (微差で示す)

Spacing スペーシング
XS · 4px
S · 8px
M · 16px
L · 24px
XL · 48px
XXL · 80px