For "dummies": Standard completely readable sites
Most websites are stuffed with small text, which is read in torment. For what? There is no reason to squeeze so much information onto one screen. This is simply a foolish collective fallacy dating back to the days when the screens were very, very small. Therefore…
We do not want to constantly change the font size settings in the browser when visiting each new site.
Sites with pages, full of information, are not visually appealing - they are terrible. Filling pages with all sorts of things never influenced usability positively. It’s just laziness that makes you dump all this information on our heads. We want you to think and decide in advance what exactly is the most important. We do not want to do your work for you.
')
Because in this case all the sites are bad. Scrolling through a web page is not a big deal. Nothing. Just as there is nothing wrong with turning the pages of a book.
95% of what is commonly called web design is typography.
Better instead, stop rubbing your nose against the screen, sit back in your chair (!) And continue reading this article in a relaxed position.
The font size of the text you are currently reading [meaning, in the original - approx. Heath], - not big. This is the size that browsers set by default. When creating a browser, it was assumed that it will show the text of this particular point.
We have no desire to press the buttons for increasing or decreasing the font, we don’t want to change our settings and change our preferences [in the original the word “preferences” was used - approx. Heath]. We just want to read. We want you to adjust to our preferences, and not vice versa.
Initially, it is much more difficult to make a good site layout with a large font size. But this complexity will help you make a simpler, more accessible and more understandable site. It’s easy to stuff a website with information, but making it simple and easy to use is difficult. At first you’ll be shocked to see how big the preset font size in browsers is. But after a while you just don’t want to read the text less than 100% or 1 em. At first, it seems great, but once you get used to it, you will understand why browsers use just such a size by default.
Let your text breathe. The use of free space is not an idiotic fad of designers. It is not a question of taste.
The basic rule is 10–15 words per line [in the Russian set these numbers may differ slightly; it is considered that the text should have a width in the range of 45-75 characters, including spaces - approx. Heath]. With a rubber layout with a font size of 100%, the standard recommendation for most screen resolutions is a column 50% wide of the browser window.
That's what the reading experts say.
It would not be worth mentioning this. But if you are still sure that the following color combinations are suitable for web pages:
Note that too high contrast for reading from the screen is also not good (# 000 against #fff, for example), because the text starts to “blink”. # 333 on the background #fff will be just right.
We want to be able to search in the text, copy the text and save it, select the text with the mouse cursor while reading. Text in the form of a picture may look beautiful, but visual beauty on the web is not the main thing. The main thing is interaction and information, and information should be easy to read, use, scale, cite and send.
If you can not make a decent website design without text in pictures, I'm afraid you will have to start from scratch.
Do not make us change the font size.
We do not want to constantly change the font size settings in the browser when visiting each new site.
Do not prove to us that crowded pages look better.
Sites with pages, full of information, are not visually appealing - they are terrible. Filling pages with all sorts of things never influenced usability positively. It’s just laziness that makes you dump all this information on our heads. We want you to think and decide in advance what exactly is the most important. We do not want to do your work for you.
')
Do not rub us that scrolling pages is bad
Because in this case all the sites are bad. Scrolling through a web page is not a big deal. Nothing. Just as there is nothing wrong with turning the pages of a book.
Don't tell us the text is not important.
95% of what is commonly called web design is typography.
Do not require us to start wearing glasses
Better instead, stop rubbing your nose against the screen, sit back in your chair (!) And continue reading this article in a relaxed position.
Five simple rules
1. Browser preset font size for long texts
The font size of the text you are currently reading [meaning, in the original - approx. Heath], - not big. This is the size that browsers set by default. When creating a browser, it was assumed that it will show the text of this particular point.
We have no desire to press the buttons for increasing or decreasing the font, we don’t want to change our settings and change our preferences [in the original the word “preferences” was used - approx. Heath]. We just want to read. We want you to adjust to our preferences, and not vice versa.
Initially, it is much more difficult to make a good site layout with a large font size. But this complexity will help you make a simpler, more accessible and more understandable site. It’s easy to stuff a website with information, but making it simple and easy to use is difficult. At first you’ll be shocked to see how big the preset font size in browsers is. But after a while you just don’t want to read the text less than 100% or 1 em. At first, it seems great, but once you get used to it, you will understand why browsers use just such a size by default.
2. Get plenty of free space.
Let your text breathe. The use of free space is not an idiotic fad of designers. It is not a question of taste.
The width of the set bar should be proportional to the size of the font. Too wide lines are tiresome for the eyes and cause an adverse psychological effect. Too narrow a column is also annoying because it breaks the read continuity. Excessive eye movement to change the line pushes the reader away from reading.The presence of air around the text reduces stress, making it much easier to concentrate on the essence of the text. No need to try to fill the entire browser window. The fact that empty space looks better is not a side effect, but a logical consequence of functional design. Who said web pages should be full of junk?
Joseph MĂĽller-Brockmann, "Modular Systems"
The question of column width is not only a matter of design or format selection; readability matters no less.Please make sure that the width of the line is not too big, and also that you have left enough empty space to the left and right of the text column. This will make it easier for the eyes to jump the end of one line to the beginning of another. We do not want to customize either the font size or the size of the browser window. When we open a webpage, we just want to start reading. A strip of text with scalable width is fine; endless lines of text from the left edge of the screen to the right - not very.
Joseph MĂĽller-Brockmann, "Modular Systems"
The basic rule is 10–15 words per line [in the Russian set these numbers may differ slightly; it is considered that the text should have a width in the range of 45-75 characters, including spaces - approx. Heath]. With a rubber layout with a font size of 100%, the standard recommendation for most screen resolutions is a column 50% wide of the browser window.
3. Nice looking line spacing
That's what the reading experts say.
Vertically tight lines reduce reading speed, because the upper and lower lines are grasped by the eye at the same time. The eye fails to focus on a separate line, the reader spends energy where it does not have to, and as a result gets tired more quickly. The same applies to cases where line leading is too large.Standard leading is too small. If you increase the line spacing, the text will be much easier to read. The usual recommendation is leading in 140% of the standard.
4. Clear color contrast
It would not be worth mentioning this. But if you are still sure that the following color combinations are suitable for web pages:
- gray text on light gray background,
- Silver color text on white background
- gray text on yellow background,
- yellow text on a red background,
- green text on a red background, and so on ...
Note that too high contrast for reading from the screen is also not good (# 000 against #fff, for example), because the text starts to “blink”. # 333 on the background #fff will be just right.
5. No text with pictures
We want to be able to search in the text, copy the text and save it, select the text with the mouse cursor while reading. Text in the form of a picture may look beautiful, but visual beauty on the web is not the main thing. The main thing is interaction and information, and information should be easy to read, use, scale, cite and send.
If you can not make a decent website design without text in pictures, I'm afraid you will have to start from scratch.
Source: https://habr.com/ru/post/31547/
All Articles