TAG
#タイポグラフィ
8 件の記事がこのタグでまとめられています。
Design
<dialog> / Popover / <details name> をデザイナーの目で使い分ける
ネイティブ HTML の overlay 3 兄弟、<dialog> と Popover API と <details name> を AetherEchoes の管理画面と記事ページで実装してみた。「閉じ方」のデザインを先に決めれば、3 つの使い分けはほぼ自動で決まります。
2026年5月18日 00:09
Design
Drop Cap とローマ数字の使いどころ
Essay 部門にだけ Drop Cap を、Engineering 部門にだけセクション番号を使う。装飾の使い分けで部門を区別する設計。
2026年5月9日 20:03
Design
和英混植のタイポグラフィを組む
Bricolage Grotesque + Zen Kaku Gothic New + Fraunces + Noto Serif JP。記事本文と見出しで使い分ける和英ペアリングの考え方。
2026年5月9日 20:03
Design
B+A Hybrid デザインシステム採択の記録
AetherEchoes に採択した B+A Hybrid 案。Atlas をメイン軸に、Reader 記事に Ledger の編集ツールを差し込むハイブリッド。
2026年5月9日 20:03
Design
タイポグラフィのテンポを文字間で作る
letter-spacing は飾りじゃない。見出し・キャプション・small caps の場面で、文字間が「速度」を作る。
2025年9月9日 09:00
Design
インラインの強調記号を整える 5 つのルール
太字・斜体・下線・コード・リンク。本文中で混ざりがちなインライン要素のルールを揃えるだけで、可読性は大きく変わる。
2025年7月2日 09:30
Design
24px の基準線でフォントサイズ系列を組む
見出しから本文まで、フォントサイズと行送りを 24px の倍数に揃える。たった 1 つのルールで、誌面の落ち着きが変わる。
2025年6月4日 11:30
Design
余白で読ませる、という日本語タイポグラフィの作法
欧文と日本語ではテキストが「呼吸する」場所が違う。日本語の縦組み・横組みで余白をどう設計するかを実例とともに。
2025年5月21日 10:00