TYPOGRAPHY RULES

タイポグラフィ7つのルール その❸ 息苦しいデザインの回避法は「あける」こと

タイポグラフィ7つのルール その❸ あける 息苦しいデザインの回避法は「あける」こと

タイポグラフィ7つのルール ❸ あける
▼第2回(通算第10回)

前回は、文字間についてお話ししました。和文を組むことの難しさは、ここから既に始まっています。かなり「長い旅」になりますが、ついてきてくださいね。
今回は、デザインの「心地よさ」と「息苦しさ」をわける、極めて重要な要素、「行間」「行長」「ブロック(要素)同士の間隔」についてお話しを進めていきます。

第2回:通算第10回
もくじ
3.2 「行間」と[行送り]と「行長」のお話し
  3.2.1 ●状況によって「適切な行間」は変化する
  3.2.2 ●「行長」は、物理的な長さではなく字詰めの数
  3.2.3 ●「行間」と[行送り]は違う
3.3 ブロック(要素)同士の間隔

3.2 「行間」と[行送り]と「行長」のお話し

印刷物やウェブページを見ていると、行間が文字間とほとんど変わらないもの、行長(行の長さ)がやたらと長いものが目立ちます。
これは、いずれも見る人の目を疲れさせるばかりか、読む行為そのものをやめさせる結果になりかねません。行間は「適切」に空け、行長は「適切」な長さにすることが大切です。

3.2.1 ●状況によって「適切な行間」は変化する

一般的に、行間は文字サイズの 50%(半角分)から75%(3/4角分)くらいが目安とされています(欧文は20%程度)。狭めの行間は、締まった感じを与え、広めの行間はゆったりとした感じを与えます。また、文章の長さによっても変動します。小説のような長い文章は100%(全角分)くらい、パンフレット用の文章のように比較的短いものは50%くらいが適切といえます。

また、使用するフォントの種類によっても変わってきます。ゴシック系など太い文字の場合は広めに、細い明朝系のときは狭めにします。

そして、どんな条件下でも、50%を切って40%以下の行間は、完全に「NG」です。

ウェブページでは、広めの100%から120%くらいが良いようです。スマホサイトは120%から130%くらいがベストでしょう。100%を下回ると、明らかに読みにくくなります。

3.2.2 ●「行長」は、物理的な長さではなく字詰めの数

行長は、長さというより字詰めの数。長さは文字サイズによって変動があるので、論じることはできません。字詰めは長くて40字詰が見やすさの限界でしょう。それ以上長くなると、とたんに読みにくくなります。

たとえば、A4縦置きの用紙に上下左右それぞれ、10mmずつ小さい版面(はんづら:実際に印刷される部分のこと)に文章を配置する場合、左右いっぱいの190mmに1段で入れるのは、公的機関の文書でもない限り「NG」です。
ちなみに190mmの中に、文書に使う一般的な文字サイズである14Q(3.5mm角)で組むと、54文字にもなります。

このブログは49字詰(PCでの表示)ですので、読みやすいとはいえません。紙媒体でしたら迷わず左右2段組にするところですが、ウェブの場合は画面の縦のスペースの制約があるので思い切ってはできません。かえって読みにくくなります。
読者の「ウェブはこんなものだ」という先入観に、ほとんどのウェブページは助けられています。

でも、CSS3になって、「columnsプロパティ」を使えば、簡単に段組みがつくれるようになりました。ウェブの進歩は計り知れません。縦のスペースを意識した設計をきちんとやれば、読みやすい行長で組むことができます。ただし、ひとつの画面に留まり、凝視する時間が長くなる分、目は疲れやすくなることが容易に予想されます。ウェブと紙媒体では、明らかに見えかたが違うのです。

(figure3-5)
「行間」と「行長」はデザインの良し悪しに重大な影響を与える

3.2.3 ●「行間」と[行送り]は違う

「行間」と[行送り]について少し触れておきます。「行間」は文字通り、「行と行の間」の空間のことです。Illustrator では「行間」の指示はできません。できるのは[行送りの設定]のみです。しかも、[行送り]は、[フォントサイズを設定]と単位が連動しているので、「%」指示はできません。

では、[行送り]とは何でしょうか。

[行送り]は、「行と行の間(行間)+文字サイズ」ということになります。たとえば、4mm角の文章を50%(半角分)の行間に設定する場合、Illustrator に入力する数値の計算式は次の通りです。

