When East Meets West (on the Same Page)

If you’ve ever built a bilingual English – Japanese website, you know the struggle. English uses letters with ascenders, descenders, and varying widths. Japanese, on the other hand, mixes three scripts: kanji, hiragana, and katakana, each forming balanced, square-like characters.

Already last year, I told you about a special HTML element that you can use to style this scripts. Read my post HTML and CSS I didn’t even know about before I started creating content.

This is not usually a big problem if the entire page is in one language. But when Latin letters are mixed with Japanese characters, as is increasingly the case, the font becomes more difficult to handle.

That means:

• Japanese text usually needs more line height to breathe.
• Kanji often appear denser and more detailed than Latin letters.
• Western fonts can feel too “light” next to Japanese text.

This is where the lang attribute becomes your best friend. And he brings a plus one: CSS.

Let the Language Drive the Design

<p lang="en">Welcome to Starbucks.</p>
<p lang="ja">スターバックスへようこそ。</p>
:lang(en) {
font-family: "Nunito Sans", sans-serif;
}

:lang(ja) {
font-family: "Noto Sans JP" sans-serif;
}

Here, the English text uses Nunito, which has friendly, rounded shapes. The Japanese version pairs quite good with Noto Sans JP (Google Fonts), which was designed specifically as a typeface for all writing systems around the world. Since the content is separate, both fonts appear suitable and visually balanced. Read more about the Noto: A typeface for the world project.

Font Weight and Visual Balance

However, when both writing systems are mixed together, which is common in the Japanese language today, typographical mismatches become noticeable. Meaning, When mixing languages, a font weight of 400 for Japanese might look visually heavier than 400 in Latin text because kana systems are more complex in shape.

<p lang="ja"><span lang="en">Starbucks</span>へようこそ。</p>

You can correct this by slightly adjusting weights between languages:

:lang(en) {
font-weight: 400;
}

:lang(ja) {
font-weight: 300;
}

This subtle change keeps both scripts visually balanced without the Japanese text looking darker. But if you look more closely and highlight the text, you will notice that the default line height of the whole text is slightly different, due to the different fonts used. And the whole thing becomes even more challenging when kanji characters are mixed in with the text.

Kanji: Density and Design

Kanji are logographic characters—each one carries meaning, not just sound. Because they’re compact but information-dense, large blocks of kanji can look heavier.

<h2 lang="en">Apple unveils the new iPhone 17 Pro.</h2>
<h2 lang="ja">
<span lang="en">Apple</span>が新型<span lang="en">iPhone 17 Pro</span>を発表。
</h2>

You can help readability with

• generous line-height (1.7–1.9)
• slightly looser letter spacing (letter-spacing: 0.05em)
• a not too heavy font-weight
• avoiding all-caps Latin text near kanji — caps feel bulky by comparison

:lang(ja) {
font-family: "Noto Sans JP", sans-serif;
font-weight: 500;
letter-spacing: 0.05em;
}

:lang(en) {
font-family: "Noto Sans", sans-serif;
font-size: 1.06em; /* +5% larger than Japanese */
letter-spacing: 0;
vertical-align: -0.03em; /* align baseline slightly */
}

When styled this way, the English and Japanese text sit naturally on the same line — adjusting the English spans with a slightly larger font size and a small vertical-align nudge raises their baseline just enough to match the Japanese characters. The result feels balanced in both weight and rhythm — one cohesive headline, not two scripts stitched together.

Bonus Tip: Variable Fonts! Google’s Variable Fonts make it even easier to fine-tune weight and width dynamically between scripts. If you use font-variation-settings, you can ensure text looks balanced across both languages at every viewport size.

Takeaway

Multilingual design isn’t just about translation — it’s about typographic empathy. English and Japanese each have their own rhythm, density, and shape language. Using the lang attribute with the right fonts helps you respect both, creating an experience that feels natural to all readers.

Next time you use different scripts on your page, don’t just think about switching words. Think about switching style, and let your typography speak both languages fluently.

Resources

Noto: A typeface for the world Variable Fonts

---

This article was originally posted on Htmhell Adventcalender 2025. https://www.htmhell.dev/adventcalendar/2025/21/