Tutorial/How-To: Fix Google Chrome Minimum Font-Size (CSS) For Special UI Locale (e.g. Chinese, Japanese, Korean, Thai) / Font-Size Not Getting Any Smaller Than 12px

Source: http://www.labnol.org/internet/google-chrome-logo-design-inspiration/4414/

Background

Feel free to skip to the “tutorial” bit if you want a quick solution to your problem rather than a long statement about my encounter with this problem.

Recently, while I was working on a custom WordPress theme for my client, I stumbled upon an unusual problem that took a good 20 minutes off my time to resolve. I normally pay extra attention to cross-browser compatibility when coding any sort of websites. Indeed, I utilise stylesheet resets (my favourite being normalize.css and the famous Eric Meyer CSS reset) as well as services such as Browsershots to ensure to ensure all popular browsers are properly compensated for. In this particular issue, I had given my client a live preview of his website to be, however, “things” were not showing up as how they were intended to. Text that were meant to be small, appeared bigger and it subsequently triggered a chain of problems (much like Chaos Theory) such as misaligned buttons, images, containers, etc. The odd part of all this was that my client was using the exact same web browser as me (and the same version too) – Google Chrome.

Through the use of Teamviewer, I was able to examine the website in my client’s perspective properly. I took advantage of Chrome’s native developer tools (accessible through Tools >  Developer Tools or Ctrl-Shift-I for Window users) to inspect the text’s styles. To my surprise, its font-size was set at 12px even though it was defined as 11px in the stylesheet. Additionally, there were no overriding styles to have set it to 12px (evident from the fact there were no strikethrough/strikeout). Thus, the problem must ultimately be caused by the web browser. My client confirmed this by viewing the demo on Firefox and there were absolutely no issues.

So, What’s The Problem?

I did a quick Google search regarding this issue and it appears that I am not the only one to have discovered this dilemma. Refer to:

• http://code.google.com/p/chromium/issues/detail?id=36429
• http://www.google.com/support/forum/p/Chrome/thread?tid=6c5177414cbf8330
• http://stackoverflow.com/questions/2295095/font-size-12px-doesnt-have-effect-in-google-chrome

To quickly summarise what the above links have discussed… on default, Chrome would normally set its minimum font size to 1px for most UI locale (language) – anything less, will be forced to resize. It uses WebKit (an open source browser engine) that does indeed support font sizes of 12 and less.

However, the problem arises when Chrome users with a special UI locale (such as Traditional/Simplified Chinese, Japanese, Thai, Korean, etc – special characters) browse a website with a font size smaller than 12. For users on these special UI locale, the default minimum font size is set to 12px and consequently, anything smaller would be forced to resize to 12px, no less. As far as I am concerned, this is a bug that has been unresolved since 2010 (sorry if I have made a mistake and please do feel free to correct me) and there is currently no “good” way of addressing this issue especially since you can only manually alter the “minimum_font_size” property at this very moment.

Dealing With The Issue…

As I have mentioned earlier, there is currently no full-proof / good way of dealing with this problem (not that I know of). One way is to disable auto-adjustment of your text size via CSS. You can do this by adding the following property to your stylesheet:

-webkit-text-size-adjust:none

While using this style may seem like the ultimate solution, it simply adds another problem. Your text size will no longer resize itself when a user tries to zoom in on your website and thus, it becomes slightly less accessible – especially if you have a chunk of text with a small font size (who would do that anyways?).

You can read more about this problem here: http://www.456bereastreet.com/archive/201011/beware_of_-webkit-text-size-adjustnone/

Conclusion

It is pretty easy to apportion the blame to Google Chrome, however, as a web developer, you would often have to compromise to a lot of things (no doubt about that, Internet Explorer has given me nothing but hell ever since I started) and this issue is “not that big of a deal.” If you can find a way to address the problem without the use of the above “hack,” then do it. Besides, a font size of 12 is not necessarily a bad thing as many internet users (e.g. my mom) find it difficult to read text with a small font size (normally anything less than 10 and it becomes an issue in my mom’s case). However, the Chrome team should still work towards resolving this bug as insignificant as it may be. That is just my opinion.

What do you think?