全てのWebフォントにカーニング機能が実装される日が近いかも

こんちゃー!ヾ(*´∀`*)ノAipawnです。
今日はWebフォントにカーニング機能が実装されたというニュースを紹介したいと思います。

カーニングって?

カーニングとは、文字と文字の間を詰め、文字の間隔を調整することです。
1字1字が持つ文字幅が違うので、文字間隔を調整することで綺麗なデザインになります。
詳しくはデザイナーボブ(旧デザイナーN)が記事にしていますので、参考にしてください。

カーニングでデザインが変わる!

Webフォントとカーニングの関係は複雑だった

通常、カーニングをするのは印刷物や画像で使用する文字など、Web上で処理をしないものしかありませんでした。
Webフォントでは文字の持つ余白の影響が強く、カーニングを行うのは難しいと言われていました。
Web上で処理するのは複雑だったのでしょう。

しかし、画期的なニュースが先日発表されました。

カーニング機能が実装された「FONTPLUS」

FONTPLUS」とはソフトバンク・テクノロジー株式会社が提供するクラウド・Webフォントサービスです。
CSSを用いることでカーニングすることができるようになったそうです!

サンプル

参考サイト
FONTPLUSTIPS 文字詰めなし
FONTPLUSTIPS 文字詰めあり

流れとしましては、
(1) CSSで文字間の余白を一括で取り除く
(2) CSSのletter-spacingで調整する

たったこれだけ!
CSSで文字間の余白を一括で取り除く方法までは書かれていなかったので、凄く気になります。

ただ、若干残念な部分が4つあります。

1. 1文字ずつ余白を調整をするためには、spanなどのタグで囲う必要

htmlとcssが長くなり、サイトの読み込みが遅くなっていきます。

2. カーニング処理が不安

カーニングの処理が複雑が故に、ユーザー環境次第では表示速度が遅くなるかもしれません。

3. 動作しない書体の存在

今後解決されるかもしれませんが、動作しない書体が存在します。

4. 特許申請中

特許申請中とのことですが、今後「FONTPLUS」以外ではカーニング機能が実装されないのかもという不安があります。

デザイナーとして、こう見る

今後、改善の繰り返しでより良くなっていく機能だと思います。
他のWebフォントも実装して欲しいところです。今後の流れが気になります。
画像は写真だけという時代がやってきたのかもしれません。

それでは、またヾ(*´∀`*)ノ

CONTACT US

株式会社プロフェッサはシステム開発・Webサイト制作会社です。
お仕事のご依頼やお困りな事がございましたらお気軽にご連絡ください。


Previous Post

Next Post