Russian fonts for web design. Safe fonts. Now is the time to improve the design of your robots using web fonts

Text is the main way of conveying information in the World and, as a result, one of the most important components of a website. It seems natural and logical in such a situation that it is the duty of any authority on the site to ensure that its texts are not too informative and tedious, but also look good. For this purpose, modern web design and layout technologies provide a great arsenal of tools. Today we will talk about the most important of them - the font and the features of its design on websites.

Font- Not just a decorative element on the site. In addition to the utilitarian function of visualization of text, wine plays an aesthetic and psychological role, affecting all aspects of interaction with the client. A bold font that resembles an aesthetically pleasing site is easy and pleasant to read, while an unclear or poorly chosen font turns reading into testing and deprives the reader of unpleasant feelings. A few examples of the selection of original font solutions in the design of websites of non-profit organizations:

Now, if the positive effect of using beautiful fonts on the site becomes obvious to us, the reason for nutrition is to blame. “So how do you use non-standard fonts on your website?”. The key to finding this out lies in the rational operating principle of computer fonts.

Computer font- a file in a single format that describes a set of letters and characters that is used by a program or operating system to display characters on the screen. This, to paraphrase Wikipedia, has a number of key aspects that are important to our respect when working with fonts on a website.

  1. Song file format. The file is in a font so that it can be modified by the program in which we are working, which may be in a “synchronous program” format. There is a pattern in computer font formats, which automatically gives rise to the problem of inconsistency. It is important to pay attention to the choice of font, as you are not influenced by the program in which the text is viewed.
  2. Vikorist OS program. The font file must be physically accessible to the system so that it can be used to display the text. In the minds of the Internet, this is a non-trivial mystery. Even though the site is viewed on many different computers, we can’t fault the fact that they don’t have the necessary fonts.
  3. Description of the set of letters and characters. We must ensure that the font contains glyphs that describe all the characters in the text that are displayed. For example, if we are trying to convert Russian text into a different font, such as Cyrillic glyphs, we can’t find anything.
  4. Setting for displaying symbols. It is necessary to have a way to inform the program, which involves reviewing the text, about those parts that may be displayed in different fonts.

Now, since we are clear about the problems associated with the use of fonts on websites, let's see how the current web layout copes with them.

Search for a font for your website

The most important thing we need to do is to know and select the appropriate font and go to:

  • it supports the required language (Zokrema, Russian)
  • The license for the font allows it to be used on the website

From which we can be helped by various online libraries, both commercial and non-commercial fonts, and help them find, review and test.

  • MyFonts is the largest online font library, providing a manual search system with detailed information about each font's origin and the ability to select or select options.
  • Google Webfonts- a library of freely available fonts created by Google, all fonts from this collection can be freely available on any sites, and Google also provides a simple interface for their installation.
  • Adobe Edge Web Fonts is a similar service from Adobe that provides a large catalog of widely available fonts, including search and testing, and the possibility of embedding them into a website.
  • free.type.org.ua - a collection of freely-colored fonts with a touch of Cyrillic.

Yakshcho in the named font Yogo Kirilichna is not obviously embedded (COLLECTION, Museo Sans Cyrillic), then the Scho is repaired in Piditrimsi Movie, the Simal Submiss, the Scho Masive, Abo, abundant, Some online libraries provide this capability; alternatively, you can use font testing services, for example:

  • Typetester - testing and leveling of fonts, by looking at the test text with parameters that need to be configured, such as point size, row spacing, etc.
  • Wordmark - a simple service for testing fonts installed on a computer, through the display of a test phrase, as in the input

The font can be used on the site only if the license agreement (EULA) obtained from the designer or agency allows it. Many font vendors (including Cyrillic, for example, ParaType) provide such a license. As an alternative to purchasing a web license for a font from a local agency, there are Web Font Embedding Services. They also have a library of fonts to give their clients the opportunity to customize fonts and purchase them from their websites for a monthly fee (review of procurement services). The most popular among them:

However, all these services, due to their orientation, are primarily oriented towards the overseas (which uses the Latin alphabet) market, and the number of fonts that support the Cyrillic alphabet is small. The subscription price for these services is high and may be prohibitive for a specific non-commercial project. A worthy alternative to this is the use of freely expanded fonts, for example from Google Webfonts or Adobe Edge Web Fonts, which have already been invented and are also being published by several designers and agencies (a report on the problem of licensing fonts for the web is published in the article A List Apart).

