Is 16px the standard for font size on the Web?
The other day, when I was creating a demo for an English e-commerce site, I had a chance to look up the "appropriate font size for body text", so I summarized it in this article. The conclusion was that 12px to 18px is the standard and appropriate for both Japanese and English.
Also, it would be better to adjust the font size according to the purpose, such as making it stronger or weaker, larger or smaller depending on its role in body text, or adjusting it according to the attributes of the visitors to the site. It also depends on whether the text is in Japanese or English.
The font size and line spacing are also important to express readability and brand image.
A common standard for font size is 16px
As the headline says, I think it is widely known that 16px is generally good and safe. I remember it used to be introduced as such on Google's Material Design Guide site or in an instructional video on responsive web design in Google's site.
One reason for this seems to be that "the default font size of browsers is often 16px". I guess our eyes are also used to this.
Google's view at the moment is at least 12px.
I wanted to know how much pixels Google recommends now, so I looked it up and found that it is written on the web.dev page where Google provides information for developers.
The following is a quote.
Font sizes smaller than 12 px are often difficult to read on mobile devices and may require users to zoom in to display text at a comfortable reading size.
Also, Lighthouse, a tool that evaluates (audits) web pages based on certain criteria, seems to have the following evaluation criteria.
Lighthouse flags pages on which 60% or more of the text has a font size smaller than 12 px. When a page fails the audit, Lighthouse lists the results in a table with four columns:
Quote : Document doesn't use legible font sizes
This means that "text to be read" or "text that is the main part of the content" needs to be at least 12px.
The body of the web.dev page was 18px.
I checked the aforementioned page and found that the body text was 18px.
The same font size gives a different impression in Japanese and English.
This is widely recognized issues.
I'm sure many of you have had the experience of trying to add Japanese to a stylish WordPress theme made overseas, only to find that the impression was completely different. Of course, I'm one of you.
The same can be said for the impression of size.
As a test, I translated part of the text of the aforementioned wev.dev into Japanese and compared them.
Even with the same font size, Japanese seems to give a slightly larger impression. One of the reasons might be that kanji and other characters have many strokes, so there are fewer margins than in English.
Minimum is 12px, but is this too small? Think about it on Rakuten Ichiba.
When you hear 12px, you might think it is too small... but surprisingly, it doesn't seem so. In the case of Rakuten Ichiba's smartphone site, which is often used by older users, the product name in the product list is 12px. And the product introduction text is 13px.
I was a little surprised when I first noticed this.
One of my acquaintance in her 50's told me, "I never found it hard to read.
Of course it depends on the person, but I still think it's a meaning full point that Rakuten Ichiba has adopted this font size.
You don't have to have an obsessed idea that "16px is the standard, so 16px is safe".
Conclusion: 12px to 18px is the standard for readable and important text.
So, I've come to the conclusion of this. Also it is important that you have a flexibility to decide what sizes are appropriate for your purpose.
Of course, headings can be larger than this standard even for "readable and important text".
It's a matter of balance (if I say this, then this article may turns into nothing).
