フォント

トップ > フォント

目次

等幅フォントとプロポーショナルフォント

等幅フォント」はすべての文字が同じ幅を持ちます。「プロポーショナルフォント」は、読みやすさを優先して文字によって横幅が異なります。

等幅 This is Japan.
プロポーショナル This is Japan.

等幅フォント」の場合、英数字などは、漢字などの 1/2 の横幅になります。前者を通常「半角文字」、後者を通常「全角文字」と呼びます。英字、数字、片仮名等は、全角文字、半角文字がそれぞれ定義されています。

半角文字 ABCabc 123123 +-*#%@
全角文字

Windows では、「MS ゴシック」と「MS 明朝」、MacOS では「Osaka-等幅」が等幅フォントになります。

セリフ体とサンセリフ体

文字の始まり、終わり、曲げの部分につけられる突起を「serif(セリフ)」と呼びます。日本では「ヒゲ」とも呼ばれます。「明朝体」はヒゲのあるセリフ体です。

// セリフ有り(明朝体)
あいうアイウ安以宇ABCabc123
// セリフ有り(Times New Roman)
ABCDEFG abcdefg 0123456789

sans-(サン)」は「無い」という意味で、「sans-serif(サンセリフ)」はヒゲの無い書体を示します。「ゴシック体」はヒゲの無いサンセリフ体です。

// セリフ無し(ゴシック体)
あいうアイウ安以宇ABCabc123
// セリフ無し(Courier New)
ABCDEFG abcdefg 0123456789

ビットマップフォントとアウトラインフォント

ドットの情報で表現するフォントをビットマップフォント、文字の輪郭線を曲線関数の集合として表現するフォントをアウトラインフォントと呼びます。ビットマップフォントを拡大すると、昔のファミコンの様なギザギザが現れますが、アウトラインフォントは拡大しても綺麗に表示されます。昔はビットマップフォントが主流でしたが、最近はほとんどのフォントがアウトラインフォントになっているようです。

カーニング

プロポーショナルフォントの文字間隔を、隣り合う文字の組み合わせによって微妙に文字詰めすることを カーニング と呼びます。CSS の font-kerning でカーニングの有無を指定することができます。下記を Chrome や Firefox で表示すると、カーリングの有無により文字間隔が微妙に調整されていることが分かります。

カーニング無しYaYuYo
カーニング有りYaYuYo

合字(リガチャ)

隣り合う文字によって微妙にフォントの形状を変更することを 合字(リガチャ) と呼びます。CSS の font-variant-ligatures で合字の有無を指定することができます。下記を Windows 版 Firefox で見ると、合字有りの場合 f の横線同士や、i の点が f にくっつくのが分かります。

合字無しffi
合字有りffi

アラビア語の合字もすごいです。

合字前ش م س / م ر ح بً ا
合字後شمس / مرحبًا

Windowsで利用可能な日本語フォント

// MS ゴシック
美しい日本語フォントが好き 0123 This is Japan.
// MS Pゴシック
美しい日本語フォントが好き 0123 This is Japan.
// MS 明朝
美しい日本語フォントが好き 0123 This is Japan.
// MS P明朝
美しい日本語フォントが好き 0123 This is Japan.
// MS UI Gotic
美しい日本語フォントが好き 0123 This is Japan.
// メイリオ(Meiryo)
美しい日本語フォントが好き 0123 This is Japan.
// Meiryo UI
美しい日本語フォントが好き 0123 This is Japan.
// 游ゴシック(Yu Gothic)
美しい日本語フォントが好き 0123 This is Japan.
// 游明朝(Yu Mincho)
美しい日本語フォントが好き 0123 This is Japan.
// Yu Gothic UI
美しい日本語フォントが好き 0123 This is Japan.

macOSで利用可能な日本語フォント

