Insights · Building a Japanese version
Japanese text inside an English template: the five things that break, and the CSS that fixes most of them
The Japanese version of a site is usually built inside the English one: same components, same CSS, new strings. It works, in the sense that the page renders. It also reads, to a Japanese visitor, like a page that was not made for them, and the reasons are mechanical rather than cultural.
Published 2 September 2026. Line-breaking rules from W3C, "Requirements for Japanese Text Layout" (JLREQ), and property definitions from MDN Web Docs, confirmed 2 September 2026. Examples from SuzuLabo's own bilingual pages.
What breaks, and why it is not a taste question
The word for this in Japanese typography is kinsoku, the set of characters that must not start or end a line. W3C's Japanese layout requirements set out which characters a line may not begin with: closing brackets, hyphens, question and exclamation marks, middle dots, full stops, commas, iteration marks, the prolonged sound mark and small kana (W3C, Requirements for Japanese Text Layout, section 3.1.7, confirmed 2 September 2026). Browsers know these rules. They apply the strict version only if the page tells them the text is Japanese and asks for it.
Font fallback is the fault visitors notice first and developers notice last, because on a developer's machine there is always some Japanese font installed and the page "looks fine". Which font, and whether it matches the weight of the Latin text on the same line, is decided by the visitor's device unless the stylesheet names Japanese faces explicitly.
The CSS that fixes most of it
| Property | Value we use on Japanese text | Why |
|---|---|---|
font-family | A stack that names Japanese faces after the Latin one, for example Inter, "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif | So the browser does not pick a Japanese face at random, and so mixed Latin and Japanese on one line share a design. |
line-break | strict | MDN: "Break text using the most stringent line break rule." Enforces the characters-not-starting-a-line rules for Japanese punctuation and small kana. |
word-break | normal (not break-all) | MDN: break-all allows breaks "between any two characters" for non-CJK text; for Japanese, the default already breaks between characters, so break-all only harms the Latin words mixed in. |
overflow-wrap | anywhere on narrow containers | Long URLs and product names in Latin script inside Japanese paragraphs are the usual cause of horizontal overflow on phones. |
line-height | 1.7 to 1.9 for body text | Kanji fill the full em box; the same 1.4 or 1.5 that reads fine in English reads cramped in Japanese. |
lang | lang="ja" on the element or the page | Tells the browser which font, hyphenation and line-breaking rules apply. Cheap, and often missing. |
Property definitions from MDN Web Docs (line-break, word-break), confirmed 2 September 2026. The values are SuzuLabo's working defaults, not standards.
Apply these to the Japanese section, not the whole site: a [lang="ja"] selector, or a class on the Japanese <body>, keeps the English pages exactly as they were. On our own site, where Japanese words appear inside English articles, we mark them with <span lang="ja"> so the same rules apply to a single word without touching the paragraph around it.
The three design decisions CSS cannot make for you
- Headings sized for English words. An English heading of four short words and a Japanese heading carrying the same meaning are different lengths and different heights. Fixed-height hero blocks, buttons with fixed widths and navigation bars with a fixed number of items all need to be checked with real Japanese strings, not lorem ipsum.
- Emphasis. Italic is not a Japanese convention and most Japanese fonts have no italic face; the browser slants the upright glyphs, which reads as a rendering error. Use weight, color or a mark-up convention instead, and check that the bold weight you rely on actually exists in the Japanese face you named.
- Vertical rhythm. With line-height at 1.7 to 1.9, the Japanese page is taller than the English one. Layouts that assume the English height (side-by-side columns, above-the-fold promises) need to be re-checked rather than inherited.
None of this requires redesigning the site. It requires looking at the Japanese pages on a phone with a Japanese string in every component that has a fixed dimension, and fixing what overflows.
How we handle it on our own site
SuzuLabo's site is Japanese first, with an English section built on its own stylesheet. When we started placing Japanese words inside English articles in August 2026, the English stylesheet named only Latin faces, so the Japanese words were rendered in whatever the visitor's device chose. The fix was the stack in the table above on [lang="ja"], plus explicit Japanese faces inside the SVG diagrams where Japanese labels appear, because SVG text does not inherit the page font stack in the same way.
The check we now run before publishing an English page with Japanese in it is small: render the page at 1280 and 390 pixels wide with a headless browser, and look at every Japanese string for the wrong weight, a break before punctuation, or an overflowing box. It takes a minute and it has caught something on most pages.
FAQ
Frequently asked questions
Which Japanese web fonts should we use?
Name system faces first (Hiragino Sans on Apple devices, Yu Gothic and Meiryo on Windows) after your Latin face, so Japanese text renders immediately without a download. Add a web font such as a Noto Sans JP weight only if your brand needs it; Japanese web fonts are large, and subsetting is a separate job.
Is word-break: break-all the right setting for Japanese?
Usually not. Japanese already breaks between characters by default. break-all changes how the Latin words mixed into Japanese text break, which is rarely what you want. Use line-break: strict for the Japanese punctuation rules and overflow-wrap for long Latin strings.
Do we need vertical text?
Not on a business website. Vertical layout exists in Japanese print and some editorial design; B2B sites are set horizontally.
Should the Japanese page use a different font size?
Often one step larger for body text than the English, and always a larger line height. Test with real content rather than applying a rule.
Does any of this affect SEO?
Indirectly. Text that overflows or breaks badly on phones is a usability problem, and Google evaluates pages on mobile. Declaring lang="ja" also helps search engines and screen readers identify the language.
Can this be checked without reading Japanese?
The overflow and font-weight problems, yes: a screenshot at phone width shows them. Whether a break falls in an awkward place inside a word needs a reader, which is where a native check earns its place.
If your Japanese pages were built inside the English template
Send two or three Japanese URLs. We will reply in writing with what breaks on a phone, which of the fixes above apply, and whether the pages need more than CSS. That reply is free.