• ブログTOP
  • AI・ディープラーニング
  • AR
  • VR
  • WEBサイト
  • WEBマーケティング
  • SEO
  • SNS
  • その他
  • お問い合わせ

ALAKI株式会社

COZIKEEいつまでも使えるTech情報発信ブログ

リクルートサイトはこちら >

欧文書体からタイポグラフィーを学ぶ Part.2

2017年8月18日

  • このエントリーをはてなブックマークに追加

こんにちは!

デザイナーの伊東です。
前回は欧文書体を通してタイポグラフィーを学ぶというテーマでお送りしましたが、今回はその第二弾です。

欧文書体はどのような構成で作られているのか、どんな種類があるのかをすでにお伝えしていましたので、今回は「行間」と「カーニング」に的を絞ってご説明します。
以前に比べてより実践的な内容となっていますのでぜひご覧ください。

行間を空けて読みやすい文章に

行間とは

読んで字のごとく文章の行と行の間のことです。
文章量やフォントサイズに応じて、しっかりと行間を設定することで格段に文章が読みやすくなります。
もちろん、行間を空けすぎると文としてのまとまりを失い、かえって可読性を損ねるので加減が必要です。

Webで行間を設定する

WordやExcel、IllustratorやPhotoshopで行間を調整できるのは説明するまでもないかもしれませんが、Webでももちろん設定可能です。
Webで行間を設定する場合は、CSSのline-heightプロパティを使用します。

CSS
1
2
3
p {
  line-height: 15px;
}

ピクセルで指定したり、

CSS
1
2
3
p {
  line-height: 1.5;
}

CSS
1
2
3
p {
  line-height: 150%;
}

フォントの大きさに対して相対的に指定したりすることができます。

フォントサイズによって適切な行間は変わってきますので、pxで値を固定するのではなく、相対的に指定することをオススメします。

読みやすい行間の決め方

では、実際にどのくらい行間を空けたら読みやすいのでしょうか?
一般的に行間は文字の半分から一文字分くらいが適切とされています。

line-heightでいうと1.5〜2、もしくは150%〜200%あたりが推奨されています。

また、本文と見出しでは行間の設定を少し変えるのが望ましいです。
具体的には、本文には文字の170%程度ゆったりめに行間を空け、見出しはまとまりを持たせるため150%程度の行間を設定する、といった具合です。

何パーセント空けたら完璧に読みやすい、ということは一概には言えません。
シチュエーションに応じて行間を指定できるよう、日頃から心がけることが一番かと思います。

カーニングで文字組を整える

カーニングとは

大抵のフォントは、文字と文字の間が適切な間隔になるよう書体デザイナーによってきっちり設計されています。
ですが、隣り合う文字の形によってはやたらと空白が目立ってしまう場合があります。
こうした不自然な空間を調整することをカーニングといいます。

カーニングをするかしないかで、デザインのクオリティーは大きく変わってくると言っても過言ではないと思います。
あるいはデザイン云々以前の、文字を読ませる最低限のマナーとも言えるかもしれません。

カウンターを意識する

カーニングをするにあたって、”カウンター”という言葉を知っておくことが大切です。
カウンターとは、一文字一文字の中にある空間のことを言います。

名称未設定-1_r2_c2

上記の赤い丸で示したところがカウンターです。

カーニングにおいては、カウンターの大きさを含めた文字間のスペースをきちんと揃えることが重要です。

カーニングが必要な文字列

カーニングについていろいろと説明してきましたが、実際にどういうシチュエーションでどういったカーニングをすればいいのでしょうか?
実例を交えて説明します。

名称未設定-1_r2_c2

何も気にせずにタイピングした”WAVE”という文字があります。フォントはhelveticaのboldです。
字間に意識を向けると、”W”、”A”、”V”の間隔が大きいことがわかります。

名称未設定-1_r2_c2

単純に文字と文字との間隔でいうと、”V”と”E”の間が一番離れていますが、斜めの線が連続すると大きなスペースが生まれてしまいます。
そこでカーニングの出番です。

