Basic Typography Tricks Every Designer Should Know

I think it is hard to deny that today the word has a powerful influence on the way of thinking. So the style of the text, the manner it is represented is a huge instrument to control the perception of the content by your readers. Web typography begins its history from 1991 when Tim Berners-Lee launched a first web site.

Making a cool and clean typography is a basic skill of any designer. But there is one question "how?". Internet is full of different guides on how to create effective typography.

First off all we should understand that good typography isn't only a unity of good font and color. Like every tasty dish, typography has its own recipe. The arrangement of type involves the selection of typefaces, point size, line length, leading (line spacing), letter-spacing (tracking) and kerning. Below you can find some recommendations that are worthy to be kept in mind if you want to create a user friendly and quality typography.

Contrast should be pleasing for the eyes

Pale pink text on a pale blue background maybe a cool solution for your T-shirt, but it's a a bad idea for your text. The main purpose of any text is to be read, so you should verify with your color combination till it will become comfortable for reading. Typography can skilfully reflect your content.

There are seven types of contrast: by means of size, weight, structure, form, texture, color, direction. Size contrast is a basic, simple but sharp type. Usually we use size contrast to make title or heading noticeably bigger than the text. Weight contrast is reached by using bold type. Form contrast and structure contrast deal with shapes of letters. Turning one word on its side can cause the contrast of direction. Here you use the opposition between vertical and horizontal.

Does size matter?

Some designers believe that small text gives a Web page a sleek appearance. They use small fonts to provide more space per "page" for actual content. It is quite annoying. If you create your site not only for Supermen with an excellent eyesight, you should choose a userfriendly size for the text. The main text of your site can't be smaller than 12px.

Lost in Space...

Don't be afraid of a free space on the page. White space will help to pay attention to your main content - text. Don't forget about CSS property line-height. There is one good and proven rule - to set line spacing of at least 140% of the size of the text (remember that I'm writing about typography for the Web). Good designers are investing enormous efforts in the creation of good fonts. They spend countless hours trying to strike a balance between the blackness of the font and the empty space that surrounds it. In the same way we have to spend time and think about big (macro) empty space - "emptiness" that shapes blocks of the text.

Kerning - this is a horizontal space between letters. It is very important thing and each case should be considered separately. But if you manually configure the kerning, you should watch out for the distance between the individual letters, for example, space between such letters as r and t demands more attention.

Hierarchy

The easiest way to show a hierarchy of your content is to change a font size of its parts. Also we can show the significance of content with help of different styles, serif and sans serif fonts and so on. Quality hierarchy of the content immediately shows you where you should start reading and how to proceed.

In conclusion I want to share with you some inspiring examples of typography design. It's not always functional, but it is really worthy of your attention.

An awesome example of creative typography with cute heart illustration and good contrast between texture and text.

This typography looks like a fried potatoes from MCDonalds. Good solution for creative ad :)

I think that we can call this "chocolate milk" typography experiment a successfull one. The tasty result is amazing!

Do you think that bikes is boring? You should think again :) Creative design examples showcased below will surely inspire you and maybe you decide to exchange your car on a bike.

Type design called "Milking" has a nice contrast and stunning design with splashes.

In series of typographic illustrations "Play-Run-Walk-Bike" you'll find typefaces designed in imaginative manner.

Baroqueness example of creative design which combines different effects to make a deliberately fractured and highly stylized alphabet.

To make Yogurt typography designer used 3D Splash technology. The result is awesome!

Funny illustration "Milk Sucks" consists of a cool typography with amusing illustrations characters.

Incredible fresh typography design with water splash by SkamWorks

"Make a good typography" is a cool motto to implement :)

"Oops" human-body typography looks exceedingly peculiar, but nobody will dispute it's creativity.

Yummy! This text cookies will make you hungry! Dainty chocolate font with a nice color scheme. In order to learn how to create such text, click on the image.

Source the right suppliers created with patches of denim and laces for sneakers

Come walk with me has an awesome clear design and some sedative effect.

Fantastic & inspiring example of type design. The text seems to be made of glass.

A chocolate moto "YOU CAN" is a tasty way to inspire everybody to make a good typography!)

If you want to become a passionate designer, you should remember typography takes an important part in your works. Text is a main content on a web site, so poor and inferior typography is a bad way to introduce it.