Home / Typography / Vertical Text
Vertical Text CSS Template, Free with Live Demo
Free vertical text website template for a Japanese tea house. Top to bottom writing with CSS writing-mode, vertical labels and a red stamp. Live demo. The example is Kumo, a Japanese tea house.
What is vertical text?
Vertical text runs from top to bottom instead of left to right. In Japanese and Chinese it is a traditional way to write, and on the web it adds a calm, poster like feel to a layout.
CSS writing-mode: vertical-rl turns any element vertical. Japanese characters stand upright on their own, and English stays readable too. It is real text, so it can be selected, translated and searched.
Good for
- Japanese, Chinese and Korean brands
- Tea houses, restaurants and ryokans
- Fashion and editorial layouts
- Side labels and section markers
What you get in this template
- Large vertical Japanese headline with writing-mode
- Red vertical stamp like a seal
- Menu with vertical labels beside each item
- Correct lang="ja" on Japanese text
- Noto Serif JP and Zen Kaku Gothic New fonts
The key CSS
This is the part that makes the vertical text look work. Copy it into your own project.
.v {
writing-mode: vertical-rl;
text-orientation: mixed;
}
.jp {
font-family: "Noto Serif JP", serif;
font-size: clamp(3.4rem, 8vw, 6.4rem);
letter-spacing: .1em;
}How to use it
- Click Download HTML file above.
- Open the file in any code editor, like VS Code.
- Change the text, colors and links to match your project. Colors are at the top of the style tag.
- Upload it to any host, such as GitHub Pages, Netlify or your own server. It is one file with no build step.
Questions people ask
How do you make vertical text in CSS?
Use writing-mode: vertical-rl on the element. Lines then run top to bottom and stack from right to left.
What is the difference between writing-mode and rotate?
Rotating turns the whole box sideways. writing-mode changes how text flows, so CJK characters stay upright and layout works properly.
Is vertical text accessible?
Yes. It is real text, and screen readers read it normally. Add the right lang attribute so it is pronounced correctly.
More Typography designs
051. Kinetic Type
Shift, a dance studio
052. Variable Fonts
Flexa, a type foundry specimen page
053. Oversized Serif
Maison Clair, a boutique hotel
054. Outline Text
Museum of Sound, an exhibition site
055. Mixed Font Pairing
Paper Lantern, an independent bookshop
056. Image in Text
Alpenglow, a ski resort
057. Gradient Text
Sunset Sound, a festival lineup
058. Handwritten Accents
Nonna's Kitchen, a cooking school