How do I pick a Web font?

The excellent web page means that designers are very detailed on the page, in the process, we have to accept the rules, but also willing to find and master new tools to make life easier and better design.

In fact, there is no intrinsic difference between the font and the real font of the page. So I do not agree with the "Web font" and "real font" is different, can only say that each of their applications such as Web page fonts, type, poster fonts and movie fonts have their own characteristics and limitations, but in the final, they are the same root.

This article is mainly to tell you how to pick the font of the page, we collected some good methods, about how to choose the font type, how to design the details of the font, research browser features and so on, these are part of the web design process, come to see it ~

Select the appropriate font type

We hesitate when choosing a font type because there are too many factors to consider, including the purpose of the page, the emphasis on the page, and the type of page. However, as a designer, of course, from the "design" point of view to see the problem. The reality is brutal, if we choose the wrong type the sun will still rise tomorrow, but remember: choosing a font type is the most important part of every design decision, no matter what project you are doing.

When choosing a font type, do we want to consider the contents of the text? From a historical or geographical perspective? It depends on what you want from yourself. For example, if you are working on a project for a German museum, would it be better if you could choose the type of font that German designers designed during this period?

You have to believe that in the field of web design, Kung Fu is more important than intuition.

Using the physical model

Once you find the right font, you need to see if the fonts fit the text, typecast is an excellent test tool.

With this tool, you can display text content, title, subtitle One by one, and simulate a real-world browser. And this tool will also advise you, which font combinations on a Web page the most pleasing to the eye, the real excellent ~

Modular scale Use this tool to find the most appropriate font size for your Web page. For example, we set the font to a basic size of 16 pixels, applied to the gold ratio (1:1.61803, from the Sunflower vortex found in the proportion) this result is 6.1,10,16,25.9,41.9,67.8. These are the font sizes you can use.

Nature is a good place to stand up and observe when you need inspiration.

What, are you worried that the design of using these tools will be too rigid? NoNoNo, using these tools will certainly bring some of the same elements to your design as others, but I believe it's more useful than your occasional show.

Font feature settings

The CSS3 font specification enables advanced OpenType support features.

There are font feature settings, including the use of free hyphenation, fragments, advanced language support, and so on.

For example, if you use fragment functionality, you can play ½ instead of 1/2.

Here are some tips for font setup: Use the following tags:

For maximum freshness, purchase your coffee 1/2 in a time.

Use these CSS codes:

. fraction-feature {

-moz-font-feature-settings: "Frac=1″;

-moz-font-feature-settings: "Frac" 1;

-webkit-font-feature-settings: "Frac" 1;

-ms-font-feature-settings: "Frac" 1;

Font-feature-settings: "Frac" 1;

}

Let's go through the popular Science: in 2010, Firefox 4 first provided the font setting, followed by other browsers, the only one left is safari, and until now, Safari is not fully support the font setting function. If you want to know now those browser support

From the major news site design portfolio, often use the reference to make the content more prominent, better results.

In the early days, font features were set to provide a lot of interesting decorations for fonts, and proper use of these decorations, you can convey the joy of your design process to the user ~

Tip: What you have to pay attention to

The Web page font is a powerful tool that you can use very simply, but I think if you use fonts for the purpose of simplicity then you won't come in to see the article today. When you are making a Web page font design, the following points you must always keep in mind.

How are you going to use it?

For Web fonts, you have two very basic choices: first, rent from a Web-page font provider; two, self-sufficient.

Renting fonts is a common method and lacks the spirit of exploration.

In fact, I do not know which choice is better, but there is a standard, you can read the following tips:

Cost: When you choose a project font type, you should tell the customer as soon as possible, the font also has the price! Once I had a customer who liked the font we chose, but didn't have the money to buy it, and a customer and a font supplier were partners, so he decided what font to use before we started designing ... Do you understand? Be sure to inform the customer as soon as possible the font cost yo ~

Choice: The font you choose determines how they are used in the browser. Because some fonts are only available for special occasions. So, try to find a font that you can use. If you find that it is not working properly, stop quickly.

We advise you to think twice before choosing a font, or you will be suicidal.

Think about the feature settings.

When you use a Web page font, you must first download the font. We want to make sure that the fonts we want to use are available for download.

A good font has many features that can be used in many languages. But if you only want to use one of these features, you can optimize the font. Most Web-page font services allow you to select an attribute, not all fonts.

If you own a font, you can apply the font to a language, or use only one of the features you need. The Font Squirrel has a generator can help you achieve this work. But to remind: carefully check the font user agreement, many fonts are not allowed to commercial use.

Typekit feature settings in the selection interface

Weight and style

Another factor to consider is the weight and style of the font. Let's take a look at the code below and find out what?

1. <p class= "Faux-text" >
2. He desires to paint for you <b>dreamiest, shadiest,</b> <i>quietest, most enchanting</i> bit of ro Mantic Landscape in the valley of the Saco.
3. </p>

If there is no CSS guidance, the browser will set the text bold italic, so we should not blindly believe that the browser. Without the right CSS, browsers often fanhun. When it is angry because it does not find the right font, it will follow the model used in the past, the consequences of the ego ... In short, using bold and italic font results are: Design dead, dead drop.

You asked me how to prevent it? OK, here's a good example:

. faux-text {font-family: ' Gentiumbasicregular ';}

Next, style The italic and bold text:

. Faux-text I {font-family: ' Gentiumbasicitalic ';}

. Faux-text B {font-family: ' Gentiumbasicbold ';}

To interfere with a browser:

. Faux-text I {font-family: ' gentiumbasicitalic '; font-style:normal;}

. Faux-text B {font-family: ' gentiumbasicbold '; font-weight:normal;}

Effect comparison:

This example shows that all the good wishes are achievable.

Details determine success or failure

Whether you choose a suitable font or not, attention to detail is an important part of the design process. But even if you choose the right font, your customer's customers will not praise you, but is that the key? No, the key question is--choosing the right font will affect your overall design level.