HTML & CSS
Article
By Jennifer Farley

Create Your Own Scribbled, Scratchy Typeface In Illustrator

By Jennifer Farley
Help us help you! You'll get a... FREE 6-Month Subscription to SitePoint Premium Plus you'll go in the draw to WIN a new Macbook SitePoint 2017 Survey Yes, let's Do this It only takes 5 min

The hand-drawn look is still popular on the web. Scribbles, doodles, scratchy writing and hand drawn elements can be combined to create a less polished, homemade look for your web site. There are a large number of hand-drawn fonts and other design elements available to download, but today I wanted to show you how to take any font in Illustrator and give it a scribbled appearance. It’s incredibly easy to do using the Scribble command and you can create some very nice effects.

So let’s start by opening a document in Illustrator and adding some text.

  1. I’ve used Myriad Pro Bold Condensed (which you should have on your system if you have Illustrator installed), but this effect works well with all kinds of typefaces. The font size here is 120px, the fill color is black and there is no stroke.
    Step1
  2. With the text still selected, choose Effects > Stylize > Scribble. The Scribble Options dialog box opens and your text will change immediately. Make sure you have the preview box checked so you can see the changes.
    Step2
  3. Now, we can play around with the sliders to achieve different types of scribbles. I made the stroke width thinner, the line loopier with tighter spacing and also changed the variation on each of these options.
    Step3
  4. When you’re happy with your text, click OK. And that’s it. The really cool part about using this method is that the text is still editable and any extra characters you add will automatically take on the scribble effect.
    scribble-text
  5. By playing around with different fonts you can get some interesting and fun results. Here’s a few more examples created using various scribble settings.

scribble-examples

--ADVERTISEMENT--

Have you used the Scribble command before? What else have you applied it to?

Related Reading:

Login or Create Account to Comment
Login Create Account
Recommended
Sponsors
Get the most important and interesting stories in tech. Straight to your inbox, daily.Is it good?