Text typesetting needs to consider text recognition and page readability. This paper will share with you how to make wonderful text typesetting in web pages from the perspective of the best readability specification and the four principles of nonsense design.
Think about it first. Do you think the typesetting is good?
In our opinion, good typesetting must be readable, and the text content is visually balanced and coherent, with a sense of overall space.
Layout, content placement and column design will all affect the readability of the text. From the readability, designers need to consider font, font size, line spacing, spacing, background color and text color contrast.
In the last article, we focused on fonts and font sizes. The following best readability specifications introduced line spacing and spacing, and shared appropriate line widths and heights to help readers keep reading rhythm and make readers have a better reading experience.
First of all, the best readability specification
1. Line width
We can imagine: if a line of text is too long and the line of sight moves for a long time, it is difficult for people to notice the beginning and end of the paragraph and it is difficult to read it; If a line of text is too short, your eyes will keep scanning back and forth, which will destroy the reading rhythm.
Therefore, we can make each line of the content area carry an appropriate number of words to improve readability.
The number of characters per line in traditional book typesetting is preferably 55-75, but in fact, 75-85 characters per line are more popular on web pages. When the Chinese font is 14, 35-45 characters are recommended.
For example, as shown below:
2. Interval
Line spacing is a very important factor affecting readability. Too wide line spacing will make the text lose continuity and affect reading. If the line spacing is too narrow, it is easy to jump.
In web page design, the spacing between words is generally 1- 1.5 times as the line spacing and 1.5-2 times as the paragraph spacing according to the font size.
For example, font 12, line spacing is 12px- 18px, and paragraph spacing is 18px-24px.
In addition, the line height/spacing between paragraphs =0.754. It is common that the line spacing is exactly 75% of the paragraph spacing.
For example, Fonteneau. 16, line spacing 27px/ paragraph spacing 36px=75%. The font itself is relatively large, so it is not necessary to set the line spacing strictly according to the ratio of 1- 1.5 times, but the ratio of line spacing to paragraph spacing is 75%, which looks very good. This visual effect makes people keep a sense of rhythm when reading, which is a flexible application of norms in actual situations.
3. Line alignment
An important specification in typesetting is to align where it should be aligned, such as the position of each line.
No matter what kind of visual effect, exquisite, formal, interesting or serious, a clear alignment can generally be used to achieve the goal.
Generally speaking, it is recommended to use only one text alignment method on the page, and try to avoid alignment at both ends.
4. Leave the text blank
When typesetting, it is necessary to leave free space in the layout, and the order of blank space from small to large should be: word spacing, line spacing and paragraph spacing. In addition, before typesetting the content area, you need to leave a blank around the page according to the actual situation of the page.
Second, the application of the four principles of nonsense design in text typesetting
Nonsense is the four basic design principles, including contrast, repetition, alignment and intimacy, which have been widely used by designers. These four basic principles are also very suitable for text typesetting in web design.
1. Comparison
We divide the contrast into three categories, mainly the font and font size contrast of titles and words, the color contrast of words, and the color contrast of words and backgrounds.
& gt？ Comparison between title and text
On the case page of AnyForWeb website, the title is Microsoft YaheiNo. 18, the text is Song Dinuo. 12. The contrast between the two fonts makes the text rich and easy to attract readers' attention.
& gt？ Text color contrast
In the official website of Garan, some characters use different colors from the main characters. This contrast is one of the effective ways to increase the visual effect and highlight the key points of the paragraph.
& gt？ Contrast between text color and background color
This is a very common typesetting design method. Proper contrast between text and background can improve the clarity of text and produce strong visual effects.
For example, Accenture official website, the contrast of black characters with red headlines on a white background and the application of white characters on a red background clearly set off the text content, which is not only full of hierarchy, but also has a strong visual impact.
Designers need to pay attention when applying this principle and must ensure that the text is easy to read. If the text is too small or too thin and the color contrast is not enough, it will be counterproductive. For example:
If designers are not familiar with color contrast, they can use color contrast detection tools (such as Check My Colours and Colour Contrast Check) to detect color difference and brightness difference, so as to ensure the readability of web design.
repeat
Elements in the design can be reused throughout the web design. For words, it may be the repetition of font, font size and style, or it may be the same type of pattern decoration, the overall layout of words and pictures, etc. Repetition gives users an organized and consistent experience, which can create consistency and appear more professional.
For example, HeyJuice website adopts the unified form of "picture+title+text" in product guidance. The content is different, but the layout is unified and the picture style is consistent. Users know at a glance that they belong to the same section, and such repetition can easily produce a coherent and balanced aesthetic feeling.
For example, in the process of Tuba Rabbit's network decoration, the position and form of the title text in the picture are the same, which is not only in contrast with the background color of the picture, but also the repetition of the text style.
The principle of repetition is widely used in web design. Single repetition seems monotonous, but designers can use it flexibly according to the needs of different websites. For example, repeated revisions can increase innovation and add vitality to web design.
align
In web design, elements can't be placed on the page at will, and each item must be related to the content of the page. Alignment is an essential part of web design, which can help designers make attractive designs and is a potential requirement of excellent web design.
There are many cases of alignment, so we will list two at will.
Mentholatum website is aligned to the left:
Center alignment of Darry Ring website:
Left alignment and right alignment make the text look clearer and the effect is clear; Centering alignment is more solemn, formal and steady.
Step 4 be intimate
Proximity means connection, and intimacy means that related projects are organized together, making them look harmonious and unified as a whole.
Intimacy can be started from two points: appropriate blank space, visual emphasis and prominent sense of hierarchy.
For example, in the following case, the combination of graphics and text is the combination of various elements.
The human eye is first attracted by the banner picture and the text inside, and then moves down to the text description and link text. The intimacy and contrast of these elements form a balance.
The above is the content of this sharing. As mentioned above, the quality of typesetting tests the basic skills of a designer, and the usual kung fu is indispensable. I look forward to the wonderful typesetting designed by everyone!
Address of this article:/sjiinfo 7282.html.