とほほのフォント入門

目次

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

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

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

「等幅フォント」の場合、英数字、漢字などの文字種毎に文字の幅が均一になります。「ＭＳ ゴシック」「Osaka-等幅」「BIZ UDゴシック」などでは欧米で使用する英数字と漢字などの日本語の比率が 1:2 だったため前者を「半角文字」、後者を「全角文字」と呼んでいました。今では「Source Han Code JP」のように英数字と日本語の比率が 2:3 のものも増えてきました。

半角文字 ABCabc ｱｲｳｱｲｳ 123123 +-*#%@
全角文字 あいう アイウ １２３ 安以宇

日本語対応の等幅フォントは下記などで紹介されています。

セリフ体とサンセリフ体

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

セリフ体
セリフ(ヒゲ)のある文字です。「明朝体」などがセリフに分類されます。
サンセリフ体
「sans-(サン)」は「無い」という意味で、「sans-serif(サンセリフ)」はヒゲの無い書体を示します。「ゴシック体」などがサンセリフに分類されます。 
// セリフ有り(明朝体)
あいうアイウ安以宇ABCabc123
// セリフ有り(Times New Roman)
ABCDEFG abcdefg 0123456789

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

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

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

カーニング

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

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

フォントの種類

フォントの種類には下記などがあります。

PostScript Font
1984年に Adobe Systems 社が開発した PostScript 用フォントです。三次ベジェ曲線を用いたフォントのアウトラインデータを含みます。アウトラインフォントとしては古いものですが、印刷業界では未だに主流として使用されている他、データ形式は後継のフォントにも取り込まれています。
TrueType Font
PostScript Font のライセンスが高額だったこともあり、1990年に Apple Computer 社が PostScript Font に対応して開発したアウトラインフォントです。単一フォントを含むファイルの拡張子は TrueType Font の略で *.ttf、複数フォントを含むファイルの拡張子は TrueType Collection の略で *.ttc となります。
OpenType Font
1996年に Microsoft と Adobe Systems 社が開発したフォントです。アウトラインデータとして PostScript Font を圧縮した CFF(Compact Font Format)、または TrueType Font を持ちます。単一フォントの拡張子は *.otf。TrueTypeベースの時は *.ttf も使用します。コレクション形式は *.ttc, *.otc となります。Windows, Mac 両方で使用でき、PC用フォントとしての主流となります。
Embedded OpenType(EOT)
OpenType をベースに Microsoft が Web 用に OpenType をカスタマイズしたフォントです。必要な文字のみを選択できるサブセット化、データ量削減のための圧縮、フォント著作権を守るための暗号化などの機能が組み込まれています。拡張子は *.eot です。Microsoft から W3C に提案しましたが却下され、Internet Explorer でしかサポートされないフォントとなりました。
Web Open Font Format(WOFF)
W3C が EOF の代わりに採用した Web 用フォントフォーマットです。拡張子は *.woff。圧縮された TrueType フォントまたはPostScript/CFF フォントと XML 情報から構成されます。2010年に W3C 勧告となり Web用標準フォントとなりました。モダンブラウザや IE9以降でサポートされています。
WOFF File Format 2.0(WOFF 2.0)
WOFF のバージョンアップ版で、Brotli による圧縮を用いてフォントの圧縮率をさらに高めたものになります。Google が主に開発を進め、2018年に W3C 勧告となりました。拡張子は *.woff2 となります。IE ではサポートされていませんが、モダンブラウザの大半でサポートされています。

合字(リガチャ)

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

合字無しffi
合字有りffi

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

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

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

// ＭＳ ゴシック
美しい日本語フォントが好き 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.

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%;
}

バリアブルフォント

最近のフォントの中には、太さ(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^)-๎๎๎๎๎
Copyright (C) 2012-2024 杜甫々
初版：2012年5月2日、最終更新：2024年6月23日
https://www.tohoho-web.com/ex/font.html