名称未設定-1_r2_c2

字間が均等になり、調整前と比べると美しい文字組になりました。
上記の例はわかりやすい例ですが、文字によっては見落としてしまいがちな細かい調整が必要なものがあります。
常に気にかけるようにして、デザインのクオリティーを向上させましょう。

Webでカーニングを設定する

Web上のテキストに対して、ひとつひとつ文字間のカーニングを調整することはどうしても無理がありますが、CSSのプロパティで自動的にカーニングを調整することができます。

それが”font-feature-settings”プロパティです。

CSS
1
2
3
p {
  font-feature-settings: "kern";
}

“kern”という値を指定することで、自動カーニングの設定を有効にします。

仕組みとしては、物理的に文字と文字の間にどの程度スペースがあるかを判断し、調整しているようです。
ただし、このプロパティはOpentypeフォントに対してのみ有効です。また、文字の幅が全て同じになるように設定された”等幅フォント”に対してはカーニングが適用されないのでご注意ください。

このプロパティはカーニングの為だけのプロパティではありませんので、タイポグラフィに関する様々な設定を行うことができます。
ここではカーニングの指定方法に止めますが、興味がある方は以下のページからご確認ください。

CSS での OpenType 機能の構文

ゲーム感覚でワンランク上のカーニングを身につける

カーニングに関しては、行間の設定に比べ非常に繊細で間隔による部分が大きいです。
文字組の経験をひたすら積むのが一番よいのでしょうが、ゲーム間隔でカーニングを学べる楽しいサイトをご紹介します。

KERNTYPE
http://type.method.ac/

スクリーンショット 2017-08-18 1.47.49

数文字の英単語をドラッグでカーニングして、その精度が100点満点で採点されます。
最初の文字と最後の文字の位置は固定されているので、中の文字を動かすことができます。

自分の苦手なパターン、得意なパターンが見えてきて面白いです。

 

今日は行間とカーニングについてご紹介しましたが、正直デザインの中でも裏方的なイメージのある地味な作業です。
前回も書いた通り、文字を伝わりやすくすることはデザインの本質的な部分だ思います。
細部まで完璧に行き届いたデザインを目指して、こうした地道な作業を怠らないようにしたいです。

引き続き次回も宜しくお願いします!

  • ツイート
  • このエントリーをはてなブックマークに追加

You may also like...

  • Coworkers photo in modern office.Project manager team work new idea.Young business crew working with startup studio.Laptop computer on table,showing presentation.Blurred,film effect.Horizontal.

    作業時間・コストを圧倒的に短縮して、真のデザイン業務に注力するための6つの方法

    10 11月, 2017

  • スクリーンショット 2018-04-27 0.08.08

    トレンドの”Duotone/デュオトーン”をWebデザインに取り入れる

    27 4月, 2018

  • Hampshire Light  Lighting Design Services

    【2018年のデザイン予想】これからきそうな海外のWebデザインのトレンド5選

    5 1月, 2018

デザイナー募集
  • Next story videoタグを使って自動全画面(フルスクリーン)に動画を表示させる方法
  • Previous story CLOUD FLAREでサブドメインをSSL化する方法

弊社サービス

MONJI+ MUGHEN ALAKI クラウド型受発注システム さよなら過去のAR。WebARがイベント集客に革命を起こします。

運営会社

ALAKI株式会社 ALAKI株式会社採用サイト

