Web page color matching skills, text font, font size, font layout, etc._Basic tutorial

Beginners who make web pages may be more accustomed to using some beautiful pictures as the background of their web pages. However, if you browse large commercial websites, you will find that they use more white, blue, yellow, etc. to make the web pages look more attractive. Elegant, generous and warm. More importantly, this can greatly speed up the speed at which viewers open web pages.

Generally speaking, the background color of a web page should be softer, plainer, and lighter, coupled with dark text to make it look natural and comfortable. For a more eye-catching visual effect, use a darker color for the title. The following is my experience in matching the background color and text color of web pages when I was making web pages and browsing other people's web pages. These colors can be used as the background color of the text or the background color of the title. When paired with different fonts, there will definitely be something Nice effect, I hope it will be useful to everyone when making web pages.

BgcolorΚ″#F1FAFA″——The background color for the text is good and elegant
BgcolorΚ″#E8FFE8″——The background color for the title is better
BgcolorΚ″#E8E8FF″——The background color for the main text is better, and the text color is black
BgcolorΚ″#8080C0″——-Yellow and white text is better
BgcolorΚ″#E8D098″— ——It is better to have light blue or blue text on top
BgcolorΚ″#EFEFFDA″——-Light blue on top Color or red text is better
BgcolorΚ″#F2F1D7″——Black text is elegant, if it is red, it will look eye-catching
BgcolorΚ″#336699″——It looks better with white text
BgcolorΚ″#6699CC″——It looks better with white text, you can use it as a title
BgcolorΚ″#66CCCC″——It looks better with white text, you can use it as a title
BgcolorΚ″# B45B3E″——It looks better with white text, you can use it as a title
BgcolorΚ″#479AC7″——With white text It looks better, you can use it as a title
BgcolorΚ″#00B271″——It looks better with white text, you can use it as a title
BgcolorΚ″#FBFBEA″——It looks better with black text, usually as the main text
BgcolorΚ″#D5F3F4″——It looks better with black text, usually as the main text
BgcolorΚ″#D7FFF0″——It looks better with black text, usually as the main text
BgcolorΚ "#F0DAD2"——It looks better with black text, usually as the main text
BgcolorΚ″#DDF3FF″——With Black text looks better, generally as the main text
Light green background with black text, or white background with blue text are both eye-catching, but the former highlights the background, and the latter highlights the text. A red background with white text, and a darker background with yellow text are very effective.
This article only serves as an "introduction". You can use your imagination to match more innovative and eye-catching colors to make the web page more attractive

Nowadays, the Internet is becoming more and more popular. In recent times, Internet surfing has gradually become an indispensable part of our lives. The online world is colorful, and a large number of excellent and beautiful web pages have emerged. The presentation of a large amount of network information is nothing more than text, images, Flash animations, etc. Among them, text is the most important design element in a web page. For beginners in web design, it is particularly important to understand and master text layout design in web design. The author would like to talk about his personal opinions below.
Formatting of text

Font size, font, line spacing

Font size can be calculated in different ways, such as points#quotel.quoter# or pixels (Pixel). Because printing based on pixel technology needs to be converted to points, it is recommended to use points as the unit.
The most suitable font size for displaying the main text of a web page is about 12 points. Many comprehensive sites now usually use a font size of 9 points due to the large amount of content that needs to be arranged on one page. Larger fonts can be used for headings or other areas that require emphasis, and smaller fonts can be used for footers and supporting information. It should be noted that small font sizes tend to create a sense of integrity and refinement, but are less readable.
Web designers can use fonts to more fully embody the emotions being expressed in their designs. Font selection is an emotional, intuitive act. However, no matter what font is chosen, it must be based on the overall design of the web page and the needs of the viewer. For example: bold fonts are strong and powerful, with masculine characteristics, and are suitable for content in the machinery, construction industry, etc.; thin fonts are elegant and meticulous, with feminine characteristics, and are more suitable for content in clothing, cosmetics, food and other industries. On the same page, if there are fewer types of fonts, the layout will be elegant and stable; if there are many types of fonts, the layout will be active and colorful. The key is how to grasp this proportional relationship based on the page content.

From the perspective of enhancing platform independence, it is best to use the default font for text content. Because the browser uses the font library on the local machine to display the page content. As a web designer, you must consider that most browsers only have three font types and some corresponding specific fonts installed on their machines. The font you specify may not necessarily be found on the viewer's machine, which brings great limitations to web design. The solution to the problem is: where it is really necessary to use special fonts, the text can be made into an image and then inserted into the page.

