数字・記号の扱いとは?書体の選び方と全角・半角の使い分けを解説

数字・記号の扱いの基本

まずは数字・記号の扱いとは何か、そして最初に迷いやすい全角と半角の違いを押さえましょう。

数字・記号の扱いとは何か

数字・記号の扱いとは、価格・日付・電話番号などに使う数字や記号を、目的に合わせて選び、正しく組み合わせることです。

数字は、ユーザーが正確に読み取らなければならない重要な情報を担うことが多いからです。

価格の「1」と「7」を読み間違えたり、日付の桁がそろっていなくて読みにくかったりすると、申し込みのミスや問い合わせの増加につながります。

文字の読み取りやすさ(判読性)が、数字では特に重要になるということです(判読性については視認性・可読性・判読性の違いで解説しています)。

全角数字と半角数字の違い

全角数字は日本語の文字(漢字・かな)1文字分の幅を持つ数字で、半角数字はその半分程度の幅で作られた数字です。

横書きのWebや画面のデザインでは、数字は半角を基本にすると読みやすくなります。

全角数字は1桁ずつが日本語1文字分の幅を取るため、桁が増えると数字の間が空きすぎて、ひとまとまりの数として読みにくくなるからです。

左の全角数字は「２０２６」が4つの文字に分かれて見えますが、右の半角数字は「2026」がひとかたまりの数として目に入ります。

一方、縦書きでは、漢数字(一、二、三…)や全角数字を使うのが一般的です。

国の文書の書き方をまとめた文化審議会の「公用文作成の考え方」(PDF)でも、横書きでは算用数字(1、2、3…)、縦書きでは漢数字を使うこと、そして全角・半角は文書内で使い分けを統一することが示されています。

全角と半角を混在させない

どちらを使う場合でも、同じページの中で全角数字と半角数字を混在させないことが大切です。

同じ種類の情報なのに数字の幅や形が変わると、見た目が不ぞろいになり、雑な印象を与えてしまうからです。

左の見本は「１８」「０３」「５６７８」「５」だけが全角になっていて、行ごとに数字の見え方がばらついています。

右の見本のようにすべて半角にそろえるだけで、情報が整理されて見えます。

混在は、複数の人が書いた原稿をまとめたときや、ほかの資料からコピーして貼り付けたときに起こりやすいので、公開前に必ず確認しましょう。

数字を読みやすく見せる書体と組み方

ここでは、数字の書体の選び方と、価格や表の数字を読みやすく見せるコツを紹介します。

数字の書体は「読み間違えにくさ」で選ぶ

数字の書体(文字のデザイン)は、おしゃれさよりも、形の似た数字を読み間違えにくいかを優先して選びます。

装飾の強い書体や細すぎる書体では、「1と7」「3と8」「6と0」のような数字が、小さなサイズで見分けにくくなることがあるからです。

似た形の文字を見分けやすく作られたUDフォントについては、文字のアクセシビリティとは?で解説しています。

また、数字の書体には、高さのそろい方が違う2つのタイプがあります。

右の見本はGeorgiaという書体で表示しています。閲覧環境にGeorgiaがない場合は、高さのそろった数字で表示されることがあります。

左のライニング数字は、すべての数字が大文字と同じように高さをそろえて並ぶタイプです。

右のオールドスタイル数字は、「3」「4」「7」「9」などが小文字のように下にはみ出すタイプで、欧文の文章になじみやすい一方、価格や表などでははっきり読ませにくいことがあります。

英字の小文字に「x」のような背の低い文字、「h」のように上に伸びる文字、「p」のように下に伸びる文字があるのと同じで、オールドスタイル数字は数字ごとに高さが変わる作りになっています(右の見本では「6」「8」が上に、「3」「4」「5」「7」「9」が下に伸びています)。

英文の本の本文のように、文章の中に数字をなじませたい場面には向いていますが、価格や表で並べると数字の高さがガタガタに見えて、読み取りにくくなります。

WebのUIや価格表示では、まずは高さのそろったライニング数字の書体を選ぶと安心です。

