All about web fonts. The line is too long. What formats should font files be in?

There are a million things to think about when creating the perfect web design: creating graphics, choosing colors, choosing the right imagery... But there is one thing that people like to underestimate when creating their website and choosing fonts. Don't make the same mistake. Choice correct font can have a huge impact on the final look of your web design. This may seem like a small thing, but it can take your web design to the next level. Let me show you how. In this article, I'll tell you everything you need to know when choosing fonts for your web design.

by Deni K for Civil Pour

A brand guide defines how the elements that make up your brand are used. Your brand guidelines are an important tool for communicating a consistent branding strategy. This is a set of rules that will help you and your designer create single identification while connecting multiple elements of your brand, by defining your colors, your logo and of course, your typography.

So, if you already have a brand guide to work with, make sure you stick to it when creating your web design. If you don't have one yet, here's how to create a brand guide.

The importance of consistency

You might be tempted to experiment with new fonts when creating your web design, but don't! Every time someone receives your business card or visits your website, they get a small glimpse into your brand DNA and your company's overall design. Together, these views of your brand must create a complete and coherent picture, otherwise your brand may look like a jumbled mess with no recognition value. That's why it's important to be consistent across all your digital platforms and printed materials when it comes to color, style, and—you guessed it—fonts.

Match your existing brand fonts

by FuturisticBug for Nordkern

The brand will include the fonts and families, font sizes, and font hierarchy that your brand uses, so you can immediately integrate them into your web design. But if your brand uses an unknown font, tools like the "WhatTheFont" feature on Myfonts.com can help you determine the name of the font you're dealing with.

However, if your brand uses its own typography, your designer will try to find a similar web font to use in your web design. Because of different web browsers your typical typography may end up being less crisp and clean than you'd like, so many web designers will use Google fonts to closely match your brand's typography.

No fonts or directions yet
—

Haven't chosen your signature fonts yet? Here are some important things to think about when choosing a font for your web design:

Find out your brand personality

Your font choice should represent your brand personality so that your design appears accurate. Are you a traditional business, or are you minimalist and modern, or fun and quirky? Would you describe your company as retro, classic, edgy, funky? Check out this article for more questions to ask yourself about your unique brand personality.

Once you answer these basic questions, you'll have an understanding of your brand's personality and the look you should strive for in your web design. Based on this identity, you can now choose the right fonts for your brand.

Choose fonts that match your brand

Say you have a vintage clothing store with a cool modern vibe. You could mix an old-school font, a great font for headings, with a classic sans-serif font for body text. For example, if you're using a nice old font similar to Arvo for headings, then it's a good idea to use text text sans serif, such as Open Sans, which is known for its readability. This will give you a balanced look that is timeless and modern, and works great with your retro cool branding.

Or let's say you are law firm or a luxury cosmetics brand and want your typography to convey trust and professionalism with a touch of class. You can be classy yet classic and elegant with serifs like Frank Ruhl Libre or Playfair Display to really show off potential clients that you are all about reliability and first class service.

by gotza

No matter what font you ultimately choose to match yours, make sure you use a web safe font that is easy to use and compatible with most browsers. “What does web safe mean,” you ask? Read on to find out.

What are safe web fonts?
—

Using a web safe font means that your visitors don't have to have a specific font installed on their computer to see it correctly. Back in the day, 10 years ago or more, there were about 13 font families and web designers were expected to use only those few fonts that would show up on most computer systems. Currently the gold standard is Google Fonts, which renders perfectly in any web browser.

Keep in mind that many brands use custom fonts or fonts that are not web based. In this case, developers can use software to convert the font into a "web safe font". But sometimes even that isn't a guarantee that it will look good on screen, especially if you want your typography to look super sharp. This is why designers often face the challenge of finding similar (almost identical) web safe fonts that are free and display well in all browsers.

What types of fonts are suitable for the web and why is it important?
—

via Google Fonts.