4(mm)÷2(50%)=2(行間の計算)
4(mm:文字サイズ)+2(mm:行間)=6(mm:行送り)

となります。

なお、Illustrator では、[行送り]は2種類設定できますが、普通の文章組みではデフォルトの[日本語基準の行送り]で問題はありません。

もうひとつの[欧文基準の行送り]は、行の中に、異なる文字サイズがたくさん混在する複雑な組版(InDesign で組む高度な組版:どちらかというとエディトリアルの領域)に効果を発揮します。しかし、複雑な組版をあまり必要としないグラフィックでは、ほとんど使わないといって良いでしょう。実際、普通の文章で[欧文基準の行送り]に切り換えても何の変化も起きません。

また、縦組みでは、文字の中心から中心までが[行送り]となり、この2種類の区別はなくなります。(いずれもグレー表示になって選択できなくなります)

蛇足ですが、ウェブの「line-height」は「行送り」ではなく「行の高さ」設定です。ですので、たとえば、16pxの50%(半角分)空き設定は「line-height:1.5」(文字の高さ:1+行の空き:0.5)になります。

(figure3-6-1)
「行間」と「行送り」は違う

(figure3-6-1)のキャプション

[日本語基準の行送り]は、ボディ(仮想ボディ)の一番上の位置から、次の行の同じ位置まで。[欧文基準の行送り]は、欧文ベースラインの位置から、次の行の同じ位置までをいう。

すべてが同じサイズの普通の文章では、どこを基準にしようが数値はどちらも変わらないし結果も変わらない。「じゃ、なぜふたつあるのか」という疑問も湧くが、文章中に違うサイズが混じると、とたんにふたつの結果が変わる。
[行送り]の奥が深い不思議なところである。

(figure3-6-2)
[日本語基準の行送り]と[欧文基準の行送り]の見えかたの違い

(figure3-6-2)のキャプション

上段の[日本語基準の行送り]は、「新聞書体」を大きくしたことで、2行目は大きい文字の上辺が基準になる。それにより、最初に設定した行送りが変わって見えてしまう。(行送りの数値が増えたわけではない)

下段の[欧文基準の行送り]では、「新聞書体」を大きくしても、「欧文ベースライン」が基準になっているので、行間の見えかたは、変化しない。

どちらを選択するかは、その場の状況や、シチュエーションによって判断すればいいと思う。

「行間」や「行長」は、可読性というデザイン上の大きな命題を背負っています。特に、用途によって「行間」の「最適度」は変化するので、そのつど「適切」な間隔(感覚)を求められる、大変重要なデザイン要素です。

3.3 ブロック(要素)同士の間隔

見出しや本文、写真のキャプション、パスの中の文章類(コラムなど)のそれぞれのブロック(要素)同士の間隔は、「適切」にあけることが重要です。文章で表現するのは少し無理があるので、失敗例とその修正後を大きめの図(figure3-7)で展開しました。「息苦しい」デザインをを解消するヒントになるはずです。

(figure3-7)
ブロック(要素)同士の間隔は適切に空けるデザイン感覚が求められる

要素同士の空間を「適切」に空けることはレイアウト上、極めて大事なデザイン処理になります。この空間は「遊び」とも呼べるもの。「遊び」がなく窮屈なデザインは、要素同士を殺しあってしまい、印象を、ただうるさいだけのものにしてしまいます。

右図は、左図の例を修正したものです。全体のスペースが同じ(変えられない)場合は、要素同士のスペースを空ける関係上、一つひとつの要素は小さくなります。しかし、比べてみれば一目瞭然。右の修正を加えたほうが、はるかに見やすいと思いませんか?
❼の「改行を入れる」は、自分で書いたコピーでない限り、執筆者の許可が要ります。念のため。

後述する “タイポグラフィ7つのルール その❺ 「ひく」ことは、すべてがマイナスではない” でも述べることになりますが、要素は、大きいから目立つとは限らず、小さいから目立たないとは限らないのです。