// ヒラギノ角ゴ ProN W3(Hiragino Kaku Gothic ProN)
美しい日本語フォントが好き 0123 This is Japan.
// ヒラギノ明朝 ProN W3(Hiragino Mincho ProN)
美しい日本語フォントが好き 0123 This is Japan.
// ヒラギノ角ゴシック(Hiragino Sans)
美しい日本語フォントが好き 0123 This is Japan.

英字フォント

// Helvetica (Win/Mac)
ABCDEFG abcdefg 0123456789 This is Japan.
// Helvetica Neue (Mac)
ABCDEFG abcdefg 0123456789 This is Japan.
// Arial (Win/Mac)
ABCDEFG abcdefg 0123456789 This is Japan.
// Geneva (Mac)
ABCDEFG abcdefg 0123456789 This is Japan.
// Courier (Win/Mac)
ABCDEFG abcdefg 0123456789 This is Japan.
// Courier New (Win/Mac)
ABCDEFG abcdefg 0123456789 This is Japan.
// Times (Win/Mac)
ABCDEFG abcdefg 0123456789 This is Japan.
// Times New Roman (Win/Mac)
ABCDEFG abcdefg 0123456789 This is Japan.
// Century (Win)
ABCDEFG abcdefg 0123456789 This is Japan.
// Comic Sans(Comic Sans MS) (Win/Mac)
ABCDEFG abcdefg 0123456789 This is Japan.
// Georgia (Win/Mac)
ABCDEFG abcdefg 0123456789 This is Japan.
// Verdana (Win/Mac)
ABCDEFG abcdefg 0123456789 This is Japan.
// Impact (Win)
ABCDEFG abcdefg 0123456789 This is Japan.
// Arial Black (Win/Mac)
ABCDEFG abcdefg 0123456789 This is Japan.
// Calibri (Win)
ABCDEFG abcdefg 0123456789 This is Japan.
// Consolas (Win)
ABCDEFG abcdefg 0123456789 This is Japan.
// Segoe UI (Win)
ABCDEFG abcdefg 0123456789 This is Japan.
// Monaco (Mac)
ABCDEFG abcdefg 0123456789 This is Japan.
// Menlo (Mac)
ABCDEFG abcdefg 0123456789 This is Japan.

CSSで定義されているフォント

CSSで本文に指定すべき推奨フォントの例

デフォルトは sans-serif とし、Windows 用には 游ゴシック が薄くて見ずらいので Meiryo を採用。Mac 用(和文)には JIS2004字形に対応する ヒラギノ角ゴ ProN、Mac/iOS/iPad(英文)用に Helvetica Neue を指定。Office をインストールした Mac で Meiryo が採用されないように、Meiryo を後ろに指定。

font-family:
    "Helvetica Neue",			/* macOS/iOS/iPadOS(英文) */
    "Hiragino Kaku Gothic ProN",	/* Mac OS X 10.5(2006年) */
    Meiryo,				/* Windows Vista(2006年) */
    sans-selif;				/* 上記以外 */

CSSでコード表示に指定すべき推奨フォントの例

ソースコード表示用には下記を指定しています。デフォルトは monospace、和文用は上記と同じ。Windows 用の等幅英文フォントとして Consolas、Mac 用の等幅英文フォントとして Menlo を指定しています。Monaco はそろそろはずしていいかな。

font-family:
    Menlo,				/* Mac OS X 10.6(2009年) */
    Consolas,				/* Windows Vista(2006年) */
    "Hiragino Kaku Gothic ProN",	/* 和文コメント用:Mac OS X 10.5(2006年) */
    Meiryo,				/* 和文コメント用:Windows Vista(2006年) */
    monospace;				/* 上記以外 */

フォントのサンプル

それぞれのフォントのサンプルは下記を参照してください。

Unicode対応の Noto フォント

@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
body {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 100%;
}

Copyright (C) 2012 杜甫々
初版:2012年5月2日、最終更新:2012年5月12日
http://www.tohoho-web.com/ex/font.html