悩ましいフォントの話

blog,雑談

私は別にフォントオタクとかではないのですが、せっかくサイトを作ったからにはそこそこ可読性が高くて、オサレかつかわいいフォントを使ってみたいなあと思っています。

今使っているテーマでは、Google Fontsで提供されているWEBフォントがいくつかデフォルトで入っているので、いくらか試した結果、一番自分好みだったのが「M Plus 1p」でした。M+シリーズのフォントは結構有名ですけど、Google Fontsにいつの間にか実装されていたとは知りませんでした。なので、意気揚々と設定してみたのですが、Androidでは反映しないし、普段サイトを管理・編集しているのはiPadだったので私は気付いていませんでした。

PCのChromeで見たらこんなにガビガビだったことに。

いや、ちょっとこれはGoogle Fontsのサンプルとえらい違いじゃないですか~!と思って、色々と調べてみたのですがどうもこのフォントはある程度の大きさがないと綺麗には表示されない模様。その証拠に、記事タイトルは綺麗に表示されています。かと言って、本文のフォントをこれ以上大きくするのはさすがに大きすぎだろうし、あちこち設定を変更するのは面倒です。

そこでGoogle先生にお尋ねしたわけですが、

とまあ、CSSで小細工をして綺麗に表示させる方法を見つけたのはよかったんですけど、問題は指定するクラス。bodyで指定すると、今度は追従型サイドバーやページトップに戻るボタンなどの、スクロールするとついてくるタイプのものが動かなくなるんですよね。

これは地味に困るので、指定するクラスを色々と変えてみたりしたのですが、そうするとあっちを立てればこっちが立たずになってしまって、私の知識ではどうにもなりませんでした。

ならいっそ、今現在流行中らしい「游ゴシック+ヒラギノ角ゴ」に「Verdana+Helvetica」とかで指定すればいいかなあと思ったんですけど、游ゴシックは細い!!!!!

いや、別にそんなに野太いフォントとかでなくてもいいんですけど、游ゴシックだとこれはこれで読みづらいんですよ。細すぎて。普段自分が見てる環境で綺麗に見えるならそれでええやん、と思うんですけどPCのChromeでも細く見えるから問題なわけで。もうほんと、すっかり袋小路に迷い込んでしまいました。メイリオは仕事で腐るほど見てるので、自サイトでまで見たくないです😂Noto Sansシリーズは綺麗なんだけど、何かお固い。

ってことでしばらくは苦肉の策として「小杉丸ゴシック」と「Nunito」を組み合わせて使っていたんですけど、これはこれでiPadで見ると、太字がわかりづらいんです。Sleipnir使ってるせいかもしれないけど。Safariは使いづらすぎて速攻投げました…。一応、表示チェックには使ってるけど。

一応らくがきサイトなんだからメインコンテンツは絵なんですけど、ブログで長々と語ることもしょっちゅうあるわけで、そういうときに読んでて飽きず、かつスルスル読みやすいフォントの組み合わせってないかなあと探求する週末でした(暇人?)

で、色々探しててこういうものを見つけました。

フロップデザインフォントのデモサイトも見てきたんですけど、個人的には結構好みなフォントでした。2,000円程度なら出してもいいし、導入もプラグインで楽々。結構迷うところです。しかし、2,000円出して自分のサイトに適用してみたけど結局元のフォントに戻します的な流れになりそうで、悩むところです。

どこを目指してるのかよくわからなくなってきた今日このごろです。暇だからですかね。暇じゃないんですけどね。


まあ、そうは言ってもそこまで高い買い物でもないしいいか、と思って購入して、適用させてみました。なかなかかわいい☺

でも結局一部はメイリオ表示に設定せざるを得なかったんですけどね。全部じゃないからヨシ!