Web Designer's Guide to font substitution

Before this article: Chinese Web page font dilemma

When designers abroad happily discuss how to replace fonts without images, when Google proudly to provide more and more web fonts, web designers using Chinese can only give a sigh. The dilemma of web fonts in the Chinese world is not only due to the large number of Chinese symbols caused by excessive font files such technical barriers; the deeper reason is that there are few good fonts available.

On the one hand, although some Chinese font providers are also committed to provide different platform solutions, font prices are still expensive to the tongue, founder font annual fee of up to million, which is difficult for ordinary designers to bear. On the other hand, making Chinese fonts is a thankless task, with thousands of symbols and 26 Latin letters not on a scale at all. The use of genuine in China has always been breathing pain, the big effort to do the font, not to get how much money, which reduces the enthusiasm for making good fonts.

Chinese web pages commonly used fonts, in the past only "song Body", now Microsoft added "Ya Black", but "ya black" is not a safe font. When we can't wait to use JAS, we still have to pay attention to the downgrade problem. Because of the font size, kerning and XXFarEastFont-Arial are different, we need to pay attention to the downgrade, each user agent in typesetting may appear problems.

Using non-standard fonts, the best solution is still picture replacement. There have been many articles on the replacement of pictures, and the methods have their advantages and disadvantages, and the key points to be noted are:
1 Usability: Note that in the absence of CSS or no pictures, the document can still guarantee the integrity of the content. Minimize extra meaningless labels.
2 picture load: Using the characteristics of GIF, PNG8, JPG, to make replacement pictures, can effectively reduce the unnecessary picture size. In several formats, the PNG8 is first pushed, even though its transparent background can be displayed correctly in IE6. The technique used by PNG8 is to set the "Miscellaneous edge" to a color that is close to the background when outputting.

In a word, the fonts of Chinese web pages are not nearly perfect solutions. As the following article will tell us, perfection is not worth waiting for, only active use of newer technology to create better works. Regardless of the Chinese and English fonts, whether or not the use of non-standard fonts is always a technical issue, but more importantly, the designer's understanding of the font. Can we understand the implied meaning of each character's stroke and use it appropriately in the design, which is the task that our relatively outdated Chinese designers have to work hard to accomplish.

============ translation of the beginning of the split line =============

Original address: http://webdesign.tutsplus.com/articles/typography-articles/a-web-designers-guide-to-font-replacement-methods/

Fed up with Arial? Tired of the Times New Roman? Word Replacement (font-replacement methods) has improved significantly over the past two years, but it is often difficult to tell the difference between these methods if you do not keep an eye on the technology. This article will discuss the different word substitution techniques available today.

We'll explore the pros and cons of each technology, font usage authorizations, and the best font resources on the Web so that you can start using them in your own web design.

Getting Started: Font substitution

Since the beginning of the web, designers have been restricted to a 2¥q number of fonts
Since the beginning of the Web page, designers have been constrained by a limited number of fonts.

The potential of web design seems to be growing day by day. Technology applications such as HTML5,CSS3 and JavaScript have brought many surprising and creative web design. Since the age of plain text browsers, the web has come a long way. Nevertheless, one area of web design remains relatively stagnant.

In any designer's arsenal, creating the look and feel of the site, typography and font selection are essential elements. Unfortunately, designers have been constrained by a limited number of fonts since the beginning of the web. Can be correctly displayed by most web users, designers can safely use, but also can make people mention the interest of the very few fonts, helvetica,arial and Georgia is one of three (don't forget comic Sans).

To get rid of this limitation, using fonts to express ideas, the traditional way for designers to incorporate text into images--but there are many drawbacks to this approach. Added a lot of usability problems, and as the load time increases, the performance of the site is negatively affected accordingly.

This article will explore some ways to add non-standard fonts without pictures in a Web page. We'll see the pros and cons of each method, the license to use fonts, and what this technology means to web designers.

Cufón

To add non-standard fonts to a Web page, using Cufón is a simple, incredibly efficient way to do so without relying on a server-side language or plug-in. Cufón can work with just a few lines of JavaScript code, rendering fonts using the HTML5 Canvas feature, and rendering fonts for Internet Explorer using VML (vector mark-up language Vectors markup Language).

