The .otf file extension is used as an OpenType font file in which this type of font was developed by Adobe and Microsoft. It is a combination of font formats such as TrueType and suffixes. Besides being a font file type, the .otf file extension is also used as a template file, which? You use OpenOffice Spreadsheets to create the formula. These .otf template files are useful because they automatically populate spreadsheets using formulas. This file extension is also used as the OpenTuft Tufting Design file and it refers to the formats used to create scrap designs. These .otf files allow you to weave designs into various textiles. These files also contain yarn, window placement threads, and tuft length information. This .otf format was used by NedGraphics for their design bundles, but was changed because there was a conflict with the .otf file extension used as OpenType fonts. Other applications associated with the .otf file extension are Blu-Ray and OnkoS.
Hello, 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 a basic misunderstanding of what web fonts are. Not everyone has time to Google materials on this topic, so I tried to provide answers to 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 standard ones?
The first thing that comes to mind is that standard fonts are terribly boring, and it’s difficult to do something original with their help. As a rule, most of them bring melancholy and despondency not only to users, but also to web designers. In this case, non-standard fonts are more expressive and, in addition, there are an order of magnitude more of them, so there is plenty to choose from. Moreover, the font is an integral part of the brand, so every company strives to use it more actively, since such a technical opportunity has arisen. And one could completely abandon 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 for many years was adjusted 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. This font looks good, its style is polished, there will be no problems with it either on the printer or on the screen, it exudes good quality. However, when choosing a font, it is not even this that is of much greater importance, but the appropriateness 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 you not to keep in your head a bunch of incomprehensible memorized rules, captured 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 ones - only for headings or indexes. If he doesn’t know this, then he will have to reprint a huge print run, and constant surprises and problems will await him at work. It's surprising why no one makes any demands on web designers.
03. How do browsers render fonts?
Quite often I heard that browsers draw fonts themselves, so they look different everywhere. But in fact, a special graphics subsystem of the OS is engaged in rendering fonts: in Windows this GDI or DirectWrite, and on OS X and iOS - CoreText(and formerly QuickDraw). There are 3 common font rasterization (rendering) mechanisms: two-color (black and white) pixel, monochrome pixel (often called antialiasing or regular anti-aliasing) and subpixel. Subpixel 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, GDI has 3 rendering options: black and white, regular anti-aliasing and subpixel ClearType. The peculiarity of the latter is that smoothing occurs only horizontally, in accordance with the location of the subpixels. This is why we often see terrible jaggedness on the horizontal and diagonal strokes of the font when using it. Fortunately, Microsoft began to slowly improve the mechanism, and GDI was replaced by DirectWrite technology, which did introduce vertical anti-aliasing. Compare:
04. TTF or OTF?
TrueType and PostScript were originally different font formats. TrueType uses quadratic Bezier curves, while PostScript uses cubic curves, which are familiar to designers working in Illustrator and Photoshop. Today, both methods of describing curves are used as part of the same OpenType format, with the only difference being that TrueType files have a TTF extension, and PostScript files have an OTF extension. Each technology 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 rasterization methods for PS and TT. For PS, the browser applied regular monochrome anti-aliasing, and TT was processed with ClearType. So it turns out that TrueType will be preferable for text fonts, and PostScript is better 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 regular 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é they once suggested using a hack with text-shadow . We must not forget about the font size (font-size). Outline shape, stroke contrast, and readability can vary greatly between font sizes. Put down the graphics editor and see how the web font looks in the browser, in combat.
Another way to mitigate the shortcomings of anti-aliasing is through color and contrast management. To reduce the effect of chromatic contouring (when using ClearType, yellow and magenta outlines appear around the edges), you can try to reduce the tonal contrast by making the background color closer to the text color. Do not get carried away too much, remember about users with low vision.
06. Do web fonts need hinting?
Hinting is special instructions that rigidly bind the abstract curves of a font to pixels on the monitor. The vast majority of fonts (including commercial ones) are not hinted, because this is a rather labor-intensive and complex procedure. Hinting is performed differently for TrueType and PostScript. 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 rasterization 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 may jump.
On the one hand, a font with hinting is quite clear, contrasting and uniform, but on the other hand, letter shapes are distorted depending on the size, and the spacing may differ from real ones. Letters are strictly subordinate to pixels.
In Windows OS 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 included in the OS had to be re-hinted and updated.
Unlike Microsoft, Apple takes the opposite approach, so its operating systems use algorithms that allow any font to be displayed more or less efficiently, and hinting is not taken into account at all.
To answer the question: the era of 300 DPI monitors is rapidly approaching, and a huge number of mobile devices already have this resolution, and soon hinting will not be needed at all. But since Windows still remains hint-dependent and focused on low-resolution monitors, try to choose high-quality hinted or standard fonts for text, otherwise the text will be unreadable and difficult to understand.
07. @font-face or Cufon?
No matter how strange 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) seemed to 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, like a printer prints it on a sheet or Photoshop outputs an uneditable JPG. This is permitted by many regular (desktop) font licenses. Some font manufacturers (for example, Adobe) allow the desktop font to be embedded (in programs and on the server), as long as it remains protected and cannot be downloaded. If you are unable to purchase a separate web license, then you can use the appropriate sIFR when the font is embedded using Flash objects. The disadvantage is that it uses Flash, 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 will not work, but in a desperate situation it will do. But it is best to use @font-face, it is both more technologically advanced and more convenient, and in addition, sufficient experience has been accumulated to work with it. It has only one drawback: not all manufacturers allow their fonts to be used on the web.
08. What formats should font files be in?
Today, fonts prepared for implementation (@font-face) on a website should be in several formats: TTF or OTF- a font file that is familiar to us, but loaded from the server while viewing the site;
WOFF- unprotected source archive OTF or TTF is perhaps the most important format that is supported by most popular browsers, and files in WOFF are usually 2–2.5 times lighter than the original ones;
EOT- an archive implemented by TT OpenType, which has protection mechanisms, is needed to support older 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?
No matter what people tell you, you can't simply convert a file and retain 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 “loses weight” during conversion; it is especially unkosher to convert TrueType to PostScript and vice versa.
Additionally, the conversion process almost always violates the non-modification terms of the license. Simply put, this is the same as theft. When you throw files into the converter, rest assured that it will not miss them and will issue a warning, because the file contains the manufacturer's digital signatures and corresponding modification restrictions.
10. How much should web fonts weigh?
The browser must fully download the font files before displaying the page. Perhaps you have seen the “font flash” (or FOUT) effect, when for a short moment, instead of exotic fonts, standard system fonts flash. It’s normal if TTF (OTF) fits into 100 kb, and WOFF (EOT) fits into 50 kb. Always think about whether you need to use custom fonts at all, even if you use it in 1 short title, you will still have to download the entire font file.
The more perfectionistic the design, the smaller the font files can weigh, and try to choose simple shapes. In this sense, the ideal form is an open geometric grotesque with low contrast. To speed up font loading, it can also be useful to include it in the style file using data:uri. 11. How many font styles can be used on the web?
From a designer's point of view, a lot of typefaces are cool. And indeed, for the header - Bold, and over there, for the inset - ExtraLight, we’ll generally push 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 typeface costs separate money, and it is likely that the customer will ask you to either find a font synonym, or reduce the number of styles, just so as not to buy all the expensive typeface. It is normal to use a maximum of 2-3 styles of the same or different typefaces. 12. Is it necessary 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 (note, the Arial Unicode font containing most of the characters from the Unicode table weighs 22 MB). For those who make English-language sites the easiest, they don't need to load additional characters at all, the ones in Basic Latin (or ASCII) are enough. If you use the font only for headings in Russian + inclusions of English, 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's a completely different story if your site is multilingual, in which case, to avoid incorrect display of characters, you need to try to cover all the languages used.
13. Can I use font clones?
It happens that buying the original font is either too expensive or even impossible, then it will be appropriate to choose a font synonym (clone). Of course, you shouldn’t expect amazing quality from them, even if they are made, say, by a famous Russian company. Everything is completely bad when you come across the opus of some anonymous literate person 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 the Paratype font synonyms directory.
14. How to test a font?
Designers, don’t get used to seeing fonts only through Photoshop windows, graphic 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 appear during rendering. There is also a tool called 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 website, the Web Fonts Previewer service is indispensable for you; you can test any font on a live, working website, as if you had already implemented it. 15. I have a font on my computer, can I use it on the website?
First, a little about theft. I know a lot of designers who have thousands of fonts on their computer, the origin of which no one knows. As a rule, they simply downloaded it from the Internet. But for some reason no one thinks that creating good fonts takes months and sometimes years of serious work! But this is not the only reason why you should not use fonts that are scorched and taken from unknown sources, but also because you may encounter serious difficulties at the development stage.
If you want to embed a font that comes with the operating system into your website, you can only do this by rasterizing it 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 on sale).
16. How to buy a web font?
When you "buy a font" the closest thing to buying software is that you receive 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 or alteration unless permitted by the license is considered 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 select one of the available options for use, and pay by card. The easiest way for companies would be to directly contact the production studio or leave 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 that are just as good as the paid ones!
17. What types of licenses are there?
There are different types of font licenses, and with the advent of web fonts, the 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 typical ones. A regular commercial license limits use on a certain number of devices and allows distribution of works created using the font. These can be magazines, newspapers, leaflets, business cards, rasterized images of font - all together we 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 rights from the type designers, and even the author of the font does not have the right 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 or without the condition of indicating his name (Creative Commons) (for example, OFL, GPL, Apache 2.0). This type of license even allows commercial use, other than sales and paid distribution. Examples: PT Sans, Opensans, Droid. Sometimes modification of a font is allowed (GPL), but the modification you create automatically inherits the same license (meaning you can be forked too). Freedom assumes 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 where you do not make money from it. For example, for training, hobbies and community projects. Sometimes, manufacturers allow use for designers, in the hope that the designer's lucky client will then buy a commercial version of the font.
18. How are licenses different for web fonts?
Web licenses are our favorite, they are either in addition to the main license or are given separately. Regulates a special case - the use of fonts on websites. 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 the font once, but they are many times more expensive. You probably wondered, does anyone keep track of the number of views? Most often not. But do not forget that a huge number of counters monitor your site traffic and, if you arouse the seller’s suspicion, you may 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, at the same time as purchasing a desktop font, you get the right to use its web version. But this is still rare; 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 these files to be placed on the site in an unprotected form, since theoretically third parties could obtain the font files themselves. The third option is that you use a special web service of a font manufacturer, such as Typekit, owned by Adobe, and pay a subscription fee.
19. Where can I get good web fonts?
Catalog of free fonts from Google
Fontsquirrel is a famous web font converter and directory
Myfonts - a huge font store with a convenient payment system
Fonts.com is the main competitor of MyFonts
Typekit - a service for renting fonts from Adobe
Typecast - the aforementioned store with testing service
P.S. another useful resource recommended 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, web designer ADV/web-engineering
Share with friends or save for yourself:
Loading...
