コンテンツにスキップ

英文维基 | 中文维基 | 日文维基 | 草榴社区

「カーニング」の版間の差分

出典: フリー百科事典『ウィキペディア(Wikipedia)』
削除された内容 追加された内容
アセンダのリンクを直しました
Cewbot (会話 | 投稿記録)
m Bot作業依頼: sourceタグをsyntaxhighlightタグに置換 (Category:非推奨のsourceタグを使用しているページ) - log
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>。
<source lang="css">
<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>}}。
<source lang="css">
<syntaxhighlight lang="css">
text-rendering: optimizeLegibility;
text-rendering: optimizeLegibility;
</syntaxhighlight>
</source>


== タイプライター ==
== タイプライター ==

2020年7月5日 (日) 23:04時点における版

カーニングの有無の比較。それぞれの文字の仮想ボディの境界を赤線で示す。上二つは「ベタ組み」だと間延びして見えるので、カーニングによって仮想ボディを割り込ませて隙間を減らした例。最も下は f のアセンダーと i の点が衝突した例で、鋳造活字では発生しないDTP特有の現象である。記事中で述べるように f のアセンダと i の点を一体化させた合字にする方法も一般的だが、この例では片方だけがイタリック体であって合字はなじまないので、隙間を広げるカーニングによって衝突を回避している。

カーニング英語: kerning)とは、主に欧文の組版において、プロポーショナルフォントの文字同士の間隔(アキ)を調整する技法のこと。カーニングを行わない場合は、文字の間に不自然な空白を招いてしまう。適切にカーニングが施されたフォントでは、字面間の空白の面積がほぼ均等になる。

DTPが普及した現在は、組版ソフト上で行われることが多い。以前は、活字に特殊な処理を行うか、切り貼りによる文字詰め(もじつめ)と呼ばれる作業が必要であった[1]。カーニングの訳語として、「文字詰め」や「詰め文字」という語を用いることもあるが[2]、カーニングと文字詰めを厳密に区別することもある[注 1]。英語では、活字を加工する工程の呼び名から派生して mortising と呼ばれることもある(原義:くり抜くこと、ほぞ穴を開けること)[4]

スタジオアルタのロゴ(新宿)。かなりタイトに組まれた例。LT はとりわけカーニングの必要性が高い組合せであるとされる[4]。このほか、最初の ST と最後の TA に効果を確認しやすい。

概要

文字の形状に合わせて個別に文字間の距離を微調整するタイポグラフィ手法であり、審美的側面と印刷物の読みやすさという実利的側面を併せもつ[4]。見出しなどの大きな文字では一層重要性が高まる。日本語中国語など各文字がほぼ正方形の枠に収まる言語の本文では用いられることは少ないが、見出しなどで大きめの文字を用いる場合は詰め組みが行われることがある。活字を用いて印刷する場合は活字に特殊な加工が必要となるので労力と費用を要する作業であるが、写真植字DTPでは格段に容易になった。

一般に日本では、詰め組みやカーニングを行っていない状態をベタ組みと呼ぶ[5]。カーニングは文字の組合せの形状に合わせてその都度異なる間隔を設定するものであり、一律に間隔を変える「トラッキング」や「字送り」とは区別される[3][6][注 2]

フェデックスのロゴタイプ。タッチングによって E と x の間の空白部に右向きの矢印を隠し絵として仕込み、物流業としてのイメージを印象づけている[7]

カーニングやトラッキングの強弱はタイト(tight)・ルーズ(loose)と表現される[8]。タイトな詰め方の極限は字形同士が接触するタッチング(touching)と呼ばれる状況であり、これが文字詰めの限界である。本文に用いるには詰め過ぎであるものの、見出しやロゴタイプなどで印象的なタッチングの用法に遭遇することは少なくない。

カーニングには多少のデメリットもある。人間にとっての読みやすさを向上させる一方で、光学文字認識ソフトウェアにとっては文字の境界が判別しづらくなり、認識精度の低下につながる。特にタイトな組み方ではエラー率が 10% を超えると報告されたこともある[9]

活版印刷

Tの字面を全てボディ内におさめた活字と、カーンとして横棒を浮かせた活字 ſ (s) と i の合字 (ギャラモン)
Tの字面を全てボディ内におさめた活字と、カーンとして横棒を浮かせた活字
ſ (s)i の合字 (ギャラモン)

手法

最終的な印刷物には現れないが、活字は四角形のボディをもっており、そのままでは字面はボディの枠を超えて互いに近づくことができない[2]。しかし、例えば小文字の「f」「ſ」(長いs)や大文字の「T」「V」などでは、文字の右上に延びた箇所の下に次の文字や約物を入れなければ、その箇所に不格好な空白が生じることになる。そこで字面の下のボディを削るなどして字面をボディから浮かせる方法が取られた(図や文献[10]の写真参照)。活字のボディから浮いた字面の一部をカーン英語: kern)と呼ぶ(カーニングの語源の節参照)。カーンは破損しやすく、取扱いには注意を要した[11]

タイプモーティサーのカタログ(1946年)。加工前後の活字の比較も見られる。

