Text layout of web design skills series

Skills | design | Web page design

Too long to write articles, mainly work too busy. I'm not sleeping tonight. Write this article to help beginners, but also to thank those who have helped me and the authors of the books I read.

We do in the Web site will find: Their own picture is also good, the layout of their own is also very exquisite, do the icon is also very beautiful, the first look looks like very beautiful, but look at the feel uncomfortable, also do not know why ...

I'm telling you here, maybe your typography is a problem. The visual effect of the unreasonable page layout makes the reader's eyes feel tired, the basic problem is that the word spacing is too crowded or too wide, the line spacing is too small or too large, the paragraph spacing is too little or too many, "too many or too few words per row", and other common factors. We can see from the following diagram and explain the content of the difference, at the same time I will give you a relatively good parameters for everyone's reference. Of course, the design is not too rigidly, I provide a general proposal, different sites to treat, do not too rigidly adhere to the parameters I give you.

Below we use the legend to illustrate. Take a closer look at the first picture below, the top three figures are the problem of line spacing, the last two is the question of word number.

Problem with line spacing

The first one is too crowded and glued together so that the eye will need to take a moment to read the text, which will make the reader very tired. Very uncomfortable. Look at the text you have on hand is not too crowded, if it is then change it!

The second is more moderate, because each row is very clear, so it seems to have a strong recognition.

The third one is wide and loose, so it looks clear, but when your article is not one or two lines but more than 10 lines and dozens of lines, you will feel that the consistency of the article has a very serious disconnect, general layout will not cross two font height (2em).

The question of Word number

The following two graphs are questions about the number of words. The fourth line of text is too long, so it looks as if the head should be shaken, so that the reader is more likely to appear tired. Because you want to constantly rotate the head, or let the eyeball constantly swing around. The most comfortable way is that the reader at a glance can read a line, or from the end of the line to the beginning of the next line will also form a sense of rupture.

And the bottom is too flat, so it does not look very comfortable. The eyeball will also feel uncomfortable because of the constant reading of the line. Recommended the best word is: no more than 45 letters, not more than 30 characters.

Let's look at a picture and talk about the distance between paragraphs.

The distance of the paragraph

The following picture is about the interval.

The above one is more appropriate, such a separate paragraph, so that readers feel that the article is not a lot of difficult to read.

If you do not take the paragraph as one thing, show extinct then as follows, two paragraphs become a paragraph.

We can see which is better, if dozens of paragraphs together, then this article will be very few people can read it!

Now the classic forum in the line has been reset, now released long articles will not feel the paste together, and in the link to add a row of money, for color blindness or anomalous trichromatism friends easy to identify, more humane!