Basic+Typography

= Basic Typography Tricks Every Designer Should Know =  StacySummers,  Design Principles  Feb 08, 2012

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 skillfully 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.