Typography: Ligatures are an inspiration to me

logo story of your life
Logotype for a special product of a Dutch video-company

My desk is a mess. I’m really jealous of people who can clean up properly, because that is a quality I lack.
So if you would first see my desk , you wouldn’t believe how precise I am as a graphic designer. I am great on the square millimeter.

I designed this brand for a special product of a Dutch video-company. It’s a combination of a script font and a serif font. And has two ligatures.

Ligatures

In the old days of lead typesetting, some combinations of letters caused big problems. The f , for instance, had a flag that hung over, making it a vulnerable part of the letter.
If the next letter was an i, the curl of the f and the tip of the i would clash against each other, which could demolish the f. Such a letter pair was redrawn as a new symbol, called a ligature.

ligature inspiration
The combination of the letters f and i caused a big problem in lead typesetting, so the pair of them were redrawn to a new character. A ligature.

A well-known ligature over here in Holland is the old florin sign fl. Other ligatures are:

  • the character that is used in email addresses, the at-sign @
  • the ampersand or et-sign &

In some fonts, the origin of the ampersand, the e and the t, is still recognizable.

origin of ligature ampersand
The ampersand is a combination of the e and the t. ET is Latin for ‘and’. Laurel & Hardy, Barnes & Nobles, etc. In some letterfonts the original combination is very recognizable.

Ligatures inspiration

Nowadays ligatures are not current. Computer typesetting does not require ligatures any longer. Although programs like Adobe InDesign give you a choice to use ligatures in your text.

I love combining old knowledge and new techniques, which is the reason I make ligatures myself sometimes.

In “The story of your life” I have made a combination of the y in ‘story’ and the r in ‘your’. Both letters end in a little circle that I have redrawn into a new sign.
The other ligature is more difficult to discover: it’s a combination of the y in ‘your’ and the i in ‘life’. The dot in the i is made a bit smaller and fused with the tail of the y.

part of the letter combinations
2 ligatures

Precisian

As I stated in the beginning of this blog: a graphic designer has to be precise. A lot of my work is often not noticeable. Adjustments I made in this logotype to make it balanced and matter-of-course are:

  • ‘the’ is positioned in a way that the e and the top of the t are nicely going together.
  • I shortened the flag in the first f so the space between the s, t and y is in balance. I didn’t want the transverse line of the f collide with the l.
  • Then the tail of the f is extended. There is now an imaginary horizontal line along the bottom of the f and life.

Little pleasures

It’s tiny details like these that make my work such a joy. It’s funny that the best results emerge when the changes I make are so natural that they are barely noticed. That’s why I always make a booklet for the client to explain the whole process and show him or her the steps I took.

Do you want your own favicon on your website?

A favicon is a small image identifying a website. Depending on your browser you see it in the tab at the top or in front of the web address. Mine is an image of the 2 c’s of CleverCreating. Have a look at the top of this page!

This only works on a website to maintain yourself. Not on for instance a blogger-website or a wordpress.com-website.

favicon by CLEVERcreating

A favicon as my gift to you

I made 36 favicons for you to choose from. 🙂
Download a zipfile using this button:

User’s Guide:

  1. Choose a nice favicon.
  2. Download the zip-file with all the favicons in it.
  3. Open the zip-file by double-clicking it.
  4. Right-click the chosen letter or number and change the name to favicon.ico
  5. Put the ico-file into the root of your website.
  6. Usually, you will see the favicon at your web address (if necessary, refresh the browser). Sometimes your index page needs an additional code. Ask me for it if you don’t see it after refreshing the browser.
  7. P.S. Please only use it personal. These are not meant for selling!

If you are interested in more information then have a look at this wikipedia page.