Some problems that designers should pay attention to in web page typesetting

Typesetting is an art and a skill. We can see typography, beauty, or ugliness in newspapers, books and other media every day. How can the accurate transmission of information at the same time, but also to expel exquisite layout, this is the designer is worth pondering the question, because this relates to the reader's reading feelings. This paper takes the page typesetting as an example, and expounds the problems and details that should be paid attention to in the typesetting of the successful design in several aspects.

Webmaster House (chinaz.com) April 18 compiled: In general, typography is the art and skill of rearranging fonts for information sharing. In other words, typesetting is a simple arrangement for conveying information, however, good typography attaches great importance to visual accuracy and detail, even small details should not be overlooked. Typography first appears in writing, so even the simplest alphabetical arrangement can be considered a typesetting. Today, print, books, newspapers, letters, televisions, networks and so on are all about typography, and it's almost everywhere. Even important websites have been focusing on typography before, and at that time tried to use ready-made resources to improve the layout level as much as possible.

Web layout

Web typesetting is a branch concept of general typesetting which has arisen in recent years. Although pictures can also convey information, most of the content on the site is made up of text. This is why web typesetting is so highly valued. Typesetting is no less important than visual hierarchy, selection of appropriate colors, website functions, and other features. We have never underestimated the importance of web typesetting and the important role it plays in a good user experience.

Anyone who pursues a beautiful layout knows that typography is a completely different thing from web typesetting. Although some rules may be the same, web design is in a completely different environment, both of which have their own set of rules and guidelines to follow. The two principles are different and cannot exist at the same time, and crossing this line may lead to typographical confusion.

Hierarchical structure

Although you may already be familiar with the hierarchy of Web design, you may also understand that it is not indispensable in typesetting. The hierarchy will give you a starting point for reading the display text. This is important because it will help you to accurately convey information while ensuring that the reader understands it accurately. Many websites do well on this issue, but you should keep that in mind so that your site doesn't look too outdated.

Spacing problem

Although, rarely encountered in the site layout of the problem of hierarchical structure, but a considerable number of site typesetting there is a problem of spacing arrangement. The spacing of all elements of a Web site must be arranged in a certain order, so you must follow these levels in the process of spacing. You may need to understand the following special terms: line spacing (leading size), kerning (Kerning), and Word spacing (tracking).

Line spacing is a way to increase or decrease the amount of space that is generated between lines of text. Click here to read and you will know why reducing the line spacing is good for readers to read. Kerning is the process of adjusting the spaces between characters to make them more enjoyable visual effects. Using word spacing can also achieve the effect of kerning, the only difference between the two is the creation of spaces, the word spacing between each character produces an equal amount of space, and the kerning is adjusted based on the space generated by the character pair.

Colors and palettes

The color in typesetting does not refer specifically to a single text color, usually to all the colors used by the site. The pictures and colors used in the Web site correspond to the "background" of the text, so be cautious when using colors. The elements of the site should be harmonized with the layout color, so don't let the text appear blurry. You can also try larger size typography (also called macro typesetting) to achieve better results. In simple terms, macro typography is about using larger text to attract users. It is usually not longer than 1 to 4 words in length, so it is particularly important to keep the simplicity and correctness of the text. In the key information, but this is not so important, because this is not the focus of your site, but the large size of text is.

Website Macro Typesetting Example

Purple Bunny

Matt Hall

Vs

Font pairing

Font pairing is the process by which two or more fonts are grouped together to achieve the best results. It sounds interesting, but it's not easy for beginners. It's enough to choose one or more beautiful fonts, but you just want to match the two fonts perfectly, theoretically, more difficult. Font pairing reduces the sense of monotony that can occur when you use a single font. You can practice this by using a font for all the headlines in your site, and using a different font in some simple paragraphs to see if the end result is monotonous. Douglass Bonneville Book in detail on the list of thousands of font pairs, interested friends can go to see.

Font Size/Weight contrast

If you make the font illegible, it's a big no-no. You also know the importance of font pairing for fine typography, not some unified text. Even if you find a great font mix, don't forget to set the appropriate size and thickness for the font. Improper font weight and size settings basically destroy the previous match, because it makes the different fonts you already use illegible. Also note that the background picture and the font color similar or not match, will cause the font submerged in the background image.

Font substitution method

In the past, designers had to use a user's computer, or even a font with a text picture, so that the font would be displayed correctly. As technology continued to evolve, HTML5 quickly overcame these problems. There are also a number of great font substitution tools, which collect a lot of fonts, and the user does not have to install special fonts, so the fonts are displayed correctly.

@font-face

@font-face is one of the easiest ways to replace it. It was introduced a few years ago. Because there is no messy JavaScript and jquery "disruptive", it is very simple to implement, relying only on CSS and a few extra lines of code to run. Font-face the only drawback may be that different browsers on the rendering process is different, the use of the latest version of the browser should be able to avoid this problem, but in any case, since the problem, we can not wash away.

　　Google fonts

Although Google published its own font library in 2010, it has included about 500 fonts. The Google Font API is widely used because it is easy and trustworthy. But its only disadvantage is the lack of high-quality fonts. Although it provides a complete font type, because of the lack of high-quality fonts, will weaken the strength of the site.

　　Typekit

Typekit is a well-known service that has existed for many years. It collects about thousands of fonts, and most of them are beautiful, which is why it is so popular. Another reason is that it provides a paid @font-face font solution that Google does not have. The service was launched in 2009, a year after the small famous, more than Google fonts to become famous earlier. The only drawback is that many potential customers have a headache for the payment method. It is a yearly fee, in addition to different price packages, Site page views, and the number of fonts used per site are limited.

　　Fontsquirrel

The most important thing is that you can use a lot of fonts and it's completely free. The fonts it offers are well loved and are completely free to use on many sites. Fontsquirrel even allows you to create your own @font-face font pack using the @font-face Builder. (jaysming)