なお、日本語の書体に含まれる半角数字は、書体によっては欧文と比べて形が素っ気なく見えることがあります。

Webでは、CSSのfont-familyで欧文書体を日本語書体より先に指定すると、数字とアルファベットだけを欧文書体で表示できます。

body {
  font-family: "Helvetica Neue", Arial, "Hiragino Sans", "Yu Gothic", sans-serif;
}

このように書くと、欧文書体に含まれない日本語の文字だけが、後ろに書いた日本語書体で表示されます。

書体そのものの分類はフォントと書体の種類の知識、欧文書体の種類は欧文書体の種類とは?で解説しています。

表の数字は右揃えにして桁をそろえる

料金表のように数字を縦に並べるときは、数字を右揃えにして、同じ桁が縦一列にそろうようにします。

桁がそろっていると、数字を1つずつ読まなくても、ぱっと見ただけで大小を比べられるからです。

左の見本では、桁数の違う価格の左端がそろっているため、どれが一番高いかを数字を読んで確かめる必要があります。

右の見本では一の位がそろっているので、桁の多い「12,800円」が一番高いことがひと目で分かります。

左揃え・中央揃え・右揃えの使い分けは、文字の揃え方とは?で解説しています。

あわせて、大きな数は3桁ごとにカンマで区切ると読み取りやすくなります(「公用文作成の考え方」でも、大きな数は三桁ごとにコンマで区切るとされています)。

さらに、書体によっては数字ごとに幅が違う(「1」が細く「0」が広いなど)ため、右揃えにしても縦の位置が少しずれることがあります。

その場合は、CSSのfont-variant-numericで、数字の幅をそろえるtabular-nums(等幅数字)を指定します。