When searching for the perfect web safe font, your best bet is view Google library Fonts and in most cases you will find what you need. With over 800 free, licensed fonts, this is one of the best places to find web safe fonts. If you include these fonts in your font stacks, almost everyone will see your page correctly. Since this font library is stacked in a web service, your visitors from all over the world will see the exact same page with the same font. Additionally, it ensures that your online presence remains consistent across all browsers and devices.

How to Combine Different Fonts in Web Design
—

When you're building a website, chances are you'll need more than one font. There are three basic rules you want to use when combining fonts:

The first fundamental rule for combining fonts is never use more than three fonts in one design. Rule number two is to make sure the fonts you choose complement each other. And the third rule you want to follow is to always define hierarchy among them.

by MarkoSimić.

Here's what it looks like in action: First, determine the main font that is the most prominent and should be used for headings. Advice. You can match this font to your logo style. Generally, you want your main font to be attractive. I really like heavy fonts like Rubic Black or a slightly rounded one like Nunito for headings, but which fonts you choose depends entirely on your business and branding. Next, select a secondary font to use for the body text. This one should be easy to read when used for longer text passages even on smaller screens, so we might choose a font like Noto Sans in addition to our basic font options. Lastly, your third font should be an accent font. This font can be used on buttons, CTAs, or to highlight certain parts of the text to grab the attention of your visitors. serrat will work well with our primary and secondary elections.

How different types of fonts affect your web design
—

As the great Vincent van Gogh said, “Great things are not done on impulse, but a series of small things come together,” so choose your fonts wisely. A clever combination of fonts can have a powerful impact on your web design.

by LoudFrog for Coffee And Chokes BJJ

See how the designer used a unique brush script font in the example above to highlight the martial arts theme and create a cultural connection. The rest of the body text and call to action uses a clean, easy to read font that combines different sizes, as well as all the caps that frame and base the main font and makes it stand out. The result is a balanced design that draws attention to the right places.

See how the two web designs above target two completely different looks? Satoshi Nation Financial Services Design Achieves Clean and Modern appearance with a slightly angular sans serif font, and the design for luxury coffee brand Wallenford uses an elegant serif font to highlight its high-end brand style. In both cases, the choice of fonts blends seamlessly with the rest of the design and perfectly conveys what the brands stand for. This is the power of typography.

Say it in font

—

Choosing the right font for your website depends entirely on the goal you want to achieve. When you think about style and design, you need to set an agenda and figure out how you want to be presented to the world. And fonts are the perfect tool for this. Do you want to be cool, serious or traditional? Choose an elegant serif font. Do you want to look modern and minimalist? Choose a clean sans serif font. Go something in between? Combine fonts to achieve almost any style you want. Simply put, your choice of fonts says a lot about your business, so choose wisely.

• Translation

Now is the time to level up your design with web fonts

Without exaggeration, online typography is currently experiencing an exciting period in its life. Recent technological leaps have brought us one step closer to typographic nirvana on the internet. The step everyone has been waiting for for so long.

The freedom to use web fonts outside the safe list on all leading operating systems is now possible by by and large, thanks to three major, almost simultaneous technological factors: widespread support for the @font-face rule in browsers; the emergence of such “font repositories” as Typekit and Fontdeck; creation of a new font format - an archived WOFF font file.

* Few of these fonts are for Cyrillic, so this selection is more suitable for “outsourcers”. Let's hope that at least some of these and other fonts for Slavic languages in Cyrillic. Add tags

Web design is a complex field that provokes constant controversy. Some will say that to attract attention your landing page simply needs modern design, including latest trends. Others believe that a functioning landing page, where visitors get what they came for, is much more important.

Both options are correct, but a lot depends on your field of activity and the goals you have for your landing page. How to determine which option is right for you? How to make sure that your designer knows his business and won’t make mistakes?

This post contains seven “deadly sins” of web design that you should avoid in your landing page. Study these principles carefully, and use them to check whether your design is truly optimized to achieve your business goals.

