Japanese–English Web Typography Is More Than Choosing a Japanese Font

jackdone — Thu, 03 Sep 2026 06:02:04 +0000

This account is operated by someone affiliated with the Ichizenn project referenced in this article. The article is a technical analysis, not an independent product review.

When developers localize an English website into Japanese, typography is often treated as the final visual step:

Translate the strings.
Add a Japanese font.
Reduce the font size if something overflows.
Ship the page.

That approach may produce readable text, but it rarely produces a polished Japanese interface.

Japanese–English typography affects much more than font selection. It changes line breaking, spacing, loading performance, semantic markup, navigation width, form design, accessibility, and the amount of content that fits inside a component.

A layout that works perfectly for:

text
Draw your love fortune

may behave very differently when the interface displays:

text
恋みくじを引く

The Japanese version may be shorter in one component and considerably denser in another. It may use Japanese punctuation, Latin numbers, English product names, and emoji in the same paragraph.

The real problem is not “Which Japanese font looks nice?”

It is:

How should a web interface behave when two writing systems with different typographic expectations share the same page?

Declare the language before styling it

Typography begins in HTML, not CSS.

An English page should declare its default language:

html

A Japanese page should do the same:

html

If an English article includes a Japanese product term, mark the language change locally:

html

A 恋みくじ is a Japanese-style love fortune.

The lang attribute is not merely metadata for search engines. It helps browsers and assistive technologies understand how the text should be processed.

Language information can influence:

Screen-reader pronunciation
Font selection
Line-breaking behavior
Hyphenation
Quotation conventions
Spell checking
Text-to-speech output

The W3C recommends declaring the default language on the html element and using a nested language declaration when a section differs from the page default.

Do not try to replace this with:

html

That is not a substitute for marking the language of the actual document.

For a page written primarily in English but containing Japanese terms, the structure might look like this:

html

Understanding
恋みくじ

<p>
  <span lang="ja">恋みくじ</span>
  can be translated as “love fortune,”
  although the cultural meaning is broader
  than the English phrase suggests.
</p>

This is a small change with benefits across the entire interface.

Use language-aware font stacks

A mixed-language page should not assume that one font file handles every character equally well.

A practical Japanese sans-serif stack might look like this:

css
:lang(ja) {
font-family:
"Noto Sans JP",
"Hiragino Kaku Gothic ProN",
"Yu Gothic",
"Meiryo",
sans-serif;
}

The exact fonts available depend on the operating system. That is why the stack ends with a generic family.

The English text can use a separate stack:

css
:lang(en) {
font-family:
Inter,
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
}

However, applying different fonts to every language fragment may create a visually inconsistent sentence.

Consider:

html

Try 恋みくじ today.

If the Latin and Japanese fonts have very different stroke weights, x-heights, or visual density, the Japanese term can appear too heavy or too light.

The correct pairing is not necessarily two fonts from the same brand. It is two fonts that feel compatible at the sizes and weights used in the interface.

Test them together:

text
恋みくじ — Japanese Love Fortune
今日の運勢 / Today’s Fortune
2026年9月3日
Version 2.0を公開しました

A font decision made using an isolated Japanese heading may fail when real mixed-language content appears.

Do not request more font than the page needs

Japanese fonts can contain thousands of glyphs. Loading a large font file only to display a short heading can add substantial cost to a small web experience.

Modern font delivery generally favors WOFF2. MDN describes WOFF2 as an efficient and widely supported format for web delivery.

css
@font-face {
font-family: "Product Japanese";
src:
url("/fonts/product-japanese.woff2")
format("woff2");
font-style: normal;
font-weight: 400;
font-display: swap;
}

The font-display descriptor determines how text behaves while the font is loading. According to MDN’s font-display documentation, different values produce different block and swap periods.

swap prioritizes showing fallback text quickly:

css
font-display: swap;

That can be appropriate when the content must remain visible, but a late font replacement can cause a visible change.

optional gives the browser more freedom to continue using the fallback font:

css
font-display: optional;

That may reduce disruptive font replacement, but visitors on slower connections might never see the custom font during that visit.

There is no universal best value. The choice depends on whether brand consistency or rendering stability is more important for the component.

Possible optimizations include:

Loading only the font weights actually used.
Avoiding a separate font for minor decorative text.
Subsetting fonts when the license and content model allow it.
Using system Japanese fonts for body copy.
Reserving a custom font for a short heading.
Testing the page with the custom font blocked.

The fallback experience is part of the design, not an error state.

Avoid fake Japanese spacing

English normally separates words with spaces:

text
Draw your love fortune

