RSS

Typography

覚書:Webの文字にオートカーニング

ブラウザでのオートカーニングについては、データベースが飛ぶ前、ここで随分前に触れましたし、すでに十分浸透していることなのですが、一応覚書として。

OpenTypeフォントには「プロポーショナルメトリクス」という、カーニング情報が埋め込まれています。
Webフォントもこうしたカーニング情報を持っているものが増えており、CSSプロパティで利用できます。

section{
font-feature-settings : "palt" 1;
}

こう書くと、オートカーニングが効いて表示されます。
ほとんどのWebフォントも対応し、今はもう必須ともいえるプロパティだと思います。

Obscure Fontその後

先日ご紹介させていただいたObscureフォントですが、小文字も追加で作り始めました。

こういう感じでIllustratorで書き起こしたものをGriphsに取り込んでおります。
いま、ペアカーニング情報を設定しているところです。

グリフ別にひとつひとつ設定していくのですが、上書きされていたりとまだよくわかっていません…
岡倉覚三「茶の本」の欧文で様子をみております。

なんとか見られるようになってきているので、もうちょっとしたらSTORESの方でリリースしたいと思っています。

“Obscure” Font

STORESに新しいフォントを追加しました。
「I/A Obscure」という名前で、セリフ書体をベースに途切れたような、朦朧とした(obscure)感じのデザインです。
OpenType/TrueTypeだけでなく、Webフォント(.woff)もあります。
よければ以下から見てやってください。

I/A Obscure

縦書きでの崩れを調整する

明朝系フォントを使って縦書きをしたときのことなのですが、以下のようなことになってしまいました。

これはあんまりです。なぜこんなことになるのか説明します。
横書きのテキストを縦に流れるようにCSSを書くだけなのですが、ベースラインの位置が調整されず、左起点になったままなので、キャラクタ幅の違う文字の右側がガタガタになってしまっています。
これを解消するには、「vertical-align」を適用し、左のベースラインからの位置を調整するしかありません。

日本語のDTPソフトやIllustratorで縦書きをやってみるとわかるのですが、日本語縦書きのベースラインは中央になっています。ですので、幅の違うキャラクタも、真ん中で綺麗に揃っていますが、そもそも横書き欧文文化のものであるHTML/CSSには、「ベースラインが中央にある」といういう概念が存在しません。これはベースラインをコントロールするCSSプロパティがあれば、おそらくあっさり解消します。そうしたプロパティが勧告されるのを期待して待つかないのでしょうか。
ちなみに本文中もこうした崩れは顕著なのですが、どうしても気になるところだけ調整して、ある程度は諦めています。とにかく、の乱用で本文が認識されなくなるのは避けたいところですが、上記のような崩れは、おそらくクライアントチェックでも「ここどうにかして」という戻しが来るレベルですので、対処法を書いておきました。

追記:
縦書きですが、Safariがどうもがいまいちのようで、上記の数値ですと、逆にレイアウトが崩れます。ここに書いた数値よりも、CSSの値をさらに小さくし、最小限の調整で対応するしかなさそうです。こうした場合、大抵問題が起こるのはIE11/Edgeなのですが…

Windows/EdgeでWebフォントのジャギーを軽減する

偶然調べ物をしていて見つけた方法です。

Windows/Edgeでかなりジャギーが目立つのをなんとかできないかと考え込んでいましたが、以下の方法でかなり軽減することができます。

transform: rotate(0.05deg);

2D Transformでほんの少しだけ回転させると、急にレンダリングが綺麗になります。
A1明朝でテストしております。

適用前

適用後

ただし、HTMLの文書構造にどう影響を与えるのか、まだわからないので、少し慎重に導入してみたほうがよいと思います。

1 2