A Free Trial That Lets You Build Big!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
|Article Description: A guide to the method of font substitution for web designers.|
Before this article: The dilemma of Chinese web fonts
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 the 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.
All in all, the fonts of Chinese web pages have not yet come close to the perfect solution. 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 limited number of fonts
Since the beginning of the Web page, designers have been bound by a limited number of fonts.
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 designers use them is 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 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.
"@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.
Unfortunately, as with 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's 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 come in as soon as possible.
The only small problem 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.
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 is probably 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 Sans-serif to novelty style fonts.
As mentioned earlier, in order to ensure that @font-face can work 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.
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.
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 the piracy of fonts because all fonts are placed on Typekit protected servers. Users do not have to put fonts in their own web site space, only need to simple link.
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.
Fonts.com Web Fonts
The popular font resource font.com also opens a dedicated web font service that they claim to offer more than 8,000 fonts that you use on the 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 restrictions are 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.
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 the font deck is relatively new, the current font selection is very small.
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.
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 a choice 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.
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 can have 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".
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.
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 a local computer.
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 risk 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 the 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 counted as absolutely no problem. The truth is that while it's hard to say perfect in a web-design world, there are a lot of compromises that need to be used in new technologies. Perfection is not worth waiting for, and if you do, you risk missing out on those exciting new opportunities.
This is really an exciting time for web design, and the typography of the page 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 there is a problem, and use each 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.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service