- Translation
Now is the time to elevate your designs with web fonts.
It's no exaggeration to say that web typography is going through an exciting period of its life right now. Recent technological leaps have brought us one step closer to typographic nirvana on the web. The step everyone has been waiting for.The freedom to use web fonts outside the safe list on all major operating systems is made possible largely by three major, near-simultaneous technological factors: widespread support for the @font-face rule in browsers; the emergence of such "font storages" as Typekit and Fontdeck; creating a new font format - an archived WOFF font file.
* Few of these fonts are available for Cyrillic, so this selection is more suitable for "outsourcers". Let's hope that at least some of these and not only fonts for Slavic languages in Cyrillic will appear soon. Add tags
The font used to display text affects its perception. So in this article, we've rounded up the best free fonts for web designers of 2016 to help your printed materials and websites look professional.
Top 10 Cyrillic Fonts
High-quality Cyrillic fonts are not easy to find, but still there are many more of them now than before. The list below contains both common serif and sans serifs, as well as ultra-elegant fonts for special occasions.
5. Oswald- a classic slightly compressed sans-serif font that will look good on any device:
6. Jura is an elegant slanted serif typeface with round shapes, best suited for subheadings or body copy:
7. Exo 2 is a universal technological font with several styles, so it will be enough to decorate most text elements on the page:
8. pompiere suitable for you if you are looking for an elegant, but not too serious font:
9. Aclonica is another vibrant typeface for catchy headlines and printed promotional items:
10. Museo is a sans-serif typeface that looks good in small and large sizes, which means it is suitable for displaying menu items as well as for the body text of the page. Available free of charge in the Museo Sans 500 and Museo Sans variants:
In this article, we have provided fonts for professional graphic designers that can be used to design pages or printed materials. A large number of fonts available is often confusing, because at the same time they also need to be combined correctly. Here are the rules for combining fonts to help you with this task:
- Do not use fonts that are too contrasting - it may turn out that each of them will draw attention to itself, distracting the reader from the content.
- But do not choose too similar - they will merge and create a feeling of incompleteness.
- Create a visual hierarchy - remember what print newspapers usually look like: they clearly show the structure of the headlines.
- Do not forget about the context - after all, the design is created not just like that, but in accordance with the needs of a particular company.
- Do not use more than three different fonts on one page.
For 2018, the number of high-quality free fonts allows designers to fully work on tasks without any hesitation in choosing. Therefore, we wrote about the best free fonts.
The studio designs websites and applications for Android and iOS, and we will be happy to help your business attract users with a unique and recognizable design.
- Translation
Now is the time to elevate your designs with web fonts.
It's no exaggeration to say that web typography is going through an exciting period of its life right now. Recent technological leaps have brought us one step closer to typographic nirvana on the web. The step everyone has been waiting for.The freedom to use web fonts outside the safe list on all major operating systems is made possible largely by three major, near-simultaneous technological factors: widespread support for the @font-face rule in browsers; the emergence of such "font storages" as Typekit and Fontdeck; creating a new font format - an archived WOFF font file.
* Few of these fonts are available for Cyrillic, so this selection is more suitable for "outsourcers". Let's hope that at least some of these and not only fonts for Slavic languages in Cyrillic will appear soon. Add tags
The first part of the chapter is devoted to getting to know CSS fonts. On this page you will learn how to include fonts in CSS, what web fonts are and how to work with them, what font formats are available, how to use Google Fonts. First, let's look at a simple example of including a CSS font:
P ( font-family: Verdana; )
This little piece of code means that all tags
Verdana font applied. The font-family property sets which font or font-family will be used. The correct display of this style in the user's browser depends on whether the specified font is installed on the user's computer. In our case, if the user's computer does not have the Verdana font, the browser will display the default font.
At one time, designers had to additionally specify several spare fonts in case the main one was missing on the user's computer. Let's say you want to style your text in Verdana, and use Trebuchet MS, Geneva, and any sans-serif font as fallbacks. It is written like this:
P ( font-family: Verdana, "Trebuchet MS", Geneva, sans-serif; )
When processing this code, the browser will first check for the presence of the Verdana font on the user's computer. If the font is present, the contents of the tags
Displayed in this font. If the font is missing, the browser will check for the next font in the list, Trebuchet MS. If this font is also missing, the presence of the next font, Geneva, will be checked. If the user's computer does not also have Geneva, the browser will select another available sans-serif font and display the text in it.
Note: in the code, we wrote the Trebuchet MS font name in quotes. It is necessary to take the font name in double or single quotes when it contains spaces.
You can read about what a font with serifs (serif) and without (sans-serif) is on the Wikipedia page.
Web fonts
The above way of using fonts has a huge disadvantage - you are limited in the number of fonts. You will have to be content with only those options that are most likely installed on most computers.
How can you increase the choice of fonts to make the page design individual, add originality? Web fonts come to the rescue. Read the chapter further and you will learn how to work with them.
So, in order to display the desired font in the user's browser, we need this font to be downloaded to his computer. It's pretty easy to do this. This method of connecting fonts to CSS opens up really wide possibilities for designers. But it is worth mentioning a fly in the ointment: firstly, not every browser supports a certain font format (which will lead to the fact that the font is not displayed), and secondly, if the font file is large, it can slow down page loading.
Format Support
How to deal with file format mismatch problem? Let's take a look at the table showing the most popular font formats and find out which browsers support them:
Note: You can always find up-to-date information on font format support at caniuse.com. You must enter the name of the format in the search bar (for example, ttf).
If you are targeting modern browsers, it will be enough for you to use the TTF font format - the most common and used one. In the case when you need to have several formats of the same font, you can use special online converters from one format to another, and then connect all the files one by one. Thus the browser will be able to choose the font format with which it works.
Including a web font using @font-face
Let's say you have your own unique font called MyUniqueFont in TTF format and you want the body text of your web page to be displayed in that font. The first thing to do is copy the font file to the folder where all the other site files are located. In order not to create a mess, you can create a separate folder specifically for fonts, naming it, for example, fonts .
@font-face ( font-family: MyUniqueFont; src: url("fonts/MyUniqueFont.ttf"); )
The font-family property in this case plays a different role: with it, we assign a name to the font, so that we can later use this name when writing a style:
P ( font-family: MyUniqueFont; )
The second line specifies the path to the font file. In our example, the MyUniqueFont.ttf file is located in the fonts folder. Your URL may be different.
Google Fonts
Google makes it easy to include any font from the Google Fonts collection. All you need to do to start using the font you like is to specify a few settings on the font page on Google, then copy the special link to this font and add it to your web document.
Note: the entire collection of fonts from Google is available on the site Google Fonts. On the page, you can use various filters to search for fonts by category, thickness, alphabet.
Below we will describe each step of connecting a font from Google. To understand what we are talking about, select any font from the Google Fonts page and open it by clicking on the Quick-use button.
Step 1: choose a style
First of all, on the page of the selected font, options for its style will be displayed, as well as a speedometer icon, which means nothing more than the font loading speed. The more font styles you choose, the longer it will take to load. Therefore, it is recommended to select only those styles that you plan to use.
Step 2: choose an alphabet
Further on the page, it is possible to select a character set: Latin, Cyrillic, etc. Depending on the font, not all variants of the alphabet may be available in it. Similar to the previous paragraph, it is better to check the box only in front of the alphabet that you need.
Step 3: add code to the site
The first method involves adding a link to the Google server in the HTML code, from where the font is downloaded. You need to copy the already finished piece of code and place it between the tags
in your HTML document. Example:...
The second way is to include the font using the @import directive. The finished code is in the second tab of point 3 on the page of the selected Google font. It must be added to the very top of your stylesheet (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 is that you will need to add a link to the font in the header of each page where you plan to use it. This is easy to implement on sites with a small number of pages, but problematic for large resources. The second method is convenient in that the code can be placed at the very beginning of an external style sheet, and then all pages to which this table is connected will receive the necessary font, which will be loaded using the @import directive.
Step 4: Style
After completing the previous steps, you can start applying the font. You have already seen how such a CSS rule is written:
P ( font-family: "Roboto", sans-serif; )
If in the first step you chose several font options (for example, you added Bold 700 bold font), then in the third step the code will change a bit:
@import url(http://fonts.googleapis.com/css?family=Roboto:700,400&subset=latin,cyrillic);
To then make the font bold, write the CSS style like this:
P ( font-family: "Roboto", sans-serif; font-weight: 700; )
Note: in Google Fonts, only standard units from 100 to 900 are used to indicate the weight of a font. For example, normal (default) is equivalent to 400 (normal), and standard bold is equivalent to 700 (bold).
The main advantages of the Google Fonts service are:
- ease of use (even a beginner can deal with the service, and all the necessary code is generated automatically - all that remains is to copy it);
- availability of fonts (no need to pay for them);
- all used font formats are provided (this means that each browser will be able to load exactly the font format with which it works).
Among the shortcomings of the service is not a very large variety of fonts, especially Cyrillic ones. By the way, there are other similar services on the Internet, for example, TypeKit (paid).
Results
Today, we have several options for connecting original and non-standard fonts to web pages. Each of these methods has its pros and cons. Which option is better to use, you need to determine for yourself. This often depends on the situation, and different approaches may be useful in different cases. At this point, you just need to know how to use fonts in CSS.
Starting to typeset the layout, it is necessary, in particular, to specify in CSS the fonts used on the page. Often, the designer uses different fonts to type not only the main text of the page, but also various headings, logos, and monograms:
A good designer, like a good layout designer, knows that the browser can use only those fonts that are installed on the user's computer to display the page. That is, fonts can be roughly divided into two categories:
- Fonts that will be displayed without problems for the vast majority of users.
- Fonts that a sufficiently large group of users do not have.
If the designer has used category 2 fonts to create, for example, a logo or large static headings, you can not hesitate to use the . The disadvantage of using this technique is inflexibility. In case of changes in the text, you will have to redo the image and change the CSS (for example, if the dimensions of the new image do not match the old one).
We can say that the danger of using the technique directly depends on the probability of changing the text. Therefore, for example, the general text of the page cannot be made with non-standard fonts! A good designer would never do that. And if a designer gets green, a good layout designer is simply obliged to correct his mistake - in the layout, replace this font with the most similar standard font.
But how to distinguish the fonts of the first group from the second? It is clear that you cannot rely on a set of fonts installed directly on your computer! Let's figure it out.
Standard fonts
Standard fonts are a set of fonts installed with the operating system. Since operating systems are different, they also have a different set of fonts. A list of standard fonts for different versions of Windows can be found, for example, in the article Standard Windows fonts, and a list of standard Mac OS fonts on the page Fonts supplied with Mac OS. As for Unix/Linux operating systems, they do not have a single set of fonts. Many Linux users use the DejaVu font set, in particular on Ubuntu they are installed by default. According to http://www.codestyle.org statistics, many Unix/Linux users also have the URW, Free and other font sets installed. According to the same statistics, more than 60% of Unix/Linux users have on their computer fonts from the Core fonts for the Web set, which until 2002 was officially available for free download on the Microsoft website.
In order for the page to be displayed as the designer intended, in any operating system, it is possible to set several fonts in the CSS property, separated by commas.
This property specifies a priority list of font family names and/or generic family names. According to the CSS2 specification, there are two types of font family names:
- The name of the font family of choice. For example "Times new Roman", "Arial" and others. Font family names containing spaces must be enclosed in quotation marks. If there are no quotes, any space characters before and after the font name are ignored, and any sequence of spaces inside the font name is converted to a single space.
- Generic (common) family. The specification defines the following generic families:
- serif - fonts with serifs at the ends;
- sans-serif - sans-serif fonts;
- cursive - italic fonts;
- fantasy — decorative fonts;
- monospace - monospace font (with letters of the same width).
Thus, a standard font from OS Windows is taken for design, a similar one for Mac OS and Unix / Linux is selected for it, a common font family is set and you're done.
But not everything is so simple. Let's dig in more detail.
In Search of Web-Safe Fonts
On the Internet, there has historically been such a thing as "safe" Web fonts. A safe font is a font that is standard across all operating systems. Since such a state of affairs can only be dreamed of, then Absolutely safe fonts do not exist!
Some fonts can be called safe with some reservations.
The basis for the definition of "safe" fonts was the fonts of the most common Windows operating system, which are also used in other operating systems. An example of this use is the already mentioned Core fonts for the Web font package, which, according to statistics, has been downloaded by many Unix/Linux users.
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 of them support the Cyrillic alphabet, which is important for Runet.
The set of fonts included in the standard delivery of Mac OS X (this OS is the most common among Mac OS users) includes all fonts from the Core fonts for the Web set.
Thus, based on the Windows fonts used in other operating systems, the following list of so-called "safe" Web fonts was formed:
- Arial
- Arial Black
- Comic Sans MS
- Courier New
- Georgia
- Impact
- Times New Roman
- Trebuchet MS
- Verdana
The Webdings font contains a set of icons and therefore cannot be used for content. Andale Mono is not widely used because it is not suitable for everyday screen reading and not all Windows users have it.
Every Windows user, Mac OS X user, and the vast majority of Unix/Linux users (i.e. those who have installed the Core fonts for the Web package) have all these fonts.
But what about the rest? After all, I want the designer’s idea to be seen by as many users as possible!
Read about it in the second part of the publication.
