Web typography
The article will help to deal with the basic terms in typography. And so that information is better and easier to perceive, boring texts are illustrated with funny pictures. The article also contains the most common mistakes that web designers make when working with text and give recommendations on how to avoid them.
Typography is the strongest tool for expressing promise in web design. With it, you can combine text and visual components that will help you to reach the visitor. Proper use of typography will help avoid the typical mistakes made by designers when creating the next masterpiece. We will try to understand what we are doing wrong and how to avoid mistakes in the future.
')
First, let's look at the terminology. Surely most of the terms are familiar to you, but once again familiar with the definitions will not be superfluous. Perhaps this will complement the information that you already possess.
Typography - a set of laws, rules and norms of text design, based on the study of the perception of the set by the reader. Knowledge and understanding of typography turn the text into a tool for building a composition, make it alive, give character and the ability to convey the idea not only with the help of content, but also graphically.
Typeface - a font or several fonts that have stylistic unity of style. Consists of a set of characters. Often this concept is confused with the concept of “font”, although the font is a definite type of characters, while the typeface defines a common “family” of fonts.
Headsets can be divided into two main categories:
In projects, you can use any, right and wrong option is not here. You need to look at the situation, what project you are doing and what is more important for him.
A serif typeface holds the string, as it were, and the readability improves accordingly. Often serif fonts create a sense of professionalism and credibility of the information provided, express respect, emphasize stability and conservatism in the best sense of the word. Sans serif fonts, as a rule, emphasize rationality, adherence to style, youth and modernity. They help to create a space between letters, as well as to separate one character from another.
The size is the height of the letter, which includes the lower and upper bearing elements. Measured in printing points (denoted as pt). For example, the text typed in 14 pin will be equal to 14 pt in height.
Leading - line spacing. The distance between the base lines of adjacent rows.
Kerning - the distance between the letters. The main essence of kerning is the selection of different intervals between different pairs of specific letters to increase readability.
There is a great simulator game - Kern Type . Just put all the letters in place. In fact, it is not so simple. The process is quite complicated and requires an excellent eye. Especially this experience will be useful when creating logos.
We use a large number of fonts
It is advisable to use no more than 3 styles. It can be fonts of both the same typeface, and different. For example, the Roboto headset contains a fairly large number of different styles. Of these, you can easily choose three, which we believe are suitable for our site. Let's say it will be Light, Regular and Bold. For headings, you can use the font Bold or Light, for the Bold buttons, for the main text Regular. Thus, using one headset, we provided our site with the correct typography. Naturally, it all depends on the theme of the site and the idea that you plan to lay in the design. My example refers to the universal and does not pretend to be something unique or extraordinary.
We do not know what size the font should be.
Text size on the web should not be less than 12 pixels. The best choice is within 14–18 px for the main text. Not too big and at the same time readable. Moreover, if we chose a size of 16 px, it should remain 16 px on all pages of the site and not jump plus or minus 1 px from block to block. This also applies to leading, it should be the same everywhere.
Font size must be specified in integers, not using decimal fragments, for example, 16.28 px. And, of course, in Photoshop you need to convert pt to px. To do this, choose in the menu: Edit - Settings - Basic. Next - Units and rulers. Change the drop-down menu "Text", "Rulers" items per pixel. Click OK.
The length of the string - is it important?
The length of the string should not exceed 600 px. This is the optimal size for comfortable moving the gaze from one line to another. It is hard to read a very wide content part - often you just lose the line you were going to move to after reading the long previous line. If you still need to stretch the text block to 1000 px or more in width, you can try to split the text into two or more columns. Another option is to make the line spacing slightly longer than usual in order to visually separate the lines from each other. Do not forget to separate the text in paragraphs, it will also help to make it easy to read.
The leading corresponds to the font size.
The distance between lines should almost always be larger than the font size. Except headlines. To achieve a balance between the text and the "air", make the line spacing about one and a half times the height of lowercase letters. Or set leading, equal to 150% of the font size. For example, the text size is 14 px, then the input is 21 px. 14/2 = 7 + 14 = 21.
Choose any font you like.
I think we all already know that fonts for website design are best used with fonts.google.com and webfont.com , unless, of course, the customer has provided you with your font.
O Lorem, lorem ...
It is quite natural that when developing a site, the content that will be there is almost never used - often, this content simply does not exist yet. Therefore, designers (and layout designers too) use “fish” - an arbitrary text that fits into the content blocks. This is quite convenient, especially for designers, because now the notorious "Lorem Ipsum ..." can be pasted directly from Photoshop (Menu: Text - Paste Lorem Ipsum). But for Russian-speaking sites it is not recommended to do this - the Latin does not give an idea of ​​how the text in Cyrillic font will look like. Therefore, a text generator to help you.
Links
Checking the design for correctness is simple: if the viewer, without touching the mouse, can guess where the link is and where not, then we have a good website. Therefore, it is necessary to think in advance how all the links on the site will look like. Suppose that all clickable elements are of the same color, for example, red, and not clickable of another color — black. Then no one will be confused.
Often there is this: the title is highlighted in red (after all, it’s necessary to somehow select it), then a few more very important UTP phrases are in blue and all this is mixed up with plain black text. At the end of the text, the button is also red. It is clear that you have to click on the button, but it turns out that the text colored in blue was also clickable (he opened additional information). But who knew, who knew ...
Alignment
There are text blocks that are often incorrectly aligned - this is justified alignment, central alignment and right alignment. In all these cases, reading the text is inconvenient, and visually it looks unattractive. Alignment should ALWAYS be left aligned. Even if you really want to make it right-hand (just because it seems to you - composition should be exactly like this) - this is wrong The exception may be one or two short sentences that are most likely subheadings for the main text.
Contrast
Contrast is one of the main means of expression in design. Do not be afraid of large forms and empty spaces! Deliberately large typography becomes an independent element that does not require additional graphic means of design. A good example of contrast in colors, shapes and sizes of all objects.
Styles
You should always think about what information you are trying to convey to the visitor. When choosing a font, it should be remembered that happy messages should be accompanied by light, airy and soft forms of fonts, while messages of some more dark themes (for example, Halloween) would be better accompanied by fonts with a more rigid outline. With the help of typography, web designers emphasize the atmosphere and style of the page, and also create a salutary ground for an emotional response.
Good typography is a quality that a person does not notice when entering your site, but feels.
Typography is the strongest tool for expressing promise in web design. With it, you can combine text and visual components that will help you to reach the visitor. Proper use of typography will help avoid the typical mistakes made by designers when creating the next masterpiece. We will try to understand what we are doing wrong and how to avoid mistakes in the future.
')
First, let's look at the terminology. Surely most of the terms are familiar to you, but once again familiar with the definitions will not be superfluous. Perhaps this will complement the information that you already possess.
Typography - a set of laws, rules and norms of text design, based on the study of the perception of the set by the reader. Knowledge and understanding of typography turn the text into a tool for building a composition, make it alive, give character and the ability to convey the idea not only with the help of content, but also graphically.
Typeface - a font or several fonts that have stylistic unity of style. Consists of a set of characters. Often this concept is confused with the concept of “font”, although the font is a definite type of characters, while the typeface defines a common “family” of fonts.
Headsets can be divided into two main categories:
- Antiqua - serif fonts.
- Grotesque , respectively, is a sans serif font.
In projects, you can use any, right and wrong option is not here. You need to look at the situation, what project you are doing and what is more important for him.
A serif typeface holds the string, as it were, and the readability improves accordingly. Often serif fonts create a sense of professionalism and credibility of the information provided, express respect, emphasize stability and conservatism in the best sense of the word. Sans serif fonts, as a rule, emphasize rationality, adherence to style, youth and modernity. They help to create a space between letters, as well as to separate one character from another.
The size is the height of the letter, which includes the lower and upper bearing elements. Measured in printing points (denoted as pt). For example, the text typed in 14 pin will be equal to 14 pt in height.
Leading - line spacing. The distance between the base lines of adjacent rows.
Kerning - the distance between the letters. The main essence of kerning is the selection of different intervals between different pairs of specific letters to increase readability.
There is a great simulator game - Kern Type . Just put all the letters in place. In fact, it is not so simple. The process is quite complicated and requires an excellent eye. Especially this experience will be useful when creating logos.
What are we doing wrong?
We use a large number of fonts
It is advisable to use no more than 3 styles. It can be fonts of both the same typeface, and different. For example, the Roboto headset contains a fairly large number of different styles. Of these, you can easily choose three, which we believe are suitable for our site. Let's say it will be Light, Regular and Bold. For headings, you can use the font Bold or Light, for the Bold buttons, for the main text Regular. Thus, using one headset, we provided our site with the correct typography. Naturally, it all depends on the theme of the site and the idea that you plan to lay in the design. My example refers to the universal and does not pretend to be something unique or extraordinary.
We do not know what size the font should be.
Text size on the web should not be less than 12 pixels. The best choice is within 14–18 px for the main text. Not too big and at the same time readable. Moreover, if we chose a size of 16 px, it should remain 16 px on all pages of the site and not jump plus or minus 1 px from block to block. This also applies to leading, it should be the same everywhere.
Font size must be specified in integers, not using decimal fragments, for example, 16.28 px. And, of course, in Photoshop you need to convert pt to px. To do this, choose in the menu: Edit - Settings - Basic. Next - Units and rulers. Change the drop-down menu "Text", "Rulers" items per pixel. Click OK.
The length of the string - is it important?
The length of the string should not exceed 600 px. This is the optimal size for comfortable moving the gaze from one line to another. It is hard to read a very wide content part - often you just lose the line you were going to move to after reading the long previous line. If you still need to stretch the text block to 1000 px or more in width, you can try to split the text into two or more columns. Another option is to make the line spacing slightly longer than usual in order to visually separate the lines from each other. Do not forget to separate the text in paragraphs, it will also help to make it easy to read.
The leading corresponds to the font size.
The distance between lines should almost always be larger than the font size. Except headlines. To achieve a balance between the text and the "air", make the line spacing about one and a half times the height of lowercase letters. Or set leading, equal to 150% of the font size. For example, the text size is 14 px, then the input is 21 px. 14/2 = 7 + 14 = 21.
Choose any font you like.
I think we all already know that fonts for website design are best used with fonts.google.com and webfont.com , unless, of course, the customer has provided you with your font.
O Lorem, lorem ...
It is quite natural that when developing a site, the content that will be there is almost never used - often, this content simply does not exist yet. Therefore, designers (and layout designers too) use “fish” - an arbitrary text that fits into the content blocks. This is quite convenient, especially for designers, because now the notorious "Lorem Ipsum ..." can be pasted directly from Photoshop (Menu: Text - Paste Lorem Ipsum). But for Russian-speaking sites it is not recommended to do this - the Latin does not give an idea of ​​how the text in Cyrillic font will look like. Therefore, a text generator to help you.
Links
Checking the design for correctness is simple: if the viewer, without touching the mouse, can guess where the link is and where not, then we have a good website. Therefore, it is necessary to think in advance how all the links on the site will look like. Suppose that all clickable elements are of the same color, for example, red, and not clickable of another color — black. Then no one will be confused.
Often there is this: the title is highlighted in red (after all, it’s necessary to somehow select it), then a few more very important UTP phrases are in blue and all this is mixed up with plain black text. At the end of the text, the button is also red. It is clear that you have to click on the button, but it turns out that the text colored in blue was also clickable (he opened additional information). But who knew, who knew ...
Alignment
There are text blocks that are often incorrectly aligned - this is justified alignment, central alignment and right alignment. In all these cases, reading the text is inconvenient, and visually it looks unattractive. Alignment should ALWAYS be left aligned. Even if you really want to make it right-hand (just because it seems to you - composition should be exactly like this) - this is wrong The exception may be one or two short sentences that are most likely subheadings for the main text.
Contrast
Contrast is one of the main means of expression in design. Do not be afraid of large forms and empty spaces! Deliberately large typography becomes an independent element that does not require additional graphic means of design. A good example of contrast in colors, shapes and sizes of all objects.
Styles
You should always think about what information you are trying to convey to the visitor. When choosing a font, it should be remembered that happy messages should be accompanied by light, airy and soft forms of fonts, while messages of some more dark themes (for example, Halloween) would be better accompanied by fonts with a more rigid outline. With the help of typography, web designers emphasize the atmosphere and style of the page, and also create a salutary ground for an emotional response.
Good typography is a quality that a person does not notice when entering your site, but feels.
Source: https://habr.com/ru/post/324944/
All Articles