Every web designer dreams of creating a website with beautiful typography. But, unfortunately, browsers support only a few typefaces, the so-called "web-safe" fonts. The standard set includes the following fonts: Arial, Verdana, Times, Georgia, Courier New and several others.
Headset defines a set of one or more fonts, each of which consists of characters that have common design features - weight, style, design, weight, density, size, for example, sans-serif fonts (or sans serifs), serif fonts (antiqua). The typeface consists of a set of characters (numbers, letters, punctuation marks, special characters, and may also consist of non-alphabetic characters).
Font is a set of characters of a specific size, weight, and style. For example, the Times New Roman 16px italic style is one font, and the 10px italic Times New Roman is another.
@font-face rule allows you to connect a variety of custom fonts. The browser loads the fonts into the cache and uses them to style the text on the page. This approach is called font embedding, and embedded fonts - web fonts.
The @font-face rule should be placed before all other css rules as this will improve page performance. Downloadable fonts can be placed in a special fonts folder created on the server.
To include a font using the @font-face rule, you need to:
1) upload the font file to the server in multiple formats to be supported by all browsers,
2) specify the name of the font, register a link to the file and set the description of the font,
3) add the font name to the font-family property of the element that will be rendered in that font.
@font-face ( font-family: "WebFont"; src: url(WebFont.eot?) format("eot"), /* IE8+, sign? circumvents bug in src value handler */ url(WebFont.woff) format("woff"), /* all modern browsers, IE9+ */ url(WebFont.ttf) format("truetype"); /* all modern browsers */ ) p (font-family: "WebFont", Arial, sans serif; )
This code tells the browser to display the text inside the element
Using Web Font. If the browser for some reason cannot load a given font, it will choose the appropriate one from the list of fonts. It iterates over them in that order until it finds a font that it can successfully use.
Within each font family, up to nine weights can be defined. Therefore, for each embedded font, as well as for each style, you need to set a separate @font-face rule, i.e. you cannot declare in one rule two different fonts or a font of the same family, but of different styles and weights.
@font-face ( font-family: "WebFont"; src: url(WebFont.eot?) format("eot"), url(WebFont.woff) format("woff"), url(WebFont.ttf) format( "truetype"); font-weight: bold; font-style: italic; ) @font-face ( font-family: "WebFont"; src: url(WebFont.eot?) format("eot"), url(WebFont .woff) format("woff"), url(WebFont.ttf) format("truetype"); font-weight: 400; font-style: normal; )
In general, you can set the following properties for a font:
@font-face ( font-family: "FontName"; src: url() format(" "); font-variant: ; font-stretch: ; font-weight: ; font-style: ; )
If you assume that the user's computer has the font installed and want the font to be downloaded only after checking if the user has it, you can use the local() value to set the address:
@font-face ( font-family: "WebFont"; src: local("WebFont"), url(WebFont.eot?) format("eot"), url(WebFont.woff) format("woff"), url (WebFont.ttf) format("truetype"); font-weight: bold; font-style: italic; )
Web font formats
The @font-face property has good browser support, but different browsers use different font formats. There are four main font formats:
WOFF format(Web Open Font Format), an open web font format developed by Mozilla. Technically, WOFF cannot be called a font format, as it is just a wrapper with a compression function. The format compresses TTF/OTF fonts for use on the web. Also, WOFF allows you to add metadata to the file, such as license information.
OTF/TTF formats(OpenType Font and TrueType Font) work in most browsers. Both formats are freely distributed.
EOT format(Embedded Open Type) created by Microsoft developers, is a compressed copy of the TTF font, the reuse of which is prohibited by DRM (Digital Rights Management, digital access rights management) technologies. Supported only in IE starting from version 8.
SVG/SVGZ(Scalabe Vector Graphics) is a font file type that represents the vector face of a font. As a rule, it has smaller file sizes, thereby allowing better performance on mobile devices. Works in Opera Mobile and iOS Safari.
Difficulties in using built-in fonts
1) Font files can be large, so in some cases adding @font-face slows down page loading.
2) Some fonts have licensing restrictions that prevent free use.
3) Some fonts just don't look good on web pages.
Fonts can be scaled to any size, while still being crisp and easy to read. They can be sent to any printer or other output device supported by Windows.
Fonts associated with TrueType fonts, but typically uses a wide range of basic characters, such as reduced caps, old-style numerals, and additional shapes (such as glyphs and ligatures). OpenType fonts can be scaled to any size and are crisp and easy to read. They can be sent to a printer or other output device supported by Windows.
PostScript fonts detailed and have high graphic performance. They are used for printing, especially for professional high quality printing of books and magazines.
Which font to choose
It depends on many factors. If you need a font that is easy to read on screen and paper, it's best to choose true type font.
If you need a large character set for language labels and typography, you should use open type font.
For professional (such as glossy magazine) or industrial printing publications, choose PostScript.
Hey Habr!
Mountains of articles have already been written describing different aspects of working with web fonts, many working examples have been collected, but every day we continue to face an elementary misunderstanding of what web fonts are. Not everyone has time to google materials on this topic, so I tried to answer frequently asked questions. This material will be of interest primarily to those who have not yet delved into the intricacies of font technologies.
01. Why do we need web fonts at all, why not use standard ones?
The first thing that comes to mind is that standard fonts are terribly boring, and with their help it is difficult to do something original. As a rule, most of them bring melancholy and despondency not only to users, but also to web designers. Non-standard fonts in this case are more expressive and besides there are an order of magnitude more of them, so there is plenty to choose from. And yet, the font is an integral part of the brand, so every company strives to use it more actively, since such a technical opportunity has appeared.And it would be possible to completely abandon the standard fonts, especially since many mobile operating systems do not support them (for example, Arial, Taһoma, Verdana and Georgia). But, unfortunately, the industry, which has been adjusted for many years to 96 DPI screens and georgia verdans, was not quite ready for rapid changes, and on older Windows operating systems there are still problems with displaying non-standard fonts due to the peculiarities of the rasterization mechanism.
02. How to choose a good web font?
A font is not just a digitized set of letters created with a brush on paper or in illustrator, it is also 98% fine-tuning and polishing, hinting and testing on various media and in different sizes. Such a font looks good, its style is perfected, there will be no problems with it either on the printer or on the screen, it exudes good quality.However, when choosing a font, not even this is much more important, but the expediency and compliance of the font with the method of use and the tasks assigned to it. If you work with fonts, you need to understand how it all works what technologies are used. This will help not to keep in mind a bunch of incomprehensible memorized rules, caught in fits and starts. For example, every self-respecting printer knows why it is undesirable to use TrueType fonts for offset printing, which fonts can be used as text fonts, and which fonts can only be used for headings or indexes. If he does not know this, then he will have to reprint a huge circulation, and at work he will have constant surprises and problems. It's amazing why no one makes any demands on web designers.
03. How do browsers render fonts?
Quite often I heard, they say, browsers render fonts themselves, so they look different everywhere. But in fact, a special graphics subsystem of the OS is involved in rendering fonts: in Windows, this GDI or directwrite, and on OS X and iOS - core text(and earlier QuickDraw). In total, there are 3 common font rasterization (rendering) mechanisms: two-color (black and white) pixel, monochrome pixel (it is often called antialiasing or regular anti-aliasing) and subpixel. Sub-pixel uses the feature of LCD and plasma displays where each pixel is divided into 3 parts (red, green and blue) in order to increase the horizontal resolution of the rendered image and improve clarity.
However, browsers do choose their own rendering method, from those provided by the OS. For example, as part of GDI, there are 3 rendering options: black / white, normal anti-aliasing and subpixel clear type. The peculiarity of the latter is that smoothing occurs only horizontally, in accordance with the arrangement of subpixels. That is why when using it, we often see terrible teeth on the horizontal and diagonal strokes of the type. Fortunately, Microsoft began to slowly improve the mechanism, and GDI was replaced by DirectWrite technology, where vertical anti-aliasing appeared. Compare:
04.TTF or OTF?
TrueType and PostScript were originally different font formats. TrueType uses quadratic Bezier curves, while PostScript uses cubic curves, familiar to Illustrator and Photoshop designers. Today, both methods of describing curves are used as part of the same OpenType format, with the only difference being that TrueType files have the TTF extension, while PostScript files have the OTF extension. Each of the technologies has its own hinting features and application specifics.
Look at the picture. If a TrueType font is much more readable in a small size, but in a large size we see characteristic teeth, then for a PostScript font everything is exactly the opposite. This is because browsers choose different screening methods for PS and TT. For PS, the browser applied the usual monochrome anti-aliasing, and TT was processed by ClearType. So it turns out that TrueType is preferable for text fonts, and PostScript is better suited for headings and large inscriptions.
We also see that not all browsers use DirectWrite yet. So, it is still not in Google Chrome.
05. What else affects the display?
Sometimes it is better to set the rasterization method manually. For example, in browsers with the Webkit engine, you can use the CSS property - webkit-font-smoothing and manually enable normal anti-aliasing instead of sub-pixel anti-aliasing, and vice versa. There are also non-trivial ways to get the browser to change the rasterization method, on Habré it was once suggested to use a hack with text-shadow .We must not forget about the font size (font-size). Outline shape, stroke contrast, and legibility can vary greatly from size to size. Put down the graphics editor and see how the web font looks in the browser, in combat.
Another way to smooth out anti-aliasing imperfections is to manage color and contrast. To reduce the effect of chromatic contouring (yellow and magenta edges appear when using ClearType), you can try to reduce the tonal contrast by bringing the background color closer to the color of the text. Don't get too carried away, be mindful of visually impaired users.
06. Do web fonts need hinting?
Hints are special instructions that hard-wire abstract font curves to pixels on a monitor. The vast majority of fonts (including commercial ones) are not hinted, because this is a rather laborious and complicated procedure. TrueType and PostScript hinting is done differently. If you take a cheap font, the OTF format is safer, because in TT the procedure has remained unchanged since the days of black and white screening and is not entirely adequate, but for PS the procedure is simpler, and the author has the opportunity to do automatic hinting.A font without hinting becomes blurry when rasterized, and the height of the letters can jump.
On the one hand, the hinted font is quite clear, contrasting and uniform, and on the other hand, the shapes of the letters are distorted depending on the size, and the intervals may differ from the real ones. Letters strictly obey pixels.
In Windows, we see perhaps the most radical approach: such popular fonts as Tahoma, Verdana, Arial and Georgia were hinted specifically for GDI ClearType, and when DirectWrite appeared, the main fonts in the OS had to be hinted and updated.
Unlike Microsoft, Apple takes the opposite approach, so its operating systems use algorithms that allow more or less high-quality output of any font, and hinting is not taken into account at all.
Answering the question: the era of 300 DPI monitors is rapidly approaching, and a huge number of mobile devices already have such a resolution, and soon hinting will not be needed at all. But since Windows is still hinting-dependent and focused on low-resolution monitors, try to choose high-quality hinted or standard fonts as text fonts, otherwise the text will be unreadable and difficult to read.
07. @font-face or Cufon?
As strange as it may sound, there are still people who ask themselves this question. It would seem that after browsers began to support the @font-face attribute, all other font embedding technologies (Cufon, sIFR, Flash) should have become irrelevant. But some meaning still remains, for example, a way to replace a font with an image, when not vector curves are displayed on the site, but only a print, how a printer prints it on a sheet, or Photoshop displays an uneditable JPG. This is allowed by many regular (desktop) font licenses. Some font vendors (such as Adobe) allow a desktop font to be embedded (in programs and on the server) as long as it remains protected and cannot be downloaded. If you don't have the option to buy a separate web license, then you can use an appropriate sIFR for that when the font is embedded using flash objects. The disadvantage is that Flash is used, which is not supported by all devices. You can also use Cufon technology (Canvas is used), if the license allows. Of course, in this case, the script will be cumbersome, and text selection does not work, but in a hopeless situation it will do.But it is best to use @font-face, it is both more technologically advanced and more convenient, besides, sufficient experience has been accumulated to work with it. It has only one drawback, that not all manufacturers allow their fonts to be used on the web.
08. What formats should the font files be in?
Today, fonts prepared for embedding (@font-face) on the site should be in several formats at once:TTF or OTF- a font file familiar to us, but loaded from the server while browsing the site;
WOFF- an unprotected OTF or TTF source archive, perhaps the most important format that most popular browsers support, and files in WOFF are usually 2-2.5 times lighter than the original ones;
EOT- the archive implemented by TT OpenType, which has protection mechanisms, is needed to support old Internet Explorer browsers (starting from IE8, in addition to TrueType curves, PostScript is also supported);
SVG- to support the Safari browser.
09. Can web fonts be converted?
Whatever you're told, you can't just convert the file and keep the original quality of the font, especially if it was originally in OpenType format. In the process, there is a chance to lose some data embedded in the font file (compiled instructions, additional characters, metrics). You will notice this when the file suddenly “thinner” during conversion, it is especially non-kosher to convert TrueType to PostScript and vice versa.
In addition, the conversion process almost always violates the terms of a license that prohibits modification. In other words, it's the same theft. When you throw files into the converter, be sure that it will not let them through and will issue a warning, because the file contains the digital signatures of the manufacturer and the corresponding prohibitions on modification.
10. How much should web fonts weigh?
The browser must fully download the font files before rendering the page. You may have seen the effect of “font flash” (or FOUT), when standard system fonts flash instead of exotic fonts for a brief moment. It is normal if TTF (OTF) fits into 100 kb, and WOFF (EOT) into 50 kb. Always think about whether you need to use non-standard fonts at all, even if you use it in 1 short heading, you still have to download the entire font file.The more perfectionist your design is, the smaller the font files can be, and try to choose simple shapes. In this sense, the ideal form is an open geometric grotesque with little contrast. To speed up the loading of a font, it can also be useful to include it in the stylesheet with data:uri.
11. How many font styles can be used on the web?
From a designer's point of view, lots of typefaces are cool. And indeed, for the header - Bold, and over there, for the sidebar - ExtraLight, we will generally stuff unnecessary texts and press them into Condensed Bold. Here it is - real wealth and stylistic diversity. But when all this “wealth” begins to be transferred to the site, it turns out that everything is terribly slow. And it’s better not to even try to open such a site from a mobile device. Also, don't forget that each style costs some money, and it's likely that the customer will ask you to either find a font synonym or reduce the number of styles, just not to buy an expensive typeface. It is normal to use a maximum of 2-3 styles of one or different typefaces.12. Do I need to limit the character set?
The answer to this question depends on what kind of site it is and how it will be used. Restrictions can be useful because it is possible to significantly reduce the size of files. Sometimes, due to ignorance, developers upload heavy font files to the site with its full set of characters, and it’s good if there are no hieroglyphs (for information, the Arial Unicode font containing most of the characters from the Unicode table weighs 22 mb).Those who make English-language sites the easiest, they do not need to load additional characters at all, just those that are in Basic Latin (or ASCII). If you use the font only for headings in Russian + English inclusions, then ASCII (Basic Latin) sets and 64 characters of the Russian alphabet will be enough for you, it is not at all necessary to load the Cyrillic Extended set of 420 characters. It is a completely different story if your site is multilingual, in which case, in order to avoid incorrect display of characters, you should try to cover all the languages used.
13. Can font clones be used?
It happens that buying the original font is either too expensive or impossible at all, then it will be appropriate to choose a font synonym (clone). Of course, one should not expect amazing quality from them, even if they are made, say, by a famous Russian company. Everything is bad when you come across an opus of some anonymous literate who decided to try himself in a new field, beware of such fonts. Here are examples of clones (the original is indicated in brackets): FreeSet (Frutiger), Pragmatica and Helios (Helvetica). Please note that letter shapes may vary. There are a large number of clones in Paratype's Font Synonyms Directory.
14. How to test a font?
Designers, don't get used to seeing fonts only through photoshop windows, image editors use their own methods of text smoothing, and you can be deceived by a beautiful picture. It is much more useful to learn how to test and watch them in browsers. If there is a demo page, be sure to make sure that all sorts of artifacts and spikes do not come out during rendering. There is also a tool like Typecast , where you can check many fonts, and then show the page to the client. For those who choose a new font for an already finished site - the Web Fonts Previewer service is indispensable for you, you can test any font on a live working site, as if you had already implemented it.15. I have a font on my computer, can I use it on the site?
First, a little about theft. I know a lot of designers who have thousands of fonts on their computers whose origin is unknown. As a rule, they simply downloaded from the Internet. But for some reason, no one thinks that creating good fonts takes months, and sometimes years of serious work! But not only because of this you can not use singed, it is not clear where the fonts are taken from, but because you can face serious difficulties at the development stage.
If you want to embed a font that comes with the operating system into your site, you can only do this by rasterizing or using it in images. If you really need to embed, then you will need to buy a separate license, just like regular fonts (both Georgia and Tahoma are available).
16. How to buy a web font?
When you "buy a font" the closest you get to buying software is when you get a license to use it rather than the rights to the program file itself. It turns out that a legally compiled font file is a program. Modification and alteration, if the license does not allow it, is considered a copyright infringement.A convenient way to purchase fonts is through font catalogs (Fonts.com, MyFonts, Ascender, Typekit). You will be able to view, compare and choose one of the available options for use, pay by card. For companies, it will be easiest to contact the studio-producer directly or provide the purchase of fonts to the customer
Or maybe it’s better not to spend money on a font at all? There are many great free fonts out there that are just as good as the paid ones!
17. What are the licenses?
There are different types of font licenses, and with the advent of web fonts, their variety has only increased. In real life, each company sets the rules of the game itself, and a font license may contain features of various others. We will be interested in typicalThe General Commercial License restricts use on a certain number of devices and allows distribution of works created using the font. These can be magazines, newspapers, flyers, business cards, rasterized type images - all together you can call them prints. This license is not suitable for film, television, web and embedding in applications and programs, such rights must be purchased separately.
There are also specific licenses, for example: a license with exclusive rights. In this case, the company buys all the rights from the font designers, and even the author of the font is not entitled to use it anywhere. It is especially surprising when such fonts are on torrents, or when some third-party designers use them.
Free licenses (public domain) - the author of the font allows free distribution, with the condition of specifying his name (Creative Commons) or without it (for example, OFL, GPL, Apache 2.0). This type of license even allows commercial use, except for sales and paid distribution. Examples: PT Sans, Opensans, Droid. Sometimes a font modification (GPL) is allowed, but the modification you create automatically inherits the same license (that is, you can also be forked). Freedom implies that it can be used on any media, incl. and web.
Free for non-commercial use - that is, you can use it in all cases when you do not make money on it. For example, for education, hobbies and community projects. Sometimes, manufacturers allow designers to use it, in the hope that the designer's lucky client will then buy a commercial version of the font.
18. What is the difference between licenses for web fonts?
Web licenses are our favorite and either come as an add-on to the main license or come separately. Regulates a special case - the use of fonts on sites. As a rule, the most important limitation is on the number of page views. For example, 10 thousand per month, 100 thousand or 1 million. That is, the more people visit your site, the more you pay for the license. There are also unlimited options when you pay for a font 1 time, but they are many times more expensive. Probably wondered if someone is monitoring the number of views? Most often not. But do not forget that a huge number of counters monitor the traffic of your site and, having aroused the suspicion of the seller, you can lose your license.And yet, a separate web license does not allow use on regular computers. Sometimes a web license is issued free of charge, that is, along with the purchase of a desktop font, you get the right to use its web version. But this is still a rarity, the vast majority of manufacturers require an additional fee.
After the purchase, you receive special files that you embed into the site (TTF, OTF, WOFF, EOT), and some fonts do not allow you to place these files on the site in an unprotected form, since in theory third parties can get the font files themselves. The third option is that you use a custom font manufacturer's web service, such as Adobe's Typekit, and pay a subscription fee.
19. Where can I get good web fonts?
Catalog of free fonts from GoogleFontsquirrel is a famous web font converter and directory
Myfonts - a huge font store with a convenient payment system
Fonts.com - the main competitor of MyFonts
Typekit - font rental service from Adobe
Typecast - the aforementioned shop with testing service
P.S. another useful resource suggested by ilyaerin , WebFont.ru Functionality over Form: Designing for the Reader
Maria Doreuli. Licensing. To make it clear
Tim Brown. Type rendering on the web
Tim Brown. CSS properties that affect type rendering
Tim Brown. Type rendering: operating systems
Tim Ahrens. A Closer Look At Font Rendering
Tim Ahrens (Typekit). A closer look at TrueType hinting
The Benefits Of OpenType/CFF Over TrueType
Ildar Kinyabulatov, ADV/web-engineering web designer
While working on a Mac or Windows PC platform, you are constantly using fonts. From graphic designers, who have hundreds or even thousands of fonts in their collections, to ordinary users who deal only with the standard set of fonts of the operating system and applications, they all constantly use them when creating documents, reading materials on the Internet and managing user interface. Understanding how the basic font file formats differ will help you use them more widely and take advantage of the full range of typefaces.
TTF files are part of the core Windows TrueType font set. With the advent of recent versions of Mac OS X, this single-platform font format has become commonplace and is now present on both of the world's dominant operating systems. Apple slightly modified the TrueType format, preparing it to replace obsolete raster typefaces with a more flexible standard and successfully introduced them into the new OS.
The TrueType standard provides for the use of a single file for describing a font, which contains all the necessary information for rendering (drawing) a font on a display screen and when printing it. To compare with TrueType, let's say that some legacy typographic fonts, such as PostScript Type 1 (developed by Adobe Systems), have a much more complex and machine-readable design.
The OTF standard stands for OpenType typeface and is based on the latest font building technologies. Like TrueType, OpenType fonts are multi-platform. But, unlike its predecessor, they allow you to put several display styles in one file at once and support character sets in different languages.
Moreover, OpenType fonts can use different typeface styles at the choice of specific applications, changing them depending on the context. This new standard has given designers an excellent opportunity to design typefaces that look like handwriting. Depending on the particular OpenType font, it may be based on curve algorithms taken from TrueType or PostScript Type 1.
The DFONT standard (files with the DFONT extension) stands for Datafork TrueType font. The format of this file was the standard for the system fonts of the Mac OS X operating system. But, along with the release of Mac OS X 10.6 Snow Leopard, Apple replaced this standard with the TTC font collection or TrueType Collection. The DFONT format is supported exclusively under Mac OS X and is doomed to oblivion, since it is no longer destined to become cross-platform.
Other formats
The old bitmap fonts had significant limitations. So, each of them could only use three sizes (heights) in documents and for this you had to resort to a special font management application. These restrictions were quickly dismissed by graphic designers.
PostScript Type 1 fonts overcome this disadvantage and scale well when printed, but the printer must be compatible with this font standard. Adobe Systems, the developer of this standard, subsequently proposed using the Adobe Type Manager application to remove restrictions when printing.
An OTF file is a font file developed jointly by Adobe and Microsoft. This file format includes the appearance of formats such as TrueType as well as PostScript. OpenType fonts can be scaled without losing the original text quality.
The OTF extension is supported on Mac OS operating systems as well as Windows systems. Microsoft platforms began to support OTF files starting from Windows 2000. It is worth noting that this type of file, in addition to its main purpose, can be used as a template file used by OpenOffice to generate formulas. In such a case, the presence of an .otf file is useful in automatically filling tables using formulas. The OTF file extension has a wide range of distribution among users.
Experts believe that this file extension is a so-called container, formed according to TrueType rules and capable of containing PostScript and TrueType data files. An Open Type font that can store new data types that were not present in TrueType formats. Files with the .otf extension can store contours, metrics, and service information.
To open a file that has an OTF extension, like other font files, the Font Viewer from Microsoft is used. MacOS users can open an OTF file thanks to the Apple Font Book suite. A universal utility capable of opening an .otf file in the systems listed above, including those on the Linux platform, is FontForge.
