Jimdoで使えるモリサワフォントで文字詰めができるのか実験してみた

Jimdoを制作者目線で見たときにどんなことができるのか？って気になりますよね。ここは、極力大きな変更を加えなくてもできる様々な実験をしていくコーナー。

栄えある第一回目は、ウェブフォントに関しての実験。Jimdoでは、モリサワTypeSquareが利用できます。Proでは15書体、Businessでは176書体が使えていて、このサイトでも見出しだけではなく本文も含めてフォントを指定してます。

最近、Facebookを眺めていて目にとまったのが、CSSで可能な文字詰めについて書かれているこの記事。もともと、ウェブ上の表現では文字詰めはできませんというのを、提案の度に散々言っていた時期（制作会社勤務時代）がありましたが、今は状況が変わってきているんですね。ただし、以下の条件を満たしている必要があります。

• 文字詰めを可能にするCSSプロパティに対応しているブラウザであること
• 指定されるフォントがOpenTypeであること

この2つの条件を満たすことができれば、ウェブブラウザ上に表示される文章に文字詰めを適用させることができます。ブラウザに関しては、ユーザー側に依存するのでここでまず押さえておくべき考え方として、文字詰めはあくまでも付加的な扱いにすること。文字詰め前提でコンテンツを作るというのは、ユーザーに環境を強要することと同じですからね。

指定されるフォントについては、Jimdoで利用できる日本語フォントのほとんどがOpenTypeの仕様なので、文字詰めに対応します。ここは実は結構大きなポイントです。

ということで、早速実験開始です。次のコンテンツは、同じ文章を「文字詰めなし」「文字詰めあり」で比べてみたモノです。指定されているフォントは、「UD新ゴL」です。

わかりましたでしょうか？文字詰めなしは、従来通り全ての全角の文字（句読点含む）が、同じマスの中に入っているように表現されるのにたいして、文字詰めありでは、文字に応じて文字間隔が詰まっているため、句読点と続く文字の間の余白もほとんど見られなくなったと思います。

さて、ではどうやれば文字詰めはできるのでしょうか？この実験をしようと思ったきっかけにもなったTypeSquareブログの記事を紹介します。

>>「文字詰め」の使い方　(TypeSquare Blog)より引用

「font-feature-settings」を利用します。 CSS中でfont-familyを記述している箇所に、以下の記述を追加します。

-webkit-font-feature-settings: 'palt' 1; // for Android 4.4

font-feature-settings: 'palt' 1;

この ‘palt’ は「プロポーショナルの文字幅（プロポーショナルメトリクス）」を適用するためのキーワード（フィーチャータグ）です。

フィーチャータグを指定することで、かなや約物など全角幅でデザインされた文字が、固有の適切な字幅で前後の文字と詰まって表示されるようになります。

‘palt’ 以外に利用可能なフィーチャータグとして ‘halt’ があり、こちらは主に約物類を半角幅に調整します（字幅半角メトリクス）。

Jimdoでは、ヘッダー編集機能があるので、CSSを使ってこの指定をするだけです。ちなみに、先の実験サンプルは、ウィジェット機能から直接タグに文字詰めを指定しています。

文字詰めは、あくまでも「見た目」の表現にすぎません。文字の詰まり方ばかり気にしてしまい、伝わらない内容では元も子もありません。まずは、訪れた人が知りたいと思う内容であることを忘れないようにしましょうね。

CSSのfont-feature-settingsについては、次のサイトで詳しく解説されているので、ぜひ読んでみると良いです。

文字詰めできるCSSのfont-feature-settingsが凄い！日本語フォントこそ指定したい自動カーニング