BittBox

DESIGN: Using Typography to create Texture

If our freebies have benefited you personally or have helped you earn a profit please consider donating via paypal. Donate Now

It’s often a challenge to really play with typography as a design element itself. It’s no secret that type plays a significant role in a lot of the design world, both print, web, and beyond. But typography itself is a nice easy way to experiment with your design to see what you can come up with, given the circumstances allow for it. I have to sometimes force myself to do this, but it’s a really nice way to add a little extra if done right. Typography, especially scaled way up, can be a powerful addition to your design, and even a texture layer at times. I will use the font Sidewalk from a previous post as an example.

Because fonts can be easily outlined in vector format, we have the freedom to transform a character into an object, and further into a group of objects, scale it without limit. Grouped, overlapped, and layered, typefaces can become in themselves, a texture at times, worthy of exploring as a designer, and there are plenty of textured fonts out there, completely free.

Dafont is by far my favorite free font site, constantly updated, and very easy to use site. Check it often for “New Fonts.” (I do almost weekly)

Tips for exploring this on your own:

1. You can easily convert typography from type to a shape in illustrator by outlining the font. After you do this, the font now becomes a shape for you to manipulate as if it were a custom grunge shape, behaving more like a texture instantly.

2. Overlap diferent words/characters and use the Pathfinder (explained in this post) palette to create intricate custom designs based on the type.

3. Play around with transparency (opacity), layering and color. Don’t be shy, maybe even try some gradient fills. The sky is the limit. The point here is to explore type in a new way.

My favorite free font site: Dafont.com

Dafont’s Eroded section.

Dafont’s Distorted section.

Dafont’s Destroy section. (my Fav)

Download an Example:

I included a stripped down version of the file above for you to download. (The File above is 26 MB, too big because of all the outlined text, so I stripped it down to the essentials) You might notice that I don’t use much transparency, just a variety of colors and layers. But again, the possibilities are endless, and I encourage you to explore and experiment on your own with a variety of fonts.

Download the Type Texture Example

Includes: – AI (2) EPS (1) SVG (1)

Download the Seamless Vector Star pattern I used in the example above

Includes: – AI (2) EPS (1) SVG (1) PNG (1)