こんにちは、クリエイティブフレークです。
![](//4.bp.blogspot.com/-KzYFiI2yCUk/Uy-mwBjxxII/AAAAAAAAABE/mNbaMfPL_MA/s1600/sc2.jpg)
▲MSゴシックで「チューリップ」と入力
日本語フォントの特徴として、小さい「っ」や「ょ」などの前後は文字の間隔が広いことが多いです。
また、「しょっぱい」など小さな文字が続く場合や、「フ」や「ン」など文字の左側に広くスペースがある場合も文字の間隔が広く見えます。
そこで文字間隔を変える、「カーニング」、「トラッキング」機能を使って、文字やデザインの印象を変えてみましょう。
![](//3.bp.blogspot.com/-5O5exkcc3dk/Uy-mSx3xMMI/AAAAAAAAAA8/8YBkuTLOHEo/s1600/sc1.png)
▲Photoshopで文字を入力
![](//3.bp.blogspot.com/-K3wkHNh8ao8/Uy-n_WfLMPI/AAAAAAAAABM/wGWlkEA0TP0/s1600/sc3.gif)
▲文字を全選択して
![](//3.bp.blogspot.com/-pEFp50EVCe8/Uy-oTXPmB8I/AAAAAAAAABU/1CTbCyQXVlg/s1600/sc4.gif)
▲文字ツールの「VA↔」の数値をマイナスに(ここではマイナス200にしてあります)
これを「トラッキング」といい、選択した範囲全体の文字間隔を狭めたり、広くしたりできます。
では、1文字ずつ細かく文字間隔を変えたい場合は、
![](//3.bp.blogspot.com/-w89cgEwBZ-M/Uy-pQkqcnJI/AAAAAAAAABc/uTLQ24S5JhA/s1600/sc5.gif)
▲狭く・広くしたい場所にカーソルを合わせ、文字ツールの「VA←」の数値を変更します。
これを「カーニング」といい、1字ずつ文字間隔を変更したいときに使用します。
便利なキーボードショートカットは
![](//3.bp.blogspot.com/-GSRVQUmZOqM/Uy-p739uqqI/AAAAAAAAABk/-hlSKyhjmsw/s1600/Untitled-4.gif)
Macの場合、alt / option + 矢印キー(右・左)
Windowsの場合、alt + 矢印キー(右・左)
文字間隔が違えば、見え方はこんなにも変わります。
![](//3.bp.blogspot.com/-LSdlUo4BkEk/Uy-q9_J9HCI/AAAAAAAAAB8/XX01zjc7D9g/s1600/souda1.gif)
![](//4.bp.blogspot.com/-UmymqpeTrIg/Uy-q90qwcKI/AAAAAAAAACA/CZ2r4hVHH1k/s1600/souda2.gif)
▲同じフォント、同じ色でも、上はシャープな印象があるのに対し、下は優しさのある印象に感じます。
でも、どんな幅にすればいいのかキレイなのか分からない!という方に
カーニングがゲーム感覚で学べるサイト 「KERNTYPE カーンタイプ」 がオススメです。
初心者の人でも、上級者の人も自分の文字間隔センスが試せるサイトです。
![](http://4.bp.blogspot.com/-KzYFiI2yCUk/Uy-mwBjxxII/AAAAAAAAABE/mNbaMfPL_MA/s1600/sc2.jpg)
▲MSゴシックで「チューリップ」と入力
日本語フォントの特徴として、小さい「っ」や「ょ」などの前後は文字の間隔が広いことが多いです。
また、「しょっぱい」など小さな文字が続く場合や、「フ」や「ン」など文字の左側に広くスペースがある場合も文字の間隔が広く見えます。
そこで文字間隔を変える、「カーニング」、「トラッキング」機能を使って、文字やデザインの印象を変えてみましょう。
![](http://3.bp.blogspot.com/-5O5exkcc3dk/Uy-mSx3xMMI/AAAAAAAAAA8/8YBkuTLOHEo/s1600/sc1.png)
▲Photoshopで文字を入力
![](http://3.bp.blogspot.com/-K3wkHNh8ao8/Uy-n_WfLMPI/AAAAAAAAABM/wGWlkEA0TP0/s1600/sc3.gif)
▲文字を全選択して
![](http://3.bp.blogspot.com/-pEFp50EVCe8/Uy-oTXPmB8I/AAAAAAAAABU/1CTbCyQXVlg/s1600/sc4.gif)
▲文字ツールの「VA↔」の数値をマイナスに(ここではマイナス200にしてあります)
これを「トラッキング」といい、選択した範囲全体の文字間隔を狭めたり、広くしたりできます。
では、1文字ずつ細かく文字間隔を変えたい場合は、
![](http://3.bp.blogspot.com/-w89cgEwBZ-M/Uy-pQkqcnJI/AAAAAAAAABc/uTLQ24S5JhA/s1600/sc5.gif)
▲狭く・広くしたい場所にカーソルを合わせ、文字ツールの「VA←」の数値を変更します。
これを「カーニング」といい、1字ずつ文字間隔を変更したいときに使用します。
便利なキーボードショートカットは
![](http://3.bp.blogspot.com/-GSRVQUmZOqM/Uy-p739uqqI/AAAAAAAAABk/-hlSKyhjmsw/s1600/Untitled-4.gif)
Macの場合、alt / option + 矢印キー(右・左)
Windowsの場合、alt + 矢印キー(右・左)
文字間隔が違えば、見え方はこんなにも変わります。
![](http://3.bp.blogspot.com/-LSdlUo4BkEk/Uy-q9_J9HCI/AAAAAAAAAB8/XX01zjc7D9g/s1600/souda1.gif)
![](http://4.bp.blogspot.com/-UmymqpeTrIg/Uy-q90qwcKI/AAAAAAAAACA/CZ2r4hVHH1k/s1600/souda2.gif)
▲同じフォント、同じ色でも、上はシャープな印象があるのに対し、下は優しさのある印象に感じます。
でも、どんな幅にすればいいのかキレイなのか分からない!という方に
カーニングがゲーム感覚で学べるサイト 「KERNTYPE カーンタイプ」 がオススメです。
初心者の人でも、上級者の人も自分の文字間隔センスが試せるサイトです。
Written by Creative Flake
コメント
コメントを投稿