1. The font is too small

Many people make the first mistake of making the text on the resource too small. In the early days of the Internet, most websites used 12 pixel fonts, which was a standard that almost everyone followed. However, over time it became clear that such small print was difficult to read. In addition, it turned out that you need to attract and interest the visitor almost immediately.

According to market research, the average attention span of Internet users dropped to 8 seconds in 2013, which is a second less than that of a goldfish. The same study reported that website visitors only read 28% of words on average.

A 2013 study found that the average attention span had dropped to 8 seconds, 1 second less than that of a goldfish. Is it possible?

To immediately attract the attention of visitors, you need to:

• Create strong, interesting headlines.
• It’s interesting to write so that you want to read more than 28% of the content.
• Use a fairly large font for headings.
• Make sure that the main text is written in an easy-to-read font.

For all of the above points, the following is relevant: font size has increased over the past few years. Now the minimum standard is 14px, but many sites use at least 18px font, especially if we're talking about about large texts.

By the way, from now on you no longer need to open Google service Fonts to get third-party fonts on your landing pages, because now fonts are connected directly from . We have added all the fonts from the Google Fonts collection to a visual gallery, and all you need to do is select the appropriate font, click on the connect button and use it for new or existing texts on the landing page:

Below we provide some examples excellent web design with perfectly sized fonts.

Conscience

Heading: 50px
Subtitle: 36 pixels
Body text: 21 pixels

Header: 80px
Subtitle: 24 pixels
Body text: 15 pixels

Header: 60px
Subheadings: 35 px
Body text: 18 pixels

Don’t forget: the content on the landing page is written to be read. This is not why you paid for the services of a copywriter or pore over the texts yourself to make them ineffective due to the small font. Make sure you select a readable size.

It should also be remembered that different types fonts vary in size - a 16 pixel Arial may be smaller than a 16 pixel version of another font. Choose the font size and type that suits your site.

The font of the footer text can be small, but if you want visitors to read what is written there, choose a font of at least 16 pixels.

Advice from the professionals: To choose the right font type and size, download the WhatFont app. This is a plugin for Google Chrome, which determines the font parameters by clicking on it. Open sites whose designs you like and collect information.

2. Sliders

It's hard to understand why so many landing pages still use moving sliders. It works? Is your conversion growing? Is information conveyed better?

In most cases the answer will be no.

Peep Laja, founder of one of the most famous blogs on ConversionXL, quotes experts in the field of Internet marketing in the article “Don’t Use Automatic Image Carousels or Sliders”:

“We have repeatedly tested dynamic blocks and are convinced that this ineffective way content positioning"— Chris Howard, CEO of WiderFunnel.

“Dynamic banners are absolutely evil and should be removed immediately.”— Tim Ash, CEO SiteTuners

Laya also mentions two studies that have proven the ineffectiveness of dynamic sliders.

The first study was conducted by usability guru Jakob Nielsen. He conducted a survey of Siemens website visitors about a special offer about washing machines on home page. The message about the discounts was written in a 98-pixel font, but, unfortunately, visitors did not notice it - the offer was lost in the switching blocks of the slider.

This experiment confirms the opinion of reputable marketers that sliders reduce the audience’s receptivity to the offer and content. People got used to sidebar banners and stopped paying attention to them - the same principle works for dynamic sliders.

The second study was conducted at the University of Notre Dame (Indiana, USA). Researchers have found that about 1% of website visitors click on the slider, with 84% of clicks coming from the first slide.

Why place a slider that will take up valuable real estate on the home page and only get a 1% CTR? Why annoy visitors with flashing images that are difficult to follow? Perhaps it is worth offering them one option if the majority will already choose the first image of the slider?

So why, despite being so ineffective, are sliders so popular?

Most likely because they look advanced, technologically advanced and do not pose any difficulties for developers. This is how it works - the client says: “I want this thing with scrolling pictures on the main page. Yes, a dynamic slider,” and web designers comply with the request, because the slider really looks good and is extremely easy to make.

