fontwarp

CSS text to path generator

What's this all about?

back

CSS3Warp is a proof of concept: create Illustrator like "warped" text (text following an irregular path) with pure CSS and HTML.

How does it work?

CSS3 brings new text-transform options: rotation, skew, matrix, transform-origin... By applying the right transformations to every single letter it is possible to create the illusion of text following a path.

Type your text into the webform, click "Warp it!", then alter the path as you like. You can attach your text to a circle or a bezier. Add or delete points, or change position, angle and radius of the circle. When you're done, click "Generate code". Copy the CSS and HTML into your document.

About Font usage

You have two options:

  1. Choose a font from the Google Font-Directory for warping.
  2. Tell your webbrowser which local font on your machine you want to use.

The second option can be problematic, as your browser won't find the font if you do not specify the exact name here. The "exact" name must not necessarily be the same name you see in a dropdown menu in some word processor. Use some font inspection software if you can't get your font working. It's also possible that your browser doesn't like the format. Use a different browser, or a service like fontsquirrel to convert your font.

Units

At the moments px and points are possible. I'm still examining how other units work. If you need values that are outside of the range of the sliders type them into the form fields.

What's next

I plan to add some functionality over time:

  1. Kerning Tables: this is a must. Proper text warping needs individual kerned letters.
  2. Local storage. Would be nice not to start all over again every time you come here, right?
  3. Dynamic font warping with Javascript. The warping style sheet can be VERY big, as you have to apply multiple CSS-transforms and multiple vendor-prefixes to every single letter. Passing the functionality to a javascript can help to keep things lean.
  4. Undo/Redo. One more nice to have.

Input and suggestions

If you have an idea, a feature request, found a bug or just want to tell how much you love this tool please use the contact form on my blog.