標準フォントを指定する

FONT FAMILY

通常、サイト内のフォント(書体)は自由に指定できる訳ではありません。閲覧者のパソコンにインストールされている、いわゆる「標準フォント」を決めうちで指定します。

日本語フォント

CSSにてサイト全体(body)や日本語で書かれた文章には下記のように指定します。

font-family: ‘Hiragino Sans’, ‘Meiryo’, sans-serif;

複数のフォントを記述した場合、先頭(左)のフォントが優先されます。
上記の場合、いずれもゴシック体のフォントで、メイリオ(Meiryo)よりもヒラギノ(Hiragino Sans)が優先される指定になっています。sans-serifは明朝体のような尖った装飾(セリフ)のないフォント、つまりゴシック体全般を指します。指定したフォントがない環境でも明朝体を避けるため、これを最後に記述します。

明朝体のフォント

明朝体のフォントについては、Windowsの解像度がまだ低いことがあるため、見出しなど大きな文字でない限り利用はおすすめできません。ただ上記のように優先順位を決められるため、Macユーザー向けに明朝体や丸ゴシックを表示するなどは可能です。

‘Hiragino Mincho ProN’

あのイーハトーヴォの
すきとおった風、

夏でも底に冷たさをもつ青いそら、
うつくしい森で飾られたモリーオ市、
郊外のぎらぎらひかる草の波。

‘Hiragino Maru Gothic ProN’

あのイーハトーヴォの
すきとおった風、

夏でも底に冷たさをもつ青いそら、
うつくしい森で飾られたモリーオ市、
郊外のぎらぎらひかる草の波。

一点、丸ゴシックには太字のウェイトがないため、ブラウザが機械的に膨らませますが、あまり綺麗ではありません。フォントは本来、文字の太さごとに個別にデザインされます。フォント作者の意図したデザインではありませんのでウェイトが不足しているフォントはおすすめできません。

游書体

現在のmacOS(Sierra 10.12以降)にて游書体は「ダウンロード可能なフォント」となり標準ではインストールされなくなったようです。標準フォントとしては使用しない方がよさそうです。

游書体は当初、MacとWindowsで初めて同じ日本語フォントが使えるということで利用されるようになりました。ヒラギノより柔らかく、メイリオよりもしっかりとした印象になります。
現在はWindowsにてメイリオを使用したくない場合の選択肢になると思います。

通常
‘YuGothic’, ‘Yu Gothic Medium’

太字
‘YuGothic’, ‘Yu Gothic’

あのイーハトーヴォの
すきとおった風、

夏でも底に冷たさをもつ青いそら、
うつくしい森で飾られたモリーオ市、
郊外のぎらぎらひかる草の波。

Macでのフォント名は「YuGothic」、Windowsでは「Yu Gothic」「Yu Gothic Medium」となります。Macが不要な場合は「YuGothic」を外して下さい。

Windowsの「Yu Gothic」はかなり線が細いため、「Yu Gothic Medium」を指定しています。ただそうすると太字が太すぎるため、太字となる要素(h*, strong, b, th, dtなど)だけCSSにて「Yu Gothic」を指定すると適度な太さになります。


英語フォント

英語フォント(欧文フォント)は、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フォントの使い方とリスク」という記事も書いていますので参考にしてみてください。

お気軽にお問い合わせください。
ご依頼の方は「ご依頼方法」の
ページからご覧ください。