100% Easy-2-Read
Most sites are full of small text that hurts to read. Why? There is no reason to squeeze all the information on one screen, it’s just a stupid collective error that originates in times when monitors were very small.
We do not want to change the browser settings every time we go to the site!
Overloaded sites look terrible. Filling the page to the outset does not contribute to usability. You load us with junk just because of your laziness. We want you to think and choose only what is really important, no one wants to do the work for you.
After all, this means that all sites are bad. There is nothing wrong with the need to scroll, just like there is nothing wrong with turning the pages of a book.
95% of what is commonly called web design is typography.
Just stop licking the screen, lean back and read in a relaxed position.
We do not want to click on the increase or decrease buttons and change the browser settings. We want you to adjust to our settings and monitors.
Creating a good page using large fonts is a real challenge, but, having overcome all difficulties, you will get a simple and convenient site . It is difficult to squeeze all possible information onto a page, to make a page simple and understandable for users. At first, the standard font size may shock you, but after a day you don’t want to see anything smaller than 100% or 1em for the main text. It looks large, but soon you will understand why all browser manufacturers have chosen just such a default font size.
The text must breathe. Using space is not just a fad of designers or a matter of taste, the presence of air around the text reduces the burden on the reader and allows him to better focus on the meaning. There is no need to fill the entire window with different junk. The fact that space looks better is not a side effect, but a consequence of functional design.
Brockmann: "The width of the column is not only a matter of design and format, it is just as much a matter of readability."
Please make sure that the width of the column is not too large, and you have added space on the left and on the right to make it easier for the eye to find the beginning of the line. We do not want to adjust the font size or the width of the window when we go to the site, we just want to read.
It is great if the column width is changed so that the lines never end outside the window.
The column width should be such that each line contains 10-15 words. For rubber markings, and a font size of 100%, a column at 50% of the window width gives a good result at most resolutions.
Good Nielsen - Bad Nielsen. The usability king recently added some space on his site and set the maximum column width, slightly increased the height of the line, which very well affected the readability of the texts.
')
Here is what the reading experts say about this:
Lines placed too closely reduce the speed of reading, because the previous and next come into view, the reader cannot focus, spends energy in the wrong places and gets tired quickly, the same is true for too sparse lines.
The height of the line, used by browsers by default, is too small, if you increase its text becomes more readable, a good result gives 140% leading.
This is not even worth talking about. But if you still use one of the following combinations:
then you just try to pretend to be a designer, nobody will believe in it, because no one can read what you write. Stop this misunderstanding and make it so that we can see what you are writing.
Note: For on-screen text, too much contrast (black and white) is not always the best solution, because the text starts to flicker. Try # 333 on #fff.
We want to be able to search for text, copy text, save text, play with the cursor, and highlight text when we read. Text in the form of images looks beautiful, but beauty is not what you need on the web. The web is communication and information, and information must be readable and convenient, scalable, quoted and stored.
If you can not make a beautiful site without text in the images, I am afraid that you will have to start all over again and learn.
If you want more sites to be convenient and readable, make your contribution to popularizing user care, post a link to this page on your website so people know that readability is very important. If you join the 100E2R promotion, I will be happy to add you to the list of participants.
Leave comments on the page 100% Easy-2-Read - Design For Masters , containing a link and a couple of lines of description, if your site complies with the principles of 100E2R, I will add it to the list on this page, whether I like its design or not. Of course, no spam, just or politics.
Nobody supported the honor of Russian design.
What do you think, I know for sure that Verdana 16px is too much, and Arial is not very readable at 16px, so I want to hear different opinions about 100% of the font size and see the sites where they are used, throw links, many of the sites participating in the promotion, convenient and readable can not be called.
Don't tell us you can adjust the font size.
We do not want to change the browser settings every time we go to the site!
Do not tell us that the completed page looks better.
Overloaded sites look terrible. Filling the page to the outset does not contribute to usability. You load us with junk just because of your laziness. We want you to think and choose only what is really important, no one wants to do the work for you.
Don't tell us that scrolling is bad
After all, this means that all sites are bad. There is nothing wrong with the need to scroll, just like 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.
Don't tell us you need to take points.
Just stop licking the screen, lean back and read in a relaxed position.
Five simple melted
1. Standard font size for long texts.
We do not want to click on the increase or decrease buttons and change the browser settings. We want you to adjust to our settings and monitors.
Creating a good page using large fonts is a real challenge, but, having overcome all difficulties, you will get a simple and convenient site . It is difficult to squeeze all possible information onto a page, to make a page simple and understandable for users. At first, the standard font size may shock you, but after a day you don’t want to see anything smaller than 100% or 1em for the main text. It looks large, but soon you will understand why all browser manufacturers have chosen just such a default font size.
2. Active space
The text must breathe. Using space is not just a fad of designers or a matter of taste, the presence of air around the text reduces the burden on the reader and allows him to better focus on the meaning. There is no need to fill the entire window with different junk. The fact that space looks better is not a side effect, but a consequence of functional design.
Brockmann: "The width of the column is not only a matter of design and format, it is just as much a matter of readability."
Please make sure that the width of the column is not too large, and you have added space on the left and on the right to make it easier for the eye to find the beginning of the line. We do not want to adjust the font size or the width of the window when we go to the site, we just want to read.
It is great if the column width is changed so that the lines never end outside the window.
The column width should be such that each line contains 10-15 words. For rubber markings, and a font size of 100%, a column at 50% of the window width gives a good result at most resolutions.
Good Nielsen - Bad Nielsen. The usability king recently added some space on his site and set the maximum column width, slightly increased the height of the line, which very well affected the readability of the texts.
')
3. Convenient row height
Here is what the reading experts say about this:
Lines placed too closely reduce the speed of reading, because the previous and next come into view, the reader cannot focus, spends energy in the wrong places and gets tired quickly, the same is true for too sparse lines.
The height of the line, used by browsers by default, is too small, if you increase its text becomes more readable, a good result gives 140% leading.
4. Clear contrast
This is not even worth talking about. But if you still use one of the following combinations:
- light gray text on light gray background
- gray text on white background
- gray text on yellow background
- yellow text on red background
- green text on a red background and the like ...
then you just try to pretend to be a designer, nobody will believe in it, because no one can read what you write. Stop this misunderstanding and make it so that we can see what you are writing.
Note: For on-screen text, too much contrast (black and white) is not always the best solution, because the text starts to flicker. Try # 333 on #fff.
5. Do not make text as images.
We want to be able to search for text, copy text, save text, play with the cursor, and highlight text when we read. Text in the form of images looks beautiful, but beauty is not what you need on the web. The web is communication and information, and information must be readable and convenient, scalable, quoted and stored.
If you can not make a beautiful site without text in the images, I am afraid that you will have to start all over again and learn.
Fight for readability
If you want more sites to be convenient and readable, make your contribution to popularizing user care, post a link to this page on your website so people know that readability is very important. If you join the 100E2R promotion, I will be happy to add you to the list of participants.
How to join E2R
Leave comments on the page 100% Easy-2-Read - Design For Masters , containing a link and a couple of lines of description, if your site complies with the principles of 100E2R, I will add it to the list on this page, whether I like its design or not. Of course, no spam, just or politics.
Participants of the action 100E2R
- James Starkie : 100g2 design.
- Piqniq : Social Network for foreign families in Japan.
- Asoboo : International Social Network for Japan .
- Dadako : Internationally acclaimed pixelpusher Hawken King is currently redesigning his website according to 100E2R. iA is particularly proud we could convert him. So far he's updated his blog. It’s a real fun to watch for it.
- What is the structure of the blogosphere?
- Kilian Muster : Typographer, blogger, podcaster living in Japan. Very nice 100E2R example.
- Glorum : Very intriguing Wiki-posting-blackboard-web2.0 thing in the gamma stage. Haven't found out what it is, but it is on a good path.
- Engtech : Geeky stuff like blogging, programming, general nerdery, internet trends, marketing, how-to guides ...
- Blue Fountain Blog : They say: “Don't look at our main site whatever you do”
- Protos : Creative stuff by Kristian Türning regarding: Internet culture, innovation, UI, branding and unlimited success.
- Neunzehnhundert : German Blog: We're just two lost souls. What have we found?
- NVAC : A National Strategic Survey and International Resource Analyzer. NVAC supports our homeland and protects American people.
- Corum : Corum Web Designs specializes in simple website designs. We don't do Flash, Java, Multimedia, or database driven shopping carts.
- Praegnanz : German weblog. Indeed 100% easy to read.
- TagCrowd : Blog for the TagCrowd web app.
- Clinton Forbes : The rantings of Clinton Forbes.
- Jens: xhtml and css stuff.
- Adub: Web application design with emphasis on usability and simplicity.
- De Amicis : De Amicis is a small company.
- Connexin Heiko's Website with (German) info on all sorts of themes.
- Gwersi Cymraeg A blog in Welsh promoting the Welsh. As far as I can tell ...
- rs ““ ““
Nobody supported the honor of Russian design.
push
Hmm ... Really?
What do you think, I know for sure that Verdana 16px is too much, and Arial is not very readable at 16px, so I want to hear different opinions about 100% of the font size and see the sites where they are used, throw links, many of the sites participating in the promotion, convenient and readable can not be called.
Source: https://habr.com/ru/post/31023/
All Articles