.font fun {sketch font}

I love working with typography and font manipulation so I thought, “What better place to share my interest than on my blog?!” Every time I find a new typography tutorial, tip or trick, I will share it in a post about font fun! Today, I will be sharing the simple joy I get out of the sketchy font trick. Note: for the duration of this post “sketchy” refers to a particular pencil stroke and outcome, not an adjective you would use to describe someone that makes you uncomfortable.

Here’s an example of the sketchy font trick:

Sketch Font

TutorialMagazine.com‘s tutorial about creating a sketch font in Adobe Illustrator helped me build a foundation for this post. I tweaked almost all of the property values to create the example above. In the process, I  learned how to manipulate a lot of fill and stroke properties for future typography work.

Having a command over the fill elements of a font opens doors to a lot of typography related possibilities. When working with solid colors, the fill is in the internal color/texture of a shape or, in this case, typography. To change the fill properties, use the Appearance window in Illustrator. For the sketch font effect, use the Effects > Stylize > Scribble… menu. I find it helpful to select the Preview box (under the “OK” and “Cancel” buttons to the right) because you will see the edits as you change property values.

There are several options that you can edit to customize this scribble effect, but don’t let the quantity intimidate you! First, I suggest playing around with them. Save your work periodically so you don’t loose anything valuable and don’t forget that you can press “Cancel” at any time to reject current changes. Let’s start slow and work through all of the custom setting options within the Scribble Option menu. Below is a screenshot of the Scribble Options menu after I designed the sketchy font effect above.

Example Settings Option Menu

Settings: This drop-down menu controls a few pre-programed settings provided by Illustrator.

Angle: The angle controls the orientation of your line scribbles. Imagine, holding a pencil and drawing lines from left to right on a piece of paper angled at the number you specify.

Path Overlap and Variation: The path overlap controls where the scribble is centered. Values closer to 0 result in a scribble centered in the center of the shape/font versus values further from 0 that will scribble well outside the shape. The variation changes the randomness of the scribbles.

Line Options: These options are pretty self explanatory and control the actual stroke properties (width, spacing, curviness, etc) of the line.

Stroke Width: Controls how thick or thin the line is. Not much of a surprise there.

Curviness and Variation: On a scale of 0 to 100 (with 0 being straight lines and 100 being curvy or loopy lines), the curviness controls how loopy the lines are. It’s basically the difference between doodling with straight lies or curvy strokes. Much like the variation mentioned above, the curviness variation controls how together (and clean) or spread out (and messy) the lines look. Remember, when it comes to design, clean and messy are mere adjectives and don’t indicate how good the final product is, since each is unique.

Spacing and Variation: Surprise! Spacing controls the amount of space between your scribble lines and the variation controls how random your line spaces are. The greater your variation, the messier or more random the final product.

This is really simple and cool tricks that can use to spice up your typography. In my opinion, its easier to try out some of the scribble effects using a big rectangle instead of a font. For some of the properties, especially spacing and variation, you won’t notice the changes because typography doesn’t offer as much functional space as a large rectangle.

I hope you consider trying sketch font the next time you want to add some flare to your next design project. Happy typing!

.font face

No one can doubt that web development has come a very long way over the years. As developers, our accomplishments are restricted only by our imaginations and, as empowering a concept, font selection has been the exception to that rule. Font selection for websites is usually limited to the basic serif (i.e. Times New Roman) and san-serif (i.e. Veranda, Arial, etc) fonts to regulate text presentation. I could go into a grand history lesson about typography and how users perceive different fonts but that would be no fun. Instead I want to share a great way to utilize unique font types on the web.

I am a big fan of interesting fonts as a tool to further the reach of my graphic design work. I found DaFont.com a few years ago and have been exploring and downloading fonts for free ever since. The only short coming was my inability to bring these great fonts to my web development work. At the end of the day, no matter how many great fonts I had up my sleeve, I was stuck with the generic serif and san-serif font palatte.

A good friend and experienced web developer introduced me to font-face, a CSS trick that allows web browsers to display unique fonts. The infrastructure for this trick has been around for a while, but few browsers supported it. [More information on the history here, on css3.info] I decided to give it a try with…


…one of my new favorite fonts from DaFont.

h4 { font-family: Greenbeans; color: #00CC00; font-size: 3.5em; }

@font-face {
font-family: "Greenbeans";
src: url('http://www.monetspells.com/Greenbeans.ttf') format('truetype');

The entire process is very simple and only required a font file upload and a url navigation code in the CSS. I decided to create a new header type that would feature the Greenbeans font type and a funky green color (above and below).

The quick brown fox jumps over the lazy dog.

Please note, the font change will be visible for users viewing this page in the most updated versions of Safari, Firefox or Internet Explorer and those who have the font installed. Here is the sample Greenbeans font change in image form if you are using an older browser version…

Here are some really helpful tutorials and links to get you started with @font-face.

Tutorials and Helpful Links:

1. Web Fonts with @font-face
Web Fonts with @font-face
2. @font-face in the wild
@font-face in the wild
3. @font-face
4. www.css3.info [main page]
5. Mozilla Developer Center [main page]