Roberto Cecchi created and posted his Aierbazzi (which means “weeds”) font to his web site back in 2008. He has been experimenting with fonts creating illustrations in a simple format, and he has posted creative use of this font for non-commercial applications. The letters in the font are placed one above the other, layering and building a new shape. It’s an interesting concept, and I wanted to re-share it here.
Demo:
Enter a word or phrase in to the box below to see how the illustration begins to emerge. On load, the illustration shows what “ZoomCreates” looks like. Numbers and symbols won’t work, so you must only use upper and lowercase A-Z characters. Also, no spaces allowed.
Here at Zoom Creates, we continue to apply open font use to our web sites and applications, to better tie together web code and design typography. There are simply far too many applications to list, and we find designers and developers all over modern web sites finding new ways to explore these concepts.
To get started, download the @font-face kit from a source like FontSquirrel. Install the files on your web server in a location you can remember. Next, make sure you have a compatible version of jQuery installed. Any version put out in the last year should do nicely.
Write the CSS
This will go inside your included CSS file. Note: this code is included with your downloaded @font-face kit.
@font-face {
font-family: 'AierbazziRegular';
src: url('/path-to-font-file/aierbazzi-webfont.eot');
src: url('/path-to-font-file/aierbazzi-webfont.eot?#iefix') format('embedded-opentype'),
url('/path-to-font-file/aierbazzi-webfont.woff') format('woff'),
url('/path-to-font-file/aierbazzi-webfont.ttf') format('truetype'),
url('/path-to-font-file/aierbazzi-webfont.svg#AierbazziRegular') format('svg');
font-weight: normal;
font-style: normal;
}
Write the HTML and jQuery
This is your input element and the span which uses the AierbassiRegular font-family to write the typed characters.
<input id="input-aierbazzi" onkeyup="$('span.illustration').text(this.value);"
name="input-aierbazzi" size="30" type="text" value="ZoomCreates">
<span class="illustration" style="font-family: AierbazziRegular;
font-size: 250px; color: #000;">ZoomCreates</span>
Additional mods to try:
I’d like to modify this later to randomly choose a color for each character being typed. Also, playing with alpha opacity would be fun. Writing most of the jQuery in to a function would be another great way to handle these additional mods. Finally, writing some code to not allow the typing of invalid characters will help overall user experience. Give it a try and let us know what you come up with.
I just came across a very beautiful presentation of exactly what I’m describing at andysmith.co.uk. Check that out.
Tags: CSS, design, font-face, Illustration, jQuery, Typography, web
