gizmobench

Curved Text Generator

Type a line and set it on a top arc, a bottom arc, a full circle or an arc you define by angle and direction, in one of nine fonts that ship with this site or a font file you import. The preview is the SVG the tool saves, with your words kept as real text on a text path, and the PNG is drawn from the same numbers, transparent and cropped to the ink or on a background colour you pick. The bottom arc runs counterclockwise so it reads left to right, a character missing from an imported TTF, OTF or WOFF font's own character map, or outside the Unicode ranges this site serves a built-in font for, is flagged with its code point, and Spread evenly sets the letter spacing that fills the arc or rings the circle.

Preparing the preview.

Path
Top arc, 180°
Radius
160 px
Arc length
502.7 px
Characters
none yet

Path

Radius
Arc angle
Directionclockwise, letters outside
Alignment
Baseline shift
Rotation

Position and rotation count degrees clockwise from 12 o'clock. Dragging across the preview turns the design too.

Type

TTF, OTF, WOFF or WOFF2. It stays on this device and is not saved with the settings; using it in a design needs your own rights to that font.

Weight
Size
Letter spacing

Spread evenly sets the letter spacing so the text runs from one end of the arc to the other.

Colour

Fill
Outline
Background

Export

PNG scale

The PNG size shows here once there is text to draw.

The SVG keeps your words as real, selectable text on a text path and names the font; a program that does not have that font draws a substitute, while the PNG is drawn in the chosen font from the same letter positions as the preview.

Common questions

How do I make text go around a circle?
Type your text, choose Full circle and set the radius. The text starts, centres or ends at the position you give (0° is 12 o'clock, counting clockwise) and runs clockwise, or counterclockwise so the letters face the centre. Spread evenly sets the letter spacing so the text rings the circle with equal gaps. The circle is one closed path of 2πr, so a radius of 160 px gives 1005.3 px of path.
How do I put text along the bottom of a circle without it being upside down?
Choose Bottom arc. Its path runs counterclockwise from 9 o'clock through 6 o'clock to 3 o'clock, so the letters read left to right and stand upright with their tops toward the centre. The characters stay in the order you typed; only the direction of the path changes. On a custom arc or a full circle, Counterclockwise does the same anywhere on the circle.
Can I download curved text as a transparent PNG or an SVG?
Yes. PNG draws the design at 1x, 2x or 4x on a transparent background and crops it to the ink, or on a background colour if you choose one. SVG keeps your words as real, selectable text on a text path, with the outline and shadow in the file. The SVG names the font, so a program without that font installed draws a substitute; the PNG is drawn in the chosen font from the same letter positions as the preview.
Can I use my own font?
Yes. Import a TTF, OTF, WOFF or WOFF2 file of up to 40 MB. It is read in this browser tab and not uploaded, and it is not kept with the saved settings, so after a reload you import it again. Using a font in a design needs your own rights to that font. Font collections (.ttc) are refused: choose a single TTF or OTF instead.
Why is one of my characters flagged?
For one of the nine built-in fonts, it lies outside the Unicode ranges this site serves that font for, the same ranges the browser uses to decide which font draws each character, so the browser draws it in a fallback font. Those ranges bound a font rather than list its glyphs, so a symbol inside them that the font leaves out is not flagged: ‰ is one, inside the ranges of all nine and in none of the files served for them. For an imported TTF, OTF or WOFF file, the tool reads the font's own character map, so a flagged character is one that font has no glyph for. A WOFF2 file keeps its character map Brotli-compressed, which this tool does not unpack, so its characters show as not checked; import the TTF or OTF version to check them. The description under the preview lists each flagged character with its code point, such as ★ (U+2605).
What happens if the text is too long for the arc?
A character whose midpoint falls past either end of the path is not drawn, and saving waits with a message giving both lengths, for example: the text runs 200 px but the arc is 157.1 px, so 4 characters would not be drawn. The description under the preview always shows the text's length against the arc's. Shorten the text, lower the size or letter spacing, or raise the radius or the arc angle.
Does it remember my design?
The text and every setting are kept in this browser and restored on your next visit; Start over clears them. Save settings downloads the same settings as a small JSON file, and Open settings reads one back. Your text and fonts are not sent anywhere.

The curve is exact geometry: a full circle is one closed path of 2πr, and the letters follow it in the order you typed, whichever way the path runs. How tightly letters sit is decorative and depends on the font; a character is flagged when it is missing from an imported TTF, OTF or WOFF font's own character map, or lies outside the Unicode ranges this site serves a built-in font for, so a symbol a built-in font leaves out inside those ranges (such as ‰) is not flagged, and a font whose character map cannot be read, such as an imported WOFF2 file, is shown as not checked. An imported font stays on this device, and using it in a design needs your own rights to that font.