活字の一角を切り落とし、向かい合う角を切り落とした他の活字と隣り合わせて字面を近づける手法もあった[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]。具体的にどういった組合せでカーニングが必要かは、言語によって異なる。また等幅フォントでカーニングを行うことはない。

自動カーニング

クラレンドン (フォント)英語版 で "WAR" と書いた例。
上:カーニングなし、中:自動カーニング適用、下:手動でさらに強いカーニングを施したもの

近年の高品質な欧文フォントはそれ自体がカーニングに関する情報をあらかじめもっている場合が多く、この機能に対応したソフトでは自動的にカーニングが行われる。これをメトリクスカーニング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;

タイプライター

バラク・オバマの出生証明書拡大図。a と p のセリフが上下に重なっている。(全体図

一般的なタイプライターの活字は等幅であり、1文字の打鍵ごとに紙が送られる量も一定である。したがって、タイプライターで打たれた文字にカーニングは存在せず、それが施されているように見える場合はワードプロセッサなどによる擬似的な「タイプライター風」の書類だと認識される場合がある。

このことはバラク・オバマの国籍陰謀論をめぐる議論の一角となった。バラク・オバマの誕生は1961年であり、ワードプロセッサは存在せず、出生証明書はタイプライターで作成されたように見える。しかし一部の文字にカーニングらしき特徴(仮想ボディの重なり)が見えることから、証明書の正当性を疑問視する人がいる[33]。仮に出生証明書が虚偽であった場合はアメリカ大統領となる要件を満たしていることが証明されず、オバマの当選の正当性が揺らぐこととなる。しかしこれに対しては、1941年には既にカーニング(プロポーショナル・スペーシング)が可能なタイプライターがIBMから発売されていたことや[34]、紙の滑り・インクのにじみなど様々な説明が可能であり、仮想ボディの重なりだけでは偽造の証明たり得ないという反論がなされている[35]

ゲーム

カーニングの作業をゲームにした Web サイト "Kern Type, the kerning game" がある[36]。プレイヤーは画面に表示された文字をキーボードやマウスで動かし、理想的とされる結果と比較されて採点される。一般的に知られていない専門的な作業をゲームとしてエンターテインメントに転化させた例であり、デザイナーにとっても自らの技量を確かめることのできるコンテンツとして取り上げられている[37]

脚注

  1. ^ Adobeの定義[3]によれば、カーニングは特定の文字の組合せに合わせてアキを調整すること。字送り文字ツメは一連のテキストに対して等しくアキを調整すること。字送りは文字の右側だけを狭くする機能であり、欧文に用いられる。文字ツメは文字の両側を調整する機能であり、和文に用いられる。
  2. ^ ただし、トラッキングを「トラック・カーニング」、隣り合う文字の組合せごとの調整を「ペアワイズ・カーニング」としていずれもカーニングに含める場合もある[2]
  3. ^ 2017年7月現在、Mozilla FirefoxGoogle ChromeSafariOperaが対応。Internet ExplorerEdgeは未対応[29]
  4. ^ 2012年12月現在、Mozilla FirefoxGoogle ChromeSafari[32]

出典

  1. ^ 小泉 2012, p. 199.
  2. ^ a b c デジタル・クリエイターズ連絡協議会 編「カーニング」『マルチメディア・インターネット事典』http://jiten.com/dicmi/docs/k6/15148s.htm2012年11月4日閲覧 
  3. ^ a b カーニング、字送り、文字ツメの違い『Adobe InDesign Tutorials』、Adobehttp://www.adobe.com/jp/print/tips/indesign/category9/page3_1.html2012年11月4日閲覧 
  4. ^ a b c d e f g Fred Williams (1992), “Kerning & Mortising”, Type & Press (Amalgamated Printers’ Association) Spring, 1992, http://www.apa-letterpress.com/T%20&%20P%20ARTICLES/Type/Kerning%20&%20Mortising.html 
  5. ^ JIS X 4051:2004 日本語文書の組版方法
  6. ^ カーニング」『IT用語辞典バイナリ』、Webliohttp://www.sophia-it.com/content/%E3%82%AB%E3%83%BC%E3%83%8B%E3%83%B3%E3%82%B02012年11月4日閲覧 
  7. ^ Federal Express Corporation, leader creative, http://www.leadercreative.com/work/fedex/ 2012年12月9日閲覧。 
  8. ^ 小泉 2012, p. 198.
  9. ^ Mussurakis, Stavros (October 1991). “Optical Character Recognition for Storing Literature References”. Am. J. Roentgenol. 157 (4): 882. PMID 1892048. http://www.ajronline.org/content/157/4/882.short. 
  10. ^ Ilene Strizver (May 13, 2009), “TypeTalk: To Everything, Kern, Kern Kern...”, CreativePro.com, http://www.creativepro.com/blog/typetalk-everything-kern-kern-kern 
  11. ^ a b T. M. Turner, ed. (1856), “Manufacturing Printed Type”, Odd Fellows' Literary Casket, 6, pp. 359–361, http://books.google.com/books?id=0g_xAAAAMAAJ&pg=PA360&dq=%22kern%7Ckerns%22+letter+-inauthor:kern%7Ckerns+-intitle:kern%7Ckerns&hl=en&ei=1LKRTujxN4P2mAXNvZwK&sa=X&oi=book_result&ct=result&resnum=1&ved=0CC4Q6AEwADg8#v=onepage&q=%22kern%7Ckerns%22%20letter%20-inauthor%3Akern%7Ckerns%20-intitle%3Akern%7Ckerns&f=false 
  12. ^ Time-Saving Equipment for Printers, H. B. Rouse and Company, (1946), http://archive.org/details/RouseCatalogPriceList19460916 
  13. ^ 小泉 2012, p. 65.
  14. ^ Daniel Berkeley Updike (1922), Printing Types, Their History, Forms, and Use; a Study in Survivals, 1, Harvard University Press, p. 13, http://archive.org/details/printingtypesthe01updi 
  15. ^ Douglas Harper (2012), “kern”, Online Etymology Dictionary, http://www.etymonline.com/index.php?term=kern&allowed_in_frame=0 2012年11月5日閲覧。 
  16. ^ “kern”, Free Merriam-Webster Dictionary (Merriam-Webster), http://www.merriam-webster.com/dictionary/kern 2012年11月5日閲覧。 
  17. ^ “kern”, Dictionary.com Unabridged (Random House), (2012), http://dictionary.reference.com/browse/kern 
  18. ^ 島田静雄活字の物理的な寸法とその用語『実用文書のまとめ方』2011年4月8日http://www.nakanihon.co.jp/gijyutsu/Shimada/bunsyo/ChapF01.htm 
  19. ^ 仮想ボディと字面」『フォントの基礎知識』、モリサワhttp://www.morisawa.co.jp/font/about/knowledge/face.html2012年12月11日閲覧 
  20. ^ J. Victor Gaultney (2002), Problems of diacritic design for Latin script text faces, SIL International, p. 11, http://scripts.sil.org/ProbsOfDiacDesign 
  21. ^ NAPI(新世代出版研究所) 編「自動カーニング」『図解DTP用語辞典』http://www.japanlink.co.jp/dtpjiten/si/jidokern.html2012年11月4日閲覧 
  22. ^ 藤原隆男フォントの知識『情報科学講義資料』http://w3.kcua.ac.jp/~fujiwara/infosci/font.html2012年11月5日閲覧 
  23. ^ a b カーニングと字送り」『InDesign Help』、Adobehttp://help.adobe.com/ja_JP/indesign/cs/using/WSa285fff53dea4f8617383751001ea8cb3f-6e14a.html2012年11月6日閲覧 
  24. ^ 小泉 2012, p. 200.
  25. ^ 小泉 2012, p. 202.
  26. ^ 渡邉たけしペア・カーニングと従属欧文TFMの作成『TeXでDTP』2005年http://www.dab.hi-ho.ne.jp/t-wata/tex/kerning.html 
  27. ^ オプティカルカーニング」『IT用語辞典バイナリ』、Webliohttp://www.sophia-it.com/content/optical+kerning2012年11月5日閲覧 
  28. ^ “6.3. Kerning: the font-kerning property”, CSS Fonts Module Level 3, W3C, (2012-08-23), http://www.w3.org/TR/css3-fonts/#font-kerning-prop 
  29. ^ Alexis Deveria, Can I use..., http://caniuse.com/#search=kerning 2017年7月18日閲覧。 
  30. ^ “11.7.4 The ‘text-rendering’ property”, Scalable Vector Graphics (SVG) 1.1 (2 ed.), W3C, (2011-08-16), http://www.w3.org/TR/SVG11/painting.html#TextRenderingProperty 
  31. ^ text-rendering, Mozilla Developer Network, (2012-09-14), https://developer.mozilla.org/en-US/docs/CSS/text-rendering 2012年12月11日閲覧。 
  32. ^ Anthony Kolber, “Cross-browser kerning-pairs & ligatures”, Aesthetically Loyal, http://aestheticallyloyal.com/public/optimize-legibility/ 2012年11月4日閲覧。 
  33. ^ Bob Unruh (2011-05-08), “Web expert: Obama certificate falls short in authenticity”, WorldNetDaily, http://www.wnd.com/2011/05/295189/ 
  34. ^ “1941”, IBM Archives (IBM), http://www-03.ibm.com/ibm/history/history/year_1941.html 2012年11月5日閲覧。 
  35. ^ “Typewriter kerning (proportional spacing) existed in 1941”, qbit.cc, (2011-05-23), http://qbit.cc/typewriter-kerning-existed-in-1941/ 
  36. ^ Mark MacKay, Kern Type, the kerning game, Method of Action, http://type.method.ac/ 
  37. ^ Lançamento「いま,見ておきたいウェブサイト:第68回 Kern Type, the kerning game,Designspiration,O'Neill Illusion」『WEB+DESIGN STAGE』、技術評論社、2011年11月1日http://gihyo.jp/design/serial/01/website-pickup/0068 

参考文献

関連項目