「等幅フォント」はすべての文字が同じ幅を持ちます。「プロポーショナルフォント」は、読みやすさを優先して文字によって横幅が異なります。
| 等幅 | T | h | i | s | i | s | J | a | p | a | n | . |
|---|
| プロポーショナル | T | h | i | s | i | s | J | a | p | a | n | . |
|---|
「等幅フォント」の場合、英数字、漢字などの文字種毎に文字の幅が均一になります。「ＭＳ ゴシック」「Osaka-等幅」「BIZ UDゴシック」などでは欧米で使用する英数字と漢字などの日本語の比率が 1:2 だったため前者を「半角文字」、後者を「全角文字」と呼んでいました。今では「Source Han Code JP」のように英数字と日本語の比率が 2:3 のものも増えてきました。
| 半角文字 | A | B | C | a | b | c | ｱ | ｲ | ｳ | ｱ | ｲ | ｳ | 1 | 2 | 3 | 1 | 2 | 3 | + | - | * | # | % | @ |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 全角文字 | あ | い | う | ア | イ | ウ | １ | ２ | ３ | 安 | 以 | 宇 | ||||||||||||
日本語対応の等幅フォントは下記などで紹介されています。
文字の始まり、終わり、曲げの部分につけられる突起を「serif(セリフ)」と呼びます。日本では「ヒゲ」とも呼ばれます。セリフの有無により下記に分けられます。
// セリフ有り(明朝体) あいうアイウ安以宇ABCabc123 // セリフ有り(Times New Roman) ABCDEFG abcdefg 0123456789
// セリフ無し(ゴシック体) あいうアイウ安以宇ABCabc123 // セリフ無し(Courier New) ABCDEFG abcdefg 0123456789
ドットの情報で表現するフォントをビットマップフォント、文字の輪郭線を曲線関数の集合として表現するフォントをアウトラインフォントと呼びます。ビットマップフォントを拡大すると、昔のファミコンの様なギザギザが現れますが、アウトラインフォントは拡大しても綺麗に表示されます。昔はビットマップフォントが主流でしたが、最近はほとんどのフォントがアウトラインフォントになっているようです。
プロポーショナルフォントの文字間隔を、隣り合う文字の組み合わせによって微妙に文字詰めすることを カーニング と呼びます。CSS の font-kerning でカーニングの有無を指定することができます。下記を Chrome や Firefox で表示すると、カーリングの有無により文字間隔が微妙に調整されていることが分かります。
| カーニング無し | YaYuYo |
|---|---|
| カーニング有り | YaYuYo |
フォントの種類には下記などがあります。
隣り合う文字によって微妙にフォントの形状を変更することを 合字(リガチャ) と呼びます。CSS の font-variant-ligatures で合字の有無を指定することができます。下記を Windows 版 Firefox で見ると、合字有りの場合 f の横線同士や、i の点が f にくっつくのが分かります。
| 合字無し | ffi |
|---|---|
| 合字有り | ffi |
アラビア語の合字もすごいです。
| 合字前 | ش م س / م ر ح بً ا |
|---|---|
| 合字後 | شمس / مرحبًا |
// ＭＳ ゴシック 美しい日本語フォントが好き 0123 This is Japan. // ＭＳ Ｐゴシック 美しい日本語フォントが好き 0123 This is Japan. // ＭＳ 明朝 美しい日本語フォントが好き 0123 This is Japan. // ＭＳ Ｐ明朝 美しい日本語フォントが好き 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.
// ヒラギノ角ゴ 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.
デフォルトは 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; /* 上記以外 */
ソースコード表示用には下記を指定しています。デフォルトは 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; /* 上記以外 */
それぞれのフォントのサンプルは下記を参照してください。
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
body {
font-family: 'Noto Sans JP', sans-serif;
font-size: 100%;
}
最近のフォントの中には、太さ(weight)、横幅(width)、露出(exposure)、傾斜(slant)、イタリック(italic)、影(shadow)、オプティカルサイズ(optical size)、トラッキング(tracking)、溶解度(melt) などを設定できる バリアブルフォント があります。中でも Google が提供する Roboto Flex フォントは、小文字の x-ハイト(YTLC)、小文字の上限とx-ハイトの差分(YTAS)、y や g などの下にはみ出す長さ(YTDE)など様々なパラメータを変更することができます。パラメータは font-variation-settings で変更することができます。サンプルは下記のリンクを参照してください。
中にはおもしろいフォントもあります。下記はジャワの文字で、上位の人から下位の人への書簡の冒頭に記述する文字(U+a9c5)だそうです。
꧅
下記はアラビア語の文字で「慈悲深く慈愛深きアッラーの御名において」という意味の1文字 (U+FDFD)のフォントです。
﷽
下記はタイ語の声調記号(U+0E4E)を用いて、斜め上にはみ出していく文字を書くことができるそうです。
(^o^)-๎๎๎๎๎