標準フォントを指定する FONT FAMILY
サイト内のテキスト部分は、フォント（書体）を自由に指定できる訳ではありません。閲覧者のパソコンにインストールされている「標準フォント」を決めうちで指定します。
日本語フォント
CSSにてサイト全体（body）や日本語で書かれた文章には下記のように指定します。
font-family: 'Hiragino Sans', 'Meiryo', sans-serif;
複数のフォントを記述しますが、先頭のフォントが優先されます。
この場合、いずれもゴシック体のフォントで、メイリオ（Meiryo）よりもヒラギノ（Hiragino Sans）が優先される指定になっています。sans-serifは明朝体のようなセリフ体ではないフォント、つまりゴシック体全般を指します。指定したフォントがない環境でも明朝体を避けるため、これを最後に記述します。
[2019.05] 対応ブラウザなど状況を踏まえ記述を整理しました。日本語でのフォント名と旧OS特有のフォントを削除しています。
明朝体のフォントについては、Windowsの解像度がまだ低いため、見出しなど大きな文字でない限りあまりおすすめできません。ただ上記のように優先順位を決められるため、Macでの閲覧者向けに明朝体や丸ゴシックを表示するなどは可能です。
'Hiragino Mincho ProN'
あのイーハトーヴォの
すきとおった風、
夏でも底に冷たさをもつ青いそら、
うつくしい森で飾られたモリーオ市、
郊外のぎらぎらひかる草の波。
'Hiragino Maru Gothic ProN'
あのイーハトーヴォの
すきとおった風、
夏でも底に冷たさをもつ青いそら、
うつくしい森で飾られたモリーオ市、
郊外のぎらぎらひかる草の波。
丸ゴシックには太字のウェイトがないため、ブラウザが機械的に膨らませます。ただフォントは本来、文字の太さごとに個別にデザインされるため、フォント作者の意図した文字ではありません。利用箇所は限定した方が良いと思います。
游書体
Mac OS X 10.9、Windows 8.1から双方で初めて同じ日本語フォントが使えるようになりました。厳密にはファイルそのものやウェイトの違いはありますが、ヒラギノより柔らく、メイリオよりもしっかりとした印象になります。
ただWindowsでは文字の太さが極端ため、CSSで細かな指定が必要です。
通常のテキスト：
'YuGothic', 'Yu Gothic Medium'
太字テキスト（h*, strong, b, th, dtなど）：
'YuGothic', 'Yu Gothic'
あのイーハトーヴォの
すきとおった風、
夏でも底に冷たさをもつ青いそら、
うつくしい森で飾られたモリーオ市、
郊外のぎらぎらひかる草の波。
MacのYuGothicは問題ありませんが、WindowsのYu Gothicはかなり細いため、Yu Gothic Mediumを指定すると適度な太さになります。ただそのままでは太字が太すぎるため、太字部分だけYu Gothicを指定します。
また、游ゴシックなどがインストールされていないOSも考慮し、前述のヒラギノ、メイリオの記述は残す方が良いと思います。
英語フォント
英語フォント（欧文フォント）は、WindowsとMacである程度共通のものを利用できます。
- Arial / Arial
- Arial Black / Arial Black
- Comic Sans MS / Comic Sans MS
- Courier / Courier
- Courier New / Courier New
- Georgia / Georgia
- Impact / Impact
- Times New Roman / Times New Roman
- Trebuchet MS / Trebuchet MS
- Verdana / Verdana
Webフォント
標準フォントから話は逸れますが、今はフォントデータそのものをページと一緒にダウンロードして利用できるようになりました。
日本語は重くコストがかかることも多いので、英語だけの利用が容易です。このサイトも「Google Fonts」を利用しています。日本語Webフォントについては、「日本語Webフォントの使い方とリスク」という記事も書いています。参考にしてみてください。