But it is the owner of the landing page/site who must be aware of whether this slider will be effective and whether it is really The best way conveying information. Pip Laya, Chris Howard, Tim Ash and many other famous Internet marketers no longer believe this.

The solution to the problem should not be to copy the layout you like in detail, including the slider on the main page, but to try to independently answer the question: “How should your offer be presented?”

A striking example of this approach is the website of the tutoring agency Genesis Tutoring - or rather, the process of its development. The company's founders initially advertised the service by distributing flyers in schools, then they decided to create their own website and turned to a designer. They wanted to install a slider on the home page with a copy of the advertising flyer. The designer managed to convince customers to abandon the slider and install just a copy of the flyer on the main page, adding contacts and a CTA button for feedback. This is what happened.

A laconic page with an excellent design and high conversion I got by quite well without the slider. Excellent work, isn't it?

To achieve similar results, follow these rules:

• Don't place a slider just because everyone else is doing it too (even if your designer recommends it).
• Instead of copying competitors' pages, find own version presenting information most suitable for your purposes.
• Choose one, the most attractive offer, and place it above the fold line. You can promote the rest by adding special button at the top or in separate blocks lower on the page - one offer should catch your eye, the rest will be done by the landing page.
• This next point can be hung in a frame on the wall: Determine the main goal landing page. All CTA buttons should follow the “one page, one goal” principle.

3. Low-contrast fonts

Another big mistake is using low-contrast fonts.

Low contrast is light text on a light background or dark text on a dark background. There may be some combinations that work well for print design, but on the Internet it's always a bad idea.

The content of the landing page should be as readable as possible. According to research, with age, the cornea of ​​the eye transmits less and less light: at 40 years old, half as much light passes through it as at 20 years old; by 60 years old, the amount of light entering the eye is reduced by another 20%. And now p Add to this people with more serious vision problems.

Given these numbers, do you really want to make your content more difficult to consume, especially after spending so much time and money trying to attract visitors?

Always use contrasting fonts: light on a dark background and vice versa. Occasionally there is a need to use a colored font other than black or white. Sometimes designers use a light gray font on a white background and a light blue font on a dark blue background. For what? Is it really easier to read this way? Or have external effects become more important than the content of the text? Books are printed in black ink on white paper for one simple reason - it’s easier to read. Landing pages and websites must follow this rule.

Below are examples of landing pages with low text contrast:

Winnie the Pooh

Cargomart

This is an example of contrasting text, but it is located on top of the image, which often creates interference for perception.

Remember: all texts must be contrasting with the background on which they are placed. If the text seems hard to read or doesn't have enough contrast, don't waste time asking your designer to fix it. Your landing page - not a platform for color exercises, it is a sales and conversion tool.

Additional tip: It’s not just text contrast that’s important. Also be careful when using reverse fonts. Reverse font is white text on a black (or colored) background instead of black on white.

David Ogilvy, the greatest marketer of our time, argued that advertising text Reverse font should never be used. Colin Wheeldon, editor of Australia's largest automotive resource, decided to test this theory. The results he obtained are amazing:

• black text on white background: 70% good, 19% fair, 11% bad
• white text on black background: 0% good, 12% fair, 88% bad
• white text on purple background: 2% good, 16% fair, 82% bad
• white text on blue background: 0% good, 4% fair, 96% bad

Surprisingly, the results of black text on a white background are almost the opposite of the reverse combination!

4. Wrong line height

Line height is usually overlooked. Most designers carefully choose the font, size, and set the line height arbitrarily.

But this parameter has an unexpectedly strong impact on the design and perception of the landing page. Line heights that are too small can create the impression of cobbled-together text and ruin the entire design.

The good news is that an experienced web designer will have plenty of past experience and will be able to select the appropriate line height by eye.

The bad news is that a mid-level designer may miss the problem and choose the wrong solution.

