「カーニング」の版間の差分
アセンダのリンクを直しました |
|||
58行目: | 58行目: | ||
[[Cascading Style Sheets]] の最新版、CSS3の機能として <code>font-kerning</code> というものが存在する。''CSS Fonts Module Level 3'' に含められているが<ref name="css3">{{citation|chapter=6.3. Kerning: the font-kerning property|url=http://www.w3.org/TR/css3-fonts/#font-kerning-prop|title=CSS Fonts Module Level 3|date=2012-08-23|publisher=W3C}}</ref>、対応状況はブラウザによって異なる{{refnest|group=注|2017年7月現在、[[Mozilla Firefox]]、[[Google Chrome]]、[[Safari]]、[[Opera]]が対応。[[Internet Explorer]]、[[Edge]]は未対応<ref>{{citation|url=http://caniuse.com/#search=kerning|title=Can I use...|accessdate=2017-07-18|author=Alexis Deveria }}。</ref>}}。 |
[[Cascading Style Sheets]] の最新版、CSS3の機能として <code>font-kerning</code> というものが存在する。''CSS Fonts Module Level 3'' に含められているが<ref name="css3">{{citation|chapter=6.3. Kerning: the font-kerning property|url=http://www.w3.org/TR/css3-fonts/#font-kerning-prop|title=CSS Fonts Module Level 3|date=2012-08-23|publisher=W3C}}</ref>、対応状況はブラウザによって異なる{{refnest|group=注|2017年7月現在、[[Mozilla Firefox]]、[[Google Chrome]]、[[Safari]]、[[Opera]]が対応。[[Internet Explorer]]、[[Edge]]は未対応<ref>{{citation|url=http://caniuse.com/#search=kerning|title=Can I use...|accessdate=2017-07-18|author=Alexis Deveria }}。</ref>}}。 |
||
値としては <code>normal</code>(メトリクスカーニングの実施)、<code>none</code>(カーニングを行わない)、<code>auto</code>([[文字#文字体系|用字系]]にあわせて[[ユーザーエージェント]]が判断)の3通りがあり、初期値は <code>auto</code>。 |
値としては <code>normal</code>(メトリクスカーニングの実施)、<code>none</code>(カーニングを行わない)、<code>auto</code>([[文字#文字体系|用字系]]にあわせて[[ユーザーエージェント]]が判断)の3通りがあり、初期値は <code>auto</code>。 |
||
< |
<syntaxhighlight lang="css"> |
||
font-kerning: auto; |
font-kerning: auto; |
||
</syntaxhighlight> |
|||
</source> |
|||
[[Scalable Vector Graphics]] (SVG) の機能としては <code>text-rendering</code> というものが存在する<ref>{{citation|chapter-url=http://www.w3.org/TR/SVG11/painting.html#TextRenderingProperty|chapter=11.7.4 The ‘text-rendering’ property|title=Scalable Vector Graphics (SVG) 1.1|edition=2|publisher=[[W3C]]|date=2011-08-16}}</ref>。これは本来SVGの図中で使われる機能であり、どのバージョンのCSS規格においても規定されていないにもかかわらず<ref>{{citation|title=text-rendering|url=https://developer.mozilla.org/en-US/docs/CSS/text-rendering|publisher=Mozilla Developer Network|date=2012-09-14|accessdate=2012-12-11}}</ref>、一部のブラウザはウェブページ中であってもこれをCSSとして解釈することが知られている{{refnest|group=注|2012年12月現在、[[Mozilla Firefox]]、[[Google Chrome]]、[[Safari]]<ref>{{citation|title=Cross-browser kerning-pairs & ligatures|url=http://aestheticallyloyal.com/public/optimize-legibility/|author=Anthony Kolber|work=Aesthetically Loyal|accessdate=2012-11-04}}</ref>}}。 |
[[Scalable Vector Graphics]] (SVG) の機能としては <code>text-rendering</code> というものが存在する<ref>{{citation|chapter-url=http://www.w3.org/TR/SVG11/painting.html#TextRenderingProperty|chapter=11.7.4 The ‘text-rendering’ property|title=Scalable Vector Graphics (SVG) 1.1|edition=2|publisher=[[W3C]]|date=2011-08-16}}</ref>。これは本来SVGの図中で使われる機能であり、どのバージョンのCSS規格においても規定されていないにもかかわらず<ref>{{citation|title=text-rendering|url=https://developer.mozilla.org/en-US/docs/CSS/text-rendering|publisher=Mozilla Developer Network|date=2012-09-14|accessdate=2012-12-11}}</ref>、一部のブラウザはウェブページ中であってもこれをCSSとして解釈することが知られている{{refnest|group=注|2012年12月現在、[[Mozilla Firefox]]、[[Google Chrome]]、[[Safari]]<ref>{{citation|title=Cross-browser kerning-pairs & ligatures|url=http://aestheticallyloyal.com/public/optimize-legibility/|author=Anthony Kolber|work=Aesthetically Loyal|accessdate=2012-11-04}}</ref>}}。 |
||
< |
<syntaxhighlight lang="css"> |
||
text-rendering: optimizeLegibility; |
text-rendering: optimizeLegibility; |
||
</syntaxhighlight> |
|||
</source> |
|||
== タイプライター == |
== タイプライター == |
2020年7月5日 (日) 23:04時点における版
カーニング(英語: kerning)とは、主に欧文の組版において、プロポーショナルフォントの文字同士の間隔(アキ)を調整する技法のこと。カーニングを行わない場合は、文字の間に不自然な空白を招いてしまう。適切にカーニングが施されたフォントでは、字面間の空白の面積がほぼ均等になる。
DTPが普及した現在は、組版ソフト上で行われることが多い。以前は、活字に特殊な処理を行うか、切り貼りによる文字詰め(もじつめ)と呼ばれる作業が必要であった[1]。カーニングの訳語として、「文字詰め」や「詰め文字」という語を用いることもあるが[2]、カーニングと文字詰めを厳密に区別することもある[注 1]。英語では、活字を加工する工程の呼び名から派生して mortising と呼ばれることもある(原義:くり抜くこと、ほぞ穴を開けること)[4]。
概要
文字の形状に合わせて個別に文字間の距離を微調整するタイポグラフィ手法であり、審美的側面と印刷物の読みやすさという実利的側面を併せもつ[4]。見出しなどの大きな文字では一層重要性が高まる。日本語や中国語など各文字がほぼ正方形の枠に収まる言語の本文では用いられることは少ないが、見出しなどで大きめの文字を用いる場合は詰め組みが行われることがある。活字を用いて印刷する場合は活字に特殊な加工が必要となるので労力と費用を要する作業であるが、写真植字やDTPでは格段に容易になった。
一般に日本では、詰め組みやカーニングを行っていない状態をベタ組みと呼ぶ[5]。カーニングは文字の組合せの形状に合わせてその都度異なる間隔を設定するものであり、一律に間隔を変える「トラッキング」や「字送り」とは区別される[3][6][注 2]。
カーニングやトラッキングの強弱はタイト(tight)・ルーズ(loose)と表現される[8]。タイトな詰め方の極限は字形同士が接触するタッチング(touching)と呼ばれる状況であり、これが文字詰めの限界である。本文に用いるには詰め過ぎであるものの、見出しやロゴタイプなどで印象的なタッチングの用法に遭遇することは少なくない。
カーニングには多少のデメリットもある。人間にとっての読みやすさを向上させる一方で、光学文字認識ソフトウェアにとっては文字の境界が判別しづらくなり、認識精度の低下につながる。特にタイトな組み方ではエラー率が 10% を超えると報告されたこともある[9]。
活版印刷
手法
最終的な印刷物には現れないが、活字は四角形のボディをもっており、そのままでは字面はボディの枠を超えて互いに近づくことができない[2]。しかし、例えば小文字の「f」「ſ」(長いs)や大文字の「T」「V」などでは、文字の右上に延びた箇所の下に次の文字や約物を入れなければ、その箇所に不格好な空白が生じることになる。そこで字面の下のボディを削るなどして字面をボディから浮かせる方法が取られた(図や文献[10]の写真参照)。活字のボディから浮いた字面の一部をカーン(英語: kern)と呼ぶ(カーニングの語源の節参照)。カーンは破損しやすく、取扱いには注意を要した[11]。
活字の一角を切り落とし、向かい合う角を切り落とした他の活字と隣り合わせて字面を近づける手法もあった[4]。角の切り落とし形状を一定にすることによって、少ない種類の活字で多くの組合せを作ることができる。この作業に特化した、タイプモーティサー(type mortiser)と呼ばれる機械も存在したが[12]、この手法は手間を要したので、スピードが要求される印刷では用いられなかった[4]。
別の方法として、頻繁に登場する組合せを合字とし、一つの活字としてあらかじめ用意する方策をとることも一般的に行われた[13]。活版印刷の成立初期には合字が必要な組合せは現在よりも多かったが[4]、やがて字形が整えられていくうちにカーニングの必要性の少ない方向に発展し、[11]「fi」「fl」などの代表的な組合せだけが残った[4]。 (フォントがデジタル化された現在でも、これらの組合せには独立した字形や文字コードが与えられるなど、特殊な取扱いがなされる。詳しくは合字を参照。)
いずれにせよ、活版印刷時代のカーニング処理には、特殊な活字を用意するか活字の形状を加工することが必要であり、労力と費用を要するものであった。19世紀から20世紀初頭にかけて鋳造活字の製造がほぼ機械化されてもなお、カーンドレターについては、その製造に要求される精度のためには手作りのほうがよいとされた[14]。
カーニングの語源
ラテン語で蝶番を意味する cardinem から派生したフランス語方言 carne(角、コーナー、投射角)が語源[15]。1675年から1685年頃、活字のボディから浮いた字面の一部のことを kern と呼ぶようになった[16][17]。 その後、形容詞的用法が生まれ、カーンをもつ活字をカーンドレター(kerned letter)と呼ぶようになり[18]、そこから文字のアキを調整する行為としての一般動詞 kern が生まれた。
写植・DTP・コンピュータ
写真植字やその後のDTPの普及に伴い、印刷物に鋳造活字そのものが用いられることは少なくなった。写植やDTPでは、活字のボディに代わって、字面は長方形状の「仮想ボディ」の中に配置される[19]。隣り合った文字の仮想ボディの境界を接触させて隙間なく並べたときがベタ組みに相当する。DTPにおけるカーニングは、このときの標準の文字間隔からどれだけアキを減らせばよいかを示す数値によって指定される。ダイアクリティカルマークがある場合や[20]、記事冒頭の画像のように字形同士が衝突する場合は逆にアキを増やす場合もある。
活字のカーニングは労力と費用を要するものであったが、DTPの登場でこの制約はなくなり、より多くの組合せでカーニングが行われるようになった。近年では、利用者が意識しなくても自動的にカーニングが行われる自動カーニング(autokerning)も一般的となった[21]。具体的にどういった組合せでカーニングが必要かは、言語によって異なる。また等幅フォントでカーニングを行うことはない。
自動カーニング
近年の高品質な欧文フォントはそれ自体がカーニングに関する情報をあらかじめもっている場合が多く、この機能に対応したソフトでは自動的にカーニングが行われる。これをメトリクスカーニング(metrics kerning)と呼ぶ[22]。 例えば P. 、To 、Tr 、Ta 、We 、Wo 、Ya 、Yo などの頻出する文字・約物の組合せに対し、適切なアキに関する情報が存在する[23]。このように、カーニングが必要となる文字・約物の組合せはそれらの形状によって概ね決まっており、これをカーニングペア(kerning pair)と呼ぶ[24]。欧文に限ってもその組合せは何百通りに及び、タイポグラフィに関する本でそのリストを見ることができる[25]。
OpenTypeはこうした先進的な機能に対応したフォント形式の一つである。ただし、リュウミン・新ゴ・太ゴB101などの和文用フォントに付属する欧文字形にはこの情報が含まれていない場合が多い[26]。また、対応フォントであっても1行内に異なるフォント・サイズ・書式の文字が混在する場合にはメトリクスカーニングは適用されない。
メトリクスカーニングがなされない状況であっても、組版ソフトが自動カーニング機能を備えていることがある[23]。これは文字の形状を解析し、最適な文字間隔を自動的に算出するアルゴリズムによって行われ、オプティカルカーニング(optical kerning)と呼ばれる[27]。
自動カーニングは手軽で便利な技術だが、手動カーニングに劣る場合もある。空白を判断するアルゴリズムにとって空白が十分に小さくても、実際接近しているのはダイアクリティカルマークに過ぎず、人間の目には空白が大きすぎるように見えるなどといったケースが考えられるからである。
ウェブブラウザ
一部のウェブブラウザはOpenTypeフォントのメトリクスカーニング機能を利用できる。この分野においてカーニングは未だ目新しい機能であり、それを制御するためのマークアップ方法もブラウザ側の対応状況もまちまちである。
Cascading Style Sheets の最新版、CSS3の機能として font-kerning
というものが存在する。CSS Fonts Module Level 3 に含められているが[28]、対応状況はブラウザによって異なる[注 3]。
値としては normal
(メトリクスカーニングの実施)、none
(カーニングを行わない)、auto
(用字系にあわせてユーザーエージェントが判断)の3通りがあり、初期値は auto
。
font-kerning: auto;
Scalable Vector Graphics (SVG) の機能としては text-rendering
というものが存在する[30]。これは本来SVGの図中で使われる機能であり、どのバージョンのCSS規格においても規定されていないにもかかわらず[31]、一部のブラウザはウェブページ中であってもこれをCSSとして解釈することが知られている[注 4]。
text-rendering: optimizeLegibility;
タイプライター
一般的なタイプライターの活字は等幅であり、1文字の打鍵ごとに紙が送られる量も一定である。したがって、タイプライターで打たれた文字にカーニングは存在せず、それが施されているように見える場合はワードプロセッサなどによる擬似的な「タイプライター風」の書類だと認識される場合がある。
このことはバラク・オバマの国籍陰謀論をめぐる議論の一角となった。バラク・オバマの誕生は1961年であり、ワードプロセッサは存在せず、出生証明書はタイプライターで作成されたように見える。しかし一部の文字にカーニングらしき特徴(仮想ボディの重なり)が見えることから、証明書の正当性を疑問視する人がいる[33]。仮に出生証明書が虚偽であった場合はアメリカ大統領となる要件を満たしていることが証明されず、オバマの当選の正当性が揺らぐこととなる。しかしこれに対しては、1941年には既にカーニング(プロポーショナル・スペーシング)が可能なタイプライターがIBMから発売されていたことや[34]、紙の滑り・インクのにじみなど様々な説明が可能であり、仮想ボディの重なりだけでは偽造の証明たり得ないという反論がなされている[35]。
ゲーム
カーニングの作業をゲームにした Web サイト "Kern Type, the kerning game" がある[36]。プレイヤーは画面に表示された文字をキーボードやマウスで動かし、理想的とされる結果と比較されて採点される。一般的に知られていない専門的な作業をゲームとしてエンターテインメントに転化させた例であり、デザイナーにとっても自らの技量を確かめることのできるコンテンツとして取り上げられている[37]。
脚注
- ^ Adobeの定義[3]によれば、カーニングは特定の文字の組合せに合わせてアキを調整すること。字送りと文字ツメは一連のテキストに対して等しくアキを調整すること。字送りは文字の右側だけを狭くする機能であり、欧文に用いられる。文字ツメは文字の両側を調整する機能であり、和文に用いられる。
- ^ ただし、トラッキングを「トラック・カーニング」、隣り合う文字の組合せごとの調整を「ペアワイズ・カーニング」としていずれもカーニングに含める場合もある[2]
- ^ 2017年7月現在、Mozilla Firefox、Google Chrome、Safari、Operaが対応。Internet Explorer、Edgeは未対応[29]
- ^ 2012年12月現在、Mozilla Firefox、Google Chrome、Safari[32]
出典
- ^ 小泉 2012, p. 199.
- ^ a b c デジタル・クリエイターズ連絡協議会 編「カーニング」『マルチメディア・インターネット事典』 。2012年11月4日閲覧。
- ^ a b カーニング、字送り、文字ツメの違い『Adobe InDesign Tutorials』、Adobe 。2012年11月4日閲覧。
- ^ a b c d e f g Fred Williams (1992), “Kerning & Mortising”, Type & Press (Amalgamated Printers’ Association) Spring, 1992
- ^ JIS X 4051:2004 日本語文書の組版方法
- ^ 「カーニング」『IT用語辞典バイナリ』、Weblio 。2012年11月4日閲覧。
- ^ Federal Express Corporation, leader creative 2012年12月9日閲覧。
- ^ 小泉 2012, p. 198.
- ^ Mussurakis, Stavros (October 1991). “Optical Character Recognition for Storing Literature References”. Am. J. Roentgenol. 157 (4): 882. PMID 1892048 .
- ^ Ilene Strizver (May 13, 2009), “TypeTalk: To Everything, Kern, Kern Kern...”, CreativePro.com
- ^ a b T. M. Turner, ed. (1856), “Manufacturing Printed Type”, Odd Fellows' Literary Casket, 6, pp. 359–361
- ^ Time-Saving Equipment for Printers, H. B. Rouse and Company, (1946)
- ^ 小泉 2012, p. 65.
- ^ Daniel Berkeley Updike (1922), Printing Types, Their History, Forms, and Use; a Study in Survivals, 1, Harvard University Press, p. 13
- ^ Douglas Harper (2012), “kern”, Online Etymology Dictionary 2012年11月5日閲覧。
- ^ “kern”, Free Merriam-Webster Dictionary (Merriam-Webster) 2012年11月5日閲覧。
- ^ “kern”, Dictionary.com Unabridged (Random House), (2012)
- ^ 島田静雄活字の物理的な寸法とその用語『実用文書のまとめ方』2011年4月8日 。
- ^ 「仮想ボディと字面」『フォントの基礎知識』、モリサワ 。2012年12月11日閲覧。
- ^ J. Victor Gaultney (2002), Problems of diacritic design for Latin script text faces, SIL International, p. 11
- ^ NAPI(新世代出版研究所) 編「自動カーニング」『図解DTP用語辞典』 。2012年11月4日閲覧。
- ^ 藤原隆男フォントの知識『情報科学講義資料』 。2012年11月5日閲覧。
- ^ a b 「カーニングと字送り」『InDesign Help』、Adobe 。2012年11月6日閲覧。
- ^ 小泉 2012, p. 200.
- ^ 小泉 2012, p. 202.
- ^ 渡邉たけしペア・カーニングと従属欧文TFMの作成『TeXでDTP』2005年 。
- ^ 「オプティカルカーニング」『IT用語辞典バイナリ』、Weblio 。2012年11月5日閲覧。
- ^ “6.3. Kerning: the font-kerning property”, CSS Fonts Module Level 3, W3C, (2012-08-23)
- ^ Alexis Deveria, Can I use... 2017年7月18日閲覧。。
- ^ “11.7.4 The ‘text-rendering’ property”, Scalable Vector Graphics (SVG) 1.1 (2 ed.), W3C, (2011-08-16)
- ^ text-rendering, Mozilla Developer Network, (2012-09-14) 2012年12月11日閲覧。
- ^ Anthony Kolber, “Cross-browser kerning-pairs & ligatures”, Aesthetically Loyal 2012年11月4日閲覧。
- ^ Bob Unruh (2011-05-08), “Web expert: Obama certificate falls short in authenticity”, WorldNetDaily
- ^ “1941”, IBM Archives (IBM) 2012年11月5日閲覧。
- ^ “Typewriter kerning (proportional spacing) existed in 1941”, qbit.cc, (2011-05-23)
- ^ Mark MacKay, Kern Type, the kerning game, Method of Action
- ^ Lançamento「いま,見ておきたいウェブサイト:第68回 Kern Type, the kerning game,Designspiration,O'Neill Illusion」『WEB+DESIGN STAGE』、技術評論社、2011年11月1日 。
参考文献
- 小泉均『タイポグラフィ・ハンドブック』研究社、2012年。ISBN 978-4-327-37732-8。