Japanese does not normally place spaces between every word:

text
恋みくじを引く

Adding spaces for “visual balance” often creates unnatural Japanese:

text
恋みくじを引く

Increasing letter-spacing across an entire Japanese interface can cause a similar problem.

css
/* Use with caution */
.japanese-heading {
letter-spacing: 0.15em;
}

Moderate spacing may work for a short decorative title, but applying it to paragraphs, buttons, and form instructions can reduce readability.

A safer default is:

css
:lang(ja) {
letter-spacing: normal;
}

Then add spacing only to a deliberately designed component:

css
.brand-title:lang(ja) {
letter-spacing: 0.06em;
}

The appropriate amount depends on the typeface, size, weight, and length of the text. It should be judged with actual Japanese content.

Line breaking requires its own CSS decisions

Japanese text does not wrap in the same way as English text.

The CSS line-break property controls how browsers handle line breaks around punctuation and symbols in Chinese, Japanese, and Korean text. MDN currently lists it as widely available.

A Japanese content area can use:

css
.japanese-content {
line-break: strict;
word-break: normal;
overflow-wrap: anywhere;
}

line-break: strict applies stricter line-breaking rules for CJK text.

word-break: normal avoids aggressively breaking Latin words.

overflow-wrap: anywhere provides an emergency break for content that would otherwise overflow, such as a long URL or an unexpected product identifier.

Avoid applying this globally without testing:

css

{ word-break: break-all; }

break-all may prevent overflow, but it can split English words at arbitrary positions:

text
internation
alization

That solves a container problem by creating a reading problem.

A better approach is to apply language-appropriate rules to the content area and handle special values separately.

css
.article-body:lang(ja) {
line-break: strict;
word-break: normal;
}

.article-body a {
overflow-wrap: anywhere;
}

The word-break documentation is worth reviewing before choosing a global value.

Japanese punctuation changes the edge of a component

Japanese punctuation has different spacing and line-placement expectations.

Real content should be tested with characters such as:

text
「」『』（）、。！？・〜

A card that looks balanced with English text may look uneven when a line begins with closing punctuation or ends with an opening bracket.

Developers may be tempted to remove spaces manually or apply negative margins to individual characters. These fixes are fragile because the position changes with:

Screen width
Font family
Font loading
User font size
Translation updates
Browser line-breaking rules

CSS is developing more specialized CJK typography controls. For example, text-spacing-trim can adjust internal spacing around CJK punctuation.

css
@supports (text-spacing-trim: normal) {
.japanese-content {
text-spacing-trim: normal;
}
}

However, MDN currently marks text-spacing-trim as having limited availability. It should be treated as progressive enhancement rather than a requirement for readable content.

The page still needs to look acceptable when the property is unsupported.

Line height should reflect character density

A line height that works for Latin body text may feel crowded with Japanese characters.

As a starting point:

css
.article-body:lang(en) {
line-height: 1.6;
}

.article-body:lang(ja) {
line-height: 1.75;
}

These are not universal rules. The correct values depend on the font and layout.

Japanese body text often benefits from additional vertical space because each line can contain visually dense square-shaped characters. Furigana, punctuation, and mixed Latin content can increase that density further.

Test line height using full paragraphs, not isolated interface labels.

text
恋みくじの結果は、未来を断定するものではありません。
今の気持ちを静かに見つめるための、小さなきっかけとして
お楽しみください。

A component that looks comfortable with one line may become exhausting when it contains six.

Avoid fixed-height text containers

Translated content rarely has identical dimensions.

This component is fragile:

css
.fortune-card__message {
height: 96px;
overflow: hidden;
}

The Japanese text may fit at the default browser size and become clipped when the visitor:

Enlarges the text
Uses a different system font
Enables translation
Views the page at a narrow width
Changes the device orientation

Prefer content-driven height:

css
.fortune-card__message {
min-height: 6rem;
}

If visual alignment between cards is required, use layout tools that allow growth rather than hiding overflow.

css
.fortune-card {
display: grid;
grid-template-rows: auto 1fr auto;
}

The content should determine the final height.

Do not turn Japanese text into an image

A decorative Japanese heading may be tempting to export as part of a background image.

That creates several problems:

Screen readers cannot read it.
Browsers cannot translate it.
Users cannot copy it.
Search engines receive less semantic information.
Text cannot respond naturally to screen size.
High-contrast modes may not preserve it.
Updating the wording requires a new asset.

Use real HTML text whenever possible:

html

今日の恋みくじ

A background texture or illustration can still provide atmosphere, but the meaningful content should remain text.

