1. TOP
  2. デザイン
  3. CSSでも字詰ができる!font-feature-settingsで美しい日本語フォントのカーニング

CSSでも字詰ができる!font-feature-settingsで美しい日本語フォントのカーニング

 2018/10/05 デザイン
この記事は約 4 分で読めます。 1,812 Views

グラフィックデザイナーでは当たり前のように字詰(カーニング)していましたが、WEBで字詰をしようと思ったら画像化したテキストじゃないと…

そんなことは昔のこと。

いまやCSSをたった一行書くだけで字詰ができるようになりました。

特にタイトル周りは字詰をする、しないだけで締まりかたが変わってきます。

CSSでのカーニングの設定方法

上から

font-feature-settings : “nomal”;
 →字詰なし

font-feature-settings : “pkna”;
 →約物以外は字詰あり

font-feature-settings : “palt”;
 →すべて字詰あり

以下は実際に適応させてみました。

カタカナの部分や小文字の「ォ」の左右のスペースが特に詰まっていることがわかると思います。

字詰なしの font-feature-settings : “nomal”; だと少しパラパラした印象で締りがないですね。

タイトルであれば約物も含めてすべて詰めた { font-feature-settings : “pkna”; } が見やすいかと思います。

本文に適用してみる

こちらも上から

font-feature-settings : “nomal”;
 →字詰なし

font-feature-settings : “pkna”;
 →約物以外は字詰あり

font-feature-settings : “palt”;
 →すべて字詰あり

の順番です。

こちらは font-feature-settings : “pkna”; か font-feature-settings : “palt”; か悩むところですね。

「、」「。」に空間がある font-feature-settings : “pkna”; のほうが若干リズムよく読めるでしょうか。

letter-spacingを入れて詰まり過ぎを解消する。

font-feature-settings : “palt”; は詰まりすぎている印象があったので字間をにゆとりをもたせることで読みやすくなります。

上がletter-spacingの設定なし。
下がletter-spacingの設定あり。

だいぶ読みやすくなりました。

「ォ」や「っ」など空きがちな部分を詰めつつも、ゆとりがあって読みやすい文章です。

その他の本文が読みやすくなるCSSの設定

今回の字詰の主旨とは少しずれますが、以下のように、ラインハイトなどでの行間設定、段落の間の余白をしっかりと取ることで、読みやすい文章になります。

また日本語の本文は段落の縦ラインが揃っていると美しく読みやすくなるので、テキストアラインもジャスティファイがお薦めです。

まとめ

いかがだったでしょうか。

文字を制するものはデザインを制す。

WEBでも美しくて、読みやすいCSS設定でユーザーにストレスがなく魅力的なテキストコンテンツを制作していきましょう。

制作のご依頼・ご相談はこちら

dainamoでは魅力的なWEBサイトや、アプリ、ツール、ポスター、パンフレット、チラシなど幅広く承っております。ご相談、見積もり、お問い合わせなど、お気軽にご連絡ください。

今すぐご相談・問い合わせをする

\ SNSでシェアしよう! /

web制作・デザイン・システム開発・管理なら dainamo(ダイナモ)の注目記事を受け取ろう

この記事が気に入ったら
いいね!しよう

web制作・デザイン・システム開発・管理なら dainamo(ダイナモ)の人気記事をお届けします。

  • 気に入ったらブックマーク! このエントリーをはてなブックマークに追加
  • フォローしよう!

ライター紹介 ライター一覧

エリー

エリー

dainamoで企画・デザイン・ライティング・マーケティングを担当。小さい頃から絵を描くのが好きでデザイナーへ。現在はモノづくり、コトづくり、ヒトづくりでクライアントや世の中により良い影響を与えることが目標。趣味は絵、カメラ、旅行、アウトドア。

この人が書いた記事  記事一覧

  • ボタンの2重クリックや連打を防止するJavaScript

  • IoT時代のデザインはどうあるべきか

  • コピペでOK!ブラウザの戻るボタンを禁止する方法[ jQuery / javascript ]

  • [EC-CUBE 3.0]商品購入画面でお届け日とお届け時間を非表示にする方法

関連記事

  • 【2019年最新版】おしゃれなおすすめ日本語フリーフォント。プロのデザイナーでも使えます。

  • iPhone/iOSのセレクト、サブミットなどのフォーム要素のCSSをクリアする方法

  • 【2019年最新版】ai,PSDデータのデザイン素材サイトまとめ。今すぐ現場で使えて編集も楽ちん

  • 記事をコピー複製できるWordPressプラグイン「Duplicate Post」の使い方

  • 【2019】フリー数字フォント。おしゃれで見やすいおすすめをまとめ。無料で商用利用可能。

  • デザイン導入の役割と効果と価値