Typodesign← Back to home

Break a word with sliders, then save it as SVG.

Typodesign is a free type tool that runs in your browser. Type a word and drag any of its eight sliders: the letters redraw while you drag, and Export SVG saves the result as a file.

Open Typodesign
Glitch 0Move the cursor across the lettersDrag a finger across the letters

Watch one word go from five clicks to a file.

A recording of the real tool. NOISE is typed by clicking letters in the specimen under the preview, then goes through Glitch, Advanced glitch, Distort, Creepy, Slant and Line thickness before Export SVG saves it.

yurabruskov.github.io/typodesign

Drag one slider and watch the same word change.

Every slider redraws the whole word while you drag. Glitch, Advanced glitch and Distort are random and roll again on every move, so no two passes look the same.

Glitch knocks up to three strokes of each letter out of place. Past 50 each of them also gets a shifted copy.
Creepy swaps the thin lines for spiky serif letters, A to Z.
Distort pushes every point along a wave and shakes it a little.
Advanced glitch slices the letters sideways and stacks shifted copies on top.
Slant leans the word up to 45° either way.
Height stretches the letters up and squashes them flat. Width does the same sideways.
Line thickness goes from a hairline at 1 to a marker at 20.
Letter spacing goes down to −200, so the letters pile into each other.

Drag the sliders with your thumb and keep the word in view.

The same page fits a phone in one column: the preview on top, the sliders under it and Export SVG at the bottom.

  1. The word stays in view

    Scroll down to Shape and the preview stays pinned above the sliders, redrawing as you drag.

  2. Type an exact value

    Each slider has a number box next to it. Type 37 and the slider jumps to 37.

  3. Export stays under your thumb

    Reset and Export SVG are pinned to the bottom of the screen while you scroll.

Download the word as an SVG you can keep editing.

Export SVG saves a file called typodesign.svg. Each letter is its own group, drawn as a line with round ends, so in Figma or Illustrator you can still change the width and the color of the stroke.

The exported file: the word NOISE in glitched Creepy letters.
typodesign.svg as the tool saved it at the end of the film: NOISE in Creepy, with Glitch 28, Distort 10, Slant −14 and Line thickness 3.
<svg
    xmlns="http://www.w3.org/2000/svg"
    width="525"
    height="120"
    viewBox="0 0 525 120">
  <g>
    <g transform="translate(0, 0)">
      <path
        d="M 44.39,23.00 C 48.82,18.50 47.57,21.90 46.…"
        fill="none"
        stroke="#000"
        stroke-width="3"
        stroke-linejoin="round"
        stroke-linecap="round"
      />
    </g>
    <g transform="translate(105, 0)">…</g>
    … 5 letters, 5 paths
  </g>
</svg>

Type your own word and break it.

It is free and runs in the browser, with nothing to install and no account to make.

Open Typodesign← Back to home
I made this page with a prompt. Want one like it for your product? Landing Studio →