Font formats for the web

There are a number of desktop and web font formats that perform differently in different systems and are suitable for different tasks. Hundreds of our websites use the latest formats:

TTF- TrueType is a format of computer fonts developed by Apple since the 1980s, and is currently being used by Apple and Microsoft in their operating systems. Font files can be expanded .ttf.

OTF- OpenType is a file format for fonts developed jointly by Microsoft and Adobe for use on their operating systems. OpenType has more processing power than TrueType and supports a larger character set in a smaller file size. Cross-platform OpenType is achieved by including both Windows and Mac OS versions of the font in one file. Font files can be expanded .ttf or else otf.

EOT- Embedded OpenType - a compact font format that is distributed in OpenType web sites, developed by Microsoft. Files of such fonts can be expanded .eot. The Embedded OpenType format is proprietary and is supported by the Internet Explorer browser.

WOFF- Web Open Font Format - a format of a compressed OpenType or TrueType font, including a container image that contains original fonts in the OpenType or TrueType format. In this case, the output fonts are compressed for ease of transmission and are accompanied by a number of data that can add insight into the font.

SVG- Scalable Vector Graphics - a language for layout of scaled vector graphics, which can be used to describe and serve the font.

Websites are viewed in different browsers, which also operate on different operating systems (Windows, Mac OS, Linux, Android, iOS, etc.). With a custom font, we can ensure its appearance in most (ideally all) situations. Since these options are not entirely cross-platform, they will have to be adjusted to achieve the same goal. It is recommended that you choose a combination of formats for insertion on the site: TTF, WOFF, EOT, SVG. Whether a TTF or OTF font, you can convert it, vikoryst, for example, the Fontsquirrel generator - a service that allows you to import a font and convert it into the required formats. In addition, it generates CSS code that can be used to further install fonts on the site.

If you use the Google library or Adobe Edge, you don’t have to worry about formats. The software service provided by companies provides support for the font in most types.

Adding fonts to the website

The very ability to create fonts for content on the site (similar to how we create images or videos) is ensured by my CSS styles, which are responsible for the design of all elements on the page, including text. In the early stages of the development of this technology, it was possible to indicate which font is responsible for the distortion of the appearance of the same or other elements. However, it was stated that this font was to blame for installations on the computer of the koristuvach. As an option for “insurance” against the availability of a specific font, it was possible to set a number of fonts in order of “priority”, so that the system would consistently select searches and select the first found option in the list. This approach gave rise to the concept safe for web fonts(web save fonts) - a set of fonts that are widely installed on computers of computer users, such as, for example, included in the OS installation package or simply benefit from their great popularity.

Statistics on the “width” of such fonts can be obtained using the additional service cssfontstack.com, which also helps to construct a sequence of “safety” fonts for each of them.

Apparently, all the capabilities of web tools of that period were concentrated in the dozens of fonts that were included in the “safe” set. With the development of CSS, it became possible to “implement” fonts on the site, then. place the font file together with another site on the server and use it in the template code in order to be attracted by the browser to look at the site and thus become available for use on the user’s computer. By using the additional @font-face directive, it is supported by more current browsers and is featured on more sites. Also, if you choose, do not forget to indicate the “safety” font options that may be available in cases where the main font turns out to be unavailable for any reason. Otje, The font is being created, modified on the official server.

  1. We know the required font for the TTF or OTF format, we verify that it supports the language we need.
  2. Wikorist's Fontsquirrel generator for converting fonts from a variety of web formats.

1. It is necessary for the generator to create a @font-face-package, which includes font files (they must be placed on the server, together with other elements of the template) and prepare @font-face rules, which must be placed on the very beginning of the style file in your own my site, having re-converted , so that the directions to the font files are specified correctly.

@font-face ( font-family: 'myfont'; src: url('myfont-webfont.eot'); src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), url('myfont-webfont.woff') format('woff'), url('myfont-webfont.ttf') format('truetype'), url('myfont-webfont.svg#myfont') format('svg '); font-weight: normal; font-style: normal;

2. It is indicated in styles that some elements are subject to the use of a font in addition to regular CSS syntax.

It is possible to experience a disintegrating effect. We can also forgive ourselves a little Vikorist and third-party service for importing fonts, for example Google Webfonts.

  1. We select a font from the library and check it to support the language we need.
  2. In the “Swedish Victorial” mode, we select the image option we need and the character sets we need to support. The more options we want to use, the more important the font file is, and the more important it will be for us to be interested. So don’t choose a greedy one.
  3. We copy the code that is generated by the system and paste it into the site template code between the tags before other messages to .css files.
  4. It is clear in styles that some elements are to blame for the confusion of using the font in addition to the regular CSS syntax, as well as in the first place.

The price to pay for the ability to use non-standard fonts is a loss of productivity - the site will become more crowded, and it will require more computing resources. Therefore, it is not recommended to use a lot of non-standard fonts on one page, and also to pack them into the main text, surrounded by adjacent design elements, such as headings or navigation elements (a report on the problem of productivity with viciously used fonts You can read it on Habré).

At the end of our discussion about the practical use of web fonts on sites - there are a number of sites that give web fonts a key role

  • Translation

Now is the time to improve the design of your robots using web fonts

Without interruption, the merezheva drukarna is going through a spluttering period of her life. Recent advances in technology have brought us one step closer to the virtual world of the Internet. Croc, what kind of mustache have they been checking for so long?

The freedom to use web fonts safely on all wired operating systems has become possible due to the great influence of three major, perhaps immediate, technological factors: the widespread adoption of @font-face rules in browsers; the appearance of such “font monstrosities” 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”. We hope that some of them will appear soon, and not less fonts for Slovenian languages ​​in Cyrillic. Add tags

When starting to layout a layout, it is necessary to carefully specify in CSS the fonts that will be used on the page. Most often, in different fonts, the designer types not only the main text of the page, but also different headings, logos, and monograms:

A good designer, as well as a good layout designer, knows that the browser can use the same fonts installed on the designer’s computer to display the page. Then fonts can be intelligently divided into two categories:

  1. Fonts that can be easily displayed by most developers.
  2. Fonts that are available to a large group of artists every day.

If a designer has used fonts of another category for design, for example, a logo or large static headings, you can safely use the technique. The lack of stagnation of this method is inflexibility. If you change the text, you will have to rework the image and change the CSS (for example, if the size of the new image does not match the old one).

We can say that the danger of stagnation lies in the reliability of the change to the text. Therefore, for example, it is impossible to avoid the dirty text of a story using non-standard fonts! A competent designer can’t fix it like that. And if the designer got caught in the greenery, the garniy typesetting designer simply wants to correct his mistake - in the layout, replace this font as similar to the standard one as possible.

How can I distinguish fonts of the first group from another? It’s clear that you can’t hide the typing of fonts installed directly on your computer! Let's get along.

Standard fonts

Standard fonts are a set of fonts that are installed simultaneously with the operating system. The parts of the operating system are different, and their font set is different. A list of standard fonts for different versions of Windows can be viewed, for example, at the article Standard Windows fonts, and a list of standard fonts for Mac OS on the page Fonts that come with Mac OS. Because there are Unix/Linux operating systems, they have a single set of fonts. Many Linux users use the DejaVu font set, especially on Ubuntu, which is installed behind the scenes. Based on the statistics of http://www.codestyle.org, many Unix/Linux users also have URW, Free and other font sets installed. Based on these statistics, more than 60% of Unix/Linux users use the Core fonts for the Web font set on their computers, which until 2002 was officially available for free downloading on the Microsoft website.

In order for the page to be displayed the way the designer intended, regardless of the operating system, it is possible in CSS to specify a number of fonts that will be rendered through a coma.

This power specifies a priority list of font family names and/or generic family names. Based on the CSS2 specification, there are two types of font family names:

  1. Name of font family for selection. For example, "Times new Roman", "Arial" and others. The names of font families, which will help to bridge the gaps, are guilty of falling into the paws. Since the pads are daily, any space characters before and after the font name are ignored, and any sequence of spaces in the middle of the font name is converted into a single space.
  2. Family (background) family. The specification has the following generic families:
    • serif - fonts with serifs on ends;
    • sans-serif - sans-serif font;
    • cursive - font for italic images;
    • fantasy – decorative fonts;
    • monospace - monospace font (with letters of the same width).
    The names of ancestral families are key words and are not obligatory to lie down at the foot.

Thus, for the design, a standard font from OS Windows is taken, a similar one is selected for Mac OS and Unix/Linux, the original homeland of the fonts is specified, and it’s ready.

But it's not that simple. Let's dig into the report.

Searching for Web-safe fonts

On the Internet, there has historically been such a concept as “secure” Web fonts. A safe font can be called a font that is standard in all operating systems. Remnants of such a camp of justice will be lost to death, then There are no absolutely safe fonts!

Some of the fonts can be called safe with some security.

The basis for the designation of “safe” fonts were the fonts of the most popular Windows operating system, which are also used in other operating systems. An example of such a resource is the Core fonts for the Web font package, which, as you might guess, was downloaded by countless Unix/Linux users based on the statistics.

This package includes the following fonts: Andale Mono, Arial Black, Arial, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, Webdings. All the smells support the Cyrillic alphabet, which is important for RuNet.

The set of fonts included with the standard installation of Mac OS X (this OS has the most expansion among the standard Mac OS systems) includes all fonts in the Core fonts for the Web set.

Thus, based on Windows fonts that are used in other operating systems, a new list of so-called “safe” Web fonts has been formed:

  • Arial
  • Arial Black
  • Comic Sans MS
  • Courier New
  • Georgia
  • Impact
  • Times New Roman
  • Trebuchet MS
  • Verdana

The Webdings font is misleading for typing icons, so you cannot use it for content. Andale Mono does not require widespread use, since it is not suitable for everyday reading of text from the screen and is not available for all Windows users.

All these fonts are available on all Windows, Mac OS X and, most importantly, Unix/Linux systems (those that have installed the Core fonts for the Web package).

But what about it? I would like for the designer’s idea to be influenced by more than one of the best people!

Read about this in another part of the publication.

The first part of this section is dedicated to learning about CSS fonts. On this page you will learn how to include fonts before CSS, what web fonts are and how to work with them, what font formats exist, how Google Fonts is used. Let's take a look at the easy way to connect a CSS font first:

P (font-family: Verdana; )

This small bit of code means that up to all tags

The Verdana font has been stiffened. The power of font-family sets which font or font will be used. The correct display style in the user's browser depends on the type of task font installed on your computer. If you have a daily Verdana font on your computer, your browser will display the font and install the settings.

Nowadays, designers had to specify a number of spare fonts for extra use, since the user’s computer would not be the main one. It is possible that you want to format the text in the Verdana font, and as a backup install the Trebuchet MS, Geneva or any other sans-serif font. Sign up in this manner:

P (font-family: Verdana, "Trebuchet MS", Geneva, sans-serif;)

Before processing this code, the browser should immediately check the availability of the Verdana font on the user’s computer. As a present font, instead of tags

Appear in this font. If the font is daily, the browser will check whether the font is available in the list – Trebuchet MS. Since this font is of the same type, the presence of the original font – Geneva is verified. If the user's computer does not have Geneva, the browser will select another available sans-serif font and display the text in it.

Restore respect: In the code we wrote down the name of the Trebuchet MS font in the pads. It is necessary to use the name of the font in double or single legs if there are clearings in it.

You can read about those fonts with serifs (serif) and without (sans-serif) on the Wikipedia page.

Web font

Hovering a better way to select fonts has a great disadvantage - you are limited by the number of fonts. You will be satisfied with only these options, as, most likely, most computers are installed.

How can you increase the choice of fonts to make the page design individual and add originality? Web fonts come to help. Read the section below and you will find out how to deal with them.

Also, in order to display the required font in the browser, we need this font to be installed on the computer. It's easy to take action. This method of connecting fonts before CSS opens up a wide range of possibilities for designers. Let’s remember about a spoonful of honey in a barrel of honey: first of all, the browser does not support the same format for the font (which will lead to the font not being displayed), and in another way, since the file with the font contains great value, you can help interesting side.

Support of formats

How to deal with the problem of incompatibility with the file format? Take a look at the table showing the most popular font formats and which browsers support them:

Note: You can find up-to-date information about supporting font formats on the website caniuse.com. In order to search, you need to enter a name for the format (for example, ttf).

If you are targeting modern browsers, you will need to use the TTF font format - the most wide and most popular. Finally, if you need multiple formats for one font, you can quickly use special online converters from one format to another, and then connect all the files through it. In this way, the browser can select the format of the font in which it operates.

We include a web font using @font-face

For example, you place your unique font under the name MyUniqueFont in TTF format and you want the main text of the web page to appear in that font. The first thing you need to do is copy the font file to the folder where all other files on the site are located. To avoid creating a mess, you can create a folder specifically for fonts, calling it, for example, fonts.

@font-face ( font-family: MyUniqueFont; src: url("fonts/MyUniqueFont.ttf"); )

The power of font-family plays a different role in this case: we also assign a name to the font, so that we can then use that name when writing the style:

P (font-family: MyUniqueFont; )

The other row indicates the path to the file font. In our application, the MyUniqueFont.ttf file is located in the fonts folder. Your URLs may differ.

Google Fonts

Google makes it easy to connect any font to the Google Fonts collection. All you need to do to start using a font that suits you is to set up the font on Google, then copy the special message for that font and add it to your web document.

Note: The entire collection of Google fonts is available on the website Google Fonts. On the page you can quickly use various filters to search for fonts by category, product, alphabet.

The procedure for connecting to the Google font is described below. To get an idea of ​​what's going on, select a font from the Google Fonts page and open it by clicking the Quick-use button.

Step 1: select image

On the page of the selected font, you will see the seating option, as well as the speedometer icon, which means nothing less than the fluidity of the font. The more styles you choose for the font, the more time it will take you to style it. It is therefore recommended to select only those image options that you plan to use.

Croc 2: select alphabet

Further on the page you can select a character set: Latin, Cyrillic, etc. Depending on the font, not all alphabet options may be available. Similar to the previous point, just check the box opposite the alphabet you need.

Krok 3: add the code to the site

The first method is to ensure that the HTML code is sent to the Google server, and the font is imported. You need to copy the finished piece of code and place it between the tags in your HTML document. Butt:

...

Another way is to connect the font to the additional @import directive. The finished code can be found in another tab, point 3, on the page of the selected Google font. This must be added to the base of your style sheet (otherwise the file will not be imported). The code looks something like this:

@import url(http://fonts.googleapis.com/css?family=Roboto&subset=latin,cyrillic);

The peculiarity of the first method lies in the fact that you have to add notes to the font at the title of each page, where you plan to edit it. This is easy to do on sites with a small number of pages, but is problematic for large resources. Another manual way is that the code can be placed on the top of the existing style sheet, and then all the pages to which this table is connected will select the necessary font, which is required by an additional @import directive.


Croc 4: create a style

After the leading lines, you can begin to stiffen the font. How to write this CSS rule, you already wrote:

P (font-family: "Roboto", sans-serif; )

Since in the first step you selected a number of image options (for example, you added the bold font option Bold 700), then in the third step the code will change a little:

@import url(http://fonts.googleapis.com/css?family=Roboto:700,400&subset=latin,cyrillic);

To then give the font a bold image, write the CSS style like this:

P (font-family: "Roboto", sans-serif; font-weight: 700; )

Note: in Google Fonts, to indicate the density of a font, only mental units ranging from 100 to 900 are used. Thus, a normal image (behind the lines) is equivalent to 400 (normal), and a standard bold image is equivalent to 700 (bold).

The main advantages of the Google Fonts service are:

  • ease of use (you can use the service as a beginner, and all the necessary code is generated automatically - there is no need to copy it);
  • availability of fonts (there is no need to pay for them);
  • transfer of all font formats (this means that the browser can assign the same font format that it is working with).

Among the shortcomings of the service is the diversity of fonts, especially Cyrillic. Before speaking, there are other similar services on the Internet, for example, TypeKit (paid).

Pouches

Today we have a number of options available for connecting original and non-standard fonts to web pages. Each of these methods has its own pros and cons. Which option is better than vikorystvovat, you need to decide for yourself. Most often it is necessary to remain dependent on the situation, and in different situations there may be different approaches. At this stage, you just need to know how to change fonts in CSS.

Application © 2024 Mobile and computer gadgets