(superneetから)
[Webデザイン] 文字組みについて本気出して考えてみた :: Stocker.jp / diary
ひらがな、カタカナは原則として詰める
漢字はそのままベタ組み(文字間調整なし)でも良いと思うのですが、ひらがな、カタカナは原則として詰めましょう。
文字詰めがよく分からない、あるいはそんなことにまで時間をかけられないほど忙しい場合は、Photoshopで文字レイヤーを選択し「選択した文字にツメを設定」の値を「20%」から「40%」にしただけでもだいぶまともにはなります。
さらに丁寧に詰めるには、「カット」の「ッ」の前後や「ト」の前など、特に空いている部分を手動で丁寧に詰めていきます。
カーソルを「カ」と「ッ」の間にあわせ、ALT(option)+⇐ キーを連続で数回押して個別に詰めていきましょう。
句読点などの記号も詰める
前後に間隔が空いてしまう記号(、。・「」など)は適度に詰めましょう。
括弧は一番細いフォントを選ぶ
この話をすると、大抵「えっ!?」と言われますが、文字組みのきちんとした雑誌をよく見てください。
大きな見出し文字は括弧が細くなっているはずです。
そして、括弧を細くしたほうがより上品に見えます。
この例では括弧のみ最も細いフォントを選び、始まりの括弧のベースラインを少しだけ上に上げ、終わりの括弧のベースラインを少しだけ下げています。
もし、括弧を細いフォントにした場合にぼやける場合やそれほど細く見えない場合、Photoshopの鉛筆ツールを使って1pxの線にしてしまうのも手です。
単位は小さな文字サイズにする
例えば「100円」という文字列の場合、ベタに組むと「円」より「100」の方が小さく、バランスが悪くなってしまう場合があります。
その場合、まず「100」の文字サイズとベースラインを他の文字に合わせ、さらに「円」の文字サイズを約2分の1から3分の2のサイズにすることで見やすくなります。
あと、例えば「5つの秘密」という文字列の「5」を大きくするなど、強調したい数字の部分だけ大きくするという手もあります。
この辺りは、スーパーなどのチラシが参考になります。
助詞は一回り小さいフォントサイズにする
「◯◯の」や「◯◯は」などの助詞や、それほど重要でない文字は一回り小さいフォントサイズにした方が、大切な部分がより強調されます。
小さくした文字は、左揃えであれば下寄せに、中央揃えであれば真ん中揃えにする場合が多いようです。
さらに文字組みにこだわるのであれば、「カット」の「ッ」などの小さな文字をほんの少しだけ小さくします。
心はホワイトです。
鳥取いってみたい…
via www.saninji.jp
ユーザースタイルシート(メモ)
*1 準備
chromeフォルダ userContent.css を設置
*2 書き方
/* http://www.w3.org/,
http://www.w3.org/Style/ で始まるサイト,
mozilla.org というドメインのサイトに適用 */
@-moz-document url(http://www.w3.org/),
url-prefix(http://www.w3.org/Style/),
domain(mozilla.org) {
body { background-color: #ddf !important; }
}
*参考URL http://firefox.geckodev.org/index.php?usercontent.css





