見栄えの良いカッコの話

旧サイトから記事を転載したため内容齟齬やリンク切れなどの不備が生じていることがあります。
***
今回の小ネタは、写真と関係ないブログ表示スタイルの話です。

当ブログは少し前から、閲覧するPCデバイスが搭載しているフォント(書体)の違いに関係なく、所定のサーバーに置かれたファイルを読みだして常に同じフォントで表示するWebフォントを利用しています。

※JUGEMで提供されているスマホ表示で閲覧する際には、今のところ無効な設定のようです。

デザイン性とかブランドイメージ表現とかいう難しい話ではなく、フォントの weight(=表示する文字の太さ)を少しだけ細かく使い分けたくなって、通常のシステムフォントだと「標準」と「太字」くらいしか表現できないところを、6段階(font weight100〜900)で使い分けられるオープンソースのWebフォント Noto sans JPを使うようになりました。Notoのネーミングの由来とか面白い話なのですが割愛、各自でお調べください。

目下のところブログ記事本文で使っているのは、このうち次の3つのweightです。

font weight 400(ブログの地の文の標準の太さ)
font weight 500(リンクを貼る強調箇所などの太さ)
font weight 900(さらに最大強調する箇所の太さ)

※本文以外では、ブログタイトルにweight 700も使ってます。

リンクを貼った箇所の強調表示でよくある”アンダーラインが付く”のがあまり好きではないので、もう少しスマートに強調表示したいと考えて「表示色を変えた太字」にしてみました。すると次にリンク表示ではない通常の強調を識別しやすくするために「さらに太字」」を使いたくなり、太字の程度を細かく段階的に変えられるWebフォントを使い始めた、というわけです。

ここまでがWebフォントを使ってますという長い前置きで、この記事の要点はここから。

何かの拍子に、「」『』()【】などのカッコや 、。!?といった句読点・記号、これらまとめてその道では「約もの」と呼ぶらしいですが、「約もの」を半角表示にできる YakuHanJP というWebフォントがあるのを知りました。

カッコと句読点や記号が全角表示で連続すると間が抜けた感じになってしまうこと、ありますよね。YakuHanJPを使うとそれが防げます。しかもこの優れものフォントは、Noto sans JPと併用できるようデザインされていてweightも100〜900で変えられるのです。

お気づきでしょうか? 現在ご覧のこの記事では既にYakuHanJPが使われていて、カッコが全て半角(半角で入力するのではなく全角文字を半角相当の幅で詰めて表示)になっています。

少し締まった、見栄えの良いカッコになってる気がしません?

カッコと句読点・記号をすべて半角にすることもできるのですが、試してみた結果このブログでは  、。?! まで半角に詰めると窮屈になると感じたので、カッコだけを半角にする設定にしました。スタイルシート(CSS)を書き換えて過去の記事まで全部まとめて表示が改まってしまってますから、「使用前」vs「使用後」で対比してお見せできないのが残念です。

※幸か不幸かWebフォントが無効なスマホ表示で見ていただくと、カッコは全角表記のままです。ご参考まで。

読者の皆様からするどうでもよい些細な違いかもしれませんね。「だから、何?」とか言われないうちに、退散しましょう。最後まで読んでいただいて、ありがとうございました。

ではまた。

タイトルとURLをコピーしました