大別するとフォントの形式はTrueTypeとOpenType、そしてPostscriptの3つのタイプがありますが、詳しくはABOUT FONTや和文フォント大図鑑などをご参照ください。
日本語の表示は等幅フォント、欧文はプロポーショナル・フォントが基本です。文字サイズをピクセル単位で指定した場合は絶対値指定になりますので、OSやブラウザの環境に関係なく、同一サイズで表示できます。
ユーザー側のブラウザメニューから文字サイズの選択変更ができないのですが、ブラウザのIE7は絶対値指定のフォントサイズや画像を拡大縮小するズーム機能があります。
ビットマップフォント
主に画面表示に使われるフォントで、画面の点(ドット)を塗り潰して文字を表示します。携帯電話や電子辞書の文字を拡大表示した場合や印刷したときに
ジャギーの目立つ欠点がありますが、印刷は200
dpi程度以上であれば、目立たないと言われます。
アウトラインフォント
文字の輪郭を図形データとして保存するので、拡大や印刷もジャギーのない滑らかな字が表現できます。
Postscriptフォント
Macユーザーのデザイナーや商業印刷物、
DTPなどに使われます。
Wimdowsのフォントタイプ
表示可能な
フォントはマイコンピューター\ローカルディスク(C)\WINDOWS\Fontsに格納されています。
| タイプ |
アイコン |
拡張子 |
特 徴 |
| TrueType |
 |
.ttf |
Winで一般的に使われるフォント |
 |
.ttc |
複数のTrue Typeを含むフォント(MSゴシック＆MSPゴシック) |
| OpenType |
 |
.ttf/.otf |
MSとMacの共同開発の共通フォントで、相互間の文字化けや文字ズレなどがなく、Win2000以降とMacOSX以降の標準環境で利用できる |
| SystemFont |
 |
