Web typography - four gold tips
The basics of web typography came to us from far 1991, from the well-known Tim Berners-Lee :)
If you look back at the terrible times of the reign of IE 1.0, then web typography (I'm not talking about web design) was in its infancy. At the moment, the situation is different. We have enough funds for literate text on a web page.
The essence of web typography is not just to choose the right font and the ability to distinguish the outline of one font from another.
')
Fig. 1: As shown by recent experiments, 90% of trained monkeys correctly distinguish the font Helvetica.
We will talk about web typography as a recipe containing four main components. If you have ever tried to cook a souffle, then most likely, you could feel how important the recipe is.
Pale pink text on a pale blue background may be suitable for your T-shirt, but it will be terrible to read, believe me. The text should be readable; always make sure the text contrasts sufficiently with the background.
If, however, you cannot decide on the degree of contrast, then very simple advice. Take a screenshot of your page and in any graphic editor translate it into gray-scale. Everything will immediately become clear. As Robert Bringhurst said, typography exists in order to focus on content .
Perhaps this is a matter of taste, but the volumetric text is more difficult to read on a contrasting background (example in the picture, white text on a black (or dark) background).
How often do you see books with such design?
Such a contrast can be used only for a small amount of text, but nevertheless, it is difficult to read such text anyway.
Recently, very small font sizes have become fashionable. Especially, it is fashionable on flash-sites. To be honest, I myself was very fond of small fonts, the type of this , but over time, I began to understand that this was a mockery of the user.
Many designers explain their love in such a way, like: “ put on glasses, I made fonts for normal readers ”, or “ it reflects my minimalistic approach to design ”.
Do not make the font size of the main content below 10-12px.
It is clear that everything looks great on your 65-inch plasma monitor , but I doubt that everything is just as good on a regular 15-19 inch monitor.
Fonts manipulation is the best way to highlight text content. The selection of color and frame, of course, can help, but the correct arrangement of text size can much better help the reader in determining the main content of the page.
And this means that your reader, who is in a great hurry, will always be able to quickly emphasize the most important things to himself.
Hierarchy can be achieved in other ways. We just touched the font size.
You can also vary the styles, for example, make everything in capital letters or use italics in the subtitles. Mixing Serif and sans serif can also give a good result.
Give your text a breath. Do not be afraid to leave empty places, they will only help to focus the reader’s attention on the text, and since the text is the most important component, let it be seen.
And do not forget about the line spacing, the distance should be at least 140% of the font size (CSS property
The best font designers are fighting for the micro-space in their fonts. They spend hours in search of the perfect balance between the black color of the letters and the surrounding white background.
It is also impossible to lose sight of the space between the blocks of text.
Remember, these are not rules, these are only tips. Try to follow them - CONTRAST , SIZE , HIERARCHY and SPACE - and you will see for yourself that the quality of web typography in your projects will rise high, as one of the souffle Gordon Ramsay.
And about the monkeys - it was a joke;)
Original: ilovetypography.com/2008/02/28/a-guide-to-web-typography
Free translation (with your comments and additions): SHAGGYSMILE
If you look back at the terrible times of the reign of IE 1.0, then web typography (I'm not talking about web design) was in its infancy. At the moment, the situation is different. We have enough funds for literate text on a web page.
The essence of web typography is not just to choose the right font and the ability to distinguish the outline of one font from another.
')
Fig. 1: As shown by recent experiments, 90% of trained monkeys correctly distinguish the font Helvetica.
We will talk about web typography as a recipe containing four main components. If you have ever tried to cook a souffle, then most likely, you could feel how important the recipe is.
Contrast
Pale pink text on a pale blue background may be suitable for your T-shirt, but it will be terrible to read, believe me. The text should be readable; always make sure the text contrasts sufficiently with the background.
If, however, you cannot decide on the degree of contrast, then very simple advice. Take a screenshot of your page and in any graphic editor translate it into gray-scale. Everything will immediately become clear. As Robert Bringhurst said, typography exists in order to focus on content .
Perhaps this is a matter of taste, but the volumetric text is more difficult to read on a contrasting background (example in the picture, white text on a black (or dark) background).
How often do you see books with such design?
Such a contrast can be used only for a small amount of text, but nevertheless, it is difficult to read such text anyway.
The size
Recently, very small font sizes have become fashionable. Especially, it is fashionable on flash-sites. To be honest, I myself was very fond of small fonts, the type of this , but over time, I began to understand that this was a mockery of the user.
Many designers explain their love in such a way, like: “ put on glasses, I made fonts for normal readers ”, or “ it reflects my minimalistic approach to design ”.
Do not make the font size of the main content below 10-12px.
It is clear that everything looks great on your 65-inch plasma monitor , but I doubt that everything is just as good on a regular 15-19 inch monitor.
Hierarchy
Fonts manipulation is the best way to highlight text content. The selection of color and frame, of course, can help, but the correct arrangement of text size can much better help the reader in determining the main content of the page.
And this means that your reader, who is in a great hurry, will always be able to quickly emphasize the most important things to himself.
Hierarchy can be achieved in other ways. We just touched the font size.
You can also vary the styles, for example, make everything in capital letters or use italics in the subtitles. Mixing Serif and sans serif can also give a good result.
Space
Give your text a breath. Do not be afraid to leave empty places, they will only help to focus the reader’s attention on the text, and since the text is the most important component, let it be seen.
And do not forget about the line spacing, the distance should be at least 140% of the font size (CSS property
line-height ).The best font designers are fighting for the micro-space in their fonts. They spend hours in search of the perfect balance between the black color of the letters and the surrounding white background.
It is also impossible to lose sight of the space between the blocks of text.
Remember, these are not rules, these are only tips. Try to follow them - CONTRAST , SIZE , HIERARCHY and SPACE - and you will see for yourself that the quality of web typography in your projects will rise high, as one of the souffle Gordon Ramsay.
And about the monkeys - it was a joke;)
Original: ilovetypography.com/2008/02/28/a-guide-to-web-typography
Free translation (with your comments and additions): SHAGGYSMILE
Source: https://habr.com/ru/post/27086/
All Articles