June 3, 2012

9 Tips on Typography Site

Typography for the Web site - quite an important design element, which is expressed in runet somehow not very much. This question is often raised in the English-speaking foreign design blogs, we have virtually no attention is paid to him. No, of course when you create the layout, most designers think of the site typography - fonts, design, but it is very modest and small. Because, probably, in runet can count on one hand the number of projects with a bright and creative custom typography, more than the standard dull "gray" design: (Maybe that's why Dmitry Naumov decided to share an interesting guest post about typography. Dima in combination, by the way, is author of a very useful project Converlab - "Design. Usability. Conversion." So, 9 boards typography Web site:

A. The choice of font

The choice of font depends a great deal. Type design determines the mood passes 'character', and indeed has a strong influence on perception. Choose the font that matches the style and concept of your site. For example, a "traditional" design goes a traditional serif font like Times Roman, for the "modern" design can go sans serif font - Arial or Helvetica;

Two. Font Size

Particularly important is the font size of the main body of the text. Title (subtitles) can be grotesquely large and clunky, but the main text should be comfortable, which is possible only if the optimal size. This is usually 12-16 px;


Three. The set of styles

The font should not be monotonous, gray mass is not nice to read. Develop a system of styles for headings and subheadings (H1, H2, H3, etc.), quotes the main text and the like. Use a different font sizes, options for the mark, perhaps to contrast these to use another font (especially for headlines or quotes);

4. Emphasis

Important places in the text must be allocated - bold or italic. The main thing is not to overdo it. Focus on that and he later emphasized that the dosage should be used;

Typography site

Five. Column Width

In traditional typography great attention is paid to the width of the column, for this reason that the text is divided into columns in newspapers and magazines. If the string is too long to read it is not convenient. Because you have to look too far to translate from the end of one line to the next. Short Line is also not good. The optimal length of the string is in the range 70-140 marks;

6. Leading (Leading)

Leading (Leading) - the distance between rows. If it is small, it affects the readability. Too big, too, Leading promises nothing good. In general cases, you will probably be the best spacing for 2-4 points more than the size of the font;

7. The general structure of the page

Ideally the page should be used a single grid. Thus it is possible to achieve a harmonious form of the whole site.Try to use common rules and styles (which you have come up with) on the whole site;

Eight. Color and contrast

The text should be readable, so he must be a contrast. It is better to use the classic black and white decision, it has the best possible combination of contrast, so the most convenient for reading. The remaining combinations to be tried with caution otherwise you risk to make one of the common mistakes of web design .

9. White space

White space - it is not void, but an important design element. It should not be too closely to mold elements, always leave a little "air". Thus it is possible to achieve a clean, light, nice design.


First of all, thanks for the post of Dime. All told briefly and in substance, in fact, develop the theme can be infinite for each item. I think part of the answers can be found on its website Converlab . Also, on my own I wanted to add that if you really decided to do something, "such things" in terms of typography site, you would be advised to view the work of the various collections on the Internet with the original decisions. This is very inspiring, but also contributes to the emergence of creative ideas.


Post a Comment