情報/文字フォント(書体)と各種ライン

以前の投稿【講座/Photoshopのシェイプ等(ほぼ)ベクターで魔法陣作成2/3】で、Photoshopの文字パネルのベースラインシフトを利用しましたが、そのベースラインを含め各種ラインについて書きます。

チラシ等の広告で、注文や問い合わせのため目立つように大きく載せている電話番号の「-」(ハイフン)が、
↓以下のように数字の天地センターより下がっているのを見たことはないでしょうか?
d019_0
これも今回の内容に関係ありますので、こうなる理由も説明します。

 

字フォントまわりのラインとは、
この場合は主に欧文書体のレタリングやタイポグラフィ等に関係する要素で、
アセンダーライン、キャップライン、ミーンライン、ベースライン、ディセンダーライン、
といった種類があります。
キャップとはキーボードの「Caps Look」のキャップですね。
d019_1
▲アセンダーラインはアルファベット小文字の一番高いところ、キャップラインは大文字のそれです。この2つは書体によっては同じ位置、そうでなくても近い位置になります。

d019_2
▲英語用のノートは、このラインを元に罫線が引かれていますね。

さらに関連して文字の高さの範囲を示すのに、エックスハイトとキャップハイトがあり、
エックスハイト(小文字の「x」が由来)はミーンラインとベースラインの間、キャップハイトはキャップラインとベースラインの間の高さです。
d019_3
▲エックスハイトとキャップハイト

 

頭の電話番号の「-」(ハイフン)のくだりに戻りますが、
前述のような理由で、書体のデザインにもよりますが往々にして、
・数字はキャップハイトに収まり、自ずと天地センターはキャップハイトの中央
・ハイフンはエックスハイトの天地センターの位置、つまり「x」の交点あたり
と、それがハイフンが下がっている原因となります。
d019_4
▲ちなみにこの書体は【講座/Photoshopのシェイプ等(ほぼ)ベクターで魔法陣作成2/3】でも触れた編集可能のフォント埋め込みが許可されているフォントの小塚ゴシック Pro Bです。
小塚ゴシック Pro Bの「-」はエックスハイトのセンターより若干上にデザインされていますね。

以前別記事の【画材/コピックとメーカーについて】でも書きましたが私は大昔広告デザイン業界に居りまして、その当時はまだまだパソコンは本格的に導入されておらず、版下を手作業で作成しており文字は写真植字(写植)でしたが同じようにハイフンが下がる事例があったので、
見出し的に使われる扱いの大きい電話番号の見栄えを良くするために、ハイフン部分だけ写植を切り取って数字の天地とセンター合わせになるようにずらしていました。
※ハイフンだけに限らずこういった位置調整はしていました。
このあたりはゲームの開発でもGUI等で「文字を絵として表示する」(いつか解説します)場合に、やはり見栄えを良くするためにPhotoshop等の文字パネルのベースラインシフトで時間やその他制限がない限りバランス調整をしています。
文字間隔も同様ですが、そのパラメータの「カーニング」「トラッキング」「ツメ」に関してもいつか解説したいと思います。

 

なみに今回はハイフンのずれについて書きましたが、
同様の事象としてWikipediaでは半角と全角の括弧「()」「()」についての記事があります。
以下引用

ディセンダー
g、j、p、q、yについて、ベースラインより下に出た部分。
(特に横組みにおいて)活字を単独でなく並べた状態で俯瞰して、和文と特に異なる要素の一つが、このディセンダである。これに相当する要素が和文活字には存在しないためである。1バイト部分に欧文書体を組み合わせてあるフォントで、半角(すなわち1バイトの)括弧のベースラインが下がって見えることがあるのは、その括弧が ディセンダを計算に入れて デザインされているからと言える。

 

らにベースラインは、
webの文章中に画像を入れる際(d016_icon3(T) ←例えばこんな感じ)にも関係がありますので、それについては後日書きたいと思います。
アップしました→【情報/文字フォントのベースラインとHTMLのimg(イメージタグ)の関係】

asobi_pic