March 27, 2017 at 14:59Web Typography
The article will help to understand the basic terms in typography. And to make information better and easier to read, boring texts are illustrated with funny pictures. The article also contains the most common mistakes made by web designers when working with text and gives recommendations on how to avoid them.
Typography is a powerful tool for expressing the message in web design. With it, you can combine text and visual components, which will help you reach the visitor. The correct use of typography will help to 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.
To get started, let's deal with 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 have.
Typography - a set of laws, rules and standards for text design, based on the study of the perception of the set by the reader. The knowledge and understanding of typography turns a text into a tool for constructing a composition, makes it alive, gives character and ability to convey an idea not only through content, but also graphically.
A headset is a font or several fonts that have a stylistic unity of style. Consists of a set of characters. Often this concept is confused with the concept of “font”, although a font is a certain marking, while a headset 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, which project you are doing and what is more relevant for him.
The serif font, as it were, holds the line, and therefore the readability increases. Often serif fonts create a sense of professionalism and authority of the information provided, express respect, emphasize stability and conservatism in the best sense of the word. Sans serif fonts tend to emphasize rationality, style, youth and modernity. They help to create a space between letters, as well as to separate one character from another.
Size- the height of the letter, including the lower and upper remote elements. Measured at printing points (denoted as pt). For example, text typed in 14 pt will be equal to 14 pt in height.
Leading - line spacing. The distance between the baselines of adjacent lines.
Kerning is the distance between letters. The main essence of kerning is the selection of different intervals between different pairs of specific letters to increase readability.
There is a wonderful simulator game - Kern Type . Just put all the letters in their places. This is actually not so simple. The process is quite complicated and requires an excellent eye. This experience will be especially 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 as one headset, or different. For example, the Roboto headset contains a fairly large number of different styles. Three of them can be easily selected, which, in our opinion, 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 of Regular. Thus, using one headset, we provided our site with the right typography. Naturally, it all depends on the theme of the site and the idea that you plan to lay in the design. My example is universal and does not pretend to be something unique or extraordinary.
We do not know what size the font should be
The 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 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 applies to leading, it should be the same everywhere.
Font size must be specified in whole numbers, without using decimal fractions, for example 16.28 px. And, of course, in Photoshop you need to convert pt to px. To do this, select in the menu: Editing - Settings - Basic. Next - Units and Rulers. Change the drop-down menus "Text", "Rulers" points for pixels. Click OK.
Line Length - Is It Important?
The line length should not exceed 600 px. This is the optimal size for comfortable moving your eyes 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 go 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 larger than usual to visually separate the lines more from each other. Do not forget to separate the text with paragraphs, this will also help to make it easy to read.
Leading corresponds to font size
The line spacing should almost always be larger than the font size. Excluding headings. To achieve a balance between text and air, make the line spacing approximately one and a half times the height of the lowercase letters. Or set the leading equal to 150% of the font size. For example, the text size is 14 px, then the interlacing is 21 px. 14/2 = 7 + 14 = 21.
Choose any font you like.
I think everyone already knows that fonts for website design are best used with fonts.google.com and webfont.ru , unless, of course, the customer has provided you font.
O Lorem, lorem ...
Naturally, 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 content blocks. This is quite convenient, especially for designers, because now the notorious “Lorem Ipsum ...” can be inserted directly from Photoshop (Menu: Text - Insert Lorem Ipsum). But for Russian-language sites, this is not recommended - the Latin does not give an idea of how the text typed in Cyrillic font will look like. Therefore, a text generator to help you.
References
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 site. Therefore, you need to think in advance how all the links on the site will look. Suppose all clickable elements are of the same color, for example red, and not clickable of the other - black. Then no one will get confused.
Often there is this: the title is highlighted in red (you need to highlight it somehow), then there are a few very important phrases of the USP in blue and all this mixed up with plain black text. At the end of the text, the button is also red. It is clear that you need to click on the button, but it turns out that the text painted in blue was clickable as well (it opened additional information). But who knew, who knew ...
Alignment
There are text blocks that very often align incorrectly - this is justification, justification in the middle and justification on the right. 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 to the right (just because it seems to you that it should be compositionally like that) - this is wrong. An exception may be one or two short sentences, which are most likely subheadings for the main text.
Contrast
Contrast is one of the main means of expression in design. No need to be afraid of large forms and empty spaces! Deliberately large typography is becoming an independent element that does not require additional graphic design tools.A good example of contrast in the 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 darker topics (for example, Halloween) would be better to accompany fonts with a more rigid type. Using typography, web designers emphasize the atmosphere and style of the page, as well as create a fertile ground for an emotional response.
Good typography is a quality that a person, when entering your site, does not notice, but feels.
Typography is a powerful tool for expressing the message in web design. With it, you can combine text and visual components, which will help you reach the visitor. The correct use of typography will help to 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.
To get started, let's deal with 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 have.
Typography - a set of laws, rules and standards for text design, based on the study of the perception of the set by the reader. The knowledge and understanding of typography turns a text into a tool for constructing a composition, makes it alive, gives character and ability to convey an idea not only through content, but also graphically.
A headset is a font or several fonts that have a stylistic unity of style. Consists of a set of characters. Often this concept is confused with the concept of “font”, although a font is a certain marking, while a headset 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, which project you are doing and what is more relevant for him.
The serif font, as it were, holds the line, and therefore the readability increases. Often serif fonts create a sense of professionalism and authority of the information provided, express respect, emphasize stability and conservatism in the best sense of the word. Sans serif fonts tend to emphasize rationality, style, youth and modernity. They help to create a space between letters, as well as to separate one character from another.
Size- the height of the letter, including the lower and upper remote elements. Measured at printing points (denoted as pt). For example, text typed in 14 pt will be equal to 14 pt in height.
Leading - line spacing. The distance between the baselines of adjacent lines.
Kerning is the distance between letters. The main essence of kerning is the selection of different intervals between different pairs of specific letters to increase readability.
There is a wonderful simulator game - Kern Type . Just put all the letters in their places. This is actually not so simple. The process is quite complicated and requires an excellent eye. This experience will be especially 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 as one headset, or different. For example, the Roboto headset contains a fairly large number of different styles. Three of them can be easily selected, which, in our opinion, 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 of Regular. Thus, using one headset, we provided our site with the right typography. Naturally, it all depends on the theme of the site and the idea that you plan to lay in the design. My example is universal and does not pretend to be something unique or extraordinary.
We do not know what size the font should be
The 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 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 applies to leading, it should be the same everywhere.
Font size must be specified in whole numbers, without using decimal fractions, for example 16.28 px. And, of course, in Photoshop you need to convert pt to px. To do this, select in the menu: Editing - Settings - Basic. Next - Units and Rulers. Change the drop-down menus "Text", "Rulers" points for pixels. Click OK.
Line Length - Is It Important?
The line length should not exceed 600 px. This is the optimal size for comfortable moving your eyes 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 go 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 larger than usual to visually separate the lines more from each other. Do not forget to separate the text with paragraphs, this will also help to make it easy to read.
Leading corresponds to font size
The line spacing should almost always be larger than the font size. Excluding headings. To achieve a balance between text and air, make the line spacing approximately one and a half times the height of the lowercase letters. Or set the leading equal to 150% of the font size. For example, the text size is 14 px, then the interlacing is 21 px. 14/2 = 7 + 14 = 21.
Choose any font you like.
I think everyone already knows that fonts for website design are best used with fonts.google.com and webfont.ru , unless, of course, the customer has provided you font.
O Lorem, lorem ...
Naturally, 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 content blocks. This is quite convenient, especially for designers, because now the notorious “Lorem Ipsum ...” can be inserted directly from Photoshop (Menu: Text - Insert Lorem Ipsum). But for Russian-language sites, this is not recommended - the Latin does not give an idea of how the text typed in Cyrillic font will look like. Therefore, a text generator to help you.
References
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 site. Therefore, you need to think in advance how all the links on the site will look. Suppose all clickable elements are of the same color, for example red, and not clickable of the other - black. Then no one will get confused.
Often there is this: the title is highlighted in red (you need to highlight it somehow), then there are a few very important phrases of the USP in blue and all this mixed up with plain black text. At the end of the text, the button is also red. It is clear that you need to click on the button, but it turns out that the text painted in blue was clickable as well (it opened additional information). But who knew, who knew ...
Alignment
There are text blocks that very often align incorrectly - this is justification, justification in the middle and justification on the right. 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 to the right (just because it seems to you that it should be compositionally like that) - this is wrong. An exception may be one or two short sentences, which are most likely subheadings for the main text.
Contrast
Contrast is one of the main means of expression in design. No need to be afraid of large forms and empty spaces! Deliberately large typography is becoming an independent element that does not require additional graphic design tools.A good example of contrast in the 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 darker topics (for example, Halloween) would be better to accompany fonts with a more rigid type. Using typography, web designers emphasize the atmosphere and style of the page, as well as create a fertile ground for an emotional response.
Good typography is a quality that a person, when entering your site, does not notice, but feels.