If an image contains important wording, provide an appropriate text alternative. Do not duplicate the same text in both visible HTML and alt content if that causes assistive technologies to announce it twice.

Ruby markup can explain pronunciation

When an interface introduces a Japanese term to learners, ruby annotations can show pronunciation.

html

恋
(
こい
)

みくじ

The <rp> elements provide fallback punctuation for environments that do not display ruby annotations as intended.

Ruby should be used intentionally. Adding pronunciation to every familiar character can create visual noise, especially in compact mobile components.

For an international audience, a short explanation may be more useful:

html

恋みくじ (koi mikuji) is a Japanese-style love fortune.

Semantic clarity is more important than demonstrating every available typography feature.

Mixed-language buttons need special testing

Buttons often have the least available space and the highest interaction importance.

Compare:

text
Draw

text
Draw Your Fortune

text
恋みくじを引く

text
今日の恋みくじを引く

Avoid solving variation with a fixed width:

css
.draw-button {
width: 160px;
}

Prefer flexible sizing:

css
.draw-button {
min-inline-size: 10rem;
max-inline-size: 100%;
padding-inline: 1.5rem;
padding-block: 0.8rem;
white-space: normal;
}

Allowing a button to wrap may be better than shrinking its text until it becomes difficult to read.

Also test Japanese text at bold weights. Some system fonts may not provide every requested weight, and synthesized bold text can look different from the design mockup.

Test with adversarial content

A localization test should include more than the final approved strings.

Create a typography test page containing:

Short Japanese labels
Long Japanese sentences
English acronyms inside Japanese text
Latin product names
Dates and numbers
Japanese quotation marks
Parentheses
Emoji
Long URLs
Katakana words
Ruby annotations
Bold and linked Japanese text

For example:

html

恋みくじ
今日の恋愛運を確認する
Version 2.0を2026年9月3日に公開
「返信を待っている」を選択
example.com/very-long-address
新しいメッセージが届くかもしれません💌

Review the page at:

Narrow mobile width
Large desktop width
200% text zoom
Slow font loading
Custom font failure
Light and dark themes
Japanese and non-Japanese operating systems

A screenshot from one designer’s computer is not enough evidence that the typography works.

Observing a real Japanese web experience

These details become easier to notice in culturally specific products. One example is Ichizenn’s 恋みくじ, a browser-based Japanese love-fortune experience.

The interface combines Japanese terminology, emotional result text, numbers, buttons, and shareable content. That makes typography part of the product behavior rather than a decorative layer.

If a result is clipped, breaks beside the wrong punctuation, loads invisibly, or becomes unreadable when enlarged, the problem changes how the experience feels.

A fortune result is meant to create a short reflective pause. Typography determines whether that pause feels calm or frustrating.

A practical checklist

Before publishing a mixed Japanese–English interface, check the following.

Language

The html element declares the page’s default language.
Inline language changes use nested lang attributes.
Japanese terminology is not stripped out merely to simplify translation.
Screen-reader pronunciation is tested where possible.

Fonts

The stack includes appropriate fallbacks.
English and Japanese fonts have compatible visual weight.
Only necessary font files and weights are loaded.
Text remains visible if the custom font fails.
Font-loading behavior is intentional.

Line breaking

Japanese content uses appropriate CJK line-breaking behavior.
English words are not split unnecessarily.
URLs and identifiers cannot force horizontal overflow.
Japanese punctuation is tested at narrow widths.
Experimental CSS features are enhancements, not dependencies.

Layout

Text containers can grow.
Buttons accommodate both languages.
The interface works with enlarged text.
Japanese body copy has sufficient line height.
Important wording remains real HTML text.

Content testing

Real Japanese sentences are used during QA.
Mixed numbers, Latin letters, emoji, and punctuation are included.
Font loading is tested on slower connections.
The interface is reviewed on more than one operating system.
Translated text is reviewed in context, not only in a spreadsheet.

Final thoughts

Good Japanese web typography is not achieved by selecting a Japanese font and reducing its size until the layout stops overflowing.

It requires coordination between:

Semantic HTML
Language metadata
Font loading
CJK line breaking
Flexible layout
Accessibility
Localization review
Real-device testing

The goal is not to make Japanese text behave like English text.

The goal is to let each language behave naturally while both remain part of one coherent interface.

What mixed-script typography problem has been the most difficult in your own internationalized projects: fonts, wrapping, punctuation, performance, or accessibility?

DEV Community: jackdone

Japanese–English Web Typography Is More Than Choosing a Japanese Font

Understanding 恋みくじ

今日の恋みくじ

Understanding
恋みくじ