プロっぽくなった！フォントや「文字」に関するまとめ

• 作成：2013/10/28
• 更新：2014/10/24
• Webデザイン >

先週、合同商談会があったのでバタバタとリーフレット作ったんですが、字詰めなどに慣れてなくて時間をとられました。サイトをリニューアルするときもフォントの大きさ、行間、位置などで悩んだり。今回はWebページを読みやすく、見栄え良くするために「文字」に関する知識をまとめました。

エンジニア速報は Twitter の@commteで配信しています。

もくじ

フォントに関する知識
１．字間
２．行間
３．字詰め
４．文字組
５．ジャンプ率
６．余白／図版率
７．メリハリをつける
８．書体
９．読みやすいフォントサイズ
１０．見やすい文章
１１．Webフォント

スライド
１２．フォントに関するスライド

フォントに関する知識

１．字間

字間とは文字と文字の間に生まれる空間。文章の行間・送り、漢字とひらがなの字間など文章レイアウトについて。もう一つは行間や字間の調整による可読性と視認性の高め方など、文章を読みやすくする上でとても参考になる記事です。

• 文字の読みやすさを生み出す為の知識と方法【後編】 | Basic Design Note
• 文章の作り方｜伝わるデザイン
• 行間と文字間の悩み

２．行間

行と行の間隔である行間について。line-heightで大きさを指定したときのそれぞれの見え方、長文になったときの段落、行間、見出しの余白など。Webだけじゃなくて日本語組版の知識としても役に立ちます。

• パソコンだと長文を読むのが辛いのは、行間が詰まりすぎている: 見て歩く者 by 鷹野凌
• Web制作における文章の可読性について考える - YATのBLOG

３．字詰め

１行に入れる文字数、文字と文字の空間調整をする字詰。Photoshop／Illustratorならalt+矢印キーで出来ますよね。一つはカーニングについて、もう一つはカーニングのオプションにあるメトリクスとオプティカルの解説。

• 素人っぽく見せないテクニック『字詰め』 - フォントブログ
• デザイナーならこだわりたい文字詰め - デザイン雑学
• Photoshopの文字詰め「カーニング・トラッキング」まとめ | クリエイティブメモメモ
• カーニング（文字詰め） - Webデザインテクニック

４．文字組

スライドのほうは仮想ボディ・字面・字面枠、キャップライン・ベースラインなど基礎知識が分かりやすく解説されてあります。日本語フォントの歴史やトレンドも分かり見てて楽しめます。もう一つはイラレで文章を扱う時に注意すべきポイント。

• 「Webデザイナーのためのタイポグラフィと文字組版」 - DTP Transit
• [Webデザイン] 文字組みについて本気出して考えてみた | Stocker.jp / diary
• Illustratorで文章を扱うとき（文字組版） - DTP Transit

５．ジャンプ率

ジャンプ率とは本文を基準にし、最も大きな見出しとの時幅・高さで計算した比率。簡単に言うと「大小差」です。ジャンプ率を低くして高級感を出したり、高くして元気さをアピールしたり。以下参考になる記事です。

• 文字のジャンプ率を工夫する｜デザインのコツ｜テクニック講座
• 新聞・雑誌は3～5倍！『ジャンプ率』を意識して見やすいWebサイトをデザインしよう
• 文字組みの基礎 ｜ SONICMOOV LAB

６．余白／図版率

小さな文字でも周囲に広く余白をとると、上品さをアピールしたり存在を強調できたり。余白ひとつで注意を引き付けることができます。もう一つは図版率(写真と文章の面積比)について。

• すっきり美しく見せる『余白』と『文字』 (フェンリル | デベロッパーズブログ)
• 余白の美
• アイソレーションゾーンとビジュアルアイデンティティ / Maka-Veli .com
• 図版率／誌面に対する文字と図版の割合｜OKIデータ

７．メリハリをつける

上の記事と重複する部分がありますが、背景色やアイコン、色やフォントを変えたりなど見出しにメリハリをつけるときのポイントをまとめた記事。

• テキストのメリハリをつける方法7つ | Arch
• フォントサイズを変える「大・中・小」ボタンを実装する | THE HAM MEDIA BLOG

８．書体

書体って写真と比べて印象薄いですけど、名刺なんかを見ると伝統や新鮮さをアピールしたり、さりげなく会社のメッセージが込められているのが分かります。以下、書体の基礎知識や選び方、フォントの種類など。

• 書体の選び方｜伝わるデザイン
• フォントの基本的な選び方 | Arch
• 最低限知っておきたいフォントの基礎知識 - ラクスルマガジン｜raksul [ラクスル]
• 有名なフォント12種類の紹介とフォントの基礎知識について - YATのBLOG

９．読みやすいフォントサイズ

とりあえず「フォントサイズは16px」と言わずに読んでおきたい記事。もう一つはメイリオとヒラギノ、どちらを優先するかなど。

• IMJ | IMJレポート「タブレット端末でのサイトユーザビリティ調査」 - Press Room
• CSS上級者を悩ませるフォント指定を探究するぜ2011 autumn | DAICHIFIVE blog
• font-sizeのパーセント表記一覧 - Webtech Walker

１０．見やすい文章

結構適当に書いてしまいそうな『括弧』の使い方もチェック。…三点リーダー・——ダッシュ——の使用方法。

• 「」『』（）【】の“使いどころ、文章の見た目を良くする技術 | きんどるどうでしょう
• 文章をデザインする – 段落や箇条書きをより読みやすくするために - YATのBLOG
• これはウェブページです｡

１１．Webフォント

Webフォントは、PCにインストールされていないフォントをWebページで使えるようにする技術。こちら作り方や使い方など。

• ASCII.jp：IEにも対応！10分でできるWebフォント実装法 (1/3)
• WEBフォントサイトまとめ9選！とりあえず一度使ってみませんか？ | 株式会社LIG
• Webフォントの作り方と応用方法｜サイバーエージェント公式クリエイターズブログ
• 自分のブログにWebフォントを適用「TypeWonder」 : ライフハッカー［日本版］

スライド

１２．フォントに関するスライド

フォントに関するスライドをまとめました。

• はじめての欧文書体
• TypeTalks第10回「もっと知りたい！Webフォント」
• 「Webデザイナーのためのタイポグラフィと文字組版」