Does the text of the website still need to design?

Source: Internet
Author: User

Perhaps a lot of people have to ask, the text of the site still need to design it?

For many sites, the word in the entire content of the site accounted for more than 80% or more, or to change the point of view, the site can be no color, no pictures, but can not have no text.
A product team, there is a role called Content Design,ucdchina has a topic called attention to the text on the interface, very exciting, I write this article, read it again, on the one hand, learning, on the other hand, is to avoid writing duplicate content. If you follow the point of view of your site, I believe it will help.
That topic only Xiaoxiao focus on the visual aspects of the text, the article is very exciting, but also the topic of the "Browse Champion", this article is a continuation of some ideas.

First look at the Chinese font design outside the site, English text font has a lot to choose from, but the Chinese text, in general, two kinds: XXFarEastFont-Arial and boldface. In the traditional layout design, designers like to do in English typesetting, why? Visually, the combination of English can easily form a line-and-surface relationship, and the letter has a sense of rhythm, such as Aby these three letters together have a height difference. Chinese characters are relatively monotonous, isolated, and not fluent.

Back to the design of the text in the website, the designer basically does not have to consider to choose in the font, only the song body. The previous article said: a single word into a point, line words into lines, a word into the surface . This is the basic principle of layout design, we need to do is to strengthen this feeling. Take the Microsoft elegant Black and the song body to give the example, I very like Microsoft elegant black design.

Enlarge the number 12th in the Arial and the black, and note the following details:

    1. Ya-Black is a pixel wider than the song body.
    2. Ya black let each stroke to the surrounding, such as "is" above the "day", the black appears to be full

The only way to do this is to make Chinese fonts easier to form lines and to read more smoothly. We can see that although the black is not a real square, it looks more than the Song Dynasty.

Read the above example, my point of view is out: Do not take your words as a word, but as a point, the visual design of the text is to deal with the relationship between point and line surface.

here are some specific aspects of the design :

    1. The font units are used with EM instead of PX, although the 12px and 0.8em are about the same size.
      Updete: Thanks to netizens Dreamcolor recommended article 95% of the Chinese website needs to rewrite the CSS, this article explains the PX and EM difference and principle in detail. This was written before I took it for granted, without an in-depth understanding of EM units. Only see a lot of using EM's visual effect is not good to see, now understand, because there is no EM unit and PX on the number. The conclusion is that EM should be used instead of PX, but the value of EM should be set well.
    2. In the CSS file body in the font-family inside to ensure that "XXFarEastFont-Arial" or Verdana, personally recommended this: Font-family:helvetica,georgia,arial,sans-serif, XXFarEastFont-Arial. This ensures that the letters, numbers, and symbols in your interface look beautiful, and more importantly, more readable.
    3. The Sub bar says: In the 12th, we typically use 18-20-pixel spacing. The 14th-song body usually uses 22-24-pixel spacing.
      It is very well agreed that this line spacing fluctuates with the number of single words. I think that 17 is acceptable if the number of words in a single line is less than 12px.
    4. Text line words best not more than 50, the first page of the title text to 8-20 words is preferred.
    5. 12 and 14px is relatively the most exquisite, 13px in need of time can do positive text, Word inside the default word size equivalent to the 13px of the page.
    6. For a paragraph of text, especially the body part, to ensure that there are at least 15px left and right, so that users can change without interference.
    7. Text and background contrast should be clear enough to ensure the readability of the weakest text.

PS1: The wordpress theme for the lovely daughter of Denis's morning design comes out today, and the details need to be adjusted. That girl is lovely on the ground!

PS2: I have some friends to send me a message to your station to make suggestions, I finished this series of visual design after the article, unified to give a reply. I think that from the point of view of the article, can I get some help? In particular, you can look at the topic of Ucdchina.



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.