イイダリョウのブログ。CSSのデフォルトにある文字詰め機能、letter-spacingとfont-feature-settingsと見え方などを比較してみました。今日、素敵なWebフォントを知りました。いえいえ、見て欲しいのはそこぢゃない、約物ですよ。約物ってなんだって?そうですね、句読点とかカッコとか、記号系の文字あるじゃないですか。なにが素敵なのか、順番に説明していきましょう。私はもともと印刷会社に勤務しておりまして、紙媒体では二つの文字詰め文化があります。グラフィックデザイン:約物は詰めるべしエディトリアルデザイン:約物は半角(1/2)アキにすべし前者は、要素(コンテンツ)のグルーピングとして、主にキャッチコピー、見出しなどのタイトル系を一塊りのブロックとして認識させる意図があります。後者は、文章などの大量のテキストを読むときに、ところどころに一呼吸を置いて、読みやすくするさせる意図があります。これは文化の違いであり、目的の違いであり、どちらが正しいとか上という話ではありません。*1Webブラウザのシステムフォントは文字詰めに弱いで、Webブラウザのシステムフォントですが、文字詰めに弱いです。あらゆる約物は基本的に全角1マスになります。CodePen.まあ、文章の部分はいいんです、これでも。ケンシロウは「お前はもう、死んでいる」と言ったなんというか...カッコの前後や句読点のところで半角のアキが入るので、見出しがパラパラと分割しているように見えます。JP」と再度比較してみてくだせい。これを防ぐために、かつてはグラフィックソフトで見出し部分を画像化して配置してました。alt属性にテキストを入れれば検索にはヒットしますしね。デメリットとして見出し内のキーワードをユーザーがコピーできないのと、修正のたびにグラフィックソフトを開かねばなりま千円。letter-spacingで詰めようそうこうしているうちに、CSSにletter-spacingというものがあることを知りました。-0.1em;}1emが1文字の大きさです。-0.1emだとマイナスなので、0,1文字分開けるのではなく詰めます。こんな見た目になります。CodePen.どうでしょう。前に比べて、少しシュッとした印象ですね。詰めるとどうでしょう。CodePen.おっとっと、危ない(汗)。文字と文字がくっついちゃいそうですね。letter-spacingは-0.1emが限度だな。肝心の約物のところはまだ空いたままだし。実は文字詰めには2種類ありましてカーニング:特定の文字と文字の間だけを詰めるトラッキング:文章全体の文字間を詰めるletter-spacingは「トラッキング」を実現するCSSなんだよなー。あかめ女子のwebメモspanで特定の文字にletter-spacingletter-spacingしか知らなかったころ、次に私がやってみたのは、特定の文字をspanタグで囲って、そこにletter-spacingを掛ける方法です。CodePen.なんということでしょう!約物のところだけ「カーニング」を実現できました。難点としては、spanで囲う場所が若干直感的ではない。「を囲うとおとの間が詰まっちゃいます。あと、この方法は手間が多いので、文章部分は現実的ではないですな。そこはfont-feature-settingsでしょ、社長!手間暇を掛けますか?それとも文字詰めを諦めますか?我々Webデザイナーには葛藤の日々です。紙媒体の品質を知るクライアントは当然「見出しの文字がパラパラなんですけど。