.price {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

ただし、この指定が効くのは、使っている書体が等幅数字の機能を持っている場合だけなので、実際の表示で確認しましょう。

指定しても幅がそろわないときは、数字が等幅で作られた書体に変えるという方法もあります。

価格は数字を大きく、単位を小さく

価格や割引率など、目立たせたい数字は、数字だけを大きくして、「円」や「(税込)」などの単位・補足は小さくすると引き立ちます。

すべてを同じ大きさにすると、本当に伝えたい数字が単位や補足に埋もれてしまうからです。

左の見本は「月額」「円」「(税込)」まで同じ大きさなので、肝心の金額が目立ちません。

右の見本は数字だけを大きくし、単位や補足を小さくしているため、まず「2,480」が目に入ります。

ただし、「(税込)」のような条件は大切な情報なので、小さくしすぎて読めなくならないよう注意しましょう。

Webで作るときは、HTMLで数字の部分だけを<span>タグで囲み、補足の「(税込)」は小さな注記を表す<small>タグで囲みます。

<p class="price">月額<span class="price-num">2,480</span>円<small>(税込)</small></p>

そのうえでCSSで、囲んだ部分だけの文字サイズを変えます。

.price-num {
  font-size: 2em;
}

.price small {
  font-size: 0.75em;
}

emは周りの文字サイズに対する倍率なので、この例では数字が周りの2倍、「(税込)」が0.75倍の大きさになります。

FigmaやCanvaのようなデザインツールなら、テキストの中で数字だけを選択して文字サイズを変えれば、同じ見せ方ができます。

文字の大きさの差で強弱をつける考え方は、ジャンプ率の記事でも解説しています。

割引率などの数字を大きく見せるキャッチコピーの例は、キャッチコピーのデザインとは?で紹介しています。

似ている記号の使い分け

数字と一緒に使う記号には、見た目が似ていても意味や用途が違うものがあります。

横棒の記号は用途で使い分ける

横棒の形をした記号は特に種類が多く、用途に合ったものを選ぶ必要があります。

見た目が似ていてもコンピューターの中では別の文字として扱われるため、間違えると見た目が不ぞろいになったり、検索やコピーで正しく扱えなかったりするからです。

記号	名前	主な用途
–	ハイフンマイナス(半角)	キーボードで入力できる半角の横棒で、Webの電話番号・郵便番号・URLなど
‐	ハイフン	数字や英字の区切り・つなぎ(例:〒100‐8959)
−	マイナス	数学のマイナス記号・負の数(例:−5℃)
—	ダッシュ	文の流れを切り、間を置く
ー	長音符(音引き)	カタカナの伸ばす音(例:コーヒー)。区切りには使わない
〜	波ダッシュ(波形)	範囲の「から」「まで」(例:10時〜12時)

ハイフン・ダッシュ・波形の用途は、「公用文作成の考え方」でも同じように例が示されています。

Webで特に注意したいのが、電話番号の区切りに長音符「ー」を使ってしまう間違いです。

見た目は似ていても別の文字なので、長音符で区切った電話番号は、コピーしてそのまま電話をかけられなかったり、検索で見つからなかったりする原因になることがあります。

Webの電話番号や郵便番号は、半角のハイフンマイナス「-」で書いておくのが無難です。

日本語入力がオンのままキーボードの「-」のキーを押すと、長音符「ー」が入力されるので、電話番号は半角英数の入力に切り替えてから打つと間違えにくくなります。

また、スマートフォンのブラウザは電話番号を自動で認識してタップで発信できるようにすることがありますが、確実にタップで電話をかけられるようにしたいときは、<a href="tel:0312345678">03-1234-5678</a>のようにtel:のリンクを設定しておきましょう。

記号も全角・半角をそろえる

「%」「:」「(」「)」などの記号にも全角と半角があり、数字と同じように、ページの中でどちらを使うかをそろえます。

同じ記号でも全角と半角では幅や形が違うため、混在すると数字の混在と同じように不ぞろいに見えるからです。

迷ったときは、「数字と組み合わせる記号(%、:など)は半角」「日本語の文章を囲むかっこは全角」のように、自分なりのルールを決めて書き出しておくと、ページ全体で表記がぶれにくくなります。

なお、①②③のような丸数字(囲み数字)は手順や注釈の番号として便利ですが、書体によって形や大きさが違うので、実際の表示で読みやすいかを確認してから使いましょう。

実践のポイント

数字・記号の扱いで陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• コピーして貼り付けた原稿に全角数字が残り、同じページの中で全角と半角が混在してしまうことがあります。
  公開前に、数字と記号の全角・半角がそろっているかを確認しましょう。
• 見た目のおしゃれさを優先して数字の書体を選び、価格や日付が読み間違えられやすくなっていることに気づかないことがあります。
  数字だけを小さなサイズで表示して、「1と7」「3と8」などが見分けられるか確認しましょう。
• 電話番号の区切りに長音符「ー」やダッシュ「—」を使ってしまうことがあります。
  電話番号や郵便番号は、半角のハイフンマイナス「-」で書くのが無難です。

よくある質問

• Q. 1桁の数字だけは全角にしてもいい?
  A. 「1桁は全角、2桁以上は半角」のようにルールとして決め、ページ全体で守れているなら、それも1つの方法です。
  大切なのは、場所によって表記がばらつかないことです。
  Webで迷ったら、すべて半角にそろえるとルールが単純になり、管理しやすくなります。
• Q. 数字用におしゃれなフォントを使いたいときは?
  A. 見出しやキャンペーンの数字のように大きく見せる部分なら、個性的な書体を使うのも効果的です。
  ただし、小さなサイズで表示する価格や日付、電話番号などは、読み間違えにくい書体を優先しましょう。
  使うときは、書体のライセンスも確認しておくと安心です(フォントライセンスとは?)。

まとめ

数字・記号の扱いとは、価格や日付などの数字や記号を、目的に合わせて選び、正しく組み合わせることです。

横書きのWebでは半角数字を基本に全角・半角を統一し、読み間違えにくい数字の書体を選んで、表は右揃え、価格は数字を大きく見せ、横棒の記号は用途に合わせて使い分けましょう。

まずは自分が作ったページの価格・日付・電話番号を見直し、全角と半角が混ざっている箇所や、電話番号の区切りに長音符「ー」を使っている箇所がないか確認してみてください。