calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

続編/さらにプロっぽくなった!フォントに関するまとめ

basic_knowledge_of_font

前回フォントや「文字」に関するまとめを書きましたが、書き足りないことが結構あったので、続編を作りました。今回は自分の勉強もかねて、フォントに関する基礎知識、アキ、段組み、詰め、図版などデザインに携わるなら知っておきたい知識をまとめました。

PR
IT/WEB業界への転職なら
Sponsored Link

もくじ

文字の基礎知識

1.文字用語

頻繁に出てくる、ちょっと知っておきたい文字やフォントに関する言葉です。

  • 合字(リガチャー)/複数の文字を組み合わせた合字(ごうじ)。
  • UDフォント/全ての人々が利用できるデザインをコンセプトとしたフォント。
  • Q数(キューすう)/文字サイズ。1Qは0.25mm。単位変換はこちら。
  • 和欧混植(わおうこんしょく)/和文と欧文書体が混ざった版を組むこと。
  • トラッキング/字送りのこと。文字と文字の間隔を一律調整すること。
  • カーニング/文字と文字の間を調整していくこと。
  • 仮想ボディ/日本語フォントをデザインするとき、基準となる正方形。
  • 字面(じづら)/和文における実際の文字の大きさ。1文字ずつ異なります。
  • フォントファミリー/一つの書体でバリエーションを持つもの
  • ウエイト/欧文書体(アルファベット)の太さ。
  • WOFF/Webフォント専用の軽量化を図ったフォント形式。
  • 等幅フォント/すべての文字が同じ幅で作られた書体。
  • xハイト/アルファベット小文字の「x」の天地幅。
  • アセンダライン/小文字(bdfhklt)の7文字の最高部を示す。xハイトより高い部分。
  • エクスパンデッド/文字幅バリエーションの中で、横に長いスタイル。
  • プロポーショナル/文字によって違う横幅を持つ書体。文字間隔を詰めて表示できる。

組版

2.組版(くみはん)

typesetting_font

組版は文字を読みやすいように並べる、文字や図版を配慮して作られたルール。以下、文字サイズ、配置、向きなど参考になるサイトです。

3.禁則処理

hyphenation_font

「」、。?!などの約物(やくもの)を行頭に並ばないように処理すること。Illustratorで設定可。

4.追い込み/追い出し/ぶらさがり

hanging_font

追い込みは行頭に句読点が並ばないように前行に入れ、追い出しは行頭に句読点が並ばないように、次行の先頭に送ります。ぶら下がりは句読点を本文フレームの外に出すこと。禁則処理について詳しい解説はwikiの禁則処理で。

5.段間

interstage_font

段組みと段組みの間。間があると読みやすくなります。段間の目安は本文サイズの2文字程度。以下のページでは、段間や版面率について解説してあります。

行間(レディング)

6.アキ

aki_font

行と行の空間。行間(1行目と2行目の文字のアキ)は半角~全角アキが一般的。

7.行長

line_length_font

1行の長さを行長といいます。テンポよく読ませたいときは、行長を短くして、多段組みに設定。行の文字数は20~30文字が読みやすいです。

8.段組み

column_font

複数の列に分けて文字や写真を配置すること。少ないほどじっくり読ませ、多いほど明るくにぎやかな印象を与えます。A4なら最大4段くらいでしょうか。

9.黄金比

golden_ratio_font

見出しのサイズは本文の黄金比の(×1.61)倍で設定すると綺麗に見えます。Webでは16pxの本文なら、見出しは25pxくらい。

詰め

10.プロポーショナル詰め

pro_packed_font

文字間を自動で詰める機能。欧文フォントは最初から搭載されています。

11.音引き

onbiki_font

例:「ルーム」の「ー」の部分。平仮名やカタカナの音引きは長くなりがちなので、変形させて調整します。

12.拗音(ようおん)

diphthong_font

ちいさな「ゃ」「ゅ」のような文字。書体で大きくなってしまったら、小さく変形させます。

13.合成フォント

composite_font

文字種ごとに、異なるフォントを組み合わせます。Illustratorでも設定できます。

余白

14.近接と遠隔

remote_font

名刺をよく見るとわかると思いますが、似た情報を近づけると綺麗にまとまります。ちなみに間のとり方を間違えることを「間延び」と言います。

15.版面(はんづら)

plate_surface_font

端から余白を取った残り、テキストや図版を配置する範囲。版面が大きいほど情報量、小さいほど高級感をアピールできます。版面がページ上部にあると重厚感、下にあると安定感のあるものに。

図版

17.図版率

rate_font

図や写真の面積比率がどれくらいあるか。小説は図版率が0%、絵本は図版率が高くなります。ターゲットの年齢層が高いほど図版率が低くなりやすいです。写真のジャンプ率も非常に勉強になりました。

18.訴求度

appeal_font

読者やユーザーの欲求に訴える力。風景よりも人間の写真、大人より子供の写真、全身より顔のほうが訴求率が高くなります。

スポンサード リンク

この記事を書いた人
投稿者:commte

株式会社コムテ代表取締役。2015/8:弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。

URL:西田 鉄平
この後によく読まれている記事

Comments

  1. […] 3. 続編/さらにプロっぽくなった!フォントや「文字」に関するまとめ […]

Leave a Comment

コメントする