Changes in line spacing can also have a great impact on the readability of text. In general, line spacing settings close to the font size are more suitable for body text. The normal ratio of line spacing is 10:12, that is, if the characters are 10 points, the line spacing will be 12 points. This is mainly due to the following considerations: Proper line spacing will form an obvious horizontal blank band to guide the viewer's eyes, while excessive line spacing will cause a line of text to lose good continuity.

In addition to its impact on readability, line spacing itself is also a highly expressive design language. In order to enhance the decorative effect of the layout, line spacing can be consciously widened or narrowed to reflect unique aesthetic interest. For example, widening the line spacing can reflect a relaxed and relaxed mood, and is appropriate for entertaining and lyrical content. In addition, through careful arrangement, wide and narrow spacing can coexist, which can enhance the spatial hierarchy and flexibility of the layout and show unique ingenuity.

Line spacing can be set using the line-height attribute. It is recommended to use points or a percentage of the default line height as the unit. For example: {line-height: 20pt}, {line-height: 150%}.

The overall arrangement of text

The text part of the page is a group composed of many individual words arranged. It is necessary to give full play to the shape of this group in the overall layout of the page. role. From an artistic point of view, font itself can be regarded as an art form, which has a great impact on people's personality and emotions. In web design, the processing of fonts is as critical as the processing of other design elements such as color, layout, graphics, etc. In a sense, all design elements can be understood as graphics.

1. Graphics of text

Fonts have two functions: one is to realize the function of word meaning and semantics, and the other is aesthetic effect. The so-called graphicalization of text means emphasizing its aesthetic effect, expressing symbolic text as graphic elements, and at the same time strengthening the original function. As a web designer, you can either set fonts in a conventional way or design them artistically. No matter what, everything should focus on how to achieve your design goals better.
Text graphics and imagery can express deep design ideas in a more creative form, which can overcome the monotony and blandness of web pages and impress people.

2． Superposition of text

After superposition between text and image or between text and text, it can produce a sense of space, jump, transparency, noise and narrative, thus becoming a page active and eye-catching elements. Although the overlay technique affects the readability of the text, it can create a unique visual effect on the page. This technique of expression, which does not pursue readability but deliberately pursues "noise", embodies an artistic trend. Therefore, it is not only widely used in traditional layout design, but also widely used in web design.

3. Title and text

When arranging the title and text, you can first consider arranging the text into two columns, three columns or four columns, and then place the title. The purpose of dividing the text into columns is to gain space and flexibility on the page, and to avoid the rigidity of the columns and the singleness of the title insertion method. Although the title is the title of the entire paragraph or article, it does not necessarily have to be placed at the beginning of the paragraph. It can be arranged in the center, horizontally, vertically or on the side, and can even be directly inserted into word groups to break the old rules with a novel layout.

4. Four basic forms of text arrangement

The text part of the page is a group composed of many individual words arranged. It is necessary to give full play to the role of this group shape in the overall layout of the page.
Equal at both ends: The length of the text from the left end to the right end is even, and the character group forms a square surface, which looks upright, rigorous and beautiful.
Centered arrangement: When the word spacing is equal, arrange the text with the center of the page as the axis. This arrangement method makes the text more prominent and creates a symmetrical formal beauty.
Left-aligned or right-aligned: Left-aligned or right-aligned makes the beginning or end of the line naturally form a clear vertical line, which is easy to match the graphics. This arrangement method is loose and tight, empty and solid, jumping and elegant, creating a formal beauty of rhythm and rhythm. Left alignment conforms to people's reading habits and appears natural; right alignment is rarely used because it does not conform to reading habits, but it appears novel.
Arrange around the image: Arrange the text around the edge of the image. If you insert the base image into the text, it will feel harmonious and natural.

Emphasis of words

