Things about Web Fonts

I worked with a visual designer to develop a Web application. The design he submitted to me looked very sense, so I wrote the Web application in HTML and CSS based on his design. When I thought everything was done and too hectic the product to him, did you know what he said?

　　"You have done all wrong." ”

Do. I didn't use the font according to his model, so he called me out and told me it was a very big mistake. How can I make it up?

"I don't know. But at the moment it is the biggest problem, no doubt. ”

In the past, for a long time, I have worked with different web designers to develop different websites, which makes me start to focus on a lot of small but important details in web design, such as fonts.

Here you can briefly introduce a little background knowledge. Most of the sites are based on HTML and CSS to develop, if you do not have web development experience, perhaps you need to find a Html&css introduction video to learn, such as 1 hours to create a good experience of personal site pages and so on.

The following is a knowledge of fonts that my visual designer has taught me.

　　Font size

The easiest way to change a character's style is to change the font-family properties of the CSS, and then the browser will read the font on the user's computer directly, presumably every web developer understands it. In general, there are 12 common Web site security fonts, except for the relatively special comic Sans, and 11 fonts that you can use on most types of Web sites.

If your eyes are just staring at these 10-and-a-dozen fonts, it's too restrictive. If you are sharp enough, you will consciously adjust the font's thick lines (light, normal, bold) and word spacing to achieve better results. For example, when you use a bold font in a navigation bar, a compact font spacing makes your site look more professional. On the contrary, if you use a very fine font, the page will give a very sharp, clear feeling.

Another trick to use fonts is to add font shadow properties to fonts in CSS.

In the following case, the font family is set to Helvetica, and the font weight is set to very thin.

The case for this font is derived from our Web application Nomster.

　　Font stacks

When you specify what font to use, you can set an order based on the importance, the higher the precedence. When the device does not have a ranking test font, then the system will automatically call the top-ranked font. This is why Windows and Mac built-in fonts are not the same, but eventually the appropriate font can be invoked to display the content of the Web page. For this font stack settings, the following tools/website should be able to help you:

CSS Tricks–font Stacks: This is a 8 different font of the font stack, directly from the CSS Tricks crawl this font stack, your site font effect will not be like 1995 before the site so crippled.

Cssfontstack.com: A professional to provide a variety of different font stacks of Web sites, more than 40 different font stacks for you to choose ~

Of course, if you search through Google and Baidu you should be able to find more font stacks.

The following usage cases also come from our web application Nomster. The font stack that it uses is also our favorite, because it does improve the readability of the site.

　Load specific fonts

Using a specific font to display text in a Web application is a highly feasible thing. You don't have to find a "look like" font to make it work, because the following methods can help you to use your favorite fonts directly:

　　Font hosting service

It does take a bit of skill to load an ordinary font onto a Web site. Font hosting services can do this for you, but some are free, and some are charged.

Google Web Fonts: Google's font services are still very reliable, integrating a number of high-quality Web fonts for you to call to the site. Following Google's official instructions, you can easily invoke these fonts in your Web application.

When you want to use the font of Garamond in the Web site, if you use the font stack to invoke, it may be due to browser differences can not be used normally, or because the local font and may not be normal, and the use of Google fonts in the "EB Garamond" is not the problem, It does not call the local font, and everyone on the computer will display it exactly the same.

Google Font services are free and easy to use, and will allow different systems different browsers to maintain a consistent experience, then why would anyone consider other options? The reason is simple. Most of the fonts included in Google's font platform are relatively open and even directly open source fonts, but developers with many killer fonts are reluctant to do so. Selling fonts as a commodity can bring greater benefits to these developers, making it impossible to find them on Google's font platform. Of course, this problem can also be solved.

Typekit: This font site is also a familiar station. It includes a lot of good quality fonts, but believe me, you will regret it. Why do you say that? The fonts that look good are not cheap! Basic services need to be paid 25 dollars a year, and the advanced version of the annual need to pay 100 dollars! Of course, if not bad money, choose Typekit is also good ~

Therefore, it is best not to tell the designers who cooperate with you, otherwise they will force you to buy the whole set of fonts! (Suddenly realize that the reader of this article will be a designer ...)

So the above three solutions are all the solutions? Don't be silly, of course. Google font is the most famous free font service provider, and Typekit is the most popular font service providers, you have to carefully besides have a lot of fonts hosting provider to choose from.

　　Self-managed fonts

This is a relatively intractable solution. Because the key to this approach is not technically, but you have to understand the licensing of fonts and the relevant legal details.

When we call a font directly from a user's machine, or use a managed font, we don't have to think too much, and a few lines of CSS code solves all the problems. However, when we want to host fonts ourselves, we need to understand the right to use fonts and the corresponding authorization details.

The more high-end way to play is when you write code, tell the browser to download fonts, and tell the browser where to find the font file (or multiple versions of the font file), and then tell the browser what the names of these fonts are respectively. Also note the types of these fonts. Common font formats are EOT, OTF, Woff, TTF, SVG, and so on. Different browsers wont be able to handle the same font format, so it's best to have a variety of different fonts available for downloading in different browsers.

So, first you have to convert your prepared font files into fonts in a variety of different formats, for example, if you have a font in the. ttf format, you need to convert it to a font in the. Woff,. OTF,. svg, and so on, and then you can set the location of the download file and call the relevant information about the font.

This is where things get tricky. Given that you've given everyone in the world the opportunity to download fonts from your site, when you upload fonts to the server, people will be able to put their fonts on their computers, share them with friends, and even use their own websites. That's why many font developers don't want their fonts to be easy to use on the site.

So when you need to download a font to use on your own site, you need to look for the fonts that are licensed for the web and free (of course, not for the desktop).

Fontsquirrel: This is one of my favorite free font sites, they have some super high quality free fonts on the home page, and the font license for each font is clearly labeled.

There is another great tool on the Fountsquirrel, that is the Webfont builder. You can upload a single font file to the generator, it will automatically translate it into the other fonts you need, and generate the corresponding CSS code, you can insert directly into the site code. As long as the format allows, Webfont can be converted, does not specify the source of the font.

In addition to free fonts, Fontsquirrel also sells a large number of fonts that are charged.

Here are the cases from the Fontsquirrel font "Pacifico" applied to our Nomster:

Myfont.com will also provide a font site with a small number of fonts (but other fonts will charge) for free. When you search for the fonts you want in this site, you will find that most of the fonts are for you to pay, but some of the font family of the specific weight of the font is provided free of charge, must be carefully screened. If you have a good character, you can really find a good font.

　　Finally, there are three things you need to know about fonts:

1, different fonts will give the site a different feeling, grasp the details of the font can control the feeling of a good site;

2, the method of loading the font into the Web application has a lot of, carefully screened a suit of their own;

3, the creation of professional and cool rendering effect is important, but the ultimate goal of the site is to convey information, let people read. So after adjusting the effect, it may be possible for the monkey to step back and carefully examine the user's ability to read all the words you write.