Text UI on Japanese Website: Practices for best readability
Typography contributes to a website’s readability. Having a good web typography will let visitors have a better time on your site. There are ways and common practices to increase a Japanese web pages readability with typography.
Paragraph and overall texts
The minimum font-size for common texts should be 16px, which is why the font-size:16px is set on the body. the reason for this is that unlike English letters, Japanese characters have more strokes and details. A bigger font size will make them more readable, so make sure to set paragraph size to not less than 16px.
The availability of font-family for Japanese characters greatly varies depending on the device’s OS. Because of this, setting it to sans-serif or serif to use the device’s default font is ideal. To learn more about different Japanese fonts readily available on different platforms, read the post All About Japanese Font Family.
For the text color, avoid over contrasting of paragraph text such as #000 font on a #fff background to avoid eye strain. Try #333 for white backgrounds.
Line-height and paragraph margins are important to avoid text crowding. Unlike books, webpages are most of the time browsed quickly by the visitors in search for information. Adding big enough spaces will let them browse through easier.
body {
font-size: 16px;
font-family: sans-serif;
line-height: 1.8;
color: #333;
}
p {
margin-bottom: 1.5rem;
}
Result
See the Pen on CodePen.
Headings
Headings are very important for web readability. Most often, visitors only glance at headings to check the information they are looking for.
High contrast font color, background colors, or other designs that will make them easily differentiable from parapraph texts are recommended.
Font sizes can be set easily such as font-size: 2em; EM is the percentage of the parent’s size, while REM is the percentage of the root size. For example if the font size of the parent element is 16px, then 2em is 2 times of 16 which is 32px.
It is ideal to set the default font size on a greater section such as the body or article tag. This way, changing only the parent or root font-size will also change the actual size of its children headings that are set on em/rem.
body {
font-size: 16px;
}
h2 {
font-size: 1.5rem;
}
h3 {
font-size: 1.2rem;
}