Japanese web design
I kept landing on Japanese sites that just felt different, calm and spacious in a way Western pages rarely are, and I wanted to know why. So I took a few apart, read the people who design and set type for Japan, and put what I found in one place, made visual.
It is two stories. One is the look: ma (間), the charged empty space; three scripts sharing a line; type set vertically like a book. The other is the craft underneath it, the typography rules that make dense, square, space-less Japanese text actually comfortable to read.
Everything is set in real Noto Serif and Noto Sans JP. At the end you can grab a drop-in CSS file, a Claude Code skill, or the whole page as a prompt.
情報ではなく、景色として。
Two poles
Japanese web design is not one thing. It pulls between two poles. One is dense and information-maximal: packed homepages, every link on screen, fine print everywhere, because in a risk-averse buying culture more information reads as more trust. The other is quiet and built on ma (間), the charged empty space you see on craft, hospitality and studio sites like the ones I love. This whole entry leans into the second pole, since it is also our minimalism.
Three scripts at once
A single Japanese line can run three writing systems together: kanji (漢字, meaning), hiragana (ひらがな, soft and grammatical), and katakana (カタカナ, angular, for loanwords). They already carry their own rhythm and hierarchy, so a line has texture before you touch a single font weight.
Vertical, on purpose
Set top-to-bottom, right-to-left, Japanese turns into something the web rarely shows. It is tategaki (縦書き), the setting of books and poems. On a page that scrolls down it is a deliberate, editorial choice, so save it for a pull quote or a title. writing-mode plus text-orientation is the whole trick.
writing-mode: vertical-rl;
text-orientation: upright; /* keep Latin + numbers upright in the column */Mincho or Gothic
The two families. Mincho (明朝) is the serif: triangular feet, strokes that swell and thin, a calm editorial feel. Gothic (ゴシック) is the sans: even strokes, clean for screens and UI. Match like with like, Mincho with a serif and Gothic with a sans, so the Latin and the Japanese in one line agree.
/* serif context */ font-family: "Noto Serif JP", Georgia, serif;
/* sans context */ font-family: "Noto Sans JP", system-ui, sans-serif;Proportional kana
The detail that separates a pro from an amateur. By default every glyph sits in its own square box, so kana and punctuation float with big gaps. Turn on font-feature-settings: "palt" and the font pulls characters to their real width, and the spacing tightens into something that looks set, not typed.
font-feature-settings: "palt" 1, "pkna" 1;The reading rules
The rest is small craft, the moves that make a wall of Japanese comfortable. Size it down about ten percent from the Latin you would use, open the line-height to around 1.8, keep a line to roughly 15 to 35 characters, and justify so it forms a clean grid like print. Toggle justify below.
美しいタイポグラフィは、読み手への思いやりから生まれます。文字の大きさ、行間、一行の長さ。小さな選択の積み重ねが、読みやすさをつくります。
font-size: 0.9375rem; /* ~10% smaller than the Latin equivalent */
line-height: 1.8; /* open the lines; dense glyphs need air */
max-inline-size: 30em; /* ~15-35 characters per line */
text-align: justify;
line-break: strict; /* kinsoku: never strand 。、）at a line edge */No italics, and don't cosplay
Two warnings. Japanese has no italic, so CSS font-style: italic just skews the glyphs into a fake slant. Emphasise with weight or 圏点 (boten dots) instead. And the bigger one: the look does not come from cherry blossoms, a torii and a brush font over a Western layout. It comes from restraint, type discipline, and real ma.
The font tax
A Japanese font holds seven to ten thousand glyphs, so the file can be 2MB or more. That single fact shaped the whole web here for years: old sites baked text into images or leaned on system fonts. Today you subset to the glyphs you use, or fall back to the system stack, and always name a Japanese family or browsers drop to the ugly MS Mincho.
Take it with you
One drop-in stylesheet with every rule above, or a Claude Code skill that teaches any agent to set Japanese the right way.
Code
/* japanese-type.css — sensible defaults for Japanese on the web.
Drop in, set lang="ja" on your <html>, and apply .ja to running text. */
:root {
/* Gothic (sans) — UI, body */
--font-gothic:
"Noto Sans JP",
"Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic,
Meiryo, "MS Gothic", sans-serif;
/* Mincho (serif) — editorial, headings, quotes */
--font-mincho:
"Noto Serif JP",
"Hiragino Mincho ProN", "Yu Mincho", YuMincho,
"MS Mincho", serif;
}
/* Running Japanese text */
.ja {
font-family: var(--font-gothic);
/* ~10% smaller than the Latin equivalent: full-square glyphs read larger */
font-size: 0.9375rem; /* 15px */
line-height: 1.8; /* open the lines; dense glyphs need air */
/* proportional kana + punctuation: the single biggest upgrade */
font-feature-settings: "palt" 1, "pkna" 1;
/* comfortable measure: ~15-35 characters per line */
max-inline-size: 32em;
text-align: justify; /* clean grid on both edges, like print */
word-break: auto-phrase;
line-break: strict; /* kinsoku: never strand 。、）at a line edge */
text-wrap: pretty;
}
/* Editorial / heading voice */
.ja-mincho { font-family: var(--font-mincho); }
/* Emphasis — Japanese has no italic. Use weight or boten dots, never a skew. */
.ja-em {
font-weight: 700;
font-style: normal;
text-emphasis: filled dot;
-webkit-text-emphasis: filled dot;
}
/* Vertical setting — a deliberate, editorial choice (pull quotes, titles). */
.ja-vertical {
writing-mode: vertical-rl;
text-orientation: upright; /* keep Latin + numbers upright in the column */
}