真人街机捕鱼

Your Position: Home > News > Anxiang Web Design

10 golden rules for font combinations in web design

Date: 2017-3-15 8:36:20 Popularity: label:
share to:
There is no set law in the world of design or art. After understanding the basic rules, we can add our own ideas and break the rules freely. Choose a font that matches the design, show the visual layering, use serifs and non-serifs, avoid font conflicts, and avoid using similar fonts to combine ... Let ’s take a look at the 10 currently being practiced by designers Font combination golden rule.

01. Choose a font that matches your design

Many fonts have simplicity, cheerfulness, formality, and elegance that are different from other atmospheres (English: Mood) or personality (English: personality). When designing the atmosphere of the design font, you need to confirm it first.



For example, the round font is very suitable for invitations to children's birthday parties, and the company's briefing is very inappropriate.

People are attractive because they are diverse (such as introverted or extroverted). A font with a strong personality can be combined with simple fonts to maintain balance.

In this project below, the distinctive hand-drawn font, combined with sans-serif font, does not hinder the main font. At the same time, the small characters below ensure its readability.




When deciding on two or more fonts, maybe there is a feeling of playing a Lenovo game (English: Guessing Game). For the most part, we make decisions based on our own instincts, which is actually okay.

Whether it is web pages, magazines, store posters, or product packaging, what kind of font combination is good or bad, we all start with Lenovo fonts.



02. Showing a sense of hierarchy

Newspapers or magazines published a long time ago have a very good role model for showing the layered sense of font combinations. Title, subtitle, text, commentary and other elements all rely on the combination of fonts to distinguish visually.

Font size (English: Size) thickness (English; Boldness), text spacing (including line spacing (English: Leading) and word spacing (English: Kerning)) adjustments, can guide the line of sight, focus them on what you want Specific parts.



Hierarchy means that you can make various types of designs outside the layout of the title text. When choosing a font for your project, think about what you want your users to see from the start.

Another point is deciding what kind of information is important. What comes to the fore first (title of company name, special offers, etc.), then decide what content is not important. Then, we decide the size and style of the font. usually,

The important content is indicated in large font and bold.



03. Think about whether it should be used

You need to know what kind of environment, what kind of fonts are used, and what kind of fonts are more comfortable to use. In terms of the actual size of the display, it is very important to be clear and easy to read. Even very small characters need to be easy to read. In the following case, no matter where the small text or large text is recorded, there is a specific space between the texts, and the colleagues who emphasized ensure their legibility.



The size of the font then affects reading. When choosing a font from the beginning, you need to consider whether its design and readability match. (Rule 1 states that the character of the text is considered.)

In the process of text selection, the font used in the title (English: display typefaces), it is very important to choose a characteristic font or a normal (English: Neutral) font. In the layout of the magazine below, the headline uses two fonts and the body text uses sans-serif font.



Fonts can be selected from historic backgrounds or genres. You can simply study the historical background of the font and when the font was created. In other words, knowing when the font was used, you can find out if it matches your design.

For example, when designing the cover of a book describing the life of US President Abraham Lincoln, we can use the Caslon or Clarendon style used in the American Civil War (1861-1865).



Another case, the type of font, plays a large role in the overall design. The following case, because I want to show the retro feel of the 1950s, the font used the advertising or logo commonly used in that era.



04. Serifs and non-serifs

If you don't have time, you need to decide on two fonts immediately. At that time, we could choose a part of the text to use serifs, and another part of the text to use sans serifs. This combination is generally very good, especially when the two font sizes are different.


In addition, it is important to note that in typography in the world, there is a big difference between the serif and sans serif which is easier to read. A large amount of text and articles show that the font of the serif can effectively divert attention and improve reading speed, especially in printed matter.

In contrast, sans-serif typefaces have a simple style and perform well on the Internet or on the screen, making the picture feel clearer.



05. Have a sense of contrast

Another reason to use serifs and non-serifs together is for contrast. There are many correlations in this contrast, and we need to carefully consider the layered sense of the fonts, the complementarity between them, and so on.

Contrast can be achieved through various types of font types, sizes, fonts, text spacing, and colors. The following sample case is a combination of bold type and thin type. These two almost 180-degree transformation styles are well combined.

Because each font is different, each font has a variety of meanings. In addition, the bold use of pink, which makes him twice the size of the title, can not be missed, he very well emphasized the very thin words.



06. Avoid font conflicts

Contrast is very important when combining fonts, but also to avoid them conflicting each other. Different fonts do not mean that they can be matched well.

In general, several similar fonts, the same proportions, and the uniformity of the height of small print (usually called x-height) are all worth noting. So even if they look different, the design as a whole is very uniform.



Take a look at the following set of font combinations. Because they are serifs and sans-serifs, they are very different in style. The font on the top is very round, and there is room for setting the space between words. The font on the bottom is slender and the style is more crowded. Serifs that are as thin as hair and very thin sans-serifs should pay more attention when emphasizing their contrast.



07. Avoid using similar fonts for grouping

This was also mentioned in the comparison of the fifth article, and too similar font combinations can become a problem. Because there is not much difference, it becomes the first problem when creating a sense of hierarchy. There are also differences between fonts and typefaces, the purpose for which it was selected, and it looks like he has chosen the wrong one.

However, it is not necessary to choose a completely different font. Comparing the weight of the font and the appearance is very important. The fonts are too similar, especially when the same size is used, which will confuse users and make the overall content blurred.

Select the two fonts side by side, and then let's analyze slowly. If the appearance of the fonts is basically the same, because the type of fonts selected has a very good contrast, this is also a good sign of good design.



08. Use the same series of fonts

Using the same series of fonts has always been a very secure method. We can find a variety of fonts (different weights, styles, large and small text, etc.) in a series to fully express our design projects.



The fonts of the same series are combined, using different sizes, styles, and weights (Light, Regular, Bold, etc.), and pay attention to showing their contrast.



With font families like Irving Italic or Extended, you can create endless possibilities for your design.
If the project stipulates that only one font can be used, his advantage is to make the design more efficient. Shorten the time to find the perfect combination of fonts.

09. Limit the number of fonts you use

Generally, the number of fonts used in a project is two to three. Of course, you don't have to stick to this sentence. If you have participated in magazine editing, you may get more experience from it, but there is no hard and fast rule.



For example, referring to the gorgeous Victorian style, when you refer to a distinctive design style like this, you need to carefully consider the font combination. Use a large number of fonts to harmonize with the design, and the result is balanced or chaotic. This is what you need to pay attention to.



But what kind of design elements and what type of fonts are appropriate, it takes a lot of design projects to practice **. What type of font to choose, because each design project has different opinions. If you use a lot of fonts, and you must ask why you use so much, you can simply not answer him.

10. Hard work

In the end, I think this is a kind suggestion and not a rule. Keep in touch with the font combinations you know. Through continuous hard work and mistakes, you will eventually get your creative ability. There may be perfect font combinations, but their formulas are not perfect.

Fear no risk, believe in yourself, and meet more challenges. Or you have different opinions from the rules, but your own font combination doesn't feel very good. It is necessary to think about what is wrong and gain experience from failure. This introduction is just some of the basics of typography, and I hope you can have better works designed. Let's experience the fun of design ~
0
0
0
0
0
0
0
0
Name
Verification Code
Can't see clearly, change another Already Comment information, click to view comments
Comments from users
Next: No information