1. The emphasis at the beginning of the line
enlarges the first word or letter of the text and makes it decorative, embedding it at the beginning of the paragraph. This is called "drop style" in traditional media layout design.The invention of this technique can be traced back to medieval scribes in Europe. Because it attracts attention, decorates and activates the layout, it is used in the text layout of web pages. The drop should span the upper and lower range of a complete line. As for the amount of magnification, it depends on the web page environment.
2. Emphasis on citations
When arranging text on web pages, you often encounter text that outlines the main points, that is, citations. A quotation summarizes the main idea of ​​a paragraph, a chapter, or the entire text, so it should be given special page position and space for emphasis in the layout. Quotations can be arranged in various ways, such as embedding them on the left and right sides, above, below or in the center of the text, and can be different from the text in font or size.
3. Emphasis on individual words
If individual words are used as the focus of appeal on the page, the visual effect of the words can be consciously enhanced by bolding, framing, underlining, indicating symbols, italic fonts, etc. Make it stand out and eye-catching on the entire page. In addition, changing the color of some text can also make this part of the text emphasized. These methods actually use the law of contrast.

Text color

In web design, designers can choose various colors for text, text links, visited links and currently active links. For example, if you use the FrontPage editor, the default settings are as follows: the normal font color is black, the default link color is blue, and it changes to purple after the mouse is clicked. Using text of different colors can make the part you want to emphasize more eye-catching, but it should be noted that the color of text can only be used in a small amount. If you want to emphasize everything, nothing will be emphasized. Moreover, using too many colors on a page will affect the viewer's ability to read the page content, unless you have a special design purpose.

In addition to emphasizing special parts of the overall text, the use of color can also have an impact on the emotional expression of the entire copy. This involves the emotional symbolism of color, which will not be discussed in depth here due to space limitations.

Another thing to note is the contrast of text color, which includes contrast in brightness, contrast in purity, and contrast in warmth and coldness. These not only affect the readability of text, but more importantly, you can achieve the desired design effects, design emotions and design ideas through the use of color.

1. Color processing
　
Color is the most sensitive thing to human vision. If the color of the home page is well handled, it can be the icing on the cake and achieve twice the result with half the effort. The general application principle of color should be "overall coordination, local contrast", that is: the overall color effect of the homepage should be harmonious, and only local and small areas can have some strong color contrast. In the use of colors, different main colors can be used according to the needs of the homepage content. Because colors are symbolic, for example: tender green, emerald green, golden yellow, and taupe can symbolize spring, summer, autumn, and winter respectively.Secondly, there are professional colors, such as olive green for military and police, white for medical and health care, etc. Color also has obvious psychological feelings, such as cold and warm feelings, advancing and retreating effects, etc. In addition, colors also have national characteristics. Due to the influence of environment, culture, tradition and other factors, various ethnic groups also have large differences in their color preferences. Making full use of these characteristics of color can make our homepage have profound artistic connotation, thereby improving the cultural taste of the homepage. Here are some commonly used color schemes:

1. Warm colors. That is, the combination of red, orange, yellow, ocher and other colors. The use of this color can give the homepage a warm, warm and enthusiastic atmosphere. ​

2. Cool colors. That is, the combination of cyan, green, purple and other colors. The use of this color can give the homepage a quiet, cool and elegant atmosphere. ​

3. Contrast tones. That is to match colors with completely opposite color properties in the same space. For example: red and green, yellow and purple, orange and blue, etc. This color combination can produce a strong visual effect and give people a bright, colorful and festive feeling. Of course, contrasting tones, if used incorrectly, can be counterproductive and produce tacky, eye-catching effects. This requires grasping the important principle of "major harmony, small contrast", that is, the overall tone should be unified and harmonious, and there can be some small strong contrasts in local areas. ​

Finally, we must also consider the depth and lightness of the background color (background color) of the homepage. To borrow a term from photography, it is "high-key" and "low-key". Those with light background colors are called high-key; those with dark background colors are called low-key. If the background color is dark, the color of the text should be light, and the dark background should be used to set off the light-colored content (text or pictures); conversely, if the background color is light, the color of the text should be darker, and the light-colored background should be used to set off the dark content. Content (text or images). This change in depth is called "brightness change" in color science.On some homepages, the background color is black, but the text is also in a darker color. Since the brightness of the colors is relatively close, the readers' eyes will feel very hard when reading, which affects the reading effect. Of course, the brightness of the color cannot change too much, otherwise the brightness contrast on the screen will be too strong, which will also make the readers' eyes unbearable.

Color matching of web pages 　　

The color of web pages is one of the keys to establishing a website image, but color matching is a headache for netizens. What colors should be used for the background, text, icons, borders, hyperlinks... of web pages, and what colors should be matched to best express the expected connotation? Ajie talks about some experiences here, hoping to inspire you.

