Arial Narrow Bold：プレビュー・CSS のウェイト指定・使い方のコツ

CSS で Arial Narrow Bold を使う

h1, h2, th {
  font-family: 'Arial Narrow', 'Liberation Sans Narrow', Arial, sans-serif;
  font-weight: 700;
}

古いチュートリアルには font-family: 'Arial Narrow Bold' と書かれていることがあります。 これは Windows の一部のブラウザでしか動かず、それ以外では失敗するので、ファミリー名とウェイトで指定しましょう。 @font-face の書き方は Arial Narrow の CSS ガイドで詳しく紹介しています。

太字が活きる場面

• 表の見出し：すべて大文字、9〜10 pt、字間を少し空ける。
• ダッシュボードの数値：幅の狭いカードに収めたい大きな数字。
• パッケージや看板：小さく印刷してもつぶれない、力強くコンパクトな文字。
• レジュメの見出し：スペースを取らずにセクションをはっきり区切れます。レジュメのガイドもどうぞ。

避けたい失敗

• 段落をまるごと太字にする。あっという間に黒い文字の壁になります。
• 1 つの見出しで Bold と Bold Italic を混ぜる。切り替わりがミスのように見えます。
• 別のコンデンス系の太字と組み合わせる。本文には通常幅のフォントを選びましょう。組み合わせのアイデアも参考にしてください。