Cufón provides a font conversion tool on the home page that converts your selected fonts to SVG and creates a JavaScript file for you, which you need to reference in HTML. Nettuts's Jeffrey Way has written an excellent step-by-step tutorial on how to integrate Cufón in your Web pages.

Cufón is a popular choice for many web designers because it has many advantages and relatively few drawbacks. It does not rely on other scripting languages or plug-ins, which means it is available to a significant majority of audiences and is supported by all recent mainstream browsers, including IE9. You can also apply CSS styles directly to Cufón-substituted text, including newer CSS3 features such as gradients. Given the speed, it is much faster and less dense than the sfir, but it should still not be used in a large section of text on the subject.

Advantages：

good compatibility between different browsers can contain only a specific set of characters character (abc,123, etc.) in your font to facilitate control of file volume. CSS font styles can be maintained in all browsers (color, size, shadow ...)

Shortcomings：

text does not select performance: It is a good idea to use a special style in the top, title, and subtitle (text decoration, flip, etc.) that requires some extra work. @font-face

"@font-face is essentially the ultimate solution to fonts on the web."
@font-face is basically the final Solution for fonts in Web pages.

Of all the font substitution methods, @font-face may be the most focused. But there is a good reason for that. @font-face is basically the final solution to the font in a Web page, and other technologies want to take its place before it is truly implemented. In fact, the CSS2 feature contains the @font-face, but it has not been widely adopted until today.

@font-face to implement custom fonts on a Web page, the technology used is css--that means no longer relies on flash,php or even JavaScript. When using @font-face, the rendering is a real font, not a vector object or picture, so the text can be selected, enlarged, and the style is modified using CSS.

