Customizing my font

09

Mar

From the first moment I thought about building my own web site I decided I wanted to do everything as personal and customized as I could. Fonts are one of the most important aspects in web design and sadly the possibilities of customizing are very short because of impossibility of the browsers today to recognize a font that is not installed in the user’s computer. It is possible though to customize small portions of text with a technique that we’ve been using at Intuitive Designs for different web design projects. I have to say that I am not a professional font designer, although I have designed a few fonts before. I just thought it could be interesting to share the way I build my own web site, and this is another part of the process.

Font Sample

The first step to build my own customized font was to make a sample sheet with my own script, which I did using a special calligraphy pen that I’ like to use to write personal letters and special signatures. So I did several versions of each letter in the alphabet in order to have different options to pick. I did samples of all of them, including caps, as well as special punctuation signs that I may use and other symbols. Then I got them all scanned and did a selection on the computer.

Once I have all the sample letters selected I edited them one by one with a vector program, cleaned them and made them even. It is very important at this stage to use a geometric grid to compare all letters and made them even. Hand writing is not something really even: every letter in the paper is different, and it is great to keep this kind of sense of imperfection in the scripture in order to make it appear believable. In the other hand, it’s very important to keep a sense of balance and consistency between all the letters. Especially in terms of proportions and angle, or they would look like been written by different people.

Font Sample

After having all my individual letters clean, I put tested them by writing different combinations of vowels and consonants and see how they work together. This is a long process that requires to get them corrected again and again, especially the spacing between the letters. Another important aspect to keep in mind is how much vertical space the letters develop. Letters like T, L, J and G need a lot of care and attention so they won’t invade the upper and lower lines in the paragraph.

For building the font I particularly used Font Creator but there are other programs you may use to create fonts. I copied and pasted the letters from vector to this program and then got them adjusted and re-scaled.

Finally, when I got my font installed and full working, the next step was to make the font work in my web site. I have to say that my wife Naomi did this for me because she is the specialist in our design studio in these matters. Naomi used a script called sIFR that you can download and learn how to use at Mike Davidson’s sIFR. Basically, it works by using a combination of javascript, CSS, and Flash. The guys who developed it did a wonderful contribution to the web design for sure!

Font Sample

So, that’s pretty much how it looks, all you can see in the menu and headings in the web site are not images but actually html that is fully recognized by search engines. Pretty cool! And the most important, for me, is to be able to have my own signature and my own personality in my web site. Like a real footprint. After all, I think if more artists and designers would customize more their web sites the Internet would be a more exciting and personal place. The whole process was really long and it meant quite a lot of work, but I think it is really worthwhile since my calligraphy will always be the same and now I’m going to be able to use it in my computer for the rest of my life.

Note: The final design of this web site will be posted in a couple of weeks and you won’t be able to see the font working until the new design is up. Please be patient.

Comments

  1. Thursday, March 13th, 2008


    [...] in my web site to make it as much personal as possible. I wrote a blog post in my web site about the process of using my own customized font, but the new design featuring the font is still under development and it won’t be on line [...]

Leave a Comment! - Deja un comentario!