Vertical Fonts: CSS Writing Modes and Upright Lettering

W3C’s Writing Modes specification separates block flow from the orientation of characters within a line. It also describes changes to punctuation and alternate glyphs in vertical typesetting. Its internationalization guidance distinguishes vertical line progression in Chinese and Japanese from the different progression used for Mongolian. A special-looking alphabet or a rotated image therefore cannot stand in for the writing conventions of every language.

For a short original Latin display heading, preserve the normal spelling in HTML and use CSS to change its presentation. This example stacks upright characters and makes additional vertical lines progress from right to left:

<h2 class="vertical-heading">STUDIO</h2>

.vertical-heading {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

Compare Inter and Montserrat below for the letter shapes before applying this page-level treatment. The static specimens do not change writing direction or export the CSS. Keep ordinary paragraphs horizontal when that better serves the intended reading task.

With vertical writing, mixed orientation and upright orientation are separate choices. W3C’s examples show Latin text treated differently within vertical Japanese text. For an actual multilingual project, use the language’s correctly entered wording and a suitable font, then inspect punctuation, numerals and embedded names together. Do not insert a line break after every character as a replacement for proper vertical typesetting; that changes the text structure without addressing the relevant typography. Consult the Japanese guide for its separate language and font decisions.

A vertical heading consumes space differently from its horizontal version. Test the longest actual word, a two-word heading and the narrowest intended container. Ensure the heading does not crowd neighboring controls or disappear beyond a cropped box. Compare the reading order with the ordinary editable text and provide a horizontal arrangement for contexts where the vertical treatment is impractical. For print or image artwork, inspect the exported result separately rather than assuming the browser layout determines every output format.

The artwork tool above supplies three separate layouts: an upright Latin letter stack, a whole phrase turned 90 degrees clockwise and a horizontal comparison. Choose the same wording and typeface when comparing them. The stack accepts up to 40 Latin letter groups with digits, punctuation and spaces; accents stay with their letters, and spaces occupy blank slots. Extra gap changes the stack, while the maximum-size control sets an upper limit that can be reduced to fit the image.

Download PNG saves a 1080 × 1350 image, with a solid or transparent background. The result is fixed artwork rather than editable CSS vertical text. Use the writing-mode guidance above for native page layout, particularly where language-specific punctuation and line progression matter. For a larger stack, reduce the gap or shorten the wording rather than discarding letters. A font-loading error disables download instead of presenting an unconfirmed preview as ready.