HTML

フォント分類 - HTML

フォント分類は、タイポグラフィにおける書体を体系的に分類するための枠組みです。1954年にフランスのタイポグラフィ歴史家マクシミリアン・ヴォックス(Maximilien Vox)が提案したVox分類法を基礎としており、1962年に国際タイポグラフィ協会(ATypI)が採用したVox-ATypI分類が最も広く認知されています。この分類体系では、セリフ、サンセリフ、スクリプト、ディスプレイなどの主要カテゴリに加え、それぞれのサブカテゴリによって書体の特徴を詳細に分類します。

タイポグラフィ フォント 書体分類 デザイン Vox分類 ATypI
<table>
<thead><tr><th>code</th><th>slug</th><th>name</th><th>description</th><th>subcategories</th></tr></thead>
<tbody><tr><td>01</td><td>serif</td><td>セリフ</td><td>文字の末端に小さな線(セリフ)を持つ書体カテゴリです。</td><td>[{&quot;code&quot;:&quot;01-01&quot;,&quot;slug&quot;:&quot;old-style&quot;,&quot;name&quot;:&quot;旧スタイル(オールドスタイル)&quot;,&quot;examples&quot;:[&quot;Garamond&quot;,&quot;Palatino&quot;,&quot;Jenson&quot;]},{&quot;code&quot;:&quot;01-02&quot;,&quot;slug&quot;:&quot;transitional&quot;,&quot;name&quot;:&quot;トランジショナル&quot;,&quot;examples&quot;:[&quot;Times New Roman&quot;,&quot;Baskerville&quot;,&quot;Georgia&quot;]},{&quot;code&quot;:&quot;01-03&quot;,&quot;slug&quot;:&quot;didone&quot;,&quot;name&quot;:&quot;ディドーヌ(モダン)&quot;,&quot;examples&quot;:[&quot;Bodoni&quot;,&quot;Didot&quot;,&quot;Walbaum&quot;]},{&quot;code&quot;:&quot;01-04&quot;,&quot;slug&quot;:&quot;slab-serif&quot;,&quot;name&quot;:&quot;スラブセリフ&quot;,&quot;examples&quot;:[&quot;Rockwell&quot;,&quot;Courier&quot;,&quot;Clarendon&quot;]}]</td></tr>
<tr><td>02</td><td>sans-serif</td><td>サンセリフ</td><td>セリフを持たない書体カテゴリです。</td><td>[{&quot;code&quot;:&quot;02-01&quot;,&quot;slug&quot;:&quot;grotesque&quot;,&quot;name&quot;:&quot;グロテスク&quot;,&quot;examples&quot;:[&quot;Franklin Gothic&quot;,&quot;News Gothic&quot;,&quot;Akzidenz-Grotesk&quot;]},{&quot;code&quot;:&quot;02-02&quot;,&quot;slug&quot;:&quot;neo-grotesque&quot;,&quot;name&quot;:&quot;ネオグロテスク&quot;,&quot;examples&quot;:[&quot;Helvetica&quot;,&quot;Arial&quot;,&quot;Univers&quot;,&quot;Roboto&quot;]},{&quot;code&quot;:&quot;02-03&quot;,&quot;slug&quot;:&quot;geometric&quot;,&quot;name&quot;:&quot;ジオメトリック&quot;,&quot;examples&quot;:[&quot;Futura&quot;,&quot;Avenir&quot;,&quot;Avant Garde&quot;]},{&quot;code&quot;:&quot;02-04&quot;,&quot;slug&quot;:&quot;humanistic&quot;,&quot;name&quot;:&quot;ヒューマニスティック&quot;,&quot;examples&quot;:[&quot;Gill Sans&quot;,&quot;Frutiger&quot;,&quot;Optima&quot;,&quot;Verdana&quot;]}]</td></tr>
<tr><td>03</td><td>script</td><td>スクリプト</td><td>手書きやカリグラフィーを模した書体カテゴリです。</td><td>[{&quot;code&quot;:&quot;03-01&quot;,&quot;slug&quot;:&quot;formal-script&quot;,&quot;name&quot;:&quot;フォーマルスクリプト&quot;,&quot;examples&quot;:[&quot;Snell Roundhand&quot;,&quot;Zapfino&quot;,&quot;Bickham Script&quot;]},{&quot;code&quot;:&quot;03-02&quot;,&quot;slug&quot;:&quot;casual-script&quot;,&quot;name&quot;:&quot;カジュアルスクリプト&quot;,&quot;examples&quot;:[&quot;Brush Script&quot;,&quot;Kaufmann&quot;,&quot;Freestyle Script&quot;]},{&quot;code&quot;:&quot;03-03&quot;,&quot;slug&quot;:&quot;calligraphic&quot;,&quot;name&quot;:&quot;カリグラフィック&quot;,&quot;examples&quot;:[&quot;Lucida Calligraphy&quot;,&quot;Monotype Corsiva&quot;]},{&quot;code&quot;:&quot;03-04&quot;,&quot;slug&quot;:&quot;blackletter&quot;,&quot;name&quot;:&quot;ブラックレター&quot;,&quot;examples&quot;:[&quot;Fraktur&quot;,&quot;Old English&quot;,&quot;Textura&quot;]}]</td></tr>
<tr><td>04</td><td>display</td><td>ディスプレイ</td><td>視覚的インパクトを重視した装飾的な書体カテゴリです。</td><td>[{&quot;code&quot;:&quot;04-01&quot;,&quot;slug&quot;:&quot;decorative&quot;,&quot;name&quot;:&quot;デコラティブ&quot;,&quot;examples&quot;:[&quot;Cooper Black&quot;,&quot;Lobster&quot;,&quot;Bebas Neue&quot;]},{&quot;code&quot;:&quot;04-02&quot;,&quot;slug&quot;:&quot;retro-vintage&quot;,&quot;name&quot;:&quot;レトロ・ヴィンテージ&quot;,&quot;examples&quot;:[&quot;Futura&quot;,&quot;Neutraface&quot;,&quot;Steelfish&quot;]},{&quot;code&quot;:&quot;04-03&quot;,&quot;slug&quot;:&quot;grunge-distressed&quot;,&quot;name&quot;:&quot;グランジ・ディストレス&quot;,&quot;examples&quot;:[&quot;Bleeding Cowboys&quot;,&quot;Trash Hand&quot;]},{&quot;code&quot;:&quot;04-04&quot;,&quot;slug&quot;:&quot;novelty&quot;,&quot;name&quot;:&quot;ノベルティ&quot;,&quot;examples&quot;:[&quot;Comic Sans&quot;,&quot;Papyrus&quot;,&quot;Hobo&quot;]}]</td></tr>
<tr><td>05</td><td>monospace</td><td>モノスペース</td><td>すべての文字が同じ幅を持つ書体カテゴリです。</td><td>[{&quot;code&quot;:&quot;05-01&quot;,&quot;slug&quot;:&quot;slab-monospace&quot;,&quot;name&quot;:&quot;スラブモノスペース&quot;,&quot;examples&quot;:[&quot;Courier&quot;,&quot;Courier New&quot;,&quot;American Typewriter&quot;]},{&quot;code&quot;:&quot;05-02&quot;,&quot;slug&quot;:&quot;sans-monospace&quot;,&quot;name&quot;:&quot;サンセリフモノスペース&quot;,&quot;examples&quot;:[&quot;Consolas&quot;,&quot;Monaco&quot;,&quot;Source Code Pro&quot;,&quot;Fira Code&quot;]}]</td></tr>
<tr><td>06</td><td>symbol-dingbat</td><td>シンボル・ディンバット</td><td>記号や図形を含む特殊な書体カテゴリです。</td><td>[{&quot;code&quot;:&quot;06-01&quot;,&quot;slug&quot;:&quot;dingbats&quot;,&quot;name&quot;:&quot;ディンバット&quot;,&quot;examples&quot;:[&quot;Zapf Dingbats&quot;,&quot;Wingdings&quot;,&quot;Webdings&quot;]},{&quot;code&quot;:&quot;06-02&quot;,&quot;slug&quot;:&quot;icon-fonts&quot;,&quot;name&quot;:&quot;アイコンフォント&quot;,&quot;examples&quot;:[&quot;Font Awesome&quot;,&quot;Material Icons&quot;,&quot;Ionicons&quot;]}]</td></tr></tbody>
</table>