クロームの文字サイズが大きくなる不具合を機にフォントをいじりました

クロームで発生したバグによって文字のサイズ設定を見直すことにしました。スマホでは少し見やすくなったかも……？

ブログの文字サイズの大きさを拡大するべきか否か。

当ブログの文字サイズは標準的なサイズよりも若干小さめに指定していたので、じつをいうとこの問題は以前から悩みの種の1つでもあったのですが、今回訳あって文字サイズを一新することを決意。px（ピクセル）から％（パーセント）指定に切り替え、文字のサイズが一回り大きくなりました。

これによってサイトが少し見やすくなったと思うのですが、せっかくなので今回は、文字サイズを変更するに至った経緯（chromeの文字サイズ不具合）について、少しお話しさせてもらいたいと思います。

きっかけはクロームのバグ（不具合）

私の場合、これまでPCのブラウザは「Google Chrome」、スマホは「Safari」を利用していたので、文字サイズなどは基本的に、この2つのブラウザを基準に決めてきました。ただ、クロームで見たときの文字サイズが、ほかのブラウザで見たときよりも大きいような気がすることがあるのは前々から引っ掛かってはいました。

これはブラウザによってデフォルトのフォントが違うせいなのか、ブラウザごとの最小フォントサイズが違うからなのか、正直言うといまだによくわからないのですが、メインで使用しているブラウザがクロームだったので、これまでの文字サイズは、クロームで最も見やすいと感じた「15.5px」に指定していたのです。

ちなみに、この「px（ピクセル）」という単位は、環境によって大きさが変化しない絶対値。本来であればブラウザどうこうで文字サイズが変わることは基本的にはないはずのものです。が、クロームで見ると大きく表示されているときがあった（ような気がする）のです。

そこで私は思いました。クロームで見たときの文字サイズが、ほかのブラウザで見たときよりも大きいのであれば、クロームでちょうどいいと感じた文字サイズは、ほかのブラウザで見ると小さく感じるのではないか？ と。

これも以前からいくつかのブラウザで確認したところ、そうなっているような気はしていたのですが、ブラウザのシェアNo.1がクロームということもあり、これまで私は15.5pxを貫いてきたのです。

Android版クロームで問題は確信へと変わる

PCではクローム、スマホはサファリ。しかしここに来て、スマホにAndroidが仲間入りすることになり、動作確認にAndroidのスマホが加わりました。

そこで、Androidスマホにもともと入っていたブラウザで、当ブログの文字サイズを確認してみたところ、文字サイズが大きく感じる現象は確信へと変化します。明らかにクロームのほうが文字が大きく表示されていたのです。

これは当ブログに限ったことではなくヤフーなどの大手サイトでも同じ現象が見られ、こうなるとクロームは表示される文字のサイズが、端末やサイト、ページによっては大きくなることがある（？）としか思えなかったのですが、この問題は新たな局面を迎えました。

原因を調べていくうちに、クロームでとんでもない不具合が発生していることを私は知ってしまったのです！

スマホ版クロームアプリの不具合

Androidのスマホはブラウザによって文字サイズが明らかに異なっている（というかクローム以外が小さくなってしまっている）ことが判明したので、こうなると文字サイズの設定をいじらなければならなくなってきたのですが、アンドロイド版クロームを確認していると、文字サイズに関係する謎の不具合を確認。

ページをリロード（読み込み）すると、特定の文字のサイズが大きくなったり小さくなったりするのです。

さっそく原因の究明に取り掛かかった結果、文字に付く「Pタグ」に、文字をデザインできる「class」を指定した文字列にこの症状が起きることが判明し、さまざまなブラウザでも確認したところ、

• 縦向きにしたときのアンドロイド版クロームのみで発生する
• 同時期にクロームの不具合報告が多発
• ほかのブラウザではこの不具合は確認できない

ということから、おそらくクロームの不具合によってブログの表示がおかしくなっていると推測されました。さらにその後、

• ページで最初のclassを指定したPタグは正常に表示されるも、それ以下の同じPタグの文字列のサイズが小さくなる（cssが最初だけ効いている）
• クロームのバージョンをダウングレードしたところ、すべての文字が一律で小さく（大きく）表示される現象も発生
• 一部フォントサイズを指定した箇所にデザイン等をいじれる「css」が効かなくなり、バランスが取れなくなる

といったおかしな不具合が続出。

できることはすべてやってみるも打つ手なし。頭を悩ませながらもたどり着いたフォントサイズはめちゃくちゃになり、運営しているブログを確認するとデザインはガタガタ。

このままだと精神衛生に多大な影響を及ぼしかねなかったのですが、私はこのとき感じたのです。これは、クローム以外のブラウザを使用するユーザーのためにフォントサイズを大きくせよという天啓、神からのお告げなのだと。

クロームアプリをそっと閉じた私は、ついに文字サイズをクローム基準にすることをやめ、それ以外のブラウザを基準として設定し直すことにしたのです。

文字サイズを変更した箇所

いくつかのブラウザで確認してみたところ、やはりクローム以外のブラウザではすべてサイズは統一されていたので、これを機に、設定していたフォントサイズを一回り大きくすることにしました。

具体的にはフォントサイズを細かく指定しているすべての箇所を変える必要が出てきたのですが、今回の変更に伴って「px」での指定は廃止。

というのも、いままでのようにフォントサイズをpxで指定していると、またなにかが起きたときに、すべての指定箇所を変更しなければならなくなるからです。

そのため、フォントサイズの指定方法は、大本のサイズを変更すればすべてに変更が適用される「em、rem、％」から選ぶ必要があったのですが、私は普段から接する機会も多く、直感的にもわかりやすい「％」をチョイス！

全体のバランスを考えながら文字サイズの変更をしていくのも一苦労ではありましたが、ベースのサイズは「108％」とすることで、表示される基本的なサイズは「16pxちょっと」と、これまでよりも5％ほど大きくなりました。

ちなみにこちらが文字サイズを変更する前。スマホで15.5pxです。

こちらが文字サイズ変更後。スマホで16pxちょっとです。

また、記事の一部だけ文字を大きくしている場所などもいじる必要が出てくるわけで、これは「Search Regex」というWordPressのプラグインで一括変更することもできるのですが、

どうもこのプラグイン、文字列の変更作業の進行が0％から進まず、キャンセルを押さないと作業が完了しない（一応文字列は変更できている）という怪しい挙動をするので、すべて手作業で変更（現在は直った模様）。

骨の折れる作業でしたが、これで一応当ブログの文字サイズ変更は完了したので、文字サイズが小さく見えていたブラウザでは少し見やすくなったと思います。

例によって、Androidのクロームは文字サイズがさらに大きくなりましたが……。

今回のまとめ

クロームの文字サイズがほかのブラウザと比べて大きいのは、ブラウザの設定に問題があるのか、これも不具合によるものなのか、それとも端末特有のものなのかは謎ですが、解決することがあれば追って報告したいと思います。

また、文字サイズをpxで指定しているといずれ変更を余儀なくされたときにかなりの労力を費やすことになる可能性が高いので、文字サイズを変更しようか迷っているときは、なるべく早めに対応したほうがいいかもしれません。

あとはクロームのバグが直ることを祈るばかりです……。