タイププロジェクトのデザイナーやエンジニアが、書体関連のあれこれを投稿していくブログです。書体デザイン・組版の豆知識や開発の裏話、スタッフおすすめの書籍紹介など幅広い内容でお届けします。

月末にひと月の更新内容を振り返るメールマガジンの配信も行いますので、ぜひご登録ください。

漢字の構成と制作ポイント03「横割り系」

今回は横割り系として、上下分割で構成される漢字の制作ポイントの紹介です。漢字の上側にあるものが「冠(かんむり)」、下側にあるものが「足(あし)」と呼ばれています。 冠ではただ上下に並べるのではなく、被せる・中に入れるといったイメージで作る場合があります。例えば「安」なら「宀」の内側の空間に「女」の頭を食い込ませるようにして作り、見え方としては中の要素に冠が負けないよう調整してい…

今月の一冊(2023年2月)『The Visual History of Type』

今回は、Paul McNeil著、『The Visual History of Type』を紹介します。 本書は1400年代から2000年頃までの厳選された欧文書体を紹介しています。構成はシンプルで、見開きに一書体の見本帳図版、その解説が載っています。そして特筆すべきはその量です。約600年に渡る320書体以上が年代順に並べられ、ページをめくるとともに書体の歴史を感じることがで…

フォントの組版機能06「プロポーショナルメトリクス」

InDesign/Illustratorの[プロポーショナルメトリクス]は、フォントが持っている詰め組み用の字幅情報に基づいて文字を詰める機能です。 フィーチャー・タグは横組み用ならpaltで「Proportional Alternate Widths」を短縮したものです。わたしはpaltを「ぴーあると」と読みますが、英語っぽく「ぴーおると」と読む人もいます。「ぱると」も聞いた…

漢字の構成と制作ポイント02「縦割り系」

漢字の左側にあるものが「偏(へん)」、右側にあるものが「旁(つくり)」です。今回は偏と旁、縦に分割する構成の漢字を作る時のポイントを紹介します。 横に2つの要素をならべるからといって丁度半分ずつの幅で作っても、大抵の文字は綺麗なバランスに見えません。一文字全体で筆画の密度をならすように左右の構成要素の横幅を調整します。このとき間の空き具合も重要で、それぞれの固まりは見えつつも一…

フィットフォントサービスの紹介04「自動フィッティングツール」

タイププロジェクトでは、欧文フォントにぴったり合う日本語フィットフォントを見つける作業「フィッティング」を支援するツールを開発し、利用しています。 このツールは、ターゲットのグリフから水平ステム幅、垂直ステム幅、字幅、キャップハイトなどの情報を取得して比較し、組み合わせる候補となる日本語フィットフォント、組み合わせる際の欧文側の拡大率、ベースラインシフトなどを算出します。こうし…

TPの書庫から「明朝体の歴史」

今回は、竹村真一著の『明朝体の歴史』を紹介します。 本書は紙や布についてや印刷の起源から始まり、文字や書体の変遷、中国での明朝体の発生にいたるまでの経緯、そして日本に伝わって定着するまでの過程がまとめられています。 楷書が変形してどのように明朝体になっていったかについての章では、版下となる書かれた文字と書いた人に対する気持ちや、書道的な持ち味を捨てられずに残った楷書の筆跡が明朝…

Webフォントのデザインテクニック03「改行位置を指定しよう」

大きい見出しなどに Web フォントを利用する場合、画面やウィンドウサイズによっては、改行位置がデザインの意図通りでないものになることがあります。 これを解消するために、改行可能位置を示す<wbr> 要素がありますが、日本語の場合は、1文字1単語と解釈されてどこでも改行してしまうので、現状は、以下のように少し複雑な指定をする必要があります。 上が何もしていないもの、…

フォントの組版機能05「Adobeアプリの〈文字ツメ〉」

InDesign/Illustratorには[文字ツメ]という機能があります。前回触れたトラッキングが一律詰めであるのに対して、[文字ツメ]では文字ごとに詰め量が変わります。 [文字ツメ]はパーセンテージで指定しますが、これは「サイドベアリングを何パーセント削るか」を意味しています。たとえば[文字ツメ]100%では、サイドベアリングを完全に削ります。これは前後の文字とバウンディ…

フィットフォントサービスの紹介03「漢字・仮名・欧文の組み合わせ」

フィットフォントサービスでは、パートナーの欧文フォントとタイププロジェクトの日本語フォントを組み合わせて、ひとつのフォントとして提供することができます。 タイププロジェクトのサイトでは、漢字・仮名・欧文の様々な組み合わせをシミュレートすることができます。画面上のスライドバーでウエイト、コントラスト、字幅、フトコロを調整することで用途に合わせた最適な組み合わせを探すことができます…

今月の一冊(2022年12月)『Reading Letters』

今回は、Sofie Beier著、『Reading Letters』を紹介します。 本書は書体の視認性ついて詳しく解説しています。一見硬いテーマですが、見るだけで納得がいく図版も豊富に取り入れている為、簡単に理解できるように工夫されています。また、視認性という大きなテーマはありつつ、文字の歴史、形状、視点移動や人と文字との距離などといった本当に様々な方面から掘り下げているため飽…