[適切」な空間は、視覚的に安らぎと安心感を与える重要な要素となります。

なお、この図は複数箇所で登場します。

● ● ●

次回(第3回:通算第11回)は、「トンボ」と「空間(ホワイトスペース)」のお話しです。予告下ページャ[3]のをクリックを。

第3回:通算第11回
予告
3.4 トンボ([トリムマーク])の役割と3mmの限界値
3.5 ただの余白ではない「ホワイトスペース」
1

2

3

タイポグラフィ7つのルール その❷ 和文の美しさのカギは「つめる」ことタイポグラフィ7つのルール その❷ 和文の美しさのカギは「つめる」こと前のページ

タイポグラフィ7つのルール その❹ 強調・複合などを盛り込む「たす」要素次のページタイポグラフィ7つのルール その❹ たす 強調・複合などを盛り込む「たす」要素

関連記事

  1. タイポグラフィ7つのルール その❷ 和文の美しさのカギは「つめる」こと

    TYPOGRAPHY RULES

    タイポグラフィ7つのルール その❷ 和文の美しさのカギは「つめる」こと

    ▼第1回(通算第5回)この章では、主に和文の詰め処理につい…

  2. タイポグラフィ7つのルール その❻-4 和文・英文が混在することで起きるさまざまな厄介なこと
  3. タイポグラフィ7つのルール その❻-5 和文組版美しさの原点・縦組みで起きるさまざまなこと
  4. タイポグラフィ7つのルール その❼ 「ひらく」ことは読者の目と心への思いやり

    TYPOGRAPHY RULES

    タイポグラフィ7つのルール その❼ 「ひらく」ことは読者の目と心への思いやり

    ▼1回完結(通算第24回)前回までは、タイポグラフィに関す…

  5. タイポグラフィ7つのルール その❺ 「ひく」ことは、すべてがマイナスではない

    TYPOGRAPHY RULES

    タイポグラフィ7つのルール その❺ 「ひく」ことは、すべてがマイナスではない

    ▼第1回(通算第16回)前章 “タイポグラフィ7つのルール…

  6. タイポグラフィ7つのルール その❻ 細心の注意を払うべき大切な「くむ」こと

    TYPOGRAPHY RULES

    タイポグラフィ7つのルール その❻-1 細心の注意を払うべき大切な「くむ」こと

    ▼第1回(通算第18回)前章 “タイポグラフィ7つのルール…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


NEWS

2021.10.12新フォントをリリースしました

新フォント「清明(せいめい)かな」をリリース。当社直営ストア、STORES, BOOTH で販売を開始しました。
design pocket / imagenavi / Font Garage / Font Factory も追随して販売予定です。 試用版の「清明かな Free(Book)」もダウンロードできます。お試しください。



2021.6.7仮名フォント・欧文フォント料金統一のお知らせ

このたび、仮名フォント・欧文フォントの料金統一のため、靜呉竹・Amabileの料金を6月7日より値下げいたします。 詳細は、オフィシャルサイトをご覧ください。
https://www.renfont.com/



2021.4.20業務提携のお知らせ

中国・上海锐线创意设计有限公司(REEJI)との業務提携により、和音Pro中国語版(GREETYPE 和音体:簡体・繁体)の、中国地域(中国大陸・香港・マカオ・台湾)での販売を開始しました。なお、日本国内での販売はいたしません。
GREETYPE 和音体紹介Webサイト:http://geetype.cn/he_yin_ti/
●和音pro中国語版ご購入の連絡方法 Webサイト:http://geetype.cn 連絡メール:geetype@reeji.com

兹因与锐线上海创意设计有限公司(REEJI)业务合作,和音pro中文版(GEETYPE和音字体:中文简、繁体)已经在中国地区(中国大陆、香港、澳门、台湾)开始销售了。另外注意,GEETYPE和音字体:中文简、繁体不会在日本国范围内销售。
●和音pro中文版销售联系方式 网址:http://geetype.cn 联系邮箱:geetype@reeji.com



2021.2.22MyFonts にファウンドリー "REN FONT" を開設

REN FONT が MyFonts にファウンドリー "REN FONT" を開きました。新しい欧文フォント "Amabile" と、ロングセラーの日本語フォント "和音Pro" をリリース。Amabile は Regular をフリーフォントにしました。
2月25日まで 30%OFF の記念セールをやっています。どうぞお立ち寄りください。



2021.1.25新フォント、好評発売中!

新フォント「靜呉竹(しずかゴシック)」が好評発売中です。当社直営ストア、STORES, BOOTH で販売中です。
design pocket / imagenavi / Font Garage / Font Factory も販売を開始しました。
試用版の「靜呉竹トライアル-R」もダウンロードできます。お試しください。



2021.1.1新年のごあいさつ

あけましておめでとうございます。ことしも、REN FONT 直営ストア STORES 店BOOTH 店、委託サイト design pocketimagenaviFont GarageFont Factory をよろしくお願いいたします。



2020.12.21REN FONT 年末年始お休みのお知らせ

12月26日(土)から新年1月5日(火)まで、お休みをいただきます。
フォントは休業期間中でもSTORESまたはBOOTHで通常通りお買い求めいただけます。また、design pocket / imagenavi / Font Garage / Font Factory も通常通り販売いたします。ご利用ください。



2020.11.10REN FONT が新フォントをリリースしました

新フォント「靜呉竹(しずかゴシック)」をリリース。当社直営ストア、STORES, BOOTH で販売を開始しました。
design pocket / imagenavi / Font Garage / Font Factory も追随して販売予定です。 試用版の「靜呉竹トライアル-R」もダウンロードできます。お試しください。



2020.8.17REN FONT オフィシャルサイト・サーバエラーおよび復旧のお知らせ

8月16日・17日の両日、SSL 関連のサーバエラーのため、オフィシャルサイトにアクセスできない状態になっておりましたが、先ほど(8月17日19:00)復旧いたしました。
お客さまには大変ご不便をお掛けしました。今後ともよろしくお願いいたします。



2020.5.15REN FONT ショップの支払い方法がより充実しています

STORES 店ではクレジットカード決済がより充実、従来の VISA, MASTER, AMERICAN EXPRESS のほか、Diners Club, JCB があらたに加わっています。また、BOOTH 店もバリエーションでは STORES 店をしのぎます。 お好みのショップでお買いものをお楽しみください。



2020.5.4REN FONT 新型コロナウイルス感染症への取り組みと商品の販売について

緊急事態宣言が5月31日まで延長されましたが、当社の業務はすべてテレワークで運営されており、業務への支障はありません。
また、商品の販売についても、ダウンロード商品が100%であり、こちらも支障はありません。安心してお買い求めいただけます。
いまだに出口の見えないこの忌まわしいコロナ禍ですが、皆さまのご無事と一日も早い収束、そして終息を心より祈っております。



2020.5.1REN FONT 新型コロナウイルス感染症への取り組みと商品の販売について

緊急事態宣言の延長が確実ですが、当社の業務はすべてテレワークで運営されており、業務への支障はありません。
また、商品の販売についても、ダウンロード商品が100%であり、こちらも支障はありません。安心してお買い上げいただけます。
いまだに出口の見えないこの忌まわしいコロナ禍ですが、皆さまのご無事と一日も早い収束、そして終息を心より祈っております。



2020.2.1『ユリイカ』で私のオリジナルフォント「和音」を使用していただきました

月刊誌『ユリイカ』2020年2月号 (青土社)「書体の世界」特集の表紙タイトル「書体の世界」に、当社フォント「和音」を使用していただきました。ほかにも、目次・扉の「書体の世界」、2か所の中扉「書体談話」「文字のないタイポグラフィに向かって」にも使用されています。
装丁デザインは、著名な書容設計家、エディトリアル・グラフィックデザイナーの羽良多平吉さんによるものです。



2020.1.1新年のごあいさつ

あけましておめでとうございます。ことしも、REN FONT 直営ストア STORES.jp 店BOOTH 店、委託サイト design pocketimagenaviFont GarageFont Factory をよろしくお願いいたします。



2019.12.27年末年始休業のお知らせ

REN FONTは、12月28日(土)から2020年1月5日(日)までの9日間、年末年始のお休みをいただきます。なお、この期間でも、直営ストア STORES.jp 店BOOTH 店、委託サイト design pocketimagenaviFont GarageFont Factory のすべてのダウンロードサイトは通常通りお買いものができます。



2019.10.1消費税増税にともなう料金の改定について

いつも REN FONT STORES.jp店・REN FONT BOOTH店をご利用いただきありがとうございます。2019年10月1日より施行の消費税増税(8%→10%)にともない、同日より料金の改定をさせていただきました。
最大約700円、最小約30円の実質値上げとなります。まことに恐縮ですが、ご理解をいただきますようお願い申し上げます。



2019.9.14【重要】メンテナンスのお知らせ

いつも REN FONT STORES.jp店・REN FONT BOOTH店をご利用いただきありがとうございます。消費税の増税に対応するためのメンテナンスを以下の日程で実施いたします。

増税対応のメンテナンス(サービス停止)予定期間
2019年9月30日(月)PM11:30 ~ 10月1日(火)AM4:00

メンテナンス中は両ストアの全てのサービスをご利用いただくことができません。お客さまにはご迷惑をお掛けしますが、ご理解をいただきますようお願い申し上げます。



2019.6.8「令和セール」は終了しましたが…

「令和セール」は終了しましたが、好評なので引き続きこのまま割引価格を続けます。

2019.5.1セールを延長します。タイトルは「ありがとう平成 ようこそ令和」です

新元号が令和に突入しました! REN FONT が、日頃の感謝の気持ちをこめてお贈りする「ありがとう平成 ようこそ令和セール」(タイトルを変更しています)は、好評につき引き続き延長します。20%〜最大50%offのお買い得。期間はとくに設定しませんが、突然終わるかも知れません。この機会にどうぞ。

2019.4.1「平成最後の もうすぐ新元号令和セール」を延長します

新元号が令和に決まりました! REN FONT が、日頃の感謝の気持ちをこめてお贈りする「平成最後の もうすぐ新元号令和セール」(タイトルを変更しています)は、好評につき延長します。20%〜最大50%offのお買い得。期間はとくに設定しませんが、突然終わるかも知れません。この機会にどうぞ。

2019.3.10「平成最後のもうすぐ??新元号セール」を延長します

REN FONT が、日頃の感謝の気持ちをこめて「平成最後のもうすぐ??新元号セール」(タイトルを変更しました)は、好評につき引き続き延長します。20%〜最大50%offのお買い得。期間はとくに設定しませんが、突然終わるかも知れません。この機会にどうぞ。

2019.1.27「平成最後のニューイヤーセール」を延長します

REN FONT が、日頃の感謝の気持ちをこめて「平成最後のニューイヤーセール」は、好評につき延長します。20%〜最大50%offのお買い得。期間はとくに設定しませんが、突然終わるかも知れません。この機会にどうぞ。

2019.1.1「平成最後のニューイヤーセール」を開催しています

REN FONT が、日頃の感謝の気持ちをこめて「平成最後のニューイヤーセール」を、昨年12月25日〜平成31年1月31日まで全販売サイトで一斉に開催しています。20%〜最大50%offの「大安売り」です。この機会をお見逃しなく!

2018.12.25「カウントダウン&平成最後のニューイヤーセール」を開催します

REN FONT が、日頃の感謝の気持ちをこめ、「カウントダウン&平成最後のニューイヤーセール」を、12月25日より各販売サイトで一斉に開催します。正直言って「大安売り」です。この機会を、お見逃しなく!

2018.7.29サイトを引っ越ししました

ドメインも新規になっています
moji-blog.typoren.com は moji-blog.renfont.com に引っ越ししました。moji-blog.typoren.com にお越しの方は自動的に moji-blog.renfont.com の同じ記事にご案内しております。

おすすめ記事

  1. 私のデザイン変遷史 第18回 総合書体「和音」への挑戦
  2. 私のデザイン変遷史 第17回 さぁ、フォントを作ろう!
  3. 私のデザイン変遷史 第16回 遅すぎたMacとの出会い
  4. 第15回 一転、地獄に ーバブル崩壊への対策に忙殺ー
  5. 第14回 砂上の楼閣 ー面白いように稼げた時代ー

最近の記事

  1. 私のデザイン変遷史 第18回 総合書体「和音」への挑戦
  2. 私のデザイン変遷史 第17回 さぁ、フォントを作ろう!
  3. 私のデザイン変遷史 第16回 遅すぎたMacとの出会い
  4. 私のデザイン変遷史 第15回 一転、地獄に ーバブル崩壊への…
  5. 私のデザイン変遷史 第14回 砂上の楼閣 ー面白いように稼げ…
  1. MOJI ESSAY

    ようこそ「令和」
  2. 私のデザイン変遷史 第18回 総合書体「和音」への挑戦

    MOJI ESSAY

    私のデザイン変遷史 第18回 総合書体「和音」への挑戦
  3. 私のデザイン変遷史 第17回 さぁ、フォントを作ろう!

    MOJI ESSAY

    私のデザイン変遷史 第17回 さぁ、フォントを作ろう!
  4. 書体の表情 4:おおらかさの中に風格が漂う=筑紫B見出ミン-E

    TYPOGRAPHY SERIES 2

    書体の表情 4 おおらかさの中に風格が漂う=筑紫B見出ミン-E
  5. 私のデザイン変遷史 第16回 遅すぎたMacとの出会い

    MOJI ESSAY

    私のデザイン変遷史 第16回 遅すぎたMacとの出会い
PAGE TOP
%d人のブロガーが「いいね」をつけました。