First of all, let’s understand some basic knowledge of color:

1. Color is produced by the refraction of light.

2. Red, yellow, and blue are the three primary colors, and other colors can be blended with these three colors. The color expression in the HTML language of web pages is expressed by the numerical values ​​of these three colors. For example: red is color (255,0,0), the hexadecimal representation is (FF0000), white is (FFFFFF), we often see "bgColor=#FFFFFF" means that the background color is white.

3. Colors are divided into two categories: achromatic and chromatic. Achromatic colors refer to black, white, and gray system colors. Color refers to all colors except achromatic colors.

4. Any color has the properties of saturation and transparency. Changes in properties produce different hues, so at least millions of colors can be produced.

Is it better to use color or non-color for web page production? According to research conducted by professional research institutions, the memory effect of color is 3.5 times that of black and white. That is, in general, color pages are more attractive than completely black and white pages.

Our usual approach is: use non-color (black) for the main content text, and use color for the border, background, and pictures. In this way, the page as a whole is not monotonous, and the main content will not be dazzling.

●Non-color combinations

Black and white is the most basic and simple combination. White characters on a black background, and white characters on a black background are very clear. Gray is a universal color that can be matched with any color and can also help the harmonious transition between two opposing colors. If you really can't find a suitable color, then try gray, the effect will definitely not be too bad.

●Color matching

Colors are ever-changing, and color matching is the focus of our research. We still need to learn more about color.

1. Color circle. We can get a color ring by overgrading the colors "red->yellow->green->blue->red" in sequence. The two ends of the color wheel are warm colors and cold colors, with medium colors in the middle. (As shown below)

Red. Orange. Orange-yellow. Yellow. Yellow-green. Green. Turquoise. Blue-green. Blue. Blue-violet. Purple. Purple-red. Red

|___________| |____| |_________| |_________| | | | |

Warm Colors Neutral Colors Cold Colors Neutral Colors

2. The psychological feeling of color. Different colors will give viewers different psychological feelings.

Red---is an exciting color. The stimulating effect can make people feel impulsive, angry, enthusiastic, and energetic.

Green---is between cold and warm colors, giving a feeling of harmony, tranquility, health and security. Paired with golden and light white, it can create an elegant and comfortable atmosphere.

Orange---is also an exciting color, with light, joyful, warm, warm and fashionable effects.

Yellow---has happiness, hope, wisdom and light personality, it has the highest brightness.

Blue---is the coolest, freshest, and professional color. It is mixed with white to reflect a soft, elegant and romantic atmosphere (like the color of the sky:)

White---has a feeling of whiteness, brightness, innocence and cleanliness.

Black---has deep, mysterious, quiet, sad, and depressing feelings.

Gray---has a feeling of moderation, ordinaryness, gentleness, humility, neutrality and elegance. ​

Slight changes in saturation and transparency of each color will produce a different feeling. Taking green as an example, yellow-green has a youthful and exuberant visual artistic conception, while blue-green appears tranquil and dark.

●Principles of web color matching

1. The vividness of color. The colors of the web page should be bright and eye-catching.

2. The uniqueness of color. Have a distinctive color to make everyone have a strong impression of you. (Refer to the section on standard colors for website CI in Part 2 of Design Thinking)

3. Appropriateness of color. That is to say, the color is suitable for the atmosphere of the content you express. For example, using pink to reflect the flexibility of a female site.

4. The associative nature of color. Different colors will have different associations. Blue thinks of the sky, black thinks of the night, red thinks of happy events, etc. The color you choose should be related to the connotation of your web page.

●The process of web color mastering

With the accumulation of web page production experience, we have such a trend in using colors: monochrome -> colorful -> standard color -> monochrome. In the beginning, due to the lack of technology and knowledge, I could only create a simple web page with a single color. After having a certain foundation and materials, I hope to create a beautiful web page and pile up the best pictures and the most satisfactory colors I have collected on the page. ; But as time went by, I found that the colors were messy and had no personality and style; I repositioned my website for the third time and chose colors that suited me, and the launched sites were often more successful; when the final design concept and technology reached their peak, then Going back to basics, you can design a simple and beautiful site with a single color or even non-color.

○Techniques for color matching on web pages

At this point in the article, impatient netizens may ask: "What color combinations should I use to look good? Can you recommend several color schemes?" Don't worry, here are some tips that can help you quickly become a color master:)

