Beautiful typography in web design. Beautiful typography in web design Beautiful typography

The curator of resource on Typewolf fonts Jeremy Schoaf chose examples of sites with interesting font solutions and described their advantages and disadvantages.

In combination with a thin paper texture, this typography creates a feeling that you read the book.

SIMPLY GUM.

Thanks to web fonts, helping to fit the typography of the product packaging to the typography site of the manufacturer. This happens more and more often. Site Simply Gum chose Gotham in drawing his brand, which retains the identity of constant and on the online, and on offline canals.

This site is a good example of how only one draw is sometimes the only one necessary. Using the different saturation of the Gotham and setting the headers in the upper case, Simply Gum installed a clear hierarchy of everything with one intensity.

Logos in the header and footer stand in PNG format, so they lose the clarity and scalability of the web font. The use of a web font for a logo is not always feasible, especially if you need good control over the curling; However, the image in SVG will suit in this case better than PNG, because it can scale and at the same time maintain its clarity.

Summary

Fortunately, examples were above demonstrated as certain solutions in the typography can affect the design. Here you have some key thoughts:

If you are going to use a few strokes, then develop a constant system in a specific typography and stick to it.
For the main text, choose a font with a normal italic, fatty inscription and a bold-style fitness.
If you are going to choose a popular design, try to combine it with a less brought to make the design distinguishing.
Make a style guide at the very beginning of the project to guarantee the sequential use of fonts among your team members.
Use contrast, and not similar to the design.
Do not use on-screen fonts for the main text. Use the design in the destination.
Do not be afraid to use only one seven of the draw. You can set the hierarchy with the help of different saturation and style of one family.
If your logo allows you to make it in SVG to provide definition and scalability.

An excellent website begins with a beautiful typography. And although some rules can be broken, sometimes, it will be right back to the basic principles of what is a good typography, and how to create it.

This reminder will help you with a fresh look at your projects, think about new approaches, or return to a simpler design.

So, today, we ignore fashion trends, focus on typography theory, and on how "rules" can help us in creating beautiful texts.

Size and hierarchy

Size matters. To create a read-of-consumable typography, it may be a decisive factor. The small text is difficult to consider, not something to read, but too large, will exceed the height of the line and lead to confusion.

A readable typography has several layers of hierarchy. These layers suggest the user who need to be read in the first, in the second, and in the third place. Also, there is an obvious hierarchy in the sizes of the text - one size of the headlines, the other, at the main text, and the third at the subtitles.

Tracking and Kerning

Tracking and kerning are often confused. Kerning is a selective change in the interval between letters depending on their form. Tracking is a change in the interval between sets of letters, i.e., paragraphs, or all block of text.

Kerning is often applied to specific elements to create a clarity, improvement of readability, and, even, to stylish large excerpts of text. Tracking is often used to narrow out too wide the font of the main text.

Limit the number of applied style styles

For most projects, there are two or three styles. In order not to make a mistake in choosing, find the font family with large quantity Available drawing variations. The highest quality fonts have a wide variety of styles - fat, usual, italic, condensed, black, etc.

Mix and compare styles

I recommend choosing two different styles. The most common pair is Serif and Sans Serif. Connecting various styles and draws, look for letters with the same height and shape of the bowl (space inside closed letters, such as "O").

These small details will significantly affect how these fonts will look together, and on the convenience of reading text.

Transfer and off

In most cases, string transfers and do not need it. In the case of online text, these techniques only complicate the rapid assimilation and understanding. Transfers interfere with reading, and complete power does not often lead to unreadable formatting.

Do not change the fonts

Never change the font. Do not try to make it thicker, thinner, or higher. It is better to choose another.

Font development designers spend a lot of time that this font is consulting, and satisfy the style of style. No need to change anything. You will not be able to improve it, and in most cases it will only spoil everything.

If the font does not suit you, look for something else. Use the Identifont Similar Font Tool, tool that defines similar fonts.

Contrast

Use the typography to create contrast. Also, how to create a hierarchy you use different sizes, create visual interest by changing the weight, color, and font style.

Color is one of the most efficient and simple ways Creation of contrast. Perfect contrast - Dark text on a light background (or vice versa). You have an almost unlimited set of colors that will help you achieve this goal. Playing with color and typography, keep in mind that some color combinations, for example, bright red on bright blue, can be quite difficulty.

When it comes to contrast, to create a hand-readable text best use a simple background. But if it contains such visual elements as images or patterns, then increase the size of the letters - this will create a separation between the background, and the text elements of the foreground.

Collection strip format

The dialing band format is the size of the container text. It can be the width of the entire text frame, or the only column.

The format of the string is important because the number of characters (including spaces, special characters, and punctuation marks) on the screen affect readability. If the rows are too long or too short, the user's look will be difficult to move.

From The Elements of Typographic Style: "Any number of characters, ranging from 45 to 75, is considered as a satisfactory string length for a single-column set. 66-character string (including letters and spaces) is considered perfect. For a multicolone set, the ideal average will be a string, a long 40-50 symbol. "

Even despite the fact that at the time of the publication of this book, no one thought about the mobile typography, the recommendation relating to the multicolon set did not lose its relevance. In cases with small screens, you can even use 35 characters per string.

Translation of Article Carrie Casins

This list is compiled according to the results of II. 2008. Previous "Hit Parads" can be found and.

Each example is accompanied by a brief commentary, and pressing the screenshot leads to the original site.

Seed Conference

No flash, no pictures, no noise; Just well-stylized font and well written text: Real proof that with only font can be obtained a great result. I would like to see some more examples of this kind.

Designing The News.

The big contrast between the title and the main content, a lot of pure space and a good organization.

Omniti.

Pleasant logo, clear text and very nice color scheme. Learn more about design development can be read.

Designr.it.

Magnificent suitivated logo (does anyone know what kind of font?) And many refined parts.

DESIGN VIEW.

Andy Ratdlezh - a designer who in practice applies the same principles that promotes. I like how he changes the size of the bow depending on the date of publication of the article, so the most fresh text corresponds to the greatest Kehal.

WordPress.org & WP 2.5.x Admin

Although the WordPress blogger platform is not based on the website, but their website is displayed on thousands, if not millions, our screens every day. I would like as more online and offline applications as well as well.

OURTYPE.

I really did not want to include this site in the review, because flash is used on it. However, some excellent fonts are presented on it (and some of my favorites must add).

The Deck.

Another site that is based just on fonts in everything. Excellent example of hierarchy and marking. Who said that "the photo says more than a thousand words"? No, the font says better.