人気の記事

  • alaki1462_A_businessman_who_works_logically_1da80a2e-c297-4911-bdd6-feba0ebf1357

    仕事術

    【書籍要約】数学的な仕事術大全

    4 11月, 2024

  • fv-main-img-min

    空間コンピューティング

    世界初!「空間コンピューティング」を専用端末不要、スマホのWebブラウザのみで実現する『Web XR Site』を公開しました

    22 6月, 2023

  • Virtual reality players isometric vector illustration. VR UI and navigation. Futuristic digital technology. Virtual screen. Mixed reality 3d concept. Person in VR headset. Web banner idea

    AR

    Appleから新世代MRグラス「Vision Pro」の登場 – デジタルと現実世界が融合する新時代へ

    6 6月, 2023

  • AWE

    未分類

    ARアプリ『MUGHEN』が世界最大のAR/VRアワード「AWE」のファイナリストに選出されました!

    26 5月, 2023

  • python-logo-master-v3-TM

    pyhotn / 業務効率化

    「SwinIR」で高画質化した画像を pythonを使用して一括で元のサイズに戻す方法

    2 2月, 2023

カテゴリー

  • AI・ディープラーニング
  • AR
  • BtoB
  • CMS
  • Git
  • Google AdWords
  • gulp
  • Javascript
  • Laravel
  • Photoshop
  • Pug
  • pyhotn
  • Sass
  • SEO
  • SNS
  • Twitter広告
  • VR
  • Web3.0
  • WEBサイト
  • WEBマーケティング
  • YouTube
  • コーディング
  • システム開発
  • スマートフォンサイト
  • セキュリティ
  • セミナー
  • その他
  • ツール
  • デザイン
  • ベトナムレポート
  • 仕事術
  • 未分類
  • 業務効率化
  • 空間コンピューティング
  • 色

アーカイブ

  • 2024年11月
  • 2023年6月
  • 2023年5月
  • 2023年2月
  • 2023年1月
  • 2022年12月
  • 2022年11月
  • 2022年10月
  • 2022年9月
  • 2022年2月
  • 2021年12月
  • 2021年9月
  • 2021年7月
  • 2021年6月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年6月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年4月
  • 2018年3月
  • 2018年2月
  • 2018年1月
  • 2017年12月
  • 2017年11月
  • 2017年10月
  • 2017年9月
  • 2017年8月
  • 2017年7月
  • 2017年6月
  • 2017年4月
  • 2017年3月
  • 2017年2月
  • 2017年1月
  • 2016年12月
  • 2016年11月
  • 2016年10月
  • 2016年9月
  • 2016年8月
  • 2016年7月
  • 2016年6月
  • 2016年5月
  • 2016年4月
  • 2016年3月
  • 2016年2月
  • 2016年1月
  • 2015年12月
  • 2015年11月
  • 2015年10月
  • 2015年9月
  • 2015年7月
  • 2015年3月
  • 2015年2月
  • 2015年1月
  • 2014年12月
  • 2014年11月
  • 2014年10月
  • 2014年9月
  • 2014年8月
  • 2014年7月
  • 2014年6月
  • 2013年10月
  • 2013年9月

Facebook

お問い合わせ

お問い合わせ

人気の記事

  • 【書籍要約】数学的な仕事術大全
  • 世界初!「空間コンピューティング」を専用端末不要、スマホのWebブラウザのみで実現する『Web XR Site』を公開しました
  • Appleから新世代MRグラス「Vision Pro」の登場 – デジタルと現実世界が融合する新時代へ
  • ARアプリ『MUGHEN』が世界最大のAR/VRアワード「AWE」のファイナリストに選出されました!
  • 「SwinIR」で高画質化した画像を pythonを使用して一括で元のサイズに戻す方法

カテゴリー

  • AI・ディープラーニング
  • AR
  • BtoB
  • CMS
  • Git
  • Google AdWords
  • gulp
  • Javascript
  • Laravel
  • Photoshop
  • Pug
  • pyhotn
  • Sass
  • SEO
  • SNS
  • Twitter広告
  • VR
  • Web3.0
  • WEBサイト
  • WEBマーケティング
  • YouTube
  • コーディング
  • システム開発
  • スマートフォンサイト
  • セキュリティ
  • セミナー
  • その他
  • ツール
  • デザイン
  • ベトナムレポート
  • 仕事術
  • 未分類
  • 業務効率化
  • 空間コンピューティング
  • 色

検索

ALAKI株式会社 © 2025. All Rights Reserved.