.fon |
Winの画面表示に使用されるフォントで、これを削除すると表示できなくなるので注意が必要です |
プロポーショナルフォント
アルファベットの「i」や「l」は幅が狭く「m」や「w」は幅が広くなっています。これらの文字を同じ間隔で表示したり、印刷すると不自然に見える場合がありますので、自動的に幅の狭い文字は文字間隔を狭く、幅の広い文字は文字間隔を広くします。
フォント名にPが付くこのフォントは横書きした場合、縦方向は文字が揃わず1行の文字数が変わります。一般には、この方が自然で読みやすい文章になりますが、縦方向に文字を揃えることはできません。
等幅フォント
等幅フォントは文字幅と無関係に同じ文字間隔で表示するので、横書であっても縦方向に文字が揃えられる利点があります。文字と記号でイラストを描くアスキーアート(AA)の場合、文字幅が一定でないとズレが生じ、何が描かれているのか分からない場合があるので、メールは等幅フォントで作成します。
パソコン表示にデザインされたフォントは2バイトの和文フォントと1バイトの欧文フォントがあります。基本的に和文が全角サイズで表示され、欧文アルファベットや数字は半角サイズで表示されます。
これらは次のようなカテゴリーに大別され、環境に応じて近似のフォントが自動的に表示されますが、次のような場合は意図したフォントが表示されないことがあります。
- ユーザーのOS環境による場合
欧文系やMac系、装飾体系のFantasyなどはfont faceタグで定義すると表示する。
- フォントがない場合
フォントを新規にインストールするか、又は文字の画像化が必要です。
数字の「1」、英小文字のエル「l」、英大文字のアイ「I」などは判別に迷うことがあります。このような文字を正確に伝える必要がある場合は
飾りのある明朝系のフォントを使用します。【例】
1,l,I
| 和文体系 |
欧文体系 |
Win体系 |
Mac体系 |
共通フォント |
| 等幅明朝系 |
Serif |
MS 明朝 |
リュウミンライト-KL・ヒラギノ明朝 |
Times New Roman |
| 等幅ゴシック系 |
Sans-Serif |
MS ゴシック |
Osaka・ヒラギノ角ゴ・中ゴシック |
Arial |
| プロポーショナル系 |
Monospace |
MS PゴシックMS P明朝 |
Osaka-等幅・中ゴシック等幅・リュウミンライト-KL等幅 |
Courier |
| 筆記系 |
Cursive |
|
|
Comic Sans MS |
Win環境の表示例
| <font face=Serif>ABC123をMS明朝で表示。</font> |
ABC123をMS明朝で表示。 |
- ページ全体を指定する<basefont face="フォント名">
- 指定テキストを変更する<font face="フォント名">
Windows標準フォントはゴシック体なので<basefont face="ゴシック体">は不要。
- 「,」で区切って複数フォントを指定する<font face="フォント名,フォント名">
この場合は並べた順で優先表示されます。
IEの表示文字は固定的な絶対値や可変的な相対値でサイズ指定する方法があります。相対値指定の場合は閲覧者がブラウザとマウスの操作で文字のサイズ変更が可能ですが、IE以外のブラウザは一般的に絶対値指定の効果がありません。
- ページ(P)→文字のサイズ(X)を選択する
- Ctrlキー＋マウスのスクロールボタンを前(後)に回転する
IE7の場合は画面右下の「拡大レベルの変更」ボタンで選択、又はCtrlキーに＋(-)マークキーを押すことで、文字サイズの指定は無視され、10%単位の拡大縮小ができます。
文字サイズの可変は
アクセシビリティの一つとして閲覧者にやさしいサイトだと言われますが、一般的に
規定値のフォントサイズが最も読みやすいとされます。
絶対値指定例
| <font size="2"> |
最小1～最大7の段階があり、閲覧者の環境により表示に差異がある |
| font-size:0.5in |
CSSで文字サイズを0.5インチに指定する |
| font-size:12pt |
CSSで文字サイズを12ポイントに指定する |
| font-size:12px |
CSSで表示画面の12ピクセルに指定する |
| font-size:small |
CSSでxx-small～xx-largeの7段階とlarger、smallerの相対指定 |
以上の他、絶対値指定にはcm、mm、
pc指定などがありますが、一般的ではありません。
相対値指定例
| <font size="-2"> |
現在のフォントサイズに対する最小-2～最大+4の7段階がある |
| font-size:120% |
CSSで直前フォントサイズの120%に指定する |
| font-size:12em |
CSSで表示画面の12emに指定する |
以上の他に相対値指定にex指定などがありますが、一般的ではありません。絶対値指定のページをブラウザ操作でサイズ変更した場合は閲覧者の環境によって文字が小さ過ぎたり、大き過ぎてサイトデザインが崩れるなどの弊害があります。
そのため、文字サイズの違いが閲覧者にどのように表示されるかを事前にチェックする必要があります。お店の方針でデザイン優先で作成する場合があるかと思いますが、小さいサイズは極力避け、既定値サイズの作成をお奨めします。
フォントを使って文章を表現する場合、その内容や用途によって使うフォントが決まります。優しさや柔らかさを表現するには明朝体、力強さや確かさを表現したゴシック体というように使用する字体イメージを考える必要があります。
また、見やすさと読みやすさは違うことを認識しておく必要があります。視認性の高いフォントは太く、正方形に近いポップ系が代表的ですが、通読性の高いフォントは筆字に近く、文字ごとの幅が異なる明朝系のタイプが多いようです。
| 太さ・形状 |
種類 |
イメージ |
用途 |
| 文字の太さ |
細い |
繊細・上品 |
本文 |
| 太い |
信頼・力強い |
見出し・強調 |
| 文字の形状 |
明朝体 |
優しい・軽い |
一般書籍・雑誌 |
| ゴシック体 |
安定・明確 |
パンフレット・カタログ |
| 丸ゴシック体 |
柔らかい |
雑誌・児童用書籍 |
| 楷書体 |
伝統・格式・厳格 |
挨拶文・名刺 |
ただし、多用は統一感が失われて読みにくいページになるので注意が必要です。フリーフォントの情報サイトである
フリーフォント最前線は多くの配布サイトを紹介してます。
イメージに似合うフリーフォントは画像化や印刷物での活用をお奨めします。例えば、女性が運営するお店は女性の手書き風文字を印刷物で利用するのが効果的です。(
作成例)
オリジナルフリーフォント
一般の特殊文字はIMEパッドの文字一覧から検索できますが、絵文字の種類はFonTableで閲覧できます。これらの文字は拡大しても画像でない軽量テキストなので、変更が簡単で表示も速い性質がありますが、絵文字の使用に余りサイズを小さくすると潰れてしまうことがあり、ワンポイントでの使用が効果的です。
特殊文字
| 絵文字 |
フォント表示タグ |
| © |
<font color="#ff0000" size="5">©</font> |
「&#***;」のように数字を入れる方法もあります。
Wingdings属性
3種類のWingdingsがあり数多くの絵文字が表現できます。
| 絵文字 |
フォント表示タグ |
| u |
<font color="#ff0000" size="4" face="Wingdings">u</font> |
| u |
<font color="#ff0000" size="4" face="Wingdings
2">u</font> |
| u |
<font color="#ff0000" size="4" face="Wingdings
3">u</font> |
Webdings属性
| 絵文字 |
フォント表示タグ |
| Y |
<font color="#ff0000" size="4" face="Webdings">Y</font> |
Symbol属性
| 絵文字 |
フォント表示タグ |
| ﾒ |
<font color="#ff0000" size="4" face="Symbol">ﾒ</font> |
制作講座.初心者のためのネットショップ開業総合支援講座