フォントの組版機能04「どの詰め機能を使う?」

Adobe InDesign/Illustratorには、文字を詰めるのに使える機能がいろいろありますが、みなさんどれをよく使いますか? InDesignでは、文字パネルに[カーニング][トラッキング][文字ツメ]があり、[文字パネルメニュー>OpenType機能]に[プロポーショナルメトリクス]があります(Illustratorでは[OpenTypeパネル>プロポーショナルメ…

漢字の構成と制作ポイント01「部首」

漢字は部首によるグループ分けができます。部首とは漢字の一部分で、例えば「焼、炊、炒」はすべて共通の部首をもつ漢字です。この部首は、単体で書く場合が「火」、漢字の左側にあるものが「偏」なので、「火偏」と呼ばれています。火偏なら火に関連する意味であることが多い、というように漢字を覚えたり使ったりする場面で部首はよく意識されますし、読めない漢字でも部首から引けるなど、部首は様々な場面…

TPの書庫から『祈りの文字』『町まちの文字』

今回は、蓜島庸二著の『町まちの文字』と『祈りの文字』を紹介します。 『町まちの文字』は看板や暖簾、『祈りの文字』は扁額やお札など、たくさんの写真と共に筆者やその知人が訪ねた文字が紹介された本です。 『町まちの文字』『祈りの文字』を合冊・再編集した『町まちの文字 完全版』もあります。 『町まちの文字』は「ちょうちん屋復権ー序にかえてー」というテキストから始まりました。書道で一気に…

Webフォントのデザインテクニック02「文字サイズを画面サイズに合わせる」

タイポグラフィを活かしたサイトデザインでは、スクリーンに対して大きく表示したり、周りのグラフィック要素との相対的な位置やサイズが重要になる場合があります。 例えば、以下のようなデザインカンプ(デザインの完成見本画像)の場合、ウィンドウサイズの変化によって、テキストのサイズや位置が変わると要素の比率が変わってしまい、コーヒーのビジュアル部分にテキストがかぶってしまうなど、デザイン…

フォントの組版機能03「詰め組みのしくみ」

前回、OpenTypeフィーチャーにはGPOS(グリフの位置を動かして調整する)とGSUB(グリフを置き換える)があるという話をしました。今回から数回にわたってGPOSについて説明します。 欧文フォントでは、カーニングに加えてアクセント記号などを適切な位置に配置するためにGPOSが使われますが、日本語フォントではGPOSは、主に詰め組みのために使われます。 詰め組みの話は少しや…

漢字と仮名の組み替え05「既製フォントで組み替え」

今回はTPスカイシリーズでできる組み替えサンプルを図に用意しました。漢字は全て同じですが、仮名をコントラストの高いものや、カウンターを絞ったものに組み替え、より漢字・仮名のメリハリがある組版を目指してみました。TPスカイシリーズは4つの軸を持った和文書体で、2段階のラウンド展開も合わせると計91フォントにもなるビックファミリーです。バリエーションが豊かで、そのうえシンプルでクリ…

今月の一冊(2022年10月)『SANS SERIF』

今回は、CEES W. DE JONG著、『SANS SERIF』を紹介します。 本書は1900年から2000年頃までの30種以上の主要なサンセリフを取り上げ、豊富な図版、解説とともに紹介しています。 サンセリフにだけに絞った書籍は珍しく、焦点を絞りやすいのが良いところです。また、時代に沿った構成になっており今も使われている書体はこの時代に生まれたのか、この時代にはこれが流行っ…

書体づくりの舞台裏:フォントの赤入れ02「S- S+、C- C+」

前回は簡略化した赤入れとしてW-とW+の紹介をしました。今回ももう少しアルファベットの赤入れを紹介していきます。 Sはサイズの意味で、S-なら「小さく」、S+なら「大きく」という指示です。単純に拡大縮小すると筆画の太さもいっしょに変わってしまうので、太さは変えずに骨格を小さくしたり大きくしたりするようなイメージで修正します。 「医」は文字全体を小さくという指示です。四角い文字は…

Webフォントのデザインテクニック01「見出しやリード文を詰め組みしよう」

見出しやリード文など、文字サイズが大きいために文字間が目立つ場合や、文の視覚的なまとまりが欲しい場合は、詰め組みするとより綺麗に見せることができます。 OpenType フォントは、文字の形状だけでなく、文字組版に関するさまざまな機能についての情報を含んでいます。 このうち、paltとkern(縦組みの場合はvpalとvkrn)という OpenType 機能を利用することで、W…

漢字と仮名の組み替え04「フィットフォントで組み替え」

タイププロジェクトのwebサイトにあるフィットフォントのシミュレーターは、和文と欧文の組み替えだけでなく、漢字と仮名の組み替えにも対応しています。 フィッティングの手順ですが、例えばフォントAをベースに仮名だけをフォントBに組み替えるとして、私の場合は、まずフォントBの仮名の太さや字幅をフォントAの仮名に近づけるところから始めています。近づけた仮名を組替えてから微調整して、表示…