1. Use one color. This refers to selecting a color first, and then adjusting the transparency or saturation (to put it more simply, it means making the color lighter or darker) to generate a new color for use on the web page. Such a page looks uniform in color and has a sense of hierarchy.

2. Use two colors.First select a color, then select its contrasting color (press ctrl shift I in photoshop). This is how my homepage was decided with blue and yellow. The entire page is colorful but not overly colorful.

3. Use a color system. To put it simply, use a color that feels like light blue, light yellow, light green; or earthy yellow, earthy gray, earthy blue. Everyone has different methods of determining color. I click on the foreground color box in Photoshop, select "Custom" in the color picker window that pops up, and then select it in the "Color Library" :)

4. Use black and one color. For example, bright red fonts with black borders feel very "popular".

In web color matching, the taboos are:

1. Don’t use all colors, try to limit it to three colors.

2. The contrast between the background and the previous text should be as large as possible (never use complicated patterns as the background) in order to highlight the main text content

Color matching
STRONG>
1. Red has a warm color and a strong and outgoing personality. It is a color that is highly stimulating to people. Red can easily attract people's attention, and it can also easily make people excited, excited, nervous, impulsive, and it is also a color that can easily cause visual fatigue.

a) Adding a small amount of yellow to red will make it have strong heat and make it restless and restless.

b) Adding a small amount of blue to red will weaken its heat and make it more elegant and soft.

c) Adding a small amount of black to red will make its character calm, heavy and simple.

d) Adding a small amount of white to red will make it gentle, reserved, shy and delicate.

2. Yellow has a cold, arrogant, sensitive character, and has a visual impression of expansion and restlessness. Yellow is the most delicate color among various colors. As long as a small amount of other colors are mixed into pure yellow, its hue and color character will change to a great extent.

a) Adding a small amount of blue to yellow will transform it into a fresh green. Its arrogant character also disappeared, tending to a peaceful and moist feeling.

b) Adding a small amount of red to yellow will give it a distinct orange feel, and its character will change from indifferent and arrogant to a measured passion and warmth.

c) When a small amount of black is added to yellow, the color feel and color properties will change the most, becoming a complex color impression with obvious olive green. His color and nature have also become mature and easy-going.

d) By adding a small amount of white to yellow, the color becomes softer, and the indifference and arrogance in the character are diluted, making it more reserved and approachable.

3. Blue color has a sense of cynicism and a simple and introverted personality. It is a color that helps people to calm down. The simple and introverted character of blue often provides a profound, broad and calm space for those colors with active personalities and strong expansion power, becoming a friendly and humble friend that sets off the active colors. Blue is also a color that seems to maintain a strong personality even after it is diluted. If you add a small amount of red, yellow, black, orange, white and other colors to blue, it will not have a significant impact on the character of blue.

a) If there are more yellow components in orange, its character will tend to be sweet, bright and fragrant.

b) Mixing a small amount of white into orange can make the perception of orange become restless and weak.

4. Green is a color with two components: yellow and blue. In green, the expansion of yellow and the contraction of blue are balanced, and the warmth of yellow and the coldness of blue are offset. This makes green characters the most peaceful and stable. It is a soft, quiet, smooth and beautiful color.

a) When there are more yellow components in green, the character tends to be lively, friendly and childish.

b) Add a small amount of black to green, and its character will become solemn, sophisticated and mature.

c) Add a small amount of white to green, and its character will tend to be clean, refreshing and fresh.

5. The brightness of purple is the lowest among colored pigments. The low lightness of purple gives people a dull and mysterious feeling.

a) When there are more red components in purple, the perception is depressive and threatening.

b) Adding a small amount of black to purple will make it feel dull, sad, and scary.

c) Adding white to purple can make the dull character of purple disappear and become elegant, delicate and full of feminine charm.

6. White has a bright color and a simple, pure and happy character. White is holy and inviolable. If any other color is added to white, it will affect its purity and make its character subtle.

a) Mix a small amount of red into white to become a light pink, fresh and full of temptation.

b) Mixing a small amount of yellow into white will become a milky yellow, giving people a fragrant impression.

c) Mixing a small amount of blue into white makes people feel cool and clean.

d) Mix a small amount of orange into the white to create a dry atmosphere.

e) Mixing a small amount of green into white gives people a childish and soft feeling.

f) Mixing a small amount of purple into white can induce people to think of a light fragrance.