ブログ

コンピューターやインターネット、Webサイトが「外国人」のため、アルファベットの表記は「それなりに」見えます。PCがWindowsになり、Webサイトにフォント表記ができようになってから、アルファベットのフォントがプロポーショナルフォントに変わってきたので、表示がきれいになりました。
アルファベットに比べて日本語を表示するひらがなや漢字は文字数が多いこともあり、多くのフォントは文字幅が同じ「等幅フォント」です。漢字文字の句読点や括弧も漢字文字と同じ幅なので、文章を表示すると句読点や括弧の隙間が目立ってしまいます。
インターネットに公開されていてライセンスフリーの日本語フォントで、文字種が角ゴシック体と丸ゴシック体で、句読点や括弧幅が漢字文字の幅より狭く見える日本語のプロポーショナルフォントを探しました。すると、角ゴシック体の「源真ゴシック」と丸ゴシック体の「源柔ゴシック」が見つかりました。
源真ゴシック : http://jikasei.me/font/genshin/
源柔ゴシック : http://jikasei.me/font/genjyuu/
この2つのフォントはOpenTypeフォントなので、Webサイトで使えるように変換をして、このWebサイトで使うことにしました。

漢字文字の句読点や括弧も漢字文字と同じ幅ではないプロポーショナルフォントを使ったので、句読点や括弧の隙間が目立たなくなりました。

文章のページは見た目が良くなりましたが、一覧表示のページでは行頭が揃いません。文字ごとに表示する幅内での左位置がズレているのだろうと思います。

句読点や括弧の隙間を目立たなくすることより行頭を揃うことの方を優先して、「源真ゴシック」と「源柔ゴシック」の使用をやめて、漢字が等幅でアルファベットなどがプロポーショナルの角ゴシック体の「M+フォント」と丸ゴシック体の「Rounded M+フォント」を使うことにしました。
M+フォント : http://mplus-fonts.osdn.jp/
Rounded M+フォント : http://jikasei.me/font/rounded-mplus/
この2つのフォントはOpenTypeフォントではなくTrueTypeフォントです。同じようにWebサイトで使えるように変換をしました。

この記事を投稿した時点で、文章の表示は角ゴシック体の「M+フォント」です。句読点や括弧の隙間は目立つと思いますが、行頭は揃っていると思います。
時間が許す時に「句読点や括弧の隙間を目立たなくて行頭を揃う」フォントを探して、再度トライをしたいと思っています。