calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

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

Fonts_of_knowledge

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

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

もくじ

フォントに関する知識
1.字間
2.行間
3.字詰め
4.文字組
5.ジャンプ率
6.余白/図版率
7.メリハリをつける
8.書体
9.読みやすいフォントサイズ
10.見やすい文章
11.Webフォント

スライド
12.フォントに関するスライド

フォントに関する知識

1.字間

character_spacing_font

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

2.行間

between_lines_font

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

3.字詰め

filled_font

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

4.文字組

characterset_font

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

5.ジャンプ率

jumprate_font

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

6.余白/図版率

margin_font

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

7.メリハリをつける

put_accent_font

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

8.書体

font_select_font

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

9.読みやすいフォントサイズ

fontsize_reading_font

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

10.見やすい文章

easyto_readtext_font

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

11.Webフォント

webfonts_font

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

スライド

12.フォントに関するスライド

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

スポンサード リンク

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

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

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

Comments

  1. […] 7. デザイン:プロっぽくなった!フォントや「文字」に関するまとめ […]

Leave a Comment

コメントする