Unfortunately, like other web-related things, the first obstacle to @font-face development is the browser (and the use of authorization, which we'll discuss later). The font format for each major browser is different. Internet Explorer uses. EOT (Embedded Open Type), and recent Firefox, Chrome, Safari, and opera support. TTF (True Type Format). Some browsers also support open font format (open type format), while the iphone and ipad require SVG (Scalable Vector Graphics). These are confusing and sometimes daunting to many people. Thankfully, there is a silver lining. Web page Open font format (ie. WOFF) is defined as a standard format for Web page fonts, and is being standardized by the consortium. More than 3.6 versions of Firefox and more than 5.0 versions of Chrome already support this format, and IE9 also supports this format, according to recent announcements. Let's expect opera and Safari to get involved as soon as possible.

The only small thing to ask about @font-face is that because it renders real fonts, the rendering effects of different browsers and operating systems can be subtly differentiated. Some of the Web font services use font tweaks to help fix these nuances, and font trimming will smooth the outline of the font in the browser, creating a better looking font. We will explore these services in greater depth.

If you need more information on how to implement @font-face on your site, Jeffrey Way has once again provided a very useful tutorial.

Advantages：

maintains usability-which means it gracefully degrades support for Unicode support CSS font styles

Shortcomings：

Some font files can be downloaded quite large different browsers do not have a uniform format that is not allowed to be published (as far as we know)-you cannot use them in a template or subject until you confirm your release permission.

The next solution relies on @font-face to implement--each of which is a service--which means that they all use the same basic technology, but they provide different font libraries, licensing options, and payment plans; Yes, most of them have to be paid to use, But this could be the future of all the Web fonts.

Font Squirrel @font-face Kits

Font Squirrel may be the most popular text replacement resource in the present. Font Squirrel lets you forget all the possible concerns about font licensing, because all the fonts it offers are commercially free. This site has hundreds of fonts to choose from, from serif to novelty style fonts.

As mentioned earlier, in order to ensure that @font-face works in all browsers, you need several different font formats, and for this, the font squirrel also has a solution. The site offers a @font-face suite with all the font formats you need, as well as HTML and CSS. If you can't find the @font-face kit you want to use, they also provide a generator for free, converting your fonts to a variety of formats you need. When using the builder, you need to ensure that you have the correct authorization to use this font.

Advantages：

uses @font-face, but it's much easier to implement. They handle all the licensing related matters hundreds of fonts are available for selection including multiple formats (TrueType, EOT, Woff, SVG, Cufon, etc.) if they don't have the font you want, You can even generate your own kit

Shortcomings：

and @font-face are the same, but usually this is a great solution. Google Fonts API

The use of Google Fonts API combines their own very unique font directory, all the fonts in the directory are open source, everyone can use. This directory has been expanding and growing, and now contains more than 200 examples.

It's simply not easy to use the fonts in your catalog on your site. All you need to do is select the font you want to use and choose the font variant you want, and Google will provide you with a line of JavaScript code you need to use. Modify the CSS, list this font, you are ready! It's really very simple.

Advantages：

Open source licensing means that these are all free fonts on Google's servers, so your fonts may already be in the browser's cache

Shortcomings：

, uh ... Typekit

Typekit is the first website to offer font services for book pages and is still very popular. Typekit and other similar service websites address font licensing by paying annual fees, and members can access a large number of custom fonts. This approach allows font manufacturers to receive some rewards for their hard work and prevent font piracy because all fonts are placed on Typekit protected servers. Users do not have to put fonts in their own web site space, simply need to link.

Typekit, in collaboration with some of the world's largest font manufacturers, offers you a wide variety of fonts. Typekit also offers many options and controls for font use. You can choose different font variants, bold and glyphs. You can also create a CSS stack and choose a degraded font when @font-face is not supported. Once you've made your choice, the site generates a JavaScript code that needs to be placed on your site.

Another advantage of Typekit is that it can fine-tune fonts and help control the differences in text and fonts that different browsers handle.

Typekit offers different price packs to suit different needs. The free package provides two fonts in the trial library and can only be used on a single web site. This site allows a maximum of 25,000 page views per month, and you must display a Typekit logo on the site that links to information about the font you use. And correspondingly, the largest is the performance package (Perfomance package), which provides all the permissions to use the font, unlimited number of sites and browsing volume. The annual fee for all these is 99 pounds.

Advantages：

Fonts Select many fonts on Typekit servers

Shortcomings：

needs to pay every year. Anti-noise is not perfect, some fonts may look jagged in some browsers and operating systems, no noise-fonts.com Web Fonts

The popular font resource font.com also opens a dedicated web font service, claiming that they offer more than 8,000 fonts that you use on your site. Similar to Typekit, it offers a subscription based service, but its price is monthly. Compared with Typekit, its price is not expensive, but the font limit is much less. The free package is quite friendly by comparison-unlimited use of 8,000 fonts, unlimited number of sites. The professional package allows you to download 50 fonts to your computer and use them in your design.

Fonts.com Web fonts boast that their font concentration has some really great fonts--such as Helvetica, Univers and Franklin Gothic.

Advantages：

very many selectable fonts and style fonts are placed on Typekit servers with unique helvetica®, frutiger®, univers®, and other well-known fonts

Shortcomings：

if their free service does not meet you, you need to pay an annual fee their font library is actually quite large, but can be used very limited fontdeck

A font Deck has been released by Omniti, a well-known web design firm that has worked for some of the world's largest corporate services. Font deck is another subscription based service provider, but you only need to pay an annual fee for each individual font you use, which is perfect for people who want to use only one or two fonts in their personal blogs.

The minimum price of a font is 2.5 USD/year for a single domain name, unlimited page views. All fonts can be tried indefinitely for free, but only 20 independent IP can be browsed. This free package helps make up for the disadvantages of not downloading fonts to the local, and you can use them in the design phase. Because font deck is relatively new, there are few fonts available.

Advantages：

only need to pay for what you need to preview fonts on the site are free language support

Shortcomings：

it still needs to pay for their font library is actually quite large, but can be used very limited font Spring

Font spring takes a slightly different approach to booking services, and it goes back to the traditional way of buying fonts. Fonts are purchased independently and you need to download them and put them on your own server. Font Spring believes that 99.9% of the fonts provided can be used in @font-face mode.

The price of each individual font is different, you need to pay an extra fee to use the font in @font-face way. @font-face Licensing includes the desktop OpenType version and other formats that are required on the web.

There are a lot of advantages to this approach, and if you really only have a font, it might be cheaper than booking a service. You can use any number of domain names because you can control them directly and there is no limit to the amount of page views.

As an additional warning, using other techniques such as SIFR or Cufón to convert or implant these fonts is prohibited.

Advantages：

like font squirrel, it handles authorization related matters Another great font library, there are a lot of different font manufacturers

Shortcomings：

each font needs to be paid, which may require a lot of money you need to put fonts on your own server other font substitution solutions

These are only a subset of the available font services. There are also a number of sites offering services, such as Typotheque and Webtype. They all have strengths and weaknesses, and you should make choices based on your personal needs. Some may prefer the simplicity of the booking service, while others may not like to hand over part of the site's control to a third party. If you're in the latter case, you'd better use a font squirrel like this, download your own fonts, and put them on your server.

The next two (sIFR and FLIR) are often considered "old school" because they all have obvious problems, but they are worth discussing and understanding.

SIFR

SIFR has been there for some time. When we do have no other choice than the picture, it comes first, providing a very effective way to introduce non-standard fonts. Sfir (that is, scalable Inman Flash replacement) combines flash and JavaScript to modify text on a page to a flash element. SIFR has many advantages, such as keeping the text available to screen readers or being selected.

However, the name "scalable" may cause some confusion. sIFR's magnified significance is that the flash element is magnified to the size of the original browser text-which allows it to have the largest possible size, displaying text at any given size. However, when the user adjusts the text size of the page, any text that has been replaced by the flash element cannot be changed. This obviously creates some usability problems. SIFR also requires the user's computer to enable Flash and JavaScript to work.

One of Sfir's creators, Mike Davidson, also recognizes the limitations of the technology. Mike has publicly stated that Sfir should not be used for large sections of text because it has a significant impact on the performance of the site. Mike also recognizes that his technology is not the final solution to typography, but simply quotes the word "expedient".

Advantages：

No big advantage ... Except that it is the first font substitution method that appears.

Shortcomings：

relies on flash to reduce performance blocking ads and flash programs will also block it from being able to modify styles perfectly-often not as you expect FLIR

FLIR (that is, facelift image replacement) is similar to sIFR, except that it uses JavaScript and PHP to generate pictures instead of using Flash to replace text. The obvious advantage of this approach is that you don't need to spend time creating separate pictures for each paragraph of text that you want to use in a custom font. If you think it's easier to update your site's text with another font or color.

Unfortunately, in addition to its simplicity and time saving, FLIR does not provide much more improvement than the traditional saving of text as a picture. The end result is that the text is still rendered as a picture, and the text cannot be selected or magnified.
Advantages：

works in all major browsers

Shortcomings：

larger load text cannot be selected the server needs to support PHP and GD ... This is often not provided by font authorization and legality

Font licensing issues are evolving. It facilitates the slow process and adoption of font substitution methods. Like a picture, you need an author's authorization to use fonts in a Web site, in the form of a EULA (end user License Agreement End-User Licensing Protocol). Some licenses allow fonts to be used for free, even in commercial use. Others may only allow individuals to use them on local computers.

When you use one of these font substitution methods, you actually implant a font on your site, or link to a font that is uploaded to your server. Even for free font authorization, this is not allowed to many people to use. Many font creators and manufacturers do not allow this because it will allow users of the site to access font files directly, and they are beginning to worry that their fonts may be downloaded and illegally propagated. This problem allows many font makers not to allow their fonts to be used by @font-face.

Therefore, when using the above method, you absolutely have to confirm that the font authorization is allowed, which is very important.

Fortunately, this problem does not completely hinder the development of font substitution methods, and there are many resources available that allow you to use custom fonts on your site.

last thought: What does this mean for designers

"Perfection is isn't worth waiting for, if I do, your disorientated missing out on exciting new opportunities"
Perfection is not worth waiting for, and if you do, you risk missing out on those exciting new opportunities.

We've talked a lot about it, and there are obviously a number of options for people who want to use custom fonts in their site design. The good news is that all methods are now available. The bad news is that no one method is perfect, each has its own advantages and disadvantages, and that is the truth. @font-face is clearly the most promising, but it may take many years before it can be considered absolutely no problem. The truth is that while it's hard to say perfect in a web-design world, there are many compromises that need new technology. Perfection is not worth waiting for, and if you do, you risk missing out on exciting new opportunities.

This is really an exciting time for web design, and the typography of web pages seems to be getting more appreciated and understood. The font substitution method provides a great opportunity to create innovative new designs, and I believe the key is not to misuse the technology. Always provide a degraded solution when something goes wrong, and use every method wisely (don't change all the text on your site like this). Spend a little more time appreciating and learning great fonts, and Web pages will be a better place to use fonts.

Source: http://seemeloo.com/css/a-web-designers-guide-to-font-replacement-methods/