Vertical Type

Vertical Type sets real tategaki.

Japanese is written vertically in books, posters and signage, but the web still sets it sideways. Framer has no vertical text, and CSS writing-mode alone is not enough: numbers lie on their side, ruby lands on the wrong edge, and lines break in front of a small tsu. Vertical Type sets real tategaki. Text runs top to bottom, columns run right to left, and the details that make vertical Japanese readable are handled for you. Ruby (furigana) written inline as 漢字《かんじ》 or ｜好《す》き, placed on the correct side of the column. Tate-chu-yoko: runs of digits stand upright inside the vertical line, so 4時 and 2026年 read as they do in print. Kinsoku shori: small kana, closing brackets and punctuation never start a line. Emphasis dots (bouten) written as ＊語＊, the Japanese equivalent of italics. Optional column-by-column reveal, with duration, stagger and shift as controls. Font, colour, line gap, tracking and alignment are ordinary Framer controls. Zero dependencies. Nothing is loaded from outside your site. Renders correctly in static export and on the canvas. Built by KHZ ART, a Tokyo studio that sets Japanese type on the web.

Vertical Japanese type with ruby.