ページの本文へ

タイポグラフィー

・サイトの目的、多様なユーザー環境に対応可能な書体を選択する

・可読性を考慮した文字サイズを選択する

書体

多様なユーザー環境への考慮

使用する書体については、OS標準搭載の書体を用いること、最新から旧世代まで様々なOSバージョンに配慮して指定すること等により、どの環境から利用された場合でも、サイトの印象や読みやすさを一定に保つことが重要です。
この考え方から、本サイトではゴシック体(サンセリフ体)を基本とし、「游ゴシック」を優先的に使用する指定としています。
ゴシック体は本文の読みやすさに優れ、明朝体と違い低解像度のモニターでも均一な可読性を発揮します。
游ゴシックは、Windows8.1及びOS X Mavericksから搭載された書体で、Windows / Mac両方で標準搭載されており、視認性の高い書体であることから、幅広いユーザー環境で、文字をきれいで読みやすく表示することができます。
本サイトでは、游ゴシックが搭載されていない旧世代のOS環境の場合は、同じく視認性の高いメイリオ/ヒラギノ角ゴシックを使用することで、読みやすさを損ねないようにしています。

他言語サイトの場合

日本語の書体を搭載していないOS環境に対しては、日本語同様ゴシック体を基本としながら、各言語の書体を選択します。
例として英語版に代表されるアルファベットの場合は「Helvetica」を指定しています。

書体の例示

文字サイズ

適切な文字サイズ

文字サイズは、可読性を考慮してユーザーが読みやすいサイズに設定します。
本文と見出しの文字サイズについては、サイズの比率(ジャンプ率)を設定し、見出しを大きくすることで、ページの情報にメリハリをつけます。
これにより、見出しを目立たせ、視線を見出しに誘導することで、ユーザーは目的の情報を素早く探すことができます。
ただし、ジャンプ率を過度に強調すると、かえって読みづらくなるため、ページの横幅や文字量等を考慮して、適切な比率を選択する必要があります。

本サイトでは見出し1の文字サイズを24px、見出し2を20px、見出し3を18px、本文を14pxで設定しています。

文字サイズのサンプル

見出し1(24px 太字)

行政機関に対する申請・届出等の手続き

見出し2(20px 太字)

行政機関に対する申請・届出等の手続き

見出し3(18px 太字)

行政機関に対する申請・届出等の手続き

本文(14px 標準)

行政機関に対する申請・届出等の手続き

このページの先頭へ