Chris Pearson, designer of the DIYThemes project, took this problem seriously and created a calculator that calculates line height using the golden ratio principle. Just enter the font size and line width, and the calculator will calculate the ideal height.

You may not realize why you like a certain design (or font). Talented designers find the proportions of the “golden ratio” themselves; Chris Pearson’s calculator will help others.

5. The line is too long

Another possible mistake is too large width text.

Is there an optimal line length?

Too short - they strain the eyes, which quickly tires.

The recent popularity of responsive design further exacerbates this problem. If maximum length Lines are not limited, your blog post or any other type of text, depending on the size of the device screen, can take on very strange shapes.

To solve this problem, the Baymard Institute recommends setting the maximum text width to 516 pixels, which, using an 18 pixel font, is 65 characters per line. These most comfortable text parameters for reading online are shown in the picture below

Again, not all designers pay attention to this parameter, but since you are already aware that too long lines of text can scare off the reader, make sure that the designer and programmer create optimal conditions for the perception of the text.

Next on the list of web design sins is neglecting color accents.

Experienced digital marketers know that to attract attention, a call to action button must be bright. Whether you're encouraging Buy or Try for Free, these buttons need to be eye-catching to get visitors to click and take the expected action.

It seems simple. But often designers do not use a bright accent on the most basic CTA buttons, instead choosing one of the main colors of the landing page.

• The button should be bright enough to attract attention.
• The button must be an additional (complementary) color to color scheme landing page - this is necessary so that the colors do not conflict. Complementary colors are located on color wheel opposite each other. If you place them side by side, they seem to look brighter.
• The button should stand out from the background of the site. A blue button on a blue background is a bad idea.
• The button should be used for the most important calls to action. Don't use this element too often on the page.

In the image below, the call to action button is orange. It stands out against a white background since orange is no longer used in website design (except small detail logo, but it is small enough to attract attention).

Hello, Habr!

Mountains of articles have already been written describing different sides 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 standard fonts They 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. 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 has been adapting to 96 DPI screens and Georgia verdans for many years, 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% of fine-tuning and polishing, hinting and testing for 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, much higher value It is not even this that matters, 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 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, fonts are rendered by a special graphics subsystem OS: on Windows it is 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 LCD feature 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 started The mechanism was gradually improved, and GDI was replaced by DirectWrite technology, where vertical anti-aliasing appeared. Compare:

04. TTF or OTF?

TrueType and PostScript - these were originally different formats fonts. 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 for headings and large inscriptions would be better suited PostScript.

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, it's safer OTF format, 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.

Answering the question: the era of 300 DPI monitors is rapidly approaching, and great amount mobile devices already have this resolution, and soon hinting will not be needed at all. But since Windows still remains hinting-dependent and focused on monitors with low resolution, for text fonts, try to choose well-designed or standard ones, 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 in this case the script will be cumbersome and text selection will not work, but in hopeless situation 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- an unprotected OTF or TTF source archive is perhaps the most important format, which 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 security mechanisms, is needed to support older browsers Internet Explorer(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 just convert the file and save it. original quality 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 digital signatures manufacturer and corresponding prohibitions on modification.

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 perfectionism there is in design, the smaller 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 with mobile device. And don’t forget that each style 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 from their full set 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 + splashes of English, then you will be enough ASCII sets(Basic Latin) and 64 characters of the Russian alphabet, 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 editor use their own methods of smoothing texts, 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 new font for a ready-made 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 the creation good fonts- these are 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 nowhere, but because you may encounter serious difficulties at the development stage.

If you want to embed the font that comes with the operating system, 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 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 a violation of copyright.

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 wonderful free fonts, which are in no way inferior to 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 the condition of indicating 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 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 happy client the designer 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 special case- 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, for example Typekit, company-owned 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 is a huge font store with convenient system payment
Fonts.com - main competitor MyFonts
Typekit - a service for renting fonts from Adobe
Typecast - the aforementioned store with testing service
P.S. Another one useful resource, who advised 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