Skip to content
FontsNotoIconsKnowledgeFAQ

Typesetting on a curved path

The following guest article was written by Elliot Jay Stocks and Adam Twardoch*

Background reading:

Most of the time when we set type, we do so on a straight line, but occasionally we need to manipulate the baseline so that it follows a curve. And while this is generally rare, it’s something to consider when using type in circular interfaces, like those found on smartwatches.

Wrapped text on a watch-like interface, and zoomed in to show the curved baseline.

First, it’s useful to understand that there are two fundamentally different methods to setting type on a curved path: Warping and wrapping.

The first method, warping, is where the actual geometry of the glyphs is changed by the curve. The greater the font size, or the more intense the curve (the effect is the same), the more the letterforms are distorted. This is particularly evident on the "E" and "D" glyphs in the illustrations below, where the stems get wider as the shape is further away from the transformation center:

Three settings of the word “Warped”, on the same sized circular path, but each at a different font size. The distortion increases from left to right.

Warping. Circle path remains the same; font size changes. Typeface: Roboto Flex.

Three settings of the word “Warped”, on three circles of a different size, but each at the same font size. The distortion increases from top to bottom.

Warping. Circle path changes; font size remains the same. Typeface: Roboto Flex.

Generally speaking, warping does not produce good results, unless a very specific aesthetic style is desired (perhaps for logo work), and is not recommended in most circumstances—especially for UI work.

The second method, wrapping, is where we set text along a path so that each glyph is rotated and placed accordingly, therefore maintaining the intrinsic geometry of the glyphs. Again, the greater the font size, or the more intense the curve (the effect is the same), the more obvious the baseline distortion becomes.

Three settings of the word “Wraparound”, on the same sized circular path, but each at a different font size. The distortion increases from left to right.

Wrapping. Circle path remains the same; font size changes. Typeface: Roboto Flex.

Three settings of the word “Wraparound”, on three circles of a different size, but each at the same font size. The distortion increases from top to bottom.

Wrapping. Circle path changes; font size remains the same. Typeface: Roboto Flex.

Despite this, when setting type around a full circle, it usually looks better to have the text occupy more of the circle.

“House Plant Heaven” set around a circle, with the first two words around the top and the word “Heaven” at the bottom. Then, the same again, but without the word “House”.

The hypothetical logo on the left looks better, as it helps imply the whole circle. Typeface: Anybody.

However, the wrapping or rotation-based option will potentially introduce noticeable visible changes to the spacing between characters. This is perhaps more noticeable with condensed type, but then wider type creates its own issues, as the rotation of each glyph becomes more obvious.

“Lazy dogs” set around two circles of the same size, at the same font size, but with different width settings for the type. The wider type takes up more space around the cirle.

Experimenting with the width axis in Anybody.

With this in mind, it’s advisable to experiment with different widths and different tracking settings depending on the angle of the curvature and the size of the font. Variable fonts with a width axis can be particularly useful in this regard.

All-caps type can work better due to the uniform shapes and sizes of the letterforms, but sentence case type can be fine if the typeface has a large x-height and relative open tracking, as with Roboto:

An approximation of a map, with curved text denoting street names. There are two examples, each using the same road shapes, but with the text set in uppercase in the first example, and sentence case in the second.

To an extent, serifs can help to minimize the distorted spaces between glyphs. With serifs, the inter-character spaces are irregularly shaped already, so adding the bending is less noticeable:

“Mind the gaps” set on identical paths, but in a sans serif typeface on the left and its slab serif counterpart on the right. Then, beneath, the same type with the spaces between the letterforms highlighted.

With the sans serif, the triangular gaps become more consistent and obvious, and potentially more distracting. Typefaces: Roboto and Roboto Slab.

So, to summarize:

  1. Warping rarely produces good results. For UI design, use wrapping instead.
  2. More characters, larger font sizes, and greater curvature angles will all exaggerate the reader’s perception of the curve, so combine with care.
  3. The rotation of each glyph is more noticeable with wider characters, but the space between each glyph is more noticeable with narrower characters. Adjust font size and tracking accordingly to achieve the best balance.
  4. If you have to use a typeface with a small x-height, try an all-caps setting.
  5. Use serif typefaces to mask the more exaggerated spaces between characters.

* Content is owned by Google. Thank you to Lily Darling and Laurence